第5章　人間は、見えない線まで補ってしまう

画面のまとまりが伝わるか不安になると、何でも枠で囲みたくなります。カードを囲み、その中の項目も囲み、さらにページ全体を別の面へ載せる。こうして四角の中に四角が増えていきます。

けれども、人は描かれた線だけを見ているわけではありません。近いもの、端がそろったもの、同じ背景に載ったものから、線のない境界まで思い浮かべます。反対に、入力欄や選択中の項目では、実際の線が大切な手がかりになることもあります。

この章では、枠を減らすことを目標にはしません。見えていない境界を人がどう補うのかを知り、必要な線と、なくても伝わる線を分けます。

5.1 途切れた線から、形を思い浮かべる

図 5-1A では、円の右側が途切れています。それでも、ばらばらの二本の曲線ではなく、一つの円として見えやすいでしょう。

このように、途切れた輪郭をつないで一つの形として見ることを、閉合と呼びます。見えない線が本当に描かれているわけではありません。残った曲線が、円を思い浮かべるのに十分な手がかりになっています。

図 5-1B では、円の右側を長方形が覆っています。こちらは線が途切れただけでなく、手前の長方形の後ろへ円が続いているように見えます。

見えていない物体が、手前の物の後ろにも続いていると考えることを、遮蔽補完と呼びます。難しい名前を覚えるより、「途切れた線をつなぐこと」と「隠れた物の続きを考えること」は別だと分かれば十分です。

どんな線でも一つの形に見えるわけではありません。図 5-1C のように開いた部分が大きいと、どのように閉じるのかが分かりません。

人が形を補うのは、足りないものを自由に想像するからではありません。残っている線の向きや間隔から、続きが自然に決まりそうなときに補いやすくなります。

5.2 枠がなくても、一枚のカードに見える

Web サイトのカードも、外周線だけでまとまっているわけではありません。図 5-2A では、画像、見出し、説明が近くに置かれ、その周囲には広い余白があります。外周線がなくても、一組の情報として読めます。

図 5-2B では、同じ内容の後ろへ薄い背景を加えました。同じ色の面に載ったものが、一つの領域に属して見えます。

図 5-2C では、その面へ外周線も加えました。ページの背景とカードの色が近いときでも、カードが終わる位置をはっきり示せます。

最後の図が、いつも最も良いわけではありません。三枚の違いは、手がかりの強さです。静かな読み物なら余白だけで十分かもしれません。背景の近いカードが密集する画面なら、外周線が役立つかもしれません。

ここで大切なのは、まとまりに見えることと、押せることを混ぜないことです。一枚のカードに見えても、カード全体を押せるとは限りません。「詳しく見る」というリンクだけが操作できる場合もあります。操作できる場所は、言葉、形、マウスを重ねたときの変化、キーボードで選んだときの輪郭などで別に伝えます。

5.3 前にあるものと、後ろにあるもの

申し込みの途中で、小さな確認画面が手前に現れることがあります。元のページが暗くなり、白い確認画面だけが明るく残ると、どちらが今読むべき内容なのか分かりやすくなります。

手前に見える対象を図、その後ろへ続く部分を地と呼ぶことがあります。この画面では、白い確認画面が図、暗くなった元のページが地です。

ただし、見た目を暗くするだけでは足りません。確認画面を開いている間は、後ろのページを誤って押せないようにします。キーボードで操作する場所も確認画面の中に保ち、閉じたら元の場所へ戻します。これは静止画では確認できない、動作の設計です。

HTML の dialog 要素をモーダルとして開くと、ブラウザは後ろのページを操作できない状態にします。それでも、何を確認する画面なのか、戻るにはどこを押すのか、最初にどこが選ばれるのかは制作者が決めます。

5.4 コードの箱を、全部画面へ描かない

HTML では、位置をそろえるための入れ物が何段も重なることがあります。しかし、その入れ物すべてに背景や境界線を付ける必要はありません。

ページ全体、記事の一覧、一枚の記事、記事の中の画像というように、コード上では箱が入れ子になります。これを同じ太さの線で全部描くと、どのまとまりが大きく、どれがその中の一項目なのか分かりにくくなります。

大きなまとまりは広い余白や背景の違いで示し、入力欄には明確な輪郭を使う、といった分担ができます。コード上の入れ物と、読者に見せる境界は同じではありません。画面に必要なのは、コードの構造をすべて見せることではなく、内容と操作の関係を伝えることです。

5.5 消してはいけない境界もある

外周線を減らすと、画面がすっきり見えることがあります。しかし、何を消したのかによっては、操作できる場所や現在の状態まで分からなくなります。

図 5-7A1 では、白い面と青い輪郭が、メールアドレスを入力できる範囲を示しています。

図 5-7A2 では輪郭を消し、入力面を周囲と近い色にしました。ラベルは残っていますが、どこを押せば入力できるのかが弱くなります。

選択肢でも同じことが起きます。図 5-7B1 では、青い面と輪郭によって「会場で受け取る」という行全体が選ばれていると分かります。

図 5-7B2 では丸印だけを残しました。どちらが選ばれているかは分かりますが、文字を含む行全体を押せることは伝わりにくくなります。

境界線を残すかどうかは、「今風に見えるか」だけで決めません。次のどれを伝える線なのかを考えます。

• どこまでが一組の情報か
• どこを押したり入力したりできるか
• どの項目が選ばれているか
• エラーやキーボード操作の位置がどこか

余白や背景だけで十分に伝わる境界なら、線を弱められます。操作や状態を伝える唯一の手がかりなら、むやみに消せません。良い余白は、単に何も置かなかった場所ではなく、関係を伝えるために残した場所です。

次章へ

ここまでは、線、背景、余白という動かない手がかりを見てきました。しかし、画面の一部が動き始めると、そこへ目が向きやすくなります。

次章では、動きが何を伝え、どのような動きが読んでいる人を邪魔するのかを、実際に動く図で説明します。

参考資料

• York University, “Max Wertheimer, Laws of Organization in Perceptual Forms（英訳）.” 閉合を含む、形のまとまり方についての古典的な文章です。
• Johan Wagemans et al., “A Century of Gestalt Psychology in Visual Perception I,” 2012. 閉合、隠れた形の補完、図と地をまとめた研究案内です。
• Stephen E. Palmer, “Common region: A new principle of perceptual grouping,” 1992. 同じ領域に置かれたものがまとまって見える現象を扱います。
• WHATWG, “The dialog element.” HTML の dialog 要素についての仕様です。
• W3C WAI, “Dialog (Modal) Pattern.” キーボードでも使える確認画面を作るときの参考資料です。