解説
ビジュアルヒエラルキーは、重要度の高い要素から順に視線が向かうように組み立てたページの構成を指します。日本語では「視覚的階層」とも呼ばれます。見出し構造がHTML上の階層であるのに対し、ビジュアルヒエラルキーは見た目の階層を指します。
FAQやヘルプ記事を開いた人は、上から順に読むとは限りません。画面をざっと見渡して目当ての箇所を探すため、必要な情報が視線の流れの中で浮き上がるかどうかが、お客様ご自身で解決できるかどうかを分けます。
種類
ビジュアルヒエラルキーを作る主な要素は、次の三つです。
- 色とコントラスト：明度や彩度の差が大きい要素ほど目立つ
- 大きさ：要素が大きいほど目立ち、重要度の目印になる
- グループ化：近くに置く、同じ枠や背景でまとめるといった方法で、要素のまとまりを示す
このほか、文字の太さや余白の取り方も、読む順番を伝える手段になります。
実務での使われ方
操作手順を説明する記事では、番号付きリストと段落の間隔が、そのまま読む順番の指示になります。たとえば、手順の途中に注意書きを同じ大きさで挟むと、どこまでが一つの手順なのか分からなくなります。そのため、注意書きは枠や背景色で区切るか、該当する手順の直後に短く置いてください。
注意点
強調を増やすほど、強調の意味はなくなります。1画面のなかで強調が何か所にもなると、どこも同じ重さに見えてしまうためです。したがって、太字や色付きは、本当に見逃されては困る部分に限定するのが原則です。
さらに、スマートフォンでは表示幅が狭く、パソコンの画面で組んだ階層がそのまま伝わるとは限りません。公開前に実機でも表示を確かめます。
該当する用語がありません