デザインにおけるVisual Hierarchy：人の視線をコントロールする方法

あなたのデザインには、人に「どこを見ればいいか」を伝えるための3秒しかない。すべてが同じように注目を叫んでいれば、何も読まれず、何もクリックされず、ユーザーは去る。これはデザインの意見ではない。視覚の仕組みがそうなっているのだ。

Visual hierarchyは、その3秒の窓をコントロールするシステムだ。実際に人を誘導できるものの作り方を解説する。

Visual Hierarchyの本質

Visual hierarchyとは、目が意図した順序で情報を処理するよう要素を配置することだ。ランダムでもなく、一度にすべてでもなく、順を追って「これ、次にこれ、そしてこれ」という形で。

脳はページを本のように上から下へ読まない。シグナルを探してスキャンする。サイズ、コントラスト、カラー、スペーシング、ポジション、これらすべてが何が最も重要かを目に伝える。うまく構築されたhierarchyは、最も重要な要素を見逃せないものにし、最も重要でない要素を無視しやすいものにする。

5つのコントロール

あらゆるvisual hierarchyは5つのレバーで構築される。5つ全部を一度に使う必要はない。特定のレイアウトに合った組み合わせが必要なだけだ。

1. サイズ

大きい要素が最初に見られる。これは最も明白なレバーであり、最も信頼できるものだ。48pxのヘッドラインは、14pxのパラグラフより常に先に注目を引く。hierarchyを生み出すのは絶対的な数値ではなく、サイズ間の比率だ。

よくある失敗：すべてを大きくすること。ヘッドライン、サブヘッド、本文、CTAがすべて大きすぎると、hierarchyは平坦になり、何もリードしなくなる。

2. コントラスト

高コントラストは目を引く。明るいページ上の暗い要素、くすんだ背景上の明るいボタン、グレースケールレイアウト上のカラーバッジ。コントラストは、サイズを変えずに一つの要素を際立たせる最速の方法だ。

逆も然り。低コントラストは要素を背景に沈める。メタデータ、タイムスタンプ、セカンダリラベルは、プライマリコンテンツと競合しないよう低コントラストにすべきだ。

3. カラー

カラーは感情的な重みを生み出す。グレーの海の中の単一の赤いバッジは常に注目を引く。赤が特別だからではなく、その文脈の中でクロマティックなエネルギーを持つ唯一の要素だからだ。各カラーに定義された役割がある場合、color paletteはhierarchyに機能する：CTAにはプライマリ、本文にはニュートラル、メタデータにはディム。

4. スペーシング

White spaceは空白ではない。シグナルだ。余裕あるスペースで囲まれた要素は重要に見える。スペースがそれを孤立させ、呼吸する余地を与えるからだ。ぎゅうぎゅうに詰め込まれた要素はセカンダリに見える。何も際立たないからだ。

Webデザインで最も一般的なhierarchyの失敗は、セクション間のスペーシングが不十分なことだ。すべてのセクションが次のセクションに溶け込むと、目はどこでひとつのアイデアが終わり別のアイデアが始まるかを判断できなくなる。

5. ポジション

LTR言語では、目は自然に左上から始まり、そこから予測可能なパターンをたどる。最も重要な要素を自然な開始位置に配置することで、他のレバーが適用される前から優位性が生まれる。

ポジション単体は弱い。左上の小さく低コントラストな要素は、中央の大きく高コントラストな要素に依然として負ける。ポジションは他の4つのコントロールを強化するときに最もよく機能する。

細目テスト

hierarchyが機能しているか確認する最速の方法がある。デザインに目を細めて、すべてがぼやけるまで見つめよ。見え続ける要素こそ、あなたのhierarchyが優先しているものだ。

目を細めたとき最初に見えるのがCTA、ヘッドライン、またはヒーロー画像なら、hierarchyは機能している。最初に見えるのがデコラティブなサイドバーやナビゲーションバーなら、機能していない。

これは5秒で完了し、ユーザーテスト前にhierarchyの問題の80%を発見する。

よくあるHierarchyの失敗

すべてがボールド。 すべてのパラグラフがボールドテキストで始まれば、何も強調されない。ボールドは希少なときに機能する。

Focal pointが多すぎる。 同じサイズで同じ色鮮やかな要素が3つあるページにhierarchyはない。3つの競合があるだけだ。ビューポートごとに1つの勝者を選べ。

モバイルを無視する。 1440pxスクリーン用に設計されたhierarchyは、375pxの電話でしばしば崩壊する。空間的な関係が完全に変わるため、5つのコントロールはブレークポイントごとに再評価する必要がある。

コントラストのないカラー。 カラフルな背景上のカラーボタンは消える。hierarchyが機能するのは、focal要素とその周囲のカラーのcontrast ratioが分離を生み出すのに十分なほど高い場合だけだ。

実践でHierarchyを構築する

あらゆるページレイアウトのための具体的なフレームワークがある：

1. 一つのことを決める。 このページで最も重要な単一のアクションやメッセージは何か？その要素が最大のサイズ、最高のコントラスト、最良のポジションを得る。
2. それ以外をランク付けする。 ページ上のすべての要素の番号付きリストを、重要度順に作成する。ランキングが各要素が得るレバーを決定する。
3. ティアごとに少なくとも2つのコントロールを適用する。 トップティアの要素は大きなサイズ＋高コントラストを得る。セカンドティアの要素は中程度のサイズ＋カラーを得る。サードティアの要素は小さなサイズ＋低コントラストを得る。
4. 壊れるまで削除する。 hierarchyが損なわれるまで要素を削除する。物事が崩れる前に最後に削除した要素は、おそらく不要だった。

このフレームワークは、ランディングページ、ダッシュボード、記事、メール、そしてユーザーがどこを最初に見ればいいかを知る必要があるあらゆるレイアウトに機能する。

よくある質問

デザインにおけるvisual hierarchyとは？

Visual hierarchyとは、重要度順にデザイン要素を配置することだ。サイズ、コントラスト、カラー、スペーシング、ポジションを使って、目がページ上の情報を処理する順序をコントロールする。

なぜvisual hierarchyが重要なのか？

ユーザーは読まない。スキャンする。明確なhierarchyがなければ、すべての要素が等しく注目を競い合い、ユーザーは圧倒されて去る。Hierarchyは要素の集合をガイドされた体験に変える。

Visual hierarchyをどうテストするか？

細目テストが最速の方法だ。デザインをぼかしたり目を細めたりして、どの要素が見え続けるかを確認する。それがあなたのhierarchyが優先する要素だ。間違った要素が支配しているなら、正しいものがリードするまでサイズ、コントラスト、スペーシングを調整する。