近接

近接とは、関係の近い情報を近くに、関係の遠い情報を遠くに置くという配置の原則です。

スーパーの棚で、値札が二つの商品のちょうど真ん中にあれば、どちらの価格か迷います。商品名・写真・価格を一組として寄せ、次の商品との間を広げると、線で囲まなくても対応が分かります。これは距離の働きを示す例で、近づければ内容まで正しいと保証するものではありません。

3つの距離を分ける

1. 要素の内側。 アイコンとそのラベルなど、切り離せない情報
2. 同じまとまりの中。 見出しと本文、商品名と価格など
3. 別のまとまりとの間。 次の話題や次の商品へ移る空間

まず内側を近づけ、外側をそれより広くします。具体的な数値は文字サイズや媒体で変わるため、「必ず何px」ではなく、内側と外側の差が見えるかで確かめます。

囲みを足す前に距離を見る

まとまりが分からないと、枠線や背景色を足したくなります。けれど、距離が曖昧なまま囲みを増やすと、紙面が重くなります。先に近接を整え、それでも境界が必要な場合だけ線や色を使います。

よくある誤解

「すべての間隔を均等にすれば整う」という誤解です。均等にすると、まとまりの切れ目まで消えます。同じ役割の中ではそろえ、役割が変わる場所では意図して広げます。

30秒で試す

手元の一枚から枠線を一つ隠し、見出しと本文を近づけ、次の見出しまでを広げてください。枠がなくても二つの話題を分けられれば、距離が情報を伝えています。

関連して学ぶ

• チラシが詰まって見えるのはなぜ — 近接の崩れが招く「詰まり」の実例
• 余白観測室 — 余白・整列・近接の学習室