全部を目立たせると、何も目立たない——視覚的階層のつくり方
全部を赤字・太字・大文字にしたチラシほど、何が言いたいのか分からないものはない。声を張り上げる人ばかりの部屋では、結局どの声も届かない。デザインでこの「届く声の順番」を設計する技術が、視覚的階層（ビジュアルヒエラルキー）だ。良いレイアウトは、見る人が何も意識しないうちに「ここから読めばいい」と分かる。今日はその組み立て方を分解する。
視覚的階層とは「見る順番」の設計
視覚的階層とは、要素の重要度の差を視覚的な強弱で表し、見る人の視線を意図した順番に導くことだ。米Nielsen Norman Groupはビジュアルデザインの5原則として、スケール（相対的な大きさ）・視覚的階層・バランス・コントラスト・ゲシュタルト心理学の5つを挙げている。階層はその中心にある考え方で、残りの原則は階層をつくるための道具立てだと捉えると見通しがいい。
大事なのは、階層は「足し算」ではなく「差」で生まれるという点だ。すべてを大きくしても階層はできない。あるものを大きくし、別のものを小さくして初めて、見る順番が立ち上がる。
階層をつくる4つのつまみ
実務で回すつまみは、ざっくり4つに集約できる。
- サイズ（ジャンプ率）。 見出しと本文の大きさの比をジャンプ率と呼ぶ。差を大きく取るほど主張は強く、ダイナミックになる。最初に目に入るのは、たいてい一番大きい要素だ。
- コントラスト。 明度・彩度の差。背景から浮く色、太いウェイトは「重要」と読まれる。逆に淡いグレーは「補足」として後回しに読まれる。
- 色。 暖色や鮮やかな色は前に出て、寒色やくすんだ色は引っ込む。アクセントカラーを1色に絞ると、その色が「ここを見て」の合図になる。
- 余白（間隔）。 近いもの同士はひとまとまりに、離れたものは別グループに見える（ゲシュタルトの近接の働き）。余白は「何も無い場所」ではなく、関係性を語る積極的な要素だ。
人は「F」や「Z」で拾い読みする
階層を設計するうえで、人がそもそも画面を「読んでいない」事実は外せない。NN/gのアイトラッキング研究は、テキストの多いページで視線がFの字のパターン——上部を横に、次に少し下を横に、そして左端を縦に——をたどりやすいことを示した。つまり、左上は黄金の一等地で、右下ほど読まれにくい。
だから重要な情報（見出し・要点・CTA）は、視線が最初に通る左上から中央上部に置くのが理にかなう。ランディングページが「大きな見出し → 短い要点 → ボタン」を上から縦に積むのは、視線の流れと階層を一致させているからだ。
強調は引き算
最後に、現場で一番効く戒めを。強調は足すほど弱くなる。 太字だらけの文章で太字が意味を失うように、目立たせる要素を増やすほど一つひとつの主張は薄まる。「ここだけは見てほしい」を1つ決め、それ以外を意識的に引っ込める。階層づくりは、何を目立たせるかと同じくらい、何を目立たせないかを決める作業だ。余白を恐れず、声は一番伝えたい一言にだけ張る。それだけでレイアウトは静かに、しかし正確に語り出す。
お役立ち情報
- 📄 エンゲージメント率を高める！ビジュアルヒエラルキー3つのコツ（ferret）
- サイズ・色・配置で視線を導く考え方を、Webデザインの具体例とともに日本語で解説した入門記事。
- 📄 Visual Hierarchy（Interaction Design Foundation・英語）
- 視覚的階層の定義と原則を体系的にまとめた、デザイン教育機関IxDFのトピック解説。
- 📄 視覚的階層（Visual Hierarchy）— UX心理用語（松下村塾）
- UX心理の観点から視覚的階層の意味を短くまとめた日本語の用語解説。