ゲシュタルト（近接・類同）
近くにあるものは同じ群として、見た目が似ているものは同じ種類として知覚される。並べ方と見た目の統一だけで関係を伝えられる。
Gestalt: Proximity and Similarity
なぜ効くか
1920 年代のゲシュタルト心理学者（Wertheimer ら）が、点や線の配置を変えると人が自動的に「まとまり」を見出すことを実験で示した。近接（距離が近い）・類同（形や色が似ている）・共通領域（同じ枠に入っている）などがあり、意識せずに働くので、罫線や見出しを足さなくても関係が伝わる。Web UI では、ラベルと入力欄の間隔を欄どうしの間隔より狭くすればどのラベルがどの欄かが分かり、関連するボタンの罫線を共有すれば「ひとつの操作群」に見える。逆に、無関係なものが近いと誤った関係を読み取られる。状態を示すバッジは色と形を揃えることで「同じ種類の情報」と読める。
UIでの当て方
- 01関連する要素どうしの間隔は、無関係な要素との間隔の半分以下にする。ラベルと入力欄、見出しと本文で特に守る。
- 02同じ役割のボタン・チップ・バッジは、大きさ・角丸・色の使い方を揃える。役割が違うものは見た目も変える。
- 03群を作るときは、罫線を増やすより余白と背景の枠（共通領域）で分ける。区切り線は最後の手段にする。
- 04一覧の各行は、アバター・主テキスト・副テキスト・メタ情報の位置を全行で固定し、走査を速くする。
誤用・反例
- 見出しが直前の段落に近く、次の段落から遠い。見出しがどちらに属するか読めなくなる。
- 装飾のために罫線・影・背景色を重ね、群の境界が何本も見える状態にする。
この原則を体現するパーツ
- 入力
テキストフィールド
Text Field
ラベル・補助テキスト付きの基本の入力欄。フォーカスで枠色とリングが変わり、通常状態とエラー状態を並べて比べられる。
- JS
- クリック
ボタングループ
Button Group
複数ボタンを罫線を共有して連結したセグメント操作。上段は単一選択（左/中央/右揃え）、下段は複数トグル（太字/斜体/下線）の2パターンを見せる。
- JS
- クリック
スプリットボタン
Split Button
主操作ボタンの右端に▼トグルが連結し、押すと別動作（名前を付けて保存など）のメニューが開く。外側クリック・Escで閉じる。
- JS
- クリック
インセットグループリスト実例あり
Inset Grouped List
iOS の設定画面の型。角丸の白いグループを灰色の地に浮かせ、セクション見出し・アイコン・値・シェブロン・トグルを行に並べる。トグルはその場で切り替わる。
- JS
- 静的
フィーチャーセクション
Feature Section
3つの特徴を、アイコンタイル・見出し・短い説明の組で並べる紹介セクション。プロダクトの強みを一目で伝えるLPの定番ブロックです。
- CSSのみ
- クリック
リストビュー
List View
アバター＋主・副テキスト＋右端メタ／シェブロンで構成する定番のデータ一覧。行をタップすると選択状態になり、区切り線とホバーで視認性を保ちます。
- JS
- 静的
バッジ解説あり
Badge
ステータスドット（成功／警告／エラー／情報）、アイコンに重ねる件数バッジ、NEWピル、数値の通知バブルを一覧にした見本。状態や件数を小さく添えるための定番部品です。
- CSSのみ
- 静的
サイトマップ型フッター
Sitemap Footer
4カラムのリンク群・言語切替・SNS アイコン・法務リンクをまとめたフッター。320px では2カラムに畳まれ、法務リンクは横に流れます。
- CSSのみ
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗近接の原則の解説と、UI での間隔設計の実例。
- Laws of UX別サイト ↗Law of Proximity / Law of Similarity / Law of Common Region の各項。