第9章 人間は、部品ではなく画面全体を見る
一枚のカードだけを見ると、大きな見出しと鮮やかなボタンは分かりやすく見えます。ところが、同じカードを六枚並べると、すべてが「ここを見て」と主張し始めます。
Web サイトを作るときは、ヘッダー、カード、ボタンのような部品を一つずつ整えます。しかし、実際に見る人は完成したページ全体を見ます。部品同士の大きさ、余白、並び方が組み合わさり、最初に見つかる場所や読み進め方が変わります。
この章では、単に情報を減らすのではなく、ページの目的に合わせて強さと並びを整える方法を見ていきます。
9.1 一枚ではよくても、六枚では強すぎる
最初の図は、文化祭の演目カード一枚です。大きな見出しと青いボタンがあり、カードの中では役割が分かりやすく見えます。
しかし、このカードはページの中で繰り返して使われます。
青いボタンが六つ並ぶと、ページ上部の「文化祭へ申し込む」も、その中の一つに見えてしまいます。カードを直すときは、一枚だけでなく、実際に使う数と場所へ戻して見ます。
すべてのボタンを弱くすればよいわけでもありません。カードの詳細リンクは見つけられる強さを保ち、ページ全体の申込ボタンには、それよりはっきりした差を作ります。部品ごとの正しさではなく、役割同士の関係を整えます。
Web ページは、ポスターのような一枚の紙でもありません。画面幅、文字の大きさ、文章量によって、一度に見える範囲が変わります。最初の画面に何があり、スクロールすると何が現れるかまでをページ全体として考えます。
9.2 大きさの差が、読む順序を作る
次の三枚には、「文化祭」「開催日」「会場」という同じ情報があります。文字の大きさだけを変えています。
一定の倍率は、文字サイズの候補を作るには便利です。しかし、1.25 倍や黄金比を使えば、読む順序が自動で正しくなるわけではありません。
図 9-2C では、数学的にきれいな並びより情報の役割を優先しました。予定を探すページなら、開催日の方を強くする選択もあります。何を最初に伝えたいかを決め、それに合う差を作ります。
読む順序は大きさだけでも決まりません。太さ、色、位置、前後の余白も使えます。すべてを大きくして競わせるのではなく、必要な差だけを選びます。
9.3 情報が多くても、並びがそろえば比べやすい
情報が多い画面を見て、すぐに「減らした方がよい」とは決められません。予定表では、複数の時刻と会場を同時に比べられることが役立ちます。
次の二枚には、四つの催しについて、時刻、催し名、会場という同じ十二個の情報があります。
「17 時 30 分の催し」を探すとき、最初の画面では時刻の列だけを下へ追えます。二枚目では、カードごとに時刻の場所を探し直します。違いは情報の数ではなく、比較する位置がそろっているかです。
反対に、一画面にボタンが一つしかなくても、「続ける」のように押した結果が分からない名前なら迷います。情報を減らすことと、分かりやすくすることは同じではありません。目的に必要な情報を残し、まとまりと比較する場所を整えます。
9.4 グリッドの線より、情報の関係を優先する
グリッドは、そろえる位置と間隔をページ内で共有するための道具です。しかし、線にきれいにそろえただけで、情報の関係まで伝わるとは限りません。
図 9-8A もグリッドの線にはそろっています。しかし、日時と申込欄が離れているため、どの申込欄がどの日時に対応するのか弱くなっています。図 9-8B では、同じ列を使いながら関係するものを近づけました。
グリッドは目的ではありません。長い名前、翻訳された文章、文字の拡大、画面幅の変化へ対応しながら、内容の関係を保つために使います。
見た目の位置だけを CSS で並べ替えると、HTML の読む順番やキーボードで移動する順番と食い違う場合があります。モバイルで一列にするときも、目で見る順番と読み上げられる順番が大きくずれないようにします。
9.5 画像は、見出しの意味も変える
次の二枚は、どちらも「静かな夜の演奏会」という同じ見出しです。組み合わせる画像だけが異なります。
見出しは一文字も変えていません。それでも受け取り方が変わるのは、画像が文章にない場所や人物の様子を加えるからです。画像を飾りとして置くのではなく、文章と一緒に何を伝えるのかを考えます。
写真の上へ文字を置く場合は、画面幅にも注意します。PC では空いていた場所が、モバイルで写真を切り抜くと人物の顔や明るい部分へ重なることがあります。PC とモバイルは別々の図として確認し、その間の幅でも文字が読めるようにします。
9.6 同じ情報でも、目的が変われば構成は変わる
最後の三枚は、同じ文化祭情報を使った別々のページ案です。良い、普通、悪いという順番ではありません。優先する目的が異なります。
静かな鑑賞を優先した案です。同時に見える操作を減らし、作品を見る時間を作ります。その代わり、複数の日時を短時間で比べる用途には向きません。
日時の探索を優先した案です。情報量は多く見えますが、同じ場所を追って比較できます。大きな写真から雰囲気を感じる時間は少なくなります。
偶然の発見を優先した案です。大きさの変化が興味を引きますが、同じ場所を追って予定を比較する用途には向きません。
構成を決める前に、そのページで最初にしてほしいことを決めます。一つの催しを味わってほしいのか、予定を探してほしいのか、知らない催しを発見してほしいのか。目的が決まれば、何を大きくし、何を同時に見せ、何を次へ送るかを判断できます。
画面の中央へ置けば必ず注目される、右上へ置けば最初に見られる、といった万能の規則はありません。大きな面や強い色は目立ちやすくても、実際に探している情報によって見る場所は変わります。画面の釣り合いと、実際の視線の順序を同じものとして扱わないことが大切です。
次章へ
第1部では、近さ、整列、境界、動き、文字、色、画面全体の構成を見てきました。どれも、人が画面をどのように受け取るかに関わります。
次の第2部では、マウス、タッチ、キーボードなど、画面を操作する方法によって起きる違いを考えます。
参考資料
- W3C, “CSS Grid Layout Module Level 2.” 列や行を使ったレイアウトの仕様です。
- W3C WAI, “Understanding SC 1.4.10: Reflow.” 画面幅や拡大によってレイアウトが変わるときの考え方です。
- Locher et al., “Artists' Use of Compositional Balance for Creating Visual Displays,” 2001. 画面の釣り合いを扱った研究です。Web 画面の万能な配置規則ではありません。
- Müller-Brockmann, Grid Systems in Graphic Design. グラフィックデザインでグリッドを使う考え方を知る資料です。