階層構造は、要素を重要度順に並べるものです。これにより、閲覧者は最初に何を見るべきか、次に何を見るべきか、そして3番目に何を見るべきかが分かります。新聞は階層構造を利用しています。大きな見出し、小さな小見出し、さらに小さな署名、そして本文です。ウェブサイトも同様です。太字のタイトル、目立つコールトゥアクションボタン、そして補助的なナビゲーションです。階層構造がないと、すべてが注目を集めようと競い合い、閲覧者はどこから見始めればよいのか分からなくなってしまいます。

デザイナーは、サイズ、色、コントラスト、位置、間隔を用いて階層構造を作り出します。サイズは最も分かりやすい要素です。大きな要素は最初に目に留まります。色とコントラストはより微妙な効果です。灰色のフォーム上の鮮やかな赤いボタンは、目を引きます。位置も重要です。欧米の読者は左上から右下へと視線を移動させるため、重要なコンテンツをその経路に沿って配置すると効果的です。余白はここで静かに効果を発揮します。要素を周囲に空白で囲むことで、線や枠線を追加することなく、その重要性を伝えることができます。

階層構造を構築するためのツール

• スケール：大きい要素から先に読み取る。
• 対照：大きな違いは注目を集める。
• 色彩：暖かく彩度の高い色合いが主流となる。
• 間隔：孤立は重要性を暗示する。

すべてが主張しすぎると、階層構造は機能しなくなります。すべての要素が太字で大きく、色鮮やかだと、何も際立ちません。抑制こそが、強調を効果的にする鍵なのです。