hierarchy

インターフェースが優先度をすぐに伝え、ユーザーが自分で読み解かなくてもよいように、ビジュアル階層を評価し改善します。

主な問題が優先度と強調にある場合に使用してください。余白が不規則で、グループ化が弱く、レイアウトのリズムが単調であることが大きな問題なら、arrangeを使用してください。

必須の事前準備

ユーザーは/hierarchyでこのワークフローを開始します。このスキルが有効になったら、デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれる$frontend-designを読み込みます。先に進む前にそのプロトコルに従ってください。デザインコンテキストがまだ存在しない場合は、必ず$setupを先に読み込んでください。

---

階層の問題を評価する

インターフェースで優先度が明確に伝わっていない箇所を分析します。

1. グレースケールテストを行う：

   • 色がなくなっても、画面の内容を把握できますか？
   • 約2秒以内に、主要、二次、三次の要素を識別できますか？

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

   • 複数のカード、タイトル、ボタンが同じくらい目立っていませんか？
   • セクションタイトルが、その内容よりも注目を集めていませんか？
   • 補足情報がメインタスクに対して強すぎませんか？
   • 重厚なアイコン、太字のラベル、暗い色のメタデータが、支えるべきコンテンツよりも目立っていませんか？

3. 一貫性と予測しやすさを確認する：

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

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

   • 明確にわかる主要アクションが1つありますか？
   • 二次アクションは明確でありながら、控えめですか？
   • 三次アクションは、競合することなく見つけられますか？

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

   • 値を見ればわかる場合でも、すべてが厳格なlabel: value形式になっていませんか？
   • ラベルを値に統合するか、目立たなくするべきですか？

6. ビジュアルの調和を確認する：

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

7. 余白、近接性、整列を確認する：

   • グループ内の余白は、グループ間の余白より小さくなっていますか？
   • ラベル、入力欄、カード、ナビゲーション項目は、関連性が伝わる程度にまとまっていますか？
   • 共通の整列線やコンテナ幅によって、画面をすっきりとスキャンできますか？
   • コンテンツの密度に合った読み取りパターン（たとえば、密度の高いF字型のスキャンと、軽やかで誘導的なZ字型のスキャン）をページで実現できていますか？

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

重要：階層の問題は見た目だけの問題ではありません。何が重要かわからないのであれば、デザインは情報を伝える役割を果たせていません。

階層の修正計画

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

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

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

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

階層を体系的に改善する

ピラミッドを明確にする

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

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

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

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

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

ラベルと値を再構成する

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

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

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

予測しやすさを保つ

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

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

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

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

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

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

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

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

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

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

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

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

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

階層の改善を確認する

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

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