ゲシュタルト原則の7つの法則とUIデザインへの応用
優れたUIは、どのような考え方によって生み出されるのでしょうか。特に、道具としてのUIを考える上では、美しい見た目ももちろん重要ですが、それ以上に「ユーザーが新しく考えなくても、使い方がわかる」ことが大事なように思われます。
そのための強力な考え方の補助線の一つに「ゲシュタルト原則」という理論があります。この記事では、この原則を理解し活用することで、情報を整理し、ユーザーにとって使いやすいインターフェースについて考えてみたいと思います。
ゲシュタルト原則とは？
ゲシュタルト原則は、1920年代にドイツの心理学者たち（マックス・ヴェルトハイマー、クルト・コフカ、ヴォルフガング・ケーラー）によって提唱された知覚心理学の理論です。
核心にあるのは、「全体は、部分の総和以上のものになる」という考え方です。人間の脳は、一見するとバラバラな要素であっても状況に応じて無意識に「まとまり」として認識し、グループ化する傾向があるそうです。この脳の働きを理解し応用することで、ユーザーにとって直観的に理解しやすいレイアウトを設計に適用しようというのです。
ゲシュタルト崩壊について
ゲシュタルト崩壊は、見慣れたはずの文字などをじっと見つめていると、個々のパーツ（線や点）がバラバラに見えてきて、何の文字だったか分からなくなってしまう現象です。これは、部分を統合して「全体」として認識する脳の働き（ゲシュタルト）が、一時的にうまく機能しなくなることで起こります。つまり、ゲシュタルト原則が働かなくなった状態と言えます。
ゲシュタルト原則の7つの法則
1. 類同の法則（Similarity）
形、色、大きさ、向きなどが似ている要素は、同じグループとして認識されます。
例えば、リンクテキストを青色で統一すると、ユーザーは「青い文字はクリックできる」と認識します。同じように、同じ形のボタンを使用することで、それらが同じ機能を持つことを伝えられます。
UI設計での活用例：
同じカテゴリーのアイコンに同じ色を使用する
重要度が同じ要素に同じサイズやフォントを適用する
CTA（行動喚起）ボタンのデザインを統一する
2. 近接の法則（Proximity）
物理的に距離が近い要素同士は、関係があるグループとして認識されます。
見出しと本文を近づけて配置すると、情報の関連性が視覚的に伝わります。逆に、異なるセクションの間には十分な余白を設けることで、情報の区切りを明確にできます。
UI設計での活用例：
フォームのラベルと入力欄を近づける
関連する商品や画像をグループ化して配置する
ナビゲーションメニューの項目間隔を調整して階層を表現する
3. 共通運命の法則（Common Fate）
同じ方向に動いたり、同じように変化したりする要素は、仲間として認識されます。
画像のようにある要素が同じように点滅したり、スライドショーなどで画像や要素が同じ方向に動くとき、要素を一連のグループであることを示します。
UI設計での活用例：
カルーセルやスライダーで要素を一緒に動かす
ホバー時に関連要素を同時にアニメーションさせる
スクロール時に連動して動く要素でグループを表現する
4. 閉合の法則（Closure）
一部が欠けていたり、完結していない図形でも、脳が過去の経験からそれを補完して、全体をまとまりとして認識しようとします。
画像は、「カニッツァの三角形」と呼ばれる有名な錯視図形の模写です。欠けた３つ円と３つのくの字の図形が円形に並んでいるだけですが、組み合わさることで中心に大きな白い逆三角形を示す一つのまとまりとして認識します。
これを応用すれば、カードUIやバナーで、要素の一部を画面外に少しだけはみ出させることで、「この先にも情報が続いている」ことを示唆し、スクロールやスワイプを促すことができます。
UI設計での活用例：
進捗バーやローディングアイコンで処理中を表現する
ダイアログボックスで境界線の一部を省略してもまとまりを保つ
一部が隠れたコンテンツで続きがあることを示す
5. 連続の法則（Continuity）
滑らかな線やカーブに沿って配置された要素は、途中で途切れていても、一連の流れや繋がりとして認識されやすくなります。
画像では、大きく２つの点の集合があります。上側の黒点の集合は２つの点が４つ集まっているか、２つの上下に分かれたまとまりに見えるか、ジグザグのグラフに見えて、全体としてのまとまりがやや散漫です。その下の黒点の集合は、一つの大きなカーブを描いた線としてまとまって見えます。
UI設計での活用例：
ステップインジケーターで手順の流れを示す
タイムラインで情報の連続性を表現する
視線の流れに沿ったレイアウト設計（F字型、Z字型パターン）
6. 図と地の法則（Figure-Ground）
人は何かを見るとき、どこが前景の「図」で、どこが背景の「地」なのかを無意識に区別します。
画像は、「ルビンの壺」と呼ばれる有名な錯視図形の模写です。白いエリアを「地」とした時には、黒い二人の人物が向き合った「図」にみえ、黒いエリアを「地」としたときは白い壺が「図」として見える、というものです。
前景の「図」として認識されたものに注意が向き、背景として認識されたものは意識されにくくなります。例えば、ダイアログを表示する際、背景を暗くすることで、ウィンドウが「図」であることを明確にし、ユーザーの注目を集中させます。
UI設計での活用例：
モーダルダイアログでスクリムを敷いて背景を暗くする（オーバーレイ）
カードデザインで要素を背景から浮き上がらせる
コントラストを使って重要な要素を際立たせる
7. 対称性の法則（Symmetry）
左右対称、あるいは上下対称な図形は、たとえ距離が離れていても、一つのまとまりとして認識されやすく、人は対称的な形に安定感や秩序を感じる傾向があります。
ナビゲーションメニューやプロフィール画面などで要素を対称的に配置すると、視覚的なバランスが取れ、ユーザーは情報を整理されたものとして認識しやすくなります。
UI設計での活用例：
ナビゲーションバーの左右対称な配置
ランディングページの中央揃えレイアウト
アイコンや画像の対称的な配置でバランスを取る
ゲシュタルト原則のUIへの適用
ゲシュタルト原則は単独で使うよりも、複数を組み合わせることでより効果を発揮します。
例：フォームデザイン
近接の法則
ラベルと入力欄を近づける
類同の法則
必須項目のマーカーを同じ色（例：赤）で統一する
連続の法則
入力項目を上から下へ自然な流れで配置する
対称性の法則
左右のバランスを取った中央配置
例：カード型レイアウト
近接の法則
関連する画像、タイトル、説明文を一つのカードにまとめる
類同の法則
同じカテゴリーのカードに同じデザインを適用
図と地の法則
カードに影をつけて背景から浮き上がらせる
対称性の法則
カードを規則的にグリッド配置する
まとめ
ゲシュタルト原則は、100年近く前に提唱された理論ですが、現代のUI/UXデザインにおいても非常に重要な指針とな言えるでしょう。
これらの原則を理解し活用することで人間の脳にとって認識しやすいレイアウトにすることで、情報の整理と優先順位の明確化し、ユーザーの認知的負荷を軽減した結果として、ブランドの一貫性と信頼性の向上などにつながると考えられます。
デザインを始める前に、「どの原則を使えば、ユーザーにとって最も理解しやすいか？」と自問する習慣をつけることで、より効果的なUI設計が可能になります。
真に「ユーザーフレンドリー」なるものが存在するとすれば、それは人間の認知を知り尽くしたデザイナーによるUIなのかもしれませんね。
