写真と説明を並べたのに、どの説明がどの商品か分かりにくいと言われました。
PORT編集部内容が合っていても距離で迷わせることがあります。同じグループを近づければ関係が伝わります。カフェのメニューでまとめ方を比べてみましょう。
近接は、関連する情報を近づけ、別の情報との間を空けることです。写真・商品名・価格など、何を一組として読んでほしいかを決めてから配置します。
近接とは？
近接とは、関連する情報を近づけ、別の情報との間を空けることです。例えば、カフェラテの名前と500円の価格を近くに置き、紅茶の組とは離します。
グループとは？
グループとは、一組として理解してほしい情報のまとまりのことです。例えば、一つの商品の写真・名前・説明・価格が一組になります。
同じ商品の情報を近くへ。
別の商品は別のまとまりへ。
関係のある情報を近づける
見る人は文字を一字ずつ読む前に、近くにあるものを一組として受け取ります。例えば商品カードの写真・商品名・価格・購入ボタンは近くに置き、次の商品カードとの間には余白を取ります。これで何がどの商品に属するか迷いません。
| 状態 | 見た目 | 改善 |
|---|---|---|
| 離れすぎ | 見出しと説明の関係が曖昧 | 同じ内容を近づける |
| 近すぎ | 別の話題まで一続きに見える | グループの間を空ける |
写真・名前・価格を一組にする
同じ商品の写真・名前・価格を近づけると、どの価格がどの商品かすぐ分かります。
見出しは次の説明の近くに置く
見出しの下が大きく空き、次の見出しのほうが近いと、本文の所属が分かりにくくなります。見出しの「上の余白」を「下の余白」より広くすると、前の内容から区切りつつ、次の本文につなげられます。
商品ごとに分けて、間を空ける
どの説明がどの商品か分類する。
写真・名前・価格を続けて配置。
別の商品の前に、広い空きを作る。
カフェのメニューなら、まず「カフェラテの名前・説明・価格」を一組にします。その三つは近づけ、次の「紅茶」の組との間を広げましょう。同じ商品の中は近く、別の商品とは離す。画面を小さくしても二つの組に見えるか確認します。
メニューは商品ごとに区切る
囲む前に、情報の間を空ける
「分かりにくいから囲む」を繰り返すと、枠だらけでかえってにぎやかになります。枠を消し、要素の距離だけで区切れないか試してください。区切りが弱いときに、初めて背景色や線を加えます。
スマホでも写真と説明を一組に
説明が次の見出しへ近くなっている。
見出しと本文を近づけ、次の話題を離す。
PCでは横に並んだ写真と文章が、スマホでは縦に並ぶことがあります。写真の直後に別のカードの見出しが来ていないか、ボタンがどの説明に属するかを見てください。並びが変わったら余白も見直します。
実例｜カフェのメニュー表を整える
写真が3枚並び、その下に商品名3つ、さらに下に価格3つが並ぶ。写真と価格の対応を探さないと分からない。
各商品を「写真・商品名・価格」の一組にまとめ、次の商品との間に余白を取る。枠がなくても対応が分かる。
直す手順
- 写真のすぐ下に、その商品の名前と価格を置く。
- 同じ商品の要素の間隔を揃える。
- 別の商品との間だけ余白を広げる。
よくある疑問
まとめ
近接は「情報をくっつける技術」だけではありません。何を一組として読んでほしいかを決め、別の組との距離に差をつけることです。
