UIXHERO
#087
視覚デザイン
#087

きんせつのほうそく

近接の法則 (Law of Proximity)

別名・表記:Law of Proximity近接性

UIXHERO Definition

「近いものは仲間」。距離が近いほど、ひとかたまりのグループに見える。

概要

近接の法則とは、ゲシュタルト心理学における視覚的な知覚の原則の一つで、「物理的に距離が近い要素同士は、互いに関係しており、一つのグループを形成していると認識される」という法則です。

人間は無意識のうちに情報を整理して理解しようとします。 この法則をデザインに応用することで、枠線や区切り線を使わなくても、余白(スペース)の調整だけでユーザーに「情報のまとまり」を伝えることができます。

この法則は、人が画面を「読む」前に「見る」段階で働くため、第一印象やスキャン体験に強く影響する。

UXでの活用

  • 情報のグルーピング: 関連する項目(例:見出しと本文、写真とキャプション)を近づけ、関係ない項目とは距離を置くことで、視覚的な構造を作り出す。
  • フォームのユーザビリティ向上: 入力フォームにおいて、ラベルと入力フィールドの間隔を狭くし、異なる質問項目の間隔を広くすることで、ユーザーの誤認を防ぐ。
  • スキャン性の向上: 適切な余白(ホワイトスペース)を活用することで、画面が整理され、ユーザーが必要な情報を見つけやすくなる。余白は単なる「何もないスペース」ではなく、情報の区切りを明確にするための「アクティブな要素」である。

💡 使いどころ

情報をグルーピングして整理し、スキャンしやすくしたい時。余白(ホワイトスペース)を使って情報の構造を直感的に伝えたい時。

⚠️ 注意点・誤用

近接性だけでグルーピングしようとせず、必要に応じて閉合(枠線)や類同(同じ色・形)も組み合わせると、より関係性が明確になる。

具体例

  • フォームのラベルと入力欄: ラベルと対応する入力欄の距離を近づけ、次の項目との距離を離すことで、どのラベルがどの入力欄に対応しているかが一目で分かる。
  • カードUI: 画像、タイトル、説明文をひとかたまりに配置し、隣のカードとは十分な余白(マージン)を開けることで、それぞれの独立したコンテンツとして認識させる。
  • 広告と本文が近すぎて誤クリックが起きる
出典・参考文献:
  • Laws of UX: Law of Proximity
  • Nielsen Norman Group: The Proximity Principle in Visual Design
  • Wertheimer, M. (1923) Laws of Organization in Perceptual Forms

関連する原則

作成: 2026年2月2日
更新: 2026年2月21日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: