visual-emphasis-and-hierarchy

視覚的な強調と階層

どの画面にも、最も重要な要素があります。視覚的な階層とは、ユーザーがすべてを読んで自分で判断しなくても、最初にその要素に目が向くようにするデザイン上の工夫です。

強調には、サイズ、色、太さ、コントラスト、配置を用います。これらが機能するのは、相対的な要素だからです。周囲の要素と異なるために、重要に見えます。

階層の段階

すべてのアクショングループとコンテンツ領域に、明確な階層を設けます。

レベル	役割	視覚的な処理
プライマリ	ユーザーが最も実行する可能性の高いアクション	塗りつぶし、ブランドカラー、グループ内で最も大きなボタン
セカンダリ	中程度の重要度を持つ別のアクション	アウトラインまたはゴースト、ニュートラルカラー、同じか少し小さいサイズ
ターシャリ	あまり必要でない、破壊的、または優先度の低いアクション	テキストリンクまたは控えめなゴースト、小さめで目立たない表示
無効	利用できない状態	コントラストを低くし、ホバー状態を設けない。「まだ利用できない」ことを示します

1 つのビューまたは論理的なセクションにつき、プライマリアクションは最大 1 つにします。塗りつぶしボタンを 2 つ横に並べると、互いの効果が打ち消されます。どちらも同じくらい重要に見えるため、ユーザーを導けません。

強調としてのサイズ

大きなボタン、見出し、要素は、小さなものより先に目を引きます。サイズは意図的に使い分けます。

• プライマリ CTA は、グループ内で最も大きなインタラクティブ要素にします
• ページ見出しはセクション見出しより大きく、セクション見出しはラベルより大きくします
• おすすめであることを示すため、注目商品、プラン、選択肢を他のものより実際に大きくできます

サイズの違いは、はっきりと認識できる必要があります。2px の違いは階層ではなく、統一感のなさとして受け取られます。文字にはモジュラースケールを使い、コンポーネントには意味のあるサイズ差を設けます。

強調としての色

色は最も強力な強調手段であり、最も使いすぎやすい手段でもあります。

• プライマリアクションには 1 色のブランドカラーを使い、そのシグナルを保てるよう使用を控えめにします
• プライマリカラーを際立たせるため、セカンダリおよびターシャリアクションにはニュートラルカラー（グレー、アウトライン）を使います
• ステータスカラー（赤、オレンジ、緑）をプライマリ CTA に使ってはいけません。独自の意味を持つ色だからです

大きな領域へのブランドカラーの使用

ブランドのプライマリカラーは、ヒーローセクション、機能バナー、セクション区切りなど、大きな背景領域に適しています。これは、インタラクティブ要素にブランドカラーを使うのとは異なります。

ルールは、ビューごとに役割を 1 つ選び、それに徹することです。

• ブランドカラーを大きな領域に使う場合 → そのセクションのボタンやリンクには、ブランドカラーを重ねず、白またはコントラストの高いニュートラルカラーを使います
• インタラクティブ要素にブランドカラーを使う場合 → 色のシグナルを保つため、背景はニュートラルにします

ブランドカラーを大胆な背景として使うと、アイデンティティや活力を伝えます。背景とボタンの両方に同時に使うと、シグナルが失われ、すべてが混ざり合ってしまいます。

焦点としてのコントラストと余白

強調は、何を加えるか（色、サイズ）だけでなく、何を取り除くか（気を散らす要素）にも関わります。

「コントラスト＋余白」のルール： 強力な焦点を作るには、コントラストの高い要素（または大胆なブランドカラー）と、その周囲のゆとりある**余白（ネガティブスペース）**を組み合わせます。

• 分離： 余白はフレームの役割を果たし、プライマリアクションやメッセージを際立たせます。
• 視覚的な静けさ： 近くにある競合要素を取り除くことで、ユーザーの目が自然に向かう場所を 1 つにできます。
• スケール： 大きく何もない領域にある小さな高コントラストのボタンは、混み合ったレイアウトにある巨大なボタンよりも、強く目を引くことがあります。

余白を意図的に使い、ユーザーの注意を主要な目標へと「導き」ます。

✓ Dark brand-colour hero section + white CTA button
✓ White page + brand-colour primary button
✗ Brand-colour hero section + brand-colour button on top of it

ウェイトとコントラスト

文字のウェイトはテキスト内の重要度を伝え、ざっと目を通す際の読みやすさを高めます。

• 要点を伝える2〜5語のまとまりを太字にします。 見出しの次に目に入るのが太字です。見出しと太字だけを拾い読みした読者が、単語そのものではなく主張を把握できるようにします。
• 見出しとラベルを太字にします。 ウェイトを使って、情報そのものと情報の構造を区別します。
• 補足内容は標準ウェイトにします。 説明や二次的な情報は標準ウェイトにして、視線を休める余白を作ります。
• メタデータには薄い色や控えめな色を使います。 タイムスタンプ、二次ラベル、細かい注記などはコントラストを低くします。

データ量の多いUI（テーブル、ダッシュボード）では、主要な指標または行を特定する名前を太字にします。データをすばやく見つけられるよう、視線が太字の目印から次の目印へ移動できるようにします。

まとまりの始まりと終わり

単語ひとつだけの太字は、要点ではなく強調された用語にすぎません。ページから抜き出した製品名や専門用語も同様です。

良い例	「Figmaが今やボトルネックです。」／「マークアップのないスクリーンショットは、余白をでっち上げます」
悪い例	単独の単語、専門用語、主張を伝えない一般的な表現

• まとまりを「the」「a」「an」から始めてはいけません。冠詞を強調しても意味がありません。
• まとまりを中身のない語で終えてはいけません。最後の語に視線が止まるため、要点となる語でなければなりません。
• 断片ではなく主張を太字にします。太字の部分だけで文として読めない場合は、範囲を調整するか太字を外します。

単語ひとつだけを太字にするのは、バッジ、チップ、テーブルのラベル、統計タイル内の指標など、それ自体がUI要素である場合に限ります。本文では常に不適切です。単語ひとつで主張を表すことはできないためです。

強調は控えめにします。目安はセクションごとに1箇所で、段落内では2箇所にしません。ページ全体が太字だらけでは強調にならず、ノイズにしかなりません。

これはUIだけでなく文章にも当てはまります。記事、ランディングページのコピー、エージェントが生成するあらゆる長文のMarkdownが対象です。

画像上のテキスト

写真や複雑なパターンの上に直接配置すると、テキストの読みやすさが損なわれることがよくあります。階層と信頼感を保つために、次の点に注意します。

• 控えめなテキストシャドウ： ぼかしを強くした柔らかいテキストシャドウ（例：0 2px 4px rgba(0,0,0,0.2)）を使い、背景から文字を浮き立たせます。影は目立つのではなく、感じられる程度にします。影がはっきり見えるなら強すぎます。
• 画像の色味とグラデーション： 画像の上に控えめな暗い色味や線形グラデーション（例：透明から黒40%）を重ね、テキストの背後のコントラストを高めます。
• 背景を選ぶ： ストック映像を選ぶ際は、テキストを自然に配置できる「ネガティブスペース」や単色の領域（例：澄んだ空、無地の壁）がある画像を探します。
• スクリーン： テキストが配置される領域に、半透明のグラデーションオーバーレイである「スクリーン」を使います。画像の鮮やかさを保ちながら、テキストを読みやすくできます。

位置による強調

左から右に読む文化圏のユーザーは、まず左上から視線を動かします。配置によって階層を補強できます。

• 主要なアクション：フォームやダイアログの右下（読み進める流れの自然な終点）、またはページヘッダーの右上
• 最も重要な内容：ページの上部、スクロールせずに見える位置
• ランディングページでは、ヒーローセクションにひとつの価値提案を大きく、余白を取って配置します。その下に続く構成については、[[layout-paradigms-and-consistency]]のプロダクトナラティブフレームワークを参照してください
• 警告や重大なステータス：該当セクションの上部に配置し、下部に埋もれさせません
• 破壊的なアクション（削除、除去）：作成的なアクションとは視覚的に分け、多くの場合はアクショングループの末尾に配置します

データ量の多いビューでは、最も重要な情報を際立たせる

ビューにデータが大量にある場合、すべてを同じ強さで並べないでください。重要な情報を見つける作業をユーザーに押しつけることになります。その代わりに、この利用状況における唯一の重要な数値または事実を決め、大きく、すぐに見つけられるようにします。それ以外は、補助的な下位の階層に置きます。

• ユーザーがこの画面で何を知りたい、または何をしたいのかを考え、その情報や操作をサイズ、太さ、配置で際立たせます（大きな見出しの数値、目立つステータス、明確な主要アクションなど）。
• 重要度の低いデータは、削除または非表示にしてもかまいません。折りたたむ、詳細ビューや「もっと見る」の背後に移す、あるいは完全に削除します（これは[[information-architecture]]にある「最初からすべて見せない」という判断や、[[ui-density]]での密度の選択にも関係します）。
• **格下げまたは非表示にする内容を検証します。**何が「重要」かはユーザーについての仮説であり、当然に決まるものではありません。できれば実際のエンドユーザーでテストしてください。UX テストができない場合も、リリース前に少なくともビジネスまたはドメインの責任者に優先順位を確認します。ここでの判断を誤ると、必要としていた唯一の情報が隠れてしまいます。

ビューごとに主要アクションは1つ

階層の設計で最もよくある間違いは、すべてを同じ強さで目立たせることです。すべてのボタンが塗りつぶされ、すべての見出しが太字で、すべてのカードが強調されていると、ユーザーはどこから始めればよいのか分かりません。

**ルール：**どのビューでも、「ほとんどのユーザーにとって、次に行う可能性が最も高いアクションは何か」と考えます。その1つを視覚的に際立たせ、それ以外は控えめにします。

**ワークフローに複数のステップがある場合は、各ステップに主要アクションを1つ設けます。**検索、その検索結果に対する操作、保存は3つのステップです。それぞれに、読み進める順に塗りつぶしボタンを1つずつ設けます。ヘッダーのユーティリティや行ごとのアクションは、二次的な扱いにします。例外は、編集中の行など、アクティブな行が1つだけの場合です。その行の確定操作が、そのステップの主要アクションになります。

**優先度はビューごとに決まり、絶対的なものではありません。**同じアクションでも、専用ページでは主要アクションになり、より重要なアクションの隣では二次的なアクションになります。その時々の状況に応じて優先順位を付け直します。「主要／二次／三次」は作り手側の呼び方であり、ユーザーに見えるのは塗りつぶし、色、サイズ、配置だけです。三次の階層が必要なら、たいていビューが複雑すぎます。まずはシンプルにしましょう。

カーソル

クリックまたは操作できる要素にはすべて、cursor: pointerを使う必要があります。ユーザーは、要素が操作可能であることを確かめるためにカーソルの変化を頼りにしています。これがないと、ボタンやリンクが壊れている、または反応しないように感じられます。

button, a, [role="button"], [onclick], label { cursor: pointer; }

テキスト入力欄以外の操作可能な要素に、デフォルトのcursor: autoを使わないでください。例外として、テキスト入力欄ではcursor: textが適切です。

判定の下のキャプションには、同義語ではなく数量を加える

判定を表す言葉の下の行では、その言葉に含まれない情報を伝えます。どれくらいか、いくつか、いつからか、といった情報です。「安定」の下に「変化なし」と書くのは、同じ事実を二度伝えているだけで、カードへの信頼感を損ないます。付け加える情報がない場合は、その行を空にして、行のスペースを残します。そうすれば高さが変わりません。

レビューチェックリスト

• 各セクションの主要（塗りつぶし、ブランドカラー）ボタンは最大1つですか？
• 複数のステップがある画面では、各ステップに主要アクションがちょうど1つあり、行ごとやヘッダーのアクションは控えめにされていますか？
• 主要アクションの周囲には、周囲のコンテンツより目立たせるのに十分な余白がありますか？
• 二次および三次アクションは、主要アクションより視覚的に控えめですか？
• 最も重要なコンテンツは、最も上に、または最も大きく配置されていますか？
• 階層ごとのサイズの違いは、わずか1～2pxではなく、はっきりと認識できますか？
• ブランドカラーは、強調の意味を保てる程度に控えめに使われていますか？
• 破壊的なアクションは、建設的なアクションと視覚的に区別され、離して配置されていますか？
• すべてのボタン、リンク、操作可能な要素にcursor: pointerが使われていますか？
• 太字の箇所はそれだけで主張として読め、2～5語で、段落ごとに最大1つですか？
• 画像に重ねたテキストは、（シャドウ、色合い、適切な画像の選択などによって）簡単に読めますか？
• 判定の下のキャプションはすべて数値や詳細を加えていますか？そうでない場合は空にしつつ、その行のスペースを残していますか？

よくあるアンチパターン

アンチパターン	問題	解決策
塗りつぶしのプライマリボタンを2つ以上並べる	どちらも同じくらい重要に見え、優先順位が伝わりません	プライマリボタンを1つにし、もう1つはセカンダリ（アウトライン）にします
ブランドカラーを背景、ヘッダー、ボタンに使用する	色による強調の意図が失われます	ブランドカラーの用途を1つに限定します
データ量の多い画面で、すべてのテキストの太さが同じ	視線を誘導する起点がありません	グループごとに主要な数値やラベルを太字にします
「キャンセル」と「確定」ボタンのサイズと色が同じ	ユーザーは区別するために読み込む必要があります	プライマリは塗りつぶし、キャンセルはゴーストボタンまたはテキストリンクにします
明るい画像や情報量の多い画像の上に白いテキストを配置する	テキストが読めない、または「ちらついて」見えます	控えめなテキストシャドウや画像の色調補正を加えるか、単色部分のある画像を選びます
重要な警告をスクロールしないと見えない位置に配置する	ユーザーが見落とします	影響を受けるセクションの上部に重要なステータスを表示します
操作時にボタンのサイズが変わったり、位置がずれたりする	不安定で作り込みが不十分な印象になります（「ふにゃふにゃ」したUI）	レイアウトをしっかり保ち、色と内部フィードバックのみを使用します