「情報は少ないのに、どこから読めばいいか分からない」。その原因は、文章の量ではなく、情報同士の距離かもしれません。近接は、関係するものを見た目でもひとまとまりにする基本です。
近接とは、関連する要素を近づけ、関係しない要素との間を空けること。見出しと説明、写真とキャプションなどのまとまりを、余白で示します。
全部を近づけると、かえって窮屈になりませんか？
PORT編集部なります。同じグループの中は近く、別のグループとの間は広く。距離の差をつけることがポイントです。
- 近接で「情報のまとまり」を作る
- よくある失敗｜見出しと本文が離れている
- 近接を使う3ステップ
近接で「情報のまとまり」を作る
見る人は文字を一字ずつ読む前に、近くにあるものを一組として受け取ります。例えば商品カードの写真・商品名・価格・購入ボタンは近くに置き、次の商品カードとの間には余白を取ります。これで何がどの商品に属するか迷いません。
| 状態 | 見た目 | 改善 |
|---|---|---|
| 離れすぎ | 見出しと説明の関係が曖昧 | 同じ内容を近づける |
| 近すぎ | 別の話題まで一続きに見える | グループの間を空ける |
写真・名前・価格を一組にする
同じ商品の写真・名前・価格を近づけると、どの価格がどの商品かすぐ分かります。
よくある失敗｜見出しと本文が離れている
見出しの下が大きく空き、次の見出しのほうが近いと、本文の所属が分かりにくくなります。見出しの「上の余白」を「下の余白」より広くすると、前の内容から区切りつつ、次の本文につなげられます。
近接を使う3ステップ
まず文章を意味のまとまりに分けます。次に同じまとまりの要素を近づけます。最後にまとまり同士の間を広げ、離れて見えるか確かめます。数値を先に決めるより、スマホでも自然に読める距離を探しましょう。
枠線や色を足す前に余白を調整
「分かりにくいから囲む」を繰り返すと、枠だらけでかえってにぎやかになります。枠を消し、要素の距離だけで区切れないか試してください。区切りが弱いときに、初めて背景色や線を加えます。
スマホ表示で確認すること
PCでは横に並んだ写真と文章が、スマホでは縦に並ぶことがあります。写真の直後に別のカードの見出しが来ていないか、ボタンがどの説明に属するかを見てください。並びが変わったら余白も見直します。
実例｜カフェのメニュー表を整える
写真が3枚並び、その下に商品名3つ、さらに下に価格3つが並ぶ。写真と価格の対応を探さないと分からない。
各商品を「写真・商品名・価格」の一組にまとめ、次の商品との間に余白を取る。枠がなくても対応が分かる。
直す手順
- 写真のすぐ下に、その商品の名前と価格を置く。
- 同じ商品の要素の間隔を揃える。
- 別の商品との間だけ余白を広げる。
まとめ
近接は「情報をくっつける技術」だけではありません。何を一組として読んでほしいかを決め、別の組との距離に差をつけることです。
