フレームワーク活用ガイドひとことで言うと#
「人間は個々の要素ではなく、まとまりとして認識する」 という知覚心理学の法則。近接・類似・閉合・連続などの原則を使えば、ユーザーが自然に情報を理解できるデザインが作れる。
押さえておきたい用語#
- 近接の法則（Proximity）
- 近くにある要素は同じグループとして認識される。最も基本で最も強力な原則。
- 類似の法則（Similarity）
- 見た目が似ている要素は同じ種類として認識される。色・形・サイズの共通性がグルーピングを生む。
- 閉合の法則（Closure）
- 不完全な形でも人間は勝手に補完して閉じた形として認識する。ロゴやアイコン設計で活用される。
- 図と地（Figure-Ground）
- 人間は視覚情報を前景（図）と背景（地）に分離して認識する。影や色で重要な要素を浮き上がらせる。
ゲシュタルト原則の全体像#
こんな悩みに効く#
- 情報を並べているだけなのに「見づらい」と言われる
- 関連する要素がバラバラに見えてしまう
- デザインの「なぜこう配置したか」を論理的に説明できない
基本の使い方#
近くにある要素は「同じグループ」として認識される。これが最も基本で最も強力な原則。
- 関連する情報は物理的に近づける
- グループ間には十分な余白（ホワイトスペース）を置く
- 罫線や枠線がなくても、余白だけでグルーピングできる
名刺のデザインを思い浮かべると良い。名前と役職は近くに、電話番号とメールアドレスは別の塊にまとめる。
見た目が似ている要素は「同じ種類」として認識される。
- 同じ機能のボタンは同じ色・サイズにする
- 見出しレベルを色やサイズで統一する
- 逆に、異なる役割の要素は意図的に見た目を変える（例：主ボタンと副ボタン）
「なんとなく色を変えてみた」は危険。色の違いはユーザーに「意味の違い」として伝わる。
閉合: 不完全な形でも、人間は勝手に補って「閉じた形」として認識する。ロゴデザインやアイコンに活用。
連続: 要素が一直線や曲線上に並んでいると、1つの流れとして認識する。タイムラインやプログレスバーの設計に有効。
図と地: 人間は「図（前景）」と「地（背景）」を分離して認識する。背景色や影を使って、重要な要素を「図」として浮き上がらせる。
これらを組み合わせることで、説明がなくても直感的に理解できるUIが作れる。
具体例#
Before（原則を無視）: アカウント名、メールアドレス、パスワード変更、通知ON/OFF、ダークモード、言語設定、ログアウトが等間隔で縦に並んでいる。どこからどこまでが一塊かわからない。
After（原則を適用）:
- 近接: 「アカウント情報」（名前・メール・パスワード）と「アプリ設定」（通知・ダークモード・言語）をグループ化し、グループ間に24pxの余白
- 類似: 各設定項目は同じレイアウト（ラベル左・操作右）。トグル式の設定は同じスイッチUIで統一
- 図と地: ログアウトボタンは赤色で背景から浮き上がらせ、他の設定とは別の存在であることを視覚的に示す
- 閉合: 各グループを角丸のカードで囲むことで、明確にセクションを分離
罫線を1本も引いていないのに、情報の構造が一目でわかる設定画面が完成した。
Before: 商品カード内の「商品名」「価格」「レビュー星」「カートボタン」が均等に配置されている。すべての余白が12pxで、どの情報が重要かわからない。
After:
- 近接: 商品名と価格を4px間隔で密着させ（セット情報として認識）。レビュー星とカートボタンは16px離す
- 類似: 価格はすべて赤の太字16px、セール品は取り消し線＋赤文字で統一。カートボタンは全商品同じ色・サイズ
- 連続: 「商品名→価格→レビュー→カート」の左上から右下への視線の流れを設計
商品詳細への遷移率が14%向上。カート追加率も8%改善した。
Before: 分析ダッシュボードに12個のグラフ・数値カードが等しいサイズで並んでいる。ユーザーから「どこを見ればいいかわからない」との声が72%。
After:
- 図と地: 最重要KPI（売上・DAU・NPS）の3カードを白背景＋ドロップシャドウで「図」として浮かせ、2倍のサイズに
- 近接: 残り9カードを「売上関連」「ユーザー関連」「品質関連」の3グループに分け、グループ間に32pxの余白
- 類似: ポジティブ指標は緑、ネガティブ指標は赤、ニュートラルはグレーで色分け
ユーザーの「どこを見ればいいかわからない」が72%から11%に減少。意思決定に使うデータの的確さが向上したとの評価を得た。
やりがちな失敗パターン#
- 余白が均一すぎる — すべての要素間の余白が同じだと、グルーピングが伝わらない。「グループ内の余白 < グループ間の余白」が鉄則
- 意味なく色やサイズを変える — 類似の法則により、見た目の違いは「意味の違い」と解釈される。装飾目的で色を散らすと混乱を招く
- 原則の名前を覚えて満足する — 大事なのは「ユーザーがどう知覚するか」を想像すること。原則はあくまでそのための道具
- すべての原則を一度に適用しようとする — まずは「近接」だけを徹底するだけで劇的に改善する。1つの原則をマスターしてから次に進む
まとめ#
ゲシュタルト原則は「人間の脳がどう見るか」に基づいたデザインの基礎理論。近接・類似・閉合・連続・図と地を意識するだけで、情報が整理され、直感的に理解できるUIが作れる。デザインの「なんとなく」を「根拠がある」に変えてくれる最強の知識。