- デザインの中で情報の重要度に応じてサイズ・色・コントラスト・余白・位置などを使って視覚的な優先順位を設けユーザーの視線を重要な情報へと自然に誘導する設計手法のこと
- ユーザーはデザインを全て均等に見るのではなく視覚的に目立つ要素（大きい・明るい・周囲と異なる）に最初に目がいくという視覚の特性を活用して読まれる順序とアクションを設計する
- Webデザイン・広告・LPのCTA（コールトゥアクション）の配置・アプリUIの情報設計など、ビジュアルヒエラルキーの巧拙がユーザーの行動率（コンバージョン率）を大きく左右する
【深掘り】これだけ知ってればOK！
視線誘導のパターンとしてFパターンとZパターンがある。Fパターン：テキスト中心のページでユーザーは上部を横に読み、その後左側を縦に読む「F字型」の視線移動をする。Zパターン：画像・ビジュアル中心のページでユーザーは左上→右上→左下→右下の「Z字型」に視線が動く。LPや広告のデザインはZパターンを意識してCTAを右下に配置することが多い。
ビジュアルヒエラルキーが弱いデザインの典型的な問題として「全てが同じ重さで見える」状態がある。フォントサイズが見出しも本文も大して変わらない・ボタンが背景に溶け込んでいる・余白が少なく情報が詰め込まれているといった状態では、ユーザーはどこを見ればいいか分からず離脱する。
Webアクセシビリティの観点からもビジュアルヒエラルキーは重要だ。色だけに頼ったヒエラルキー（赤=重要・緑=安全など）は色覚多様性を持つユーザーに伝わらない。サイズ・太さ・アイコン・テキストラベルを組み合わせてヒエラルキーを伝えることがアクセシブルなデザインの基本だ。
よくある誤解
ビジュアルヒエラルキーは目立てばいいと思っている
全ての要素を目立たせると逆に何も目立たなくなる。ビジュアルヒエラルキーは「何を最初に見てほしいか・次に何を見てほしいか」という優先順位の設計だ。1ページには最も重要な要素（一次アクション）が1つだけあるべきで、それに向けて視線を誘導する設計が重要だ。
余白はデザインの無駄だと思っている
余白（ホワイトスペース）はデザインの無駄ではなく重要な設計要素だ。適切な余白は重要な要素を孤立させて目立たせる・グループ間の区切りを明確にする・読みやすさを高めるという3つの機能を持つ。Appleのデザインが大きな余白を多用するのはこのためだ。
会話での使われ方
CTAボタンの色がページ内の他のボタンと同じ青なので目立っていません。CTAだけオレンジに変えて、そのオレンジは他の要素では使わないようにしましょう。
UXデザイナーがLPのCTAボタンのビジュアルヒエラルキーが弱い問題を改善提案している場面。
このLPは情報が詰め込まれすぎて見出しと本文のサイズ差が小さいです。見出しを2倍以上にして余白を増やすとヒエラルキーが明確になりますよ。
Webデザイナーがビジュアルヒエラルキーの問題点を指摘してサイズと余白の改善を提案している場面。
このフォームのエラーメッセージが赤文字だけで色覚多様性の方には伝わりません。アイコンとテキストラベルも組み合わせてください。
アクセシビリティの専門家がビジュアルヒエラルキーのアクセシビリティ問題を指摘している場面。
【まとめ】3つのポイント
- 情報の重要度に応じた視覚的優先順位でユーザーの視線を誘導する：サイズ・色・コントラスト・余白・位置という視覚要素を使って何を最初に見てほしいかという優先順位を設計することがビジュアルヒエラルキーの本質だ
- CTAは色の希少性・余白・サイズで最もハイヒエラルキーな要素にする：ページ上で最も重要なCTAボタンには他の要素に使わない強調色を使い周囲に余白を設けて孤立させることで視線が自然にCTAに向かう設計を実現できる
- 色だけに頼らずサイズ・太さ・アイコンを組み合わせてアクセシブルに：色覚多様性を持つユーザーにも伝わるヒエラルキーを作るためにサイズ・フォントウェイト・アイコン・テキストラベルを組み合わせることがアクセシブルなデザインの基本だ
よくある質問
-
Qビジュアルヒエラルキーを高める最も効果的な方法は何ですか？
-
A
サイズの差を大きくすること（見出しと本文のサイズ比を2倍以上にするなど）と余白を増やすことが最もシンプルで効果的です。
-
QFパターンの視線誘導とZパターンの視線誘導はどう使い分けますか？
-
A
テキスト中心のページ（ブログ・記事）ではFパターン、ビジュアル中心のページ（LP・広告・トップページ）ではZパターンを意識したデザインが効果的です。
-
Q余白をどのくらい取れば適切ですか？
-
A
明確な基準はありませんが、要素間の余白をコンテンツ自体のサイズの50〜100%程度確保することを目安にするデザイナーが多いです。スマートフォンではタッチターゲットの間隔として最低8dp以上の余白が推奨されます。
-
QビジュアルヒエラルキーはSEOに影響しますか？
-
A
直接のSEOランキング要因ではありませんが、明確なヒエラルキーを持つデザインはユーザーの滞在時間向上・直帰率低下・コンバージョン率向上につながり、これらがSEOのユーザーシグナルとして間接的に影響する可能性があります。
【出典】参考URL
https://www.nngroup.com/articles/visual-hierarchy-ux/ ：NN/gによるビジュアルヒエラルキーの解説
https://www.smashingmagazine.com/2020/08/visual-hierarchy-tips/ ：Smashing MagazineのビジュアルヒエラルキーTips
コメント