第1章　人間は、見たものをそのまま見ていない

Web サイトを開くと、文字、画像、色、線、ボタンなどが目に入ります。しかし、私たちはそれらを、ばらばらの部品として見ているわけではありません。

「上にサイト名がある」「中央の大きな場所が主な案内だ」「この画像と説明は一組だ」と、関係のあるものをまとめながら見ています。

最初に、文化祭サイトのパソコン表示を見ます。

文化祭サイトのPC表示。横長の画面にヘッダー、主題、開催情報、受付変更、催しのカードが並ぶ。 — 図 1-7　パソコンでは、文化祭の主題と舞台の絵を横に並べている

横幅が広いため、「このまちの好きが、舞台になる。」という主題と舞台の絵を左右へ並べられます。その下には、開催日や受付変更のお知らせが続きます。大きな主題、小さな案内、その下の詳しい情報という順に、面積と文字の強さが変わっています。

同じ内容をスマートフォンへ表示すると、並び方が変わります。

文化祭サイトのモバイル表示。ヘッダー、主題、開催情報、受付変更、催しのカードが縦一列に並ぶ。 — 図 1-7B　スマートフォンでは、同じ内容を上から下へ一列に並べ直している

横に並んでいた主題と絵が、上から下へ積み直されています。それでも、主題のあとに説明があり、そのあとに詳しい情報が続く順番は保たれています。

この二枚から分かるのは、画面の見え方が、部品の有無だけでは決まらないことです。同じ文字と画像でも、大きさ、距離、並ぶ方向が変われば、まとまりと読む順番も変わります。

画面は、いくつかの「面」としても見える

文章を読むと、その内容に注意が向きます。そこで一度だけ文字を長方形へ置き換えると、内容から離れて、画面の大きな形を見やすくなります。

文字を長方形へ置き換え、文字量、面積、位置、間隔、明暗だけを観察できる画面。 — 図 1-2　文字を長方形へ置き換えると、情報が集まる場所と空いている場所が見える

この図では、上部の細い帯、その下の大きな主題、中央の広い画像、その下に続く小さな情報の集まりが見えます。文字の意味を読めなくても、情報が多い場所と少ない場所、広く空いた場所は残ります。

これは、人が本当に文字を長方形として見ているという意味ではありません。画面の面積と配置を説明するために、著者が情報を一時的に減らした図です。文字の内容や書体の違いは消えているため、最後には通常の画面へ戻る必要があります。

情報を一種類ずつ減らす

同じ画面でも、何を残すかによって見つけやすい関係が変わります。ここでは、通常の画面、色を外した画面、細部をぼかした画面、形だけを残した画面を一枚ずつ見ます。

最初は通常の画面です。

加工前の画面。色、明暗、輪郭、位置を残す。 — 図 1-3A　通常の画面には、色、文字、画像、輪郭、位置の手がかりがすべてある

通常の画面では、内容も雰囲気も分かります。その一方で、色、写真、文章の意味が同時に入るため、何がまとまりを作っているのかを一度に説明するのは難しくなります。

次は、色を外した画面です。

グレースケールの画面。明るさの差だけを残す。 — 図 1-3B　色を外しても、明るい場所と暗い場所の差は残る

青や赤の違いはなくなりましたが、暗い文字と明るい背景、大きな暗い画像面の差は残っています。つまり、色の種類がなくても、明るさの差だけで見つけられる境界があります。

三枚目は、細部をぼかした画面です。

ぼかした画面。大きな色面と密集だけを残す。 — 図 1-3C　細部をぼかすと、大きな色面と情報が集まる場所が残る

文章は読めなくなりますが、画面の上部、中央の大きな面、下部の小さな面という強弱は残ります。細かい装飾より、大きな面積の差が先に見える図です。

最後は、内容の細部を外し、埋まっている形だけを残した画面です。

輪郭だけにした画面。内容を一つの形へ置き換える。 — 図 1-3D　内容を形へ置き換えると、埋まった場所と周囲の空白が残る

この図では、どこに情報が集まり、どこが広く空いているかを比べられます。ただし、文章の意味も、写真の内容も、色が伝える雰囲気もありません。

四枚は、よい画面を自動的に選ぶ検査ではありません。それぞれ、通常の画面に含まれる情報の一部だけを見やすくしたものです。色を外した図だけ、ぼかした図だけで評価せず、通常の画面と行き来しながら使います。

HTML のまとまりと、見た目のまとまり

Web ページの HTML には、どの要素がどのまとまりに入るかという親子関係があります。しかし、同じ親要素に入っているからといって、画面でも同じ強さの一組に見えるとは限りません。

次の HTML では、見出し、説明、残席、申し込みボタンが同じ section の中にあります。

<section>
  <h2>秋のワークショップ</h2>
  <p>つくる・見る・話すを楽しむ一日です。</p>
  <p>残り3席</p>
  <button>申し込む</button>
</section>

画面では、次のように表示されています。

見出しと説明は別々に見え、残席と申込ボタンは同じ青い背景と近い配置によって一組に見えるワークショップ画面。 — 図 1-4　同じ section の中でも、残席とボタンは背景と距離によって強い一組に見える

四つの要素は HTML 上では同じ親を持っています。しかし画面では、「残り 3 席」と「申し込む」が同じ青い背景に入り、近く並んでいます。そのため、下の二つが、購入前に続けて読む一組として強く見えます。

HTML は、見出しやボタンの意味、文書の順序を伝えるために大切です。CSS による距離、色、囲みは、目で見たまとまりを作ります。どちらか一方だけを正しくすればよいのではなく、意味のまとまりと見た目のまとまりが、必要な関係を同じように伝えているかを考えます。

まとまりを作る手がかりは一つではない

ものを一組に見せる方法は、距離だけではありません。色や囲みも使えます。まず、一種類ずつ見ます。

距離で二組に見えるカード。左の二枚と右の二枚が近い。 — 図 1-6A　カードの間隔を変えると、左の二枚と右の二枚が別の組に見える

中央の間隔だけが広いため、四枚の均等な列ではなく、二枚ずつの組に見えます。この場合は距離がまとまりを作っています。

色で一組に見えるカード。一枚目と三枚目だけが青い。 — 図 1-6B　距離が同じでも、同じ青色のカードは同じ種類に見える

間隔はすべて同じですが、一枚目と三枚目だけが青いため、離れた二枚にも共通点が生まれます。この場合は色が種類を伝えています。

囲みによって一組に見えるカード。左の二枚が同じ背景に入る。 — 図 1-6C　同じ背景で囲むと、その中のカードが一つのまとまりに見える

左の二枚が同じ背景の中にあるため、囲まれていない右のカードとは別の範囲に見えます。

ここまでは、距離、色、囲みがそれぞれ同じ組を分かりやすく示していました。最後の図では、三つが別々の組を示します。

三つの手がかりが競合するカード。距離、色、囲みが異なる組を示す。 — 図 1-6D　距離、色、囲みが別々の組を示すと、どれが一組なのか分かりにくくなる

近いカード、同じ色のカード、同じ背景に入ったカードが一致していません。読者は、一つの手がかりだけを見れば別の組を選ぶことになります。

実際の Web サイトでは、文字の意味や画像の内容、押したあとの動きも加わります。だから「近いものはまとまる」という一つの原則だけで、画面の読み方を決めることはできません。関係してほしい情報へ、距離、色、囲み、言葉が同じ方向を示しているかを見る必要があります。

画面のどこが、どう見えるかを言葉にする

「ごちゃごちゃしている」「すっきりしている」と感じたら、そこで判断を終えず、画面上の場所へ戻ります。

どの情報が近く集まっているか
どこに大きな面があるか
どの端や中心がそろっているか
同じ色や形は、同じ意味を表しているか
囲みの内側と外側で、距離はどう変わるか

このように言葉へ変えると、何を残し、何を直すかを話せます。

次の第2章では、この中から「距離」を取り出します。同じ要素でも、間隔が変わるだけで、どこまでを一組として見るかがどう変わるのかを詳しく見ていきます。

参考

Johan Wagemans ほか, “A Century of Gestalt Psychology in Visual Perception I”, 2012 — 近さや似ている形が、知覚のまとまりへどう関係するかを整理した論文です。
WHATWG, HTML Living Standard — HTML が文書の要素と関係をどのように表すかを確認できる公式仕様です。
W3C Web Accessibility Initiative, Images Tutorial — 図の目的に合った代替テキストを考えるための公式資料です。

Keyboard shortcuts

Webデザインを見る目