ラベルと入力欄の間隔が、入力欄と次のラベルの間隔と同じ——このフォームを見たユーザーは「どのラベルがどの入力欄に対応しているか」を一瞬考えなければなりません。情報がバラバラに散らばったUIは、ユーザーに「どれとどれがセットなのか？」という不要な推測を強制します。
脳は距離を「関係性のシグナル」として自動的に解釈します。近いものは「仲間」、遠いものは「別の話」——この処理は意識せずに行われます。タイトルと本文が離れすぎていたり、画像とキャプションの関係が曖昧だったりすると、脳はそれらを結びつけるために余計なエネルギーを消費し、認知負荷が高まります。
よくある失敗は「すべての要素の間隔を均等にする」ことです。均等な間隔は整然として見えますが、「どれとどれがグループか」という情報を持ちません。近接の原則は、線や枠を使わずに「距離だけで構造を語る」設計判断です。
見出しは前の段落よりも次の段落に近づける、ラベルは入力欄のすぐ上に置く、関連するボタンはまとめて配置する——これらはすべて近接の原則の実践です。距離が語れば、説明文は不要になります。
1. 原則の定義
近接（Proximity）とは、関連する要素を物理的に近づけ、無関係な要素とは距離を空けることで、線や枠を使わずに情報のグループ構造をユーザーに伝える設計原則。
本質は「距離が意味を語る」ことです。線や枠を使わなくても、ただ「近づける・遠ざける」だけで、人間の脳はそれらを「関係があるもの・ないもの」として自動的に処理します（ゲシュタルトの近接の法則）。近接はグループ化の最もシンプルで強力な手段であり、余白と組み合わせることで視覚的な構造を作ります。
2. いつ使うか（適用場面）
特に重要になるケース
- フォームの入力欄: ラベルと入力フォームを近づけ、次の項目との間隔を広げることで、入力ミスを防ぐ。
- リストデザイン: 写真、タイトル、価格などの情報をセットにして、他の商品との境界を明確にする。
- 見出しと本文: 見出しは、前の段落よりも、これから始まる段落の方に近づける。
トレードオフが起きる場面
- 余白の不足: 近接を意識しすぎて要素を詰め込みすぎると、全体的に窮屈で「呼吸できない」レイアウトになる。グループ内を近づけるためには、グループ外を十分に離す余白が必要。
- 均等配置との衝突: ナビゲーションメニューや画像グリッドなど、すべての要素が並列・等価な関係にある場合は、あえて均等な間隔で配置する方が自然に見える。近接は「階層がある情報」に特に有効。
- モバイルでの近接: 画面幅が狭いモバイルでは、デスクトップで設計した間隔の差が潰れてグループが伝わりにくくなることがある。モバイルでは間隔の比率（内部:外部 = 1:3以上）を意識して設計する。
3. なぜ重要か（設計判断の核）
近接は「配置」のテクニックではなく、「意味の塊」を作るための論理的構造化である。距離が語れば、説明文は不要になる。
設計判断の基準
- 「これは同じグループの情報か？」→ YESなら、隙間なく近づける。
- 「これは別の話題か？」→ YESなら、明確に距離を空ける。
優先順位の考え方
- 内部余白 (Inner): グループ内の要素間の距離（例：8px）。最も狭くする。
- 外部余白 (Outer): グループ同士の距離（例：24px）。内部余白の2倍以上とると区別しやすい。（距離の差が小さいと、人はそれを「同じグループ」と誤認するため。）
- セクション余白: 大きな話題の切り替わり（例：64px）。最も広くする。
例外条件
- 均等配置: ナビゲーションメニューなど、すべての項目が並列で等価な関係にある場合は、あえて均等な間隔で配置する。この場合も、メニュー全体と周囲のコンテンツとの間には十分な距離を設ける。
- 意図的な分散: ヒーローセクションなど、視覚的なインパクトを優先する場面では、あえて要素を広く散らして「余白の中に浮かぶ」演出をすることがある。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
ここをクリアしていないと、製品として「使えない」レベルになります。
理想ライン（Better - できると強い/プロの品質）
UXをさらに高め、洗練された印象を与えるための基準です。
5. UI例
改善プロセス
- グループの可視化: 画面上の要素を「グループ」ごとに丸で囲ってみる。「どれとどれが仲間か」を先に言語化することで、距離の設計に迷わなくなる。
- 境界の特定: 丸と丸が重なったり、境界が曖昧な部分を見つける。そこが「近接が機能していない箇所」。
- 距離の差をつける: グループ内の距離を縮め（例：4〜8px）、グループ外の距離を広げる（例：24〜48px）。内部と外部の比率が1:3以上あると、グループが明確に伝わる。
- 線・枠の削除テスト: 情報を区切るために使っている線や枠を一度消してみる。距離だけで構造が伝わるなら、線は不要——近接が正しく機能している証拠。
6. 関連リンク
- 関連リファレンス（理論）: ゲシュタルト原則 (Gestalt Principles), 認知負荷 (Cognitive Load), 視覚的階層 (Visual Hierarchy)
- 用語集（定義）: 近接の法則, ホワイトスペース
- 関連するUI原則（横）: 整列 (Alignment), 余白 (Whitespace), グリッドシステム (Grid System)
7. まとめ
今日から直せる一手 あなたのサイトの見出しの「下の余白」を、「上の余白」の半分にしてみてください。それだけで、文章の構造が劇的に分かりやすくなります。
チームに共有するなら一言 「『線』で区切る前に、『余白』で区切ろう。」
