デザインの丘 EPISODE 06
目立たせる・まとめる
目立たせる・まとめる
レイアウト4原則(後半)
4原則の後半は「目立たせる(強弱)」と「まとめる(近接)」。この2つが身につくと、ページの中で読者の視線を案内できるようになります。
目立たせる — 全部大事は、全部その他
「これも大事、あれも大事」と全部を大きく太くすると、結局ぜんぶ同じに見えます。強弱の基本は「1画面にスターは1人」。いちばん見てほしいもの(多くの場合、売りのひとことか、お誘いのボタン)を決めて、それだけを大きく。ほかは思いきって脇役にします。
ハムちゃんぜんぶ目立たせたくなる気持ち、痛いほど分かる…。でも全員主役の劇は、誰も覚えてもらえないんだ…。
まとめる — 距離が意味をつくる
人の目は、近くにあるもの同士を「仲間」と認識します。だから関係あるものは近づけ、関係ないものは離す。メニュー名と値段はくっつける、別の商品とはしっかり離す。写真とその説明文は近く、次の話題は遠く。文字にしなくても、距離が「これは仲間です」と語ってくれるのです。
4原則・総まとめ
- そろえる:端を1本の線に
- くりかえす:同じ役割は同じ見た目
- 目立たせる:1画面にスターは1人
- まとめる:関係あるものは近く、ないものは遠く
ハムちゃん4原則がそろったね! 明日からよそのサイトやポスターが「あ、ここがそろってない」って見えるようになるよ。それが上達の証拠なんだ。
きょうのまとめ
- 目立たせる:1画面にスターは1人。ほかは脇役に
- まとめる:関係あるものは近づけ、ないものは離す。距離が意味をつくる
- 4原則(そろえる・くりかえす・目立たせる・まとめる)がデザインの背骨