下の図を思い浮かべてみてください。壺のようなシルエットの絵。でも、じっと見ていると、向かい合った2人の横顔にも見えてくる——「ルビンの壺」として知られる、有名なだまし絵です。
人間の脳は、バラバラの点や線をそのまま認識するのではなく、無意識に「意味のあるまとまり」として解釈しようとする性質を持っています。この性質をまとめたのが「ゲシュタルトの法則」です。
ゲシュタルト心理学とは
人がバラバラの要素をそのまま見るのではなく、近さ・似ている形・連続性などを手がかりに、まとまりのある全体として捉えようとする知覚の傾向を「ゲシュタルトの法則」といいます。
- 近くに並んだメニュー項目を、同じグループだと感じる
- 同じ色のボタンを「同じ種類の操作」と理解する
- 点線で描かれた円でも、頭の中では1つの円として補完する
- モーダルが出ると、暗くなった背景より手前のダイアログへ注意が向く
- 複数のカードが同じ方向へ動くと、同じグループに見える
ゲシュタルト心理学は、20世紀初頭にドイツで発展した心理学の一派で、人が物を認識する際、部分の寄せ集めとしてではなく「全体としてのまとまり(ゲシュタルト)」で捉える、という考え方を土台にしています。この中でも特に、視覚的な「グルーピング」に関する法則群は、デザインの現場で非常によく引用されます。以下は代表的な5つの例です(他にも法則はありますが、Webデザインで特によく使われるものに絞っています)。
- 近接: 距離が近いもの同士を同じグループだと感じる
- 類同: 同じ色・形のもの同士を同じグループだと感じる
- 閉合: 欠けた部分を脳内で補完し、閉じた形として認識する
- 連続: 交差する線を、一続きの線として捉えようとする
- 図と地: 注視する対象(図)と背景(地)を無意識に分離して認識する
知っているはずの漢字や平仮名を何度も書き続けていると、「あれ、この字で合っていたっけ?」という感覚になったことはないでしょうか。これは「ゲシュタルト崩壊」と呼ばれる現象で、部分(一画一画)に意識を向けすぎて、全体としての形の把握を見失うことで起こります。人はふだん、無意識に全体の枠組みから先に認識しているからこそ起こる、面白い錯覚です。
Webサイトへの応用: 「近接」で情報のまとまりを作る
フォームの入力項目とラベルが離れて配置されていると、ユーザーは「どのラベルがどの入力欄のものか」を都度目で追う必要が出てきます。ラベルと入力欄の余白を詰め、関連する項目同士は近くに、無関係な項目とは離して配置するだけで、囲み枠や色分けといった過剰な装飾をしなくても、情報のまとまりがひと目で伝わるようになります。
「共通運命」: 同じ動きをするものは同じグループに見える
パソコンのファイル選択で、複数のアイコンをまとめてドラッグすると、選択されたアイコンだけが同じ動きで移動しますよね。このように「同じ方向・同じように動く要素」を、人は自然と同じグループだと認識します。この性質は「共通運命」と呼ばれ、チェックボックスで選択した項目をハイライトする、複数の要素を連動してアニメーションさせる、といったUIの表現で活用できます。
「図と地」: モーダルウィンドウの基本原理
ポップアップやダイアログを表示する際、背景を半透明の黒(rgba(0, 0, 0, 0.6)など)で覆う(オーバーレイする)手法をよく見かけます。これは背景を「地」、モーダルを「図」として脳に明確に分離させることで、視線がダイアログの内容だけに自然と集中するようにする、「図と地」の原則を使った定番のテクニックです。
おしゃれさを優先して要素の間隔をあえて均等にしすぎたり、無関係な要素同士を近くに配置したりすると、ユーザーはゲシュタルトの法則に反した情報を目にすることになります。無意識のうちに「これはどういう関係なんだろう?」と余分な労力を使って読み解こうとしてしまうのです。デザインの自由度と、この「読み解くコスト」のバランスを意識することが大切です。
まとめ
- ゲシュタルトの法則は、人が部分ではなく全体のまとまりで物を認識する性質をまとめたもの
- 「近接」を使えば、囲み枠や色分けなしでも情報のグループ関係を伝えられる
- 「共通運命」は同じ動き・変化をする要素同士を、「図と地」は注視対象と背景を、それぞれ自然に分離・グループ化して認識させる
- 法則に反したデザインは、ユーザーに余分な「読み解くコスト」を強いてしまう
デザインの見た目そのものよりも、まず「使う人にどう伝わるか」という視点を深めたい方には、UI/UXデザインの考え方を体系的にまとめた入門書もおすすめです。
