レスポンシブに2columnから1columnへ
2019年8月3日
快適に読むことができる一行の文字数は？
モバイルのデザイン・レイアウトについて特化するためにやってきたことがある。それは、デスクトップにも 1column 仕様を一貫して使うことでモバイルの領域を体に浸み込ませることだった。モバイルのポートレイトで 1column 仕様で何文字表示できるのか。それをPCではどの位に設定すれば塩梅が良いのか、という順番だ。必然的に横長スクリーンのPCではモバイルに近づけるためにBODYを絞って、編集対象を縦長にすることから始めた。そしてレスポンシブのブレークポイントをパターン別に分類して各レイアウトのルールが出来上がった。そのルールとはレスポンシブでの各レイアウトが相互に変化し過ぎないことだ。
画像サイズのルールを作る
段落についてはテキストと画像が梱包される。画像サイズについてもルールが必要だ。段落の幅いっぱいのサイズ、テキストに差し込むサイズ、サマリーサイズについてだ。段落についてはBODYサイズを変更、その中身をCSS GridまたはFlexboxでカラム数を指定する方法で解決する。
■ Flexbox
Flexboxでページ全体のレイアウトを構築すると、コンテンツがロードされた後にそのレイアウトが計算されるので表示が遅い。1次元に要素を配置するのはFlexboxが適している。ブラウザのサポート状況は2019年度調べでは「Flexbox 95.72%」。
■ CSS Grid
CSS Grid は「grid-column-gap」を使用してGridアイテムに隙間を作ることができるが、Flexboxには隙間のためのプロパティはない。2次元に要素を配置するのはCSS Gridが適している。ブラウザのサポート状況は2019年度調べでは「CSS Grid 91.11%」。
一行の文字数はレイアウトでコントロールする
テキストについては、フォントは何が最適か、テキストのサイズはどの位が良いのか、レスポンシブ対応のテキストの単位は何が良いのか、太さはどうなのか、テキストの行間はどうなのか、混植(二つ以上の書体が混ざった版を組む)はどうだ？、そういう細々としたことを時間を掛けて試してみる。テキストの一行の文字数は、モバイルのポートレイトでは1columnで20文字前後が読み易い。それをPCに置き換えると、本ページではBODYの幅を少し縮めて、サイドとメインに分割して、メインのコンテンツが収まる領域を2columnで表示すると一行の文字数はほぼ同等となった。言い換えれば2columnにしたことで1行が表示する文字数が同等になったということだ。
従来の1columnと今回の2columnを比べると、読み易さは歴然だ。以上のことはレスポンシブのブレークポイントをどこで設定するのかということと関連性が深いのだが、ひとつひとつ手探りで完成形を見出していかなければならない。
フォントについて、その選択は早まってはならない。サイズを大小変更してバランスを確認する必要がある。小さ目のサイズでは見栄えがするフォントも大き目にすると華奢に見えることがある。サイズ単位でフォントを変更する訳にはいかないので、ここはタイトルでも段落でも万能なフォントを探し出すことが得策だと思う。
AD(広告)がレイアウトを破壊する
先進的なウェブサイトを久しぶりに訪問してみた。従来から参考にしていたものだ。PC表示は問題ないのだが、モバイル表示で確認すると、その混乱ぶりはびっくりする程だ。無意味な空白が大きく空いていたり、スクリーンからはみ出したり、大きくレイアウトが崩れてしまっている。一般的にPCでは動くがモバイルでは動かないなど、未だにPC主眼で作られているものが多いのが残念だ。だからモバイル表示に於いてのみ問題が発生している傾向が多い。改めて今どきのウェブサイト構築は未だ混沌の中にあるということを認識した。
2カラムを作る方法にGrid Layoutを使った。2カラムの縦方向のモバイル表示は余裕であるが、テキストの長さは短めになる。
3カラムを作る方法にGrid Layoutを使った。モバイル表示は3カラムまでレイアウトが可能だろう。
「column-count:」を使ってコマ割りを表示した例。※とても上手くいったお気に入りのひとつ。
Swiperを段落に差し込んでみる。スクリーンからはみ出したスライダーは特にモバイルで有効。
PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。
