ビジュアルヒエラルキー（visual hierarchy、視覚的階層）とは、画面の要素を、重要なものから順に目に入るように見せることである。利用者は、どこから見て、どこに注目すればよいかを、説明されなくても分かる。
たとえば、ニュースサイトで、見出しは大きく太い文字、本文は小さめの文字、日付や記者名はさらに控えめな灰色の文字で置かれているとする。利用者の目は、見出し、本文、日付の順に動く。この「目に入る順番」を、見た目で設計することが、ビジュアルヒエラルキーである。
反対に、見出しも本文も日付も、同じ大きさ、同じ色で並んでいたら、どこから読めばよいか分からず、利用者は全体を読み比べることになる。
何で階層をつくるのか
ニールセン・ノーマン・グループ（NN/g）の記事「Visual Hierarchy in UX: Definition」は、主な手段を3つ挙げている。
- 色とコントラスト： 背景や周りとの、明るさや鮮やかさの差が、強調をつくる。白い画面で、1つだけ濃い青のボタンがあれば、目に入る。色そのものより、周りとの差が大切である。太字や下線も、同じ働きをする。
- 大きさ： 大きい要素ほど、目を引く。ページの見出しを、本文の2倍の大きさにすれば、見出しが先に目に入る。
- まとまり（余白と囲み）： 近くに置かれた要素や、余白で区切られた要素は、ひとまとまりに見える（近接）。見出しを、直後の文章に近づけ、前の文章から離すと、「この見出しは、この文章のもの」と伝わる。枠や背景で囲むと、まとまりがはっきりする。
階層がうまくいっていない例
図1は、同じ商品ページを、2通りに作った例である。左は、すべての要素に色や枠を付けて、強調している。右は、強調する要素を、商品名、価格、「カートに入れる」ボタンの3つに絞っている。
左のような画面で起きやすい失敗を、次に挙げる。
- 全部が目立つ： 赤い文字、太字、大きな文字、バナーが並んでいて、どれが一番大事か分からない。強調が多いほど、1つ1つの強調は効かなくなる。
- 主な操作が目立たない： 「申し込む」ボタンが、ほかのリンクと同じ見た目で、埋もれている。
- 色だけで区別している： 「必須項目は赤い文字」とだけしている。色の違いを見分けにくい人には、どれが必須か伝わらない。「必須」と文字でも書く。
- まとまりが崩れている： 見出しが、前の項目の文章に近く、次の文章から離れている。どの内容の見出しか、分からなくなる。
階層を確かめる方法
NN/g は、「スクイントテスト（squint test）」を紹介している。squint は「目を細めて見る」という意味で、画面を目を細めて見るテストである。やり方は簡単である。
- 1. 画面を、目を細めて見る。またはぼかして見る。
- 2. 細かい文字が読めなくなったあとで、何が目立って見えるかを確かめる。
- 3. それが、一番見てほしいものと同じなら、階層は意図どおりである。違うなら、直す。
完成後には、実際の利用者に画面を見てもらい、意図どおりに読めているかを確かめることも勧められている。
また、強調の数は絞るほうがよいとされる。NN/g は、複雑な画面でも、コントラストの種類は3つまで、文字の大きさは3種類まで、大きく見せる要素は2つまで、といった目安を挙げている。ただし、これは目安であり、画面の目的によって調整する。
語源・位置づけ
「階層（ヒエラルキー）」は、もともと、順位づけられた構造を指す言葉である。デザインの分野では、情報の重要度を見た目で示す考え方として使われている。NN/g の記事は、この考え方について、デイビスとハント（2017年）、ラプトン（2008年）の書籍を参考文献として挙げている。この項の内容は、NN/g の記事に基づく。
