レイアウト

モーダル

レスポンシブ

サブカルチャーの
ロック魂は終わるのか？

当時の若者の生き方を支配したロック。
ロックじゃない生き方なんて、
カッコ悪すぎる。

2020年1月21日

モバイルの縦長レイアウトに慣れてくると、PCの一段組が間延びした感じに見えてきた。PC向けの段落を二段組みにした。二段組みにすると、一行に収まる文字数はモバイルの縦長に収まる文字数とほぼ同様になる。

モバイルLandscapeには全体に2columnを与える

モバイルの全体のレイアウトは本文の収まる一段組みの隣に関連情報をレイアウトしているので2column2columnで構成する。最近のモバイルはやけに縦長だ。これを横にすると一段組みの場合はとても芸がないように思えるレイアウトだ。

アクセントを与えるには、このページのようなグリッドレイアウトが効くグリッドレイアウトが効く。

特に縦長のレイアウトに効く特に縦長のレイアウトに効く。縦書きを好きな位置にレイアウトしたり、メリハリの利いたレイアウトの演出が可能だ。勿論、段組みこそグリッドレイアウトの出番であることは言うまでもない。

グリッドレイアウトを使うと、レスポンシブの各レイアウトの余白・段組みを簡単にコントロールすることができる。

段組みを組むならグリッドレイアウトだ。レスポンシブデザインにも大きく貢献するものだ。

「PCでは全体レイアウトを70％対30％でコンテンツの横方向を分配し、次にメインの70％の部分を二段組みにする。」といった処理が簡単に作れてしまうのがグリッドレイアウトだ。

だが、後付けでグリッドレイアウトを差し込むとなると、実に非効率的な作業が待っている。

暫く足し算でレイアウトを構成していると、大枠の考え方を変えなければならなくなる日がくる。成り行きで<p>や<h1>に直接に余白をリスタイルしてしまいがちな場面が多かったので、その部分は全部訂正になる。

構造を変えなければならない日が来た。

グリッドレイアウトを追加したとき、本当に追加だけをしてしまった。全ての余白の設定はそのままだったので、これをグリッドコンテンツの親に付け替えることが必要だった。

ひとつ変えれば、その影響は連鎖する。非常に時間を費やす作業になるので自責の念に駆られるが、この変革は早いタイミングで乗り換えなければならない。

2カラムを作る方法にGrid Layoutを使った。2カラムの縦方向のモバイル表示は余裕であるが、テキストの長さは短めになる。

3カラムを作る方法にGrid Layoutを使った。モバイル表示は3カラムまでレイアウトが可能だろう。

「column-count:」を使ってコマ割りを表示した例。※とても上手くいったお気に入りのひとつ。

Swiperを段落に差し込んでみる。スクリーンからはみ出したスライダーは特にモバイルで有効。

PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。

Grid Layoutを使って2カラムレイアウトを差し込んでみた。

Grid Layoutで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた。

レスポンシブ・モーダルの適切なサイズとは？

2020年1月13日

以前のモバイルのモーダルサイズ

改善したモバイルのモーダルサイズ

これまで制作してきたモーダルはモバイルのLandscapeを考慮したものではなかった。

それ故、前回「オーバーレイ・エフェクトとレスポンシブ・モーダル」というものを作った。ここでの成果は小さなモーダルを作ることができたことだ。だが、PC向けでは以前のように大きく表示したい欲求不満が残った。

そこで、今回はPC向けとモバイル向けの二種類の大小のモーダルを用意してPC用とモバイル用で別々のモーダルをスイッチさせて表示しようと考えた。

実現方法は、PC向けとモバイル向けのモーダルのリンク元画像一式を併記して「display:noneとdisplay:block」を使って表示と非表示をレスポンシブで使い分けることだ。

つまり、PCで見るときはPC用のリンク付き画像だけを表示してモバイル用は非表示になる。

モバイルで見るときはPC用のリンク付き画像は非表示になり、モバイル用のリンク付き画像が表示されるという具合である。タップすると、指定されたモーダルを表示する。

本文中のテキストからモーダルを開く場合も同様である。テキストが段落からズレないようにするためには、表示させる場合は「display: inline」を使う。

イメージのみを開きたい場合がある。不要なものは一切排除して(特に画面が狭いモバイルを配慮して)、ボタンまでも排除したものを以下の「イメージのみ開く(1)(2)」に作ってみた。イメージの右上にFont Awesome のを表示させてピンチアウトができることを表示した。(2020年2月4日加筆)

イメージのみ開く(1)

イメージのみ開く(2)

Motion photo：鳥

天を掴む手と地を探る手

Wormhole(ワームホール)

Motion photo：光

モーダルウィンドウはズームを可能にする

幣サイトではslick.jsを使っているが、これを使っているとズームが効かなくなる。このことは本来極めて痛い。

モーダルはイメージを大きく表示したり、説明を付け加えたりして、追加情報を付加することができる。しかし、その本来の目的以外に、モーダル内ではピンチアウトしてズームさせることが可能だ。

アイデア次第でビジネスシーンに使えるビフォーアフターのデザイン。

スクロールするとトップイメージが徐々に拡大表示していく視覚効果抜群のギミック。CDN を使ってみる。

写真の縦と横方向の中央に文字を配置するレイアウトの必修パターン。

PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。

モバイルと単行本のフォントサイズ

2020年1月7日

モバイルと単行本

フォントサイズはどの位が読み易いか？PCでは？モバイルでは？よくネットで見かける問いだ。

フォントサイズを決定するには、以下「文庫本と単行本」のような根拠となる基準値を設定する必要がある。そうしないと、後々サイズに迷うことになる。

幣サイトでは、以前は「vw」の単位でフォントサイズを管理していた。スクリーンの幅に応じてフォントサイズが伸縮するものだ。だが、知見が足りなかったことから変更することになった。

文庫本と単行本の話をする。フォントサイズが一番気になるのは本を読むという昔からの馴染みの深い行為である。

その昔文庫本の文字サイズは7.5ポイントだったが、今や単行本と同じサイズの9.25ポイントであるそうだ(新潮文庫の場合)。

モバイルに限って考えてみる。モバイルでは最小のスクリーンサイズであるiPhone SE(320×568) を文庫本と見立てる。最大のスクリーンサイズのiPhone XS Max / XR(414×896) は単行本に見立てることができる。

つまり異なる画面サイズのモバイルのフォントサイズを全て統一して、且つ実際の文庫本や単行本のサイズにも近付ければベストだ、というのが現在の筆者の判断である。

PCとモバイルではピクセル表示が異なるのでPCとモバイルではブレークポイントで分けて各々のフォントサイズ設定が必要である。

iPhone SE を読み易さの基準値にしてモバイルのフォントサイズを確定できればと思う。

実機と単行本を重ねて比較して、暫定的に iPhone SE のフォントサイズを「17.7px」に設定した。

モバイル以外の大画面のPCでは、<body>を「max-width」で上限の幅を限定しているため、現在は16pxで固定している。しかし、近い将来「max-width」を取っ払い、フォントサイズの単位に「vw」が再登場してくるかもしれない。

幣サイトではブレークポイントの境界になる基準のひとつがフォントサイズ。ふたつ目がポートレートとランドゥスケイプだ。何を基準にするかで迷走することになるのがレスポンシブレイアウトだ。

レスポンシブの何処を境界としてbreakpoint(ブレークポイント)を設定するかは、もはや哲学である。

実に様々な論理的思考が存在するのだが、幣サイトではふたつ目のブレークポイントの境界は、以下のようなレスポンシブレイアウトを構築してきて久しい。

モバイルのPortrait(1)、モバイルのLandscape(2)、PCとTabletを一緒にしたPortrait(3)、PCとTabletのLandscape(4)以上の4種類だ。

この4種類に各々の適正なレイアウトを与えなければならない。

スクリーンの幅と高さにより、適正なモーダルのサイズを宛がうための種類が大と小の二種類。全体レイアウトが三段組みか二段組みか一段組みかで分けられる種類が三種類。それと上記のフォントサイズが二種類。コンテンツの表示サイズなど、以上の組み合わせを振り分けて4種類にしたものが暫く定着している。

しかしながら、随分と長い時間を要して、モバイルのLandscapeでのレイアウトを改善できたのはつい最近である。目が慣れてくるという感覚が必要である。

モバイルではPortraitが優先され、Landscapeを考慮しないサイトが多い。Landscapeをしっかりサポートするのは大変手間がかかることだ。制作者の実力を比較するには丁度良いポイントになるだろう。

モバイル Landscape

モバイル Portrait

iPad Portrait & Landscape

vwとportraitとlandscapeを使ってメディアクエリのブレークポイントを簡略化する。

異なる形式のメディアクエリで15種類のブレークポイント」を設定。ブレークポイントの順番を検証する。

テキストアニメーションを使って「メディアクエリ再考のススメ」のテクニックを紹介。