hierarchy

インターフェースが重要度を即座に伝えられるよう、視覚的な階層を評価して改善してください。ユーザーに重要度を自力で読み解かせてはいけません。

主な問題が優先順位と強調にある場合に使用してください。余白が場当たり的で、グループ分けが弱く、レイアウトのリズムが単調なことが大きな問題であれば、arrange を使用してください。

必須の準備

frontend-design を読み、「コンテキスト収集プロトコル」に従ってください。利用可能なコンテキストを再利用し、重要な情報が不足している場合にのみ質問してください。

---

階層の問題を評価する

インターフェースで優先順位が明確に示されていない箇所を分析してください。

1. グレースケールテストを実施する：

   • 色がなくなっても、画面の意味は伝わりますか？
   • 約2秒以内に、主要要素、二次要素、三次要素を見分けられますか？

2. 要素同士の競合を確認する：

   • 複数のカード、タイトル、ボタンが同じくらい目立っていませんか？
   • セクションタイトルが、説明対象のコンテンツより目立っていませんか？
   • 補足情報が主要タスクより強く主張していませんか？
   • 重厚なアイコン、太字のラベル、濃い色のメタデータが、本来支えるべきコンテンツより目立っていませんか？

3. 一貫性と予測可能性を確認する：

   • アクションの色やボタンのスタイルは、フロー全体で同じ意味を保っていますか？
   • 成功メッセージ、エラーメッセージ、ヘルプメッセージは、似たもの同士で並行した構成になっていますか？
   • アイコンのスタイル、タイポグラフィの役割、見慣れたレイアウト領域には、ユーザーが学んだことを別の場所でも応用できるだけの一貫性がありますか？

4. アクションの優先順位を確認する：

   • 主要アクションがひと目で分かりますか？
   • 二次アクションは明確でありながら、控えめですか？
   • 三次アクションは、競合せずに見つけられますか？

5. ラベルと値を確認する：

   • 値だけで意味が分かる場合でも、すべてを厳格な label: value 形式にしていませんか？
   • ラベルを値と統合したり、目立たなくしたりすべきですか？

6. 視覚的な調和を確認する：

   • 明確な焦点がありますか？
   • ページ全体で、同じバランスの取り方（たとえば、セクションごとに繰り返される左右分割）に頼りすぎていませんか？
   • テキストと画像のバランスは取れていますか。それとも、どちらか一方が意図せず強く目立っていませんか？

7. 余白、近接性、配置を確認する：

   • グループ内の間隔は、グループ間の間隔より狭くなっていますか？
   • ラベル、入力欄、カード、ナビゲーション項目は、関連性が伝わる程度にまとまっていますか？
   • 共通の配置線やコンテナー幅によって、画面をすっきりと見渡せますか？
   • コンテンツの密度に適した視線の流れを、ページがサポートしていますか（たとえば、情報量が多い場合のF型スキャンや、情報量が少ない場合の誘導されたZ型スキャンなど）？

コードベースから判断できない点があれば、推測できない内容をユーザーに直接確認してください。

重要：階層の問題は、見た目だけの問題ではありません。ユーザーが何を重視すべきか分からないなら、デザインはコミュニケーションに失敗しています。

階層の修正計画

グレースケールでのテスト、ラベルと値の扱い、アクションの階層、目立たせないための手法については、階層チェックリストを参照してください。 タイトルの抑制、ラベルと値の構造、行の長さ、意味上の階層と視覚的な階層、ウェイトとコントラストのバランスが問題に関係する場合は、テキストの階層と可読性を参照してください。 階層の問題の一因が、アクションスタイルの不統一、アイコンの使い方、製品全体でのコンポーネント表現のばらつきにある場合は、デザインシステムとの整合性を参照してください。 階層の問題が実際には、間隔、グループ化、配置の問題を別の形で表している場合は、空間デザインと間隔システムのリファレンスを参照してください。

階層と可読性の指針は共通リファレンスを正式な情報源とし、このスキルでは実際のインターフェースにおける優先度と強調の調整に焦点を当ててください。

次の調整要素をもとに計画を立ててください。

• 何を主役にするべきか？
• 何を目立たなくするべきか？
• どのラベルを削除、統合、または目立たなくできるか？
• どのアクションに異なるスタイルが必要か？
• どの不統一が誤ったパターンを学習させているか？
• 画面をより明快で完成度の高い印象にするには、どのようなバランスが適切か？
• グループをより明確にするには、どのような間隔や配置の変更が有効か？
• レイアウトでどのような視線の流れを支えるべきか？

階層を体系的に改善する

ピラミッドを明確にする

• 明確な主役を一つ設定します
• 二次、三次のコンテンツは、視覚的に目立たないスタイルにします
• 装飾的な修正を考える前に、余白、ウェイト、コントラスト、配置を活用します

目立たせないことで強調する

• 競合する要素のコントラストを下げます
• 二次的なアイコンやテキストの色を控えめにします
• 主役となる要素を目立たせる前に、サイドバー、メタデータ、ラベルを目立たなくします

アクションの階層を整える

• 明確なプライマリボタンのスタイルを一つ使います
• 補助的なアクションにはセカンダリスタイルを使います
• 使用頻度の低いアクションには、リンク風または三次的なスタイルを使います
• 削除ボタンすべてで破壊的な操作を視覚的に強調するのではなく、確認が必要な場面に限って使います

ラベルと値を再構成する

• 値の形式から内容が明らかな場合は、ラベルを削除します
• スキャンしやすくなる場合は、ラベルと値を統合します
• ラベルは基本的に補助的なコンテンツとして扱います
• 技術的な文脈で、仕様やフィールド名を探すユーザーに合わせる場合は、ラベルを少しだけ目立たせます

セクションタイトルを控えめにする

• 見出しとして扱う必要がない場合、セクションタイトルはラベルと同様に扱います
• コンテンツを主役にする場合は、タイトルを小さくするか、コントラストを下げます
• 意味上の重要性と視覚的なサイズを切り分けます。構造上重要な見出しでも、視覚的には控えめにできます

予測しやすさを保つ

• 類似する文脈では、アクションの色とボタンスタイルの意味を一貫させます
• 繰り返し使うメッセージのパターンとラベルを揃え、ユーザーがシステムを素早く理解できるようにします
• ワークフローを変える明確な理由がない限り、アイコンのファミリー、レイアウト領域、慣れ親しんだナビゲーション構造を一貫させます

単に目立たせるのではなく、調和を整える

• セクションを安定して整然と見せる必要がある場合は対称性を使います。ただし、どこでも同じ対称構造を繰り返すのは避けます
• 画面に動きや明確な焦点の方向性が必要な場合は非対称性を使います。ただし、視覚的な重さのバランスは保ちます
• 一つの要素を明確な主役にする必要がある場合は、中央または放射状の強調を使います
• テキストと画像のバランスを見直し、どちらかが他方を意図せず圧倒しないようにします

余白で優先度を明確にする

• グループ内よりも、グループ間の余白を大きくします
• 主役となる要素をより強く目立たせる必要がある場合は、その周囲の余白を増やします
• エッジとの緊張感を意図している場合を除き、テキスト、コントロール、メディアをコンテナーの端から離します
• 異なるセクションの間隔を十分に取り、ユーザーが話題の切り替わりを感じ取れるようにします

近接性と配置を意図的に活用する

• 関連するフィールド、ラベル、補足テキストを近づけます
• 関連性のないグループ間の間隔を広げます
• 比較が重要な場合は、隣り合う大きなブロックの上端をそろえます
• スキャンしやすさを保つため、主要なセクションを安定したコンテナーの端にそろえます
• コンテンツが明確に読めるほどコンパクトな場合に限り、中央揃えを選びます

意図したスキャンパターンをサポートする

• 情報量の多い画面では、左から右、上から下へと密度高く構成します
• CTA を中心とする軽めの画面では、すっきりとした視線誘導の構成にします
• ロゴ、メインタイトル、主要なアクションなどの目印を、目に留まりやすい場所に配置します

視覚的な重みとコントラストのバランスを取る

• アイコンが近くのテキストより目立ちすぎる場合は、ほかをすべて変更する前にアイコンのコントラストを弱めます
• 区切り線が薄すぎる場合は、濃く強くする前に、少しだけ太くすることを検討します
• 必要に応じて、コントラストを下げて強い要素を目立たなくし、線の太さで低コントラストの要素を補います

決して次のことをしないでください：

• すべてのセクションタイトルを見出しのように目立たせる
• すべてのアクションを主要なものとしてスタイル設定する
• 階層を示す手段として色だけを使う
• データのほうが重要な場合に、そのデータと同じ視覚的な重みのままラベルを配置する
• ユーザーがすでに学習したアクションの意味、アイコンの使い方、レイアウトのパターンを無作為に変更する
• 装飾を増やすだけで、弱い階層を補おうとする

階層の改善を確認する

• グレースケールでの明瞭さ：色がなくても機能しますか？
• 2秒でのスキャン：ユーザーは主要なアクションと重要なコンテンツをすぐに見つけられますか？
• アクションの明瞭さ：最初に行うアクションが明確ですか？
• ラベルと値の効率：構成を変えたことで、データをスキャンしやすくなっていますか？
• 競合の軽減：目立たせない要素が、実際に控えめになっていますか？

覚えておいてください。優れた階層は、正しいものをひと目でわかるようにします。画面をじっくり見ないと理解できないなら、階層にはまだ改善が必要です。