hierarchy-principles

階層の原則

あらゆるビジュアルデザインにおいて、最も重要なことです。

使用方法

• /hierarchy-principles この会話で行うすべてのデザイン作業に、階層の制約を適用します。

制約

階層のルール

• すべての画面で、必ず明確な主役の要素を設定します。すべてが重要なら、何も重要ではありません。
• スケール、ウェイト、コントラスト、色、余白、位置のうち、少なくとも2つを使って階層を作ります。
• 視覚的な重みをコンテンツの優先度に合わせます（最も重要なものを最も目立たせます）。
• 意図的に緊張感を生み出す場合を除き、2つの要素を同じ階層レベルで競合させてはいけません。
• 画面の半分を隠してテストしてください。それでも最も重要なものがわかりますか？

階層を作る手段

• スケール： 大きなものほど先に目に入ります。最大と最小の比率によって、スケールの幅が決まります。
• ウェイト： 太字のものほど注意を引きます。使いすぎると、何も目立たなくなります。
• コントラスト： コントラストの高い要素は視線を集めます。低いコントラストは後ろに退きます。
• 色： 彩度の高い色は前に出ます。彩度の低い色は後ろに退きます。ニュートラルな配色にアクセントカラーを1色加えるだけで、瞬時に階層が生まれます。
• 余白： 余白が多いほど重要性が伝わります。要素が密集していると、メタデータのように感じられます。
• 位置： 左上は最初に見られます（LTR）。中央は注意を引きます。右下は、階層によって視線を導かない限り、見過ごされます。

アンチパターン

• サイズだけを階層の手段として使う（単調なレイアウトになります）
• すべてを太字にする（太字にする意味がなくなります）
• 同じ画面に、互いに競合するCTAを配置する
• コンテンツよりもナビゲーションを視覚的に目立たせる