近接 ― 関連する情報をまとめる

「近接」とは何か

近接とは、関連する要素を近くに置き、関連しない要素を離すというデザインの基本原則です。人は、物理的に近い要素を「同じグループ」として認識します。この性質を活かして情報を整理するのが近接の考え方です。

近くにあるものは仲間。離れているものは別のもの。人間の脳は自然にそう判断します。

なぜ近接が大事なのか

情報が整理されていないデザインは、読み手に「どこから読めばいいの？」「この情報とこの情報は関係あるの？」という迷いを与えます。近接を意識するだけで、こうした迷いが激減します。

近接ができていないデザインの特徴

• すべての要素が等間隔に並んでいて、グループがわからない
• 関連する情報が離れた場所にある
• 関係ない情報が近くに置かれている

近接の実践テクニック

1. まず情報を「グループ分け」する

デザインに入る前に、扱う情報を紙に書き出して「どれとどれが仲間か」を整理しましょう。名刺なら「名前・肩書き」「連絡先」「会社情報」のように分けられます。

2. グループ内の余白を狭く、グループ間の余白を広くする

余白の差でグループを表現します。目安として、グループ間の余白はグループ内の余白の2倍以上にするとはっきり区別できます。

余白が均等 8px 8px 余白にメリハリ 4px 20px グループ内は狭く（4px）、グループ間は広く（20px）で情報のまとまりが一目でわかる

3. 「線」ではなく「余白」で区切る

初心者は情報を区切るために罫線を引きがちですが、余白で区切るほうがすっきりします。罫線は「余白だけでは区別がつかない場合の最終手段」と考えましょう。

近接のBefore / After

Before

山田 太郎

営業部 マネージャー

090-1234-5678

taro@example.com

東京都渋谷区1-2-3

After

山田 太郎

営業部 マネージャー

090-1234-5678

taro@example.com

東京都渋谷区1-2-3

現場でよくある失敗

デザナビでは「なぜ失敗するのか」も大切にしています。近接でよくある失敗パターンを知っておきましょう。

• グループが多すぎる：5つ以上のグループがあると、逆に整理されていない印象になります。3〜4グループに収めるのが理想です。
• 余白の差が小さすぎる：グループ内とグループ間の余白の差が微妙だと、近接の効果が出ません。迷ったら大胆に差をつけましょう。

まとめ

近接のルールはシンプル。「仲間は近く、他人は遠く」。これだけで情報がグッと読みやすくなります。

次は2つ目の原則「整列」を学んでいきましょう。近接でグループ化した情報を、さらに「揃える」ことで、デザインの完成度が一段上がります。