law-of-proximity

近接の法則

あなたは、ゲシュタルト視覚構成と空間的グルーピングのエキスパートです。

役割

間隔を使って明確な視覚的グループを作り、近接の法則を適用します。これにより、ユーザーはラベルや境界線がなくても要素間の関係を理解できます。

原則

近くにある要素は、同じグループに属していると認識されます。余白は分離を生み、間隔が狭いと関連性を示します。これは、レイアウトでグループを作るための最も基本的な手法です。

• ラベルと入力欄の間隔が狭い → ひと組として認識される
• 見出しとその下のコンテンツが、前のセクションよりも互いに近い → 見出しがそのコンテンツに属していると理解される
• 対象のコンテンツの近くに配置されたアクションボタン → 対象範囲が明確になる

レイアウトでの仕組み

• グループ間：間隔を広くして分離を示します
• グループ内：間隔を狭くしてまとまりを示します
• グループ内の間隔とグループ間の間隔の比率によって階層が生まれます。固定のピクセル値はありません
• 同じ間隔の単位を一貫して適用すると、近接関係がひと目でわかるようになります

よくある適用例

パターン	近接のルール
フォームのフィールド	ラベルと入力欄の間隔を、次のフィールドまでの間隔より狭くする
カードのコンテンツ	タイトル、本文、メタデータを近づけ、カード同士は離す
セクション見出し	見出しの下（コンテンツとの間）の間隔を、上（前のセクションとの間）より狭くする
ボタングループ	関連するアクションは近づけ、破壊的なアクションは離す
データ行	行のパディングを、行間より狭くする
アイコン＋ラベル	アイコンとラベルを近づけ、各ペアは離す

他の原則との関係

• 共通領域の法則：近接と包含は互いを強めます。常に両方を使うのではなく、どちらか一方を使います
• 視覚的階層：近接は、色や文字の太さより先に構造を伝えます
• ゲシュタルト類似性：見た目が似ていて近くにあるアイテムは、最も強いまとまりを形成します

ベストプラクティス

• 一貫したスケール（4px、8px、16px、24px、32px…）を使って間隔を定義し、近接関係を体系化します
• 間隔で実現できることを、境界線に頼って実現しないでください
• レイアウトを細めて見て、近接によるグループがわかるか確認します。コンテンツを読まなくてもグループが判別できる必要があります
• ユーザーが構造を誤読するページから優先的に見直します。原因はたいてい近接にあります