ビジュアルヒエラルキー

解説

ビジュアルヒエラルキーは、文字の大きさ、太さ、色、余白の取り方を使って、どこから読むべきかを目に伝える設計です。見出し構造がHTML上の階層であるのに対し、こちらは見た目の階層を指します。FAQやヘルプ記事を開いた人は、上から順に読むとは限りません。画面をざっと見渡して目当ての箇所を探すため、必要な情報がその視線の流れの中で浮き上がるかどうかが、お客様ご自身で解決できるかどうかを分けます。

強調を増やすほど強調の意味がなくなる

太字や色付きは、本当に見逃されては困る部分に限定するのが原則です。1画面のなかで強調が何か所にもなると、どこも同じ重さに見えてしまいます。

手順の記事では番号と余白で順番を示し、実機でも崩れていないか確かめる

操作手順を説明する記事では、番号付きリストと段落の間隔がそのまま読む順番の指示になります。手順の途中に注意書きを同じ大きさで挟むと、どこまでが一つの手順なのか分からなくなります。注意書きは枠や背景色で区切るか、該当する手順の直後に短く置いてください。スマートフォンでは表示幅が狭く、パソコンの画面で組んだ階層がそのまま伝わるとは限らないため、公開前に実機でも確かめます。