第20章

レイアウトはあなたより先に語る

説明する前から、脳はレイアウトを整理している

誰かが一文字でも読む前に、脳はすでに画面を整理し始めている。何と何がひとまとまりで、何がいちばん重要で、最初にどこを見るべきかを判断している。ラベルの文言や文章、書体の選び方によってではない。何がどこに置かれ、どれだけ離れ、同じ仲間に見えるかによってだ。こちらが説明する機会を得る前から、構造は形づくられ始めている。

それでも、多くのデザイナーはレイアウトを見た目の好みとして扱う。要素を近くに置くのは、ユーザーに関連を伝えるためではなく、見栄えがいいからだというように。そもそもパターンがあったことに誰も気づかないまま、パターンが壊される。結果として、レイアウトは誰も明確には任せていない仕事をし、誰も意図していない合図を送る。

余白がすでに間違った意味を伝えているのに、文章を直すことに何時間もかけるデザイナーを、私は見てきた。

脳は、まずまとめる

20世紀初頭、ドイツの心理学者たちは、一度知れば当たり前に思えることを記録した。知覚は受け身ではない。意識的に注意を向ける前から、心はすでにまとめ、分け、優先順位をつけている。

Max Wertheimer は1923年、その基礎となる研究を発表した。見ていたのは、単純なことだった。人は、点の集まりをどう知覚するのか。まず個々の点を見て、理屈を組み立てながらパターンにたどり着くのではなかった。最初から、まとまりと関係が見えていた。点の間隔が変わると、どの点同士に関連があると感じるかも変わる。同じ形は、要素をひとまとまりに見せる。どれも、説明はいらない。自然に起きる。Wertheimerが指摘したのは、こうしたまとまりは、慎重に解釈した結果ではないということだ。知覚そのものの一部であり、仕組みを知っていても、簡単に打ち消すことはできない。

Kurt Koffka は、こう表現した。

全体は、部分の総和とは異なる。
— Kurt Koffka（英語からの翻訳）

より優れているのではない。ただ、別のものなのだ。知覚されるレイアウトは、組み立てたとおりのレイアウトと同じではない。ひとまとまりに見えるものは、まとめて処理される。離れて見えるものは、別々に処理される。デザイナーが発明したことではない。人が目にしたものを整理する仕組みだ。理解していれば、それに沿ってデザインできる。理解していなくても、合図は出ている。何を伝えているか知らずに、送っているだけだ。

余白が、つながりを伝える

インターフェースデザインで、たいてい最初に実感するのは近接だ。近くにある要素は、ひとまとまりとして知覚される。ユーザーが意識的に何かを判断する前に、そうなる。

ラベルと入力欄を近くに置けば、ユーザーは一組として読む。離すと、関係がわかりにくくなる。フォーム全体で間隔がそろっていなければ、ユーザーは行ごとに「どのラベルが、どの入力欄のものか」を考えなければならない。内容は変わっていないが、手間は変わった。余白を少し変えただけで、引っかかりを増やしてしまった。整理されていない請求情報のフォームは、技術的にはどの入力欄も正常でも、壊れているように感じられることがある。

近接と組み合わさるのが、類同だ。色、形、大きさ、太さが共通する要素は、同じ種類のものに感じられる。だから、ボタンの見た目をそろえることは、美しさ以上の意味を持つ。主要な操作をすべて同じ見た目にすれば、ユーザーは、このプロダクトでは何が主要な操作の目印なのかを覚える。あるモーダルだけ色が違う、ある画面だけ大きさが違うという形で、一度でもパターンを破れば、学習したパターンも崩れる。ユーザーは、まずどれを押せばいいのか確信が持てなくなる。そこで起きるためらいは、多くの場合、文言ではなく、不統一から生まれる。

連続、閉合、共通運命も重要だ。連続は、ほぼそろっている配置が、意図してずらした配置より気になる理由を説明してくれる。目は、何かに遮られるまで線をたどる。閉合は、ほぼ整列しているボタンが、軸から明らかに外れたボタンより注意を奪う理由を説明してくれる。脳が正しい位置に収めようとして、ずれに気づくのだ。共通運命は、アニメーションによってまとまり方が変わる理由を説明する。一緒に動く要素は、意図したかどうかにかかわらず、一つのまとまりとして扱われる。

Googleを見ると、よくわかる

Googleの検索ページは、こうした効果がはっきり見えるので参考になる。

検索結果はそれぞれ、タイトル、URL、スニペットの三つでできている。縦の間隔が狭いので、何かを読む前から、三つが一つのまとまりとして知覚される。検索結果同士の間隔は、それぞれのまとまりを分ける。ユーザーは立ち止まって、「このタイトルは、このスニペットと一組だ」と判断しない。近接がすでにその仕事をしている。そのまま読める。多くのデザインレビューが見落とすのは、そこだ。人は言葉を読む前に、すでにまとまりを読んでいる。

長年、このページを対象とした視線追跡研究は、広告を示す小さなラベルを読むより速く、ユーザーが広告と通常の検索結果を見分けられることを示唆してきた。ラベルも重要だが、その前に、近接と類同が仕事の一部を済ませていた。広告のまとまりと通常の検索結果のまとまりでは、見た目のパターンが違う。人は、それをはっきり説明できる前から、違いを捉えていた。

ページの左端では、もっと静かな働きが起きている。タイトルは、一貫した縦の軸にそろっている。最初の検索結果でその軸を見つければ、目は次の結果をいちいち探さず、下へたどっていける。整列をなくすと、ユーザーは自然に次へ進めず、一つずつ結果の位置を探さなければならない。ページ上で、これを説明する必要はない。レイアウトが、すでに伝えている。

まず構造を確かめる

画面を公開する前に、一つ問おう。誰かが何かを読む前に、このレイアウトは何を伝えているのか。どう見えるかではない。何を語っているかだ。どの要素同士がつながるのか。何が先なのか。次にどこへ目が向かうのか。文字を隠し、何のページか、何と何が関連するか、最初に何をすべきかを、誰かに聞いてみる。見た目の構造だけで答えられないなら、内容を増やしても解決しない。まとまり方がずれている。私も、画面の見た目が洗練されていると、いまだにこの点を見落とす。

Wolfgang Köhler、Max Wertheimer、Kurt Koffka は、知覚を理解しようとしていた。その結果、デザイナーが毎日向き合うことを説明した。私も、自分の仕事で見落としてきた。画面がすっきり見えるから、わかりやすいはずだと思い込んだ。

公開した画面と、ユーザーが見る画面は、完全には同じではない。ユーザーが見るのは、脳がそこから組み立てた構造だ。その構造を導くことはできる。だが、構造が生まれること自体を避けることはできない。