establish-visual-hierarchy

スキル：視覚的な階層を確立する

目的

どの UI 要素に最初、2 番目、3 番目に注目してもらうべきかを判断します。視覚的な階層は、サイズ、ウェイト、色、目立たなくする手法を使って、ユーザーが情報を処理する順序を制御します。

クイックリファレンス

戦略	使用する場面
サイズ＋ウェイト	メイン見出し、重要な CTA
色のコントラスト	セカンダリコンテンツ、補足テキスト
目立たなくする	メイン要素が目立っていない場合
ウェイトとコントラストのバランス	テキストの横にあるアイコン、境界線

実行ワークフロー

ステップ 1：メイン要素を特定する

• この画面で最も重要なことは何ですか？
• ユーザーにどのようなアクションを取ってほしいですか？
• 重要な情報は何ですか？

ステップ 2：現在の階層を評価する

各要素の視覚的な重みを確認します。

• サイズ：大きいほど注目されます
• ウェイト：太いほど重要に見えます
• 色：コントラストが高いほど目立ちます
• 余白：周囲のスペースが広いほど目立ちます

ステップ 3：複数の要素で階層を適用する

サイズだけに頼らないでください。

1. 強調にはウェイト（600～700）を使います
2. 目立たなくするには色（グレースケール）を使います
3. サイズは適切な範囲に保ちます

ステップ 4：競合する要素を目立たなくする

メイン要素が目立っていない場合：

• 周囲の要素のコントラストを下げます
• セカンダリコンテンツには柔らかな色を使います
• 不要な背景を取り除きます

判断基準

合格

• 最も重要な要素が最も強い視覚的な重みを持っている
• 階層にウェイトや色が使われており、サイズだけに頼っていない
• 周囲の要素が控えめになっている
• メイン → セカンダリ → ターシャリの明確な視線の流れがある

不合格

• フォントサイズだけに頼っている
• すべてが同じ強さで強調されている
• 重要な要素が埋もれている
• 装飾要素が競合している

よくあるパターン

パターン：マーケティングページのヒーロー

H1: 48px, weight 700, dark    ← Primary
CTA: 16px, solid brand color  ← Secondary
Body: 16px, weight 400, grey  ← Tertiary

パターン：ダッシュボードカード

Metric: 32px, weight 700      ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary

アンチパターン

アンチパターン	うまくいかない理由	修正方法
ロゴが見出しより大きい	ブランドが価値より目立つ	ロゴを小さくし、見出しを大きくします
見出しが 60px、本文が 12px	サイズの差が極端	40px とウェイトを使い、本文は 16px にします
すべてのテキストが太字	何も目立たなくなる	ウェイトに階層をつけます
セクションタイトルが大きい	コンテンツが埋もれる	タイトルをコンテンツより小さくします

参考資料

• references/size-isnt-everything.md
• references/emphasize-by-de-emphasizing.md
• references/ignore-document-hierarchy.md

例

変更前／変更後の例については、examples/visual-hierarchy/ を参照してください。