フレームワーク活用ガイドひとことで言うと#
画面上のすべての要素に「見る順番」を設計する技術。人間の目は大きいもの→小さいもの、色のあるもの→無いもの、上→下、左→右の順に動く性質がある。この視覚的な優先順位（ヒエラルキー）を意図的に設計することで、ユーザーが「何を最初に見て、次にどこを見るか」をコントロールできる。
押さえておきたい用語#
- スキャンパターン（Scan Pattern）
- ユーザーの視線の動き方の型。テキスト中心ならFパターン、LPならZパターンが代表的。
- ホワイトスペース（White Space）
- 要素の周囲にある余白。情報ゼロの領域だが、隣接要素を際立たせる強力な強調装置。
- スクイントテスト（Squint Test）
- 目を細めてデザインを見る即席の検証手法。ぼやけた状態で最初に目に入る要素＝最重要要素であるべき。
- コントラスト比（Contrast Ratio）
- 前景色と背景色の明度差の比率。WCAG基準では通常テキスト4.5:1以上が必要。
ビジュアルヒエラルキーの全体像#
こんな悩みに効く#
- ページに情報を詰め込みすぎて、どこを見ればいいかわからない
- CTAボタンがあるのにクリックされない
- 「何が重要なのかわからない」とフィードバックされる
基本の使い方#
視覚的な優先順位を操作できる要素は6つある。
| 要素 | 効果 | 強さ |
|---|---|---|
| サイズ | 大きい要素は最初に目に入る | ★★★ |
| 色・コントラスト | 高コントラストや鮮やかな色は目立つ | ★★★ |
| 余白（ホワイトスペース） | 周囲に余白がある要素は際立つ | ★★☆ |
| タイポグラフィ | 太字、異なるフォントは差別化される | ★★☆ |
| 位置 | 上部・左側は先に見られる | ★★☆ |
| 画像・アイコン | テキストより先に認知される | ★★★ |
これらを組み合わせて「絶対に見てほしいもの」を最も目立たせ、「補足情報」は控えめにする。
デザインに入る前に、情報の重要度を明確にランク付けする。
3段階のヒエラルキー:
| レベル | 役割 | 例（ECサイト商品ページ） |
|---|---|---|
| プライマリ | 最初に見るべき核心情報 | 商品名、価格、CTAボタン |
| セカンダリ | 判断を補助する情報 | 商品画像、レビュー評価、送料 |
| ターシャリ | 必要な人だけが見る詳細情報 | 商品スペック、返品ポリシー |
全部を目立たせようとすると、何も目立たない。 「すべてが重要」は「何も重要でない」と同じ。
ステークホルダーから「これも目立たせて」と言われたら、「代わりに何を下げますか？」と問い返す。 ヒエラルキーはゼロサム。
ユーザーの目線の動き方（スキャンパターン）に沿って情報を配置する。
主なスキャンパターン:
- F パターン: テキスト中心のページ。上部を横に読み、左側を縦にスキャン。ブログ・ニュースサイトに多い
- Z パターン: シンプルなランディングページ。左上→右上→左下→右下の順にZ字型に視線が動く
- スポットパターン: 視覚的に目立つ要素にジャンプ。画像やCTAボタンに視線が集まる
配置のルール:
- 最重要情報は左上〜上部中央に（最初に見られる位置）
- CTAはFの最初のラインまたはZ**の終点（右下）**に
- 補足情報は下部に（必要な人がスクロールして見る）
ビジュアルヒエラルキーが機能しているかを素早くチェックする手法。
スクイントテスト:
- 完成したデザインを画面に表示する
- 目を細めて（スクイントして）ぼんやり見る
- 最初に目に入る要素 = 最も重要な要素であるべき
- ぼやけた状態で2番目、3番目に見える要素を確認
ぼやけた状態でCTAボタンが見えなければ、ヒエラルキーが失敗している。
その他の検証方法:
- グレースケール変換: 色を消してもヒエラルキーが成立するか
- 5秒テスト: ユーザーに5秒だけ見せて「何のページ？何をすればいい？」と聞く
- ヒートマップ: 実際のユーザーの視線・クリックデータで確認
具体例#
状況: SaaSのランディングページ。月間トラフィック12,000セッションあるが、無料トライアルのCVRが**1.2%**と低い。ユーザーテストで「何のサービスかはわかるが、どこから申し込めばいいかわからない」との声。
分析（スクイントテスト）:
- 目を細めると最初に見えるのはヘッダーのロゴ（重要度低い）
- CTAボタンが背景と同系色で埋もれている
- 機能説明が5つ均等に並び、どれが売りかわからない
改善:
- ロゴを小さくし、キャッチコピーのフォントサイズを2倍に
- CTAボタンを対比色（背景が青系→ボタンはオレンジ）に変更し、周囲に余白を追加
- 機能説明を1つに絞りヒーローセクションに、残り4つはスクロール下部に
結果: CVRが1.2%から**2.8%に向上（133%改善）。CTAクリック率は3.1%から7.4%に。5秒テストの「何のサービスか」正答率は68%から94%**に。
→ 情報を追加したのではなく、既存情報に「優先順位」をつけただけ。コンテンツではなくヒエラルキーの問題だった。
状況: アパレルECの商品詳細ページ。月間PVは85,000だが、カート投入率が**3.2%**と業界平均の半分以下。ヒートマップ分析では、ユーザーの視線が画面全体に分散していた。
分析:
- 商品画像・商品名・価格・レビュー・送料・サイズ・カラー・在庫状況・関連商品がすべて同じ視覚的重みで並んでいた
- 「カートに入れる」ボタンが目立たず、ファーストビューに収まっていなかった
改善:
- プライマリ: 商品画像（大きく）、価格（太字28px）、「カートに入れる」ボタン（オレンジ、余白追加）
- セカンダリ: サイズ・カラー選択、レビュー評価（星マーク）、送料
- ターシャリ: 詳細スペック、返品ポリシー（アコーディオンで折りたたみ）
結果: カート投入率が3.2%から**6.8%に向上（113%改善）。ファーストビューでの離脱率は52%から31%**に改善。ページの情報量は同じまま。
→ 「何も削らず、優先順位を変えただけ」で購入率が2倍に。ヒエラルキーはゼロコストの改善手段。
状況: 経営層向けダッシュボード。KPI 18項目が均等に並び、毎週の経営会議で「で、今何が問題なの？」と聞かれる。意思決定に平均25分かかっていた。
分析:
- 18個のKPIカードがすべて同じサイズ・同じ色
- 前週比の変化が小さな数字でしか表示されていない
- 問題のある指標も好調な指標も同じ見た目
改善:
- プライマリ: 最重要3指標を画面上部に大きく表示（売上・利益率・顧客数）
- セカンダリ: 残り15指標を5グループに分類し、カード形式で中サイズ表示
- アラート: 前週比で異常値がある指標を赤枠＋アイコンでハイライト
- ターシャリ: 詳細データはクリックで展開
結果: 経営会議の意思決定時間が25分から8分に短縮（-68%）。「問題の指標がすぐわかる」の回答が92%。ダッシュボードのDAUは週1回から週3.4回に増加。
→ 経営層が求めていたのは「全KPIの表示」ではなく「今何が問題か」の即答。ヒエラルキーがないダッシュボードはただの数字の羅列。
やりがちな失敗パターン#
- すべてを同じ大きさ・同じ色にする — 民主的に見えるが、ユーザーにとっては「どこを見ればいいかわからない」状態。勇気を持って「主役」と「脇役」を決める
- 色だけでヒエラルキーを作る — 色覚多様性を持つユーザーには伝わらない。サイズ・余白・位置など複数の要素を重ねてヒエラルキーを作る
- 余白を恐れる — 空白があると「もったいない」と情報を詰める。しかし余白こそがヒエラルキーを作る最強のツール。余白は「無」ではなく「強調装置」
- ステークホルダーの「全部目立たせて」に従う — 全部目立たせることは物理的に不可能。「何を最も伝えたいですか？」と優先順位の議論に持ち込む
まとめ#
ビジュアルヒエラルキーは、サイズ・色・余白・タイポグラフィ・位置・画像の6要素を操作して、ユーザーの視線を意図した順序で導く技術。すべてを目立たせようとすると何も目立たないため、情報の優先順位を3段階で定義し、スキャンパターンに合わせて配置する。スクイントテストで簡単に検証でき、コンテンツを変えなくてもCVRを大幅に改善できる実践的な手法。