depth

レイヤー、サーフェス、状態に意図が感じられ、読み取りやすく、物理的に自然に見えるよう、視覚的な奥行きを作成または改善します。過度な装飾によるノイズは避けてください。

必須の準備

frontend-design を読み、「Context Gathering Protocol」に従ってください。利用可能なコンテキストを再利用し、重大な不足情報についてのみ質問してください。

---

奥行きに関する問題を評価する

インターフェイスが平坦、分かりにくい、または物理的に一貫していないと感じられる箇所を分析します。

1. 高さの構造：

   • 役割に関係なく、すべてのコンポーネントに同じシャドウを使っていませんか？
   • ページ上にあるものと、ページから浮いているものを見分けにくくありませんか？

2. サーフェスの処理：

   • どの要素を浮き上がって見せるべきですか？
   • 入力欄やくぼみのように、どの要素を凹んで見せるべきですか？
   • 強いエフェクトを使うより、色だけで奥行きをすっきり表現できる箇所はありませんか？

3. インタラクションの状態：

   • ボタンを押したとき、色が変わるだけでなく、内側に沈むように感じられますか？
   • ドラッグ時に、アイテムが隣の要素より手前に浮き上がって見えますか？

4. 抑制：

   • シャドウやエフェクトは、ユーザーが構造を理解する助けになっていますか？それとも、UIをただ煩雑にしていませんか？

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

重要：奥行きはサーフェス、状態、レイヤーを説明するためのものです。エフェクトが意味より目立つなら、やりすぎです。

奥行きのシステムを計画する

シャドウのレベル、2段階のシャドウの考え方、浮き上がった状態と凹んだ状態の割り当て、色によるフラットな奥行き表現については、elevation system を参照してください。 奥行きを、余白、背景色の変化、重なり、境界線、シャドウのどれで表現するか判断する際は、surface separation を参照してください。 メディアや画像の境界を重ねる際に、より明確な奥行きの手がかりが必要な場合は、image treatment を参照してください。

以下を軸に計画を立てます。

• 高さのレベル：意味上、どのような3～5段階のレベルがありますか？
• サーフェスの役割：何がベース、浮き上がった状態、凹んだ状態、押下状態、ドラッグ状態に該当しますか？
• レイヤー：どこで重なりを使うと構造が分かりやすくなりますか？
• 抑制：どのエフェクトを弱める、または完全に削除すべきですか？

奥行きのシステムを段階的に構築する

高さのシステムを確立する

• サーフェス、コントロール、メニュー、オーバーレイ、一時的なUIに、少数の意味上のレベルを定義します
• 明確な理由がない限り、類似するコンポーネントは同じ高さに保ちます

浮き上がった要素と凹んだ要素

• 浮き上がった要素はページより上にあり、その下にシャドウがあるように見せます
• 凹んだ要素は、内側のシャドウ、縁の処理、または周囲より暗いサーフェスによって、奥に沈んで見えるようにします
• 浮き上がった表現と凹んだ表現は意図的に使います。すべてのコントロールに明白な立体感が必要なわけではありません

2段階のシャドウの考え方

• 大きく柔らかなシャドウで、サーフェスから離れていることを表現します
• 縁に近い小さく締まったシャドウで、圧縮された環境シャドウを表現します
• 高さが増すほど、縁に近い締まったシャドウは通常、控えめにします

押下状態とドラッグ状態

• 押下状態では高さを下げ、要素が内側または下方へ動くように感じさせます
• ドラッグ状態では高さを上げ、アイテムが手前に浮き上がるように感じさせます
• シャドウ、変形、色の変化を一致させ、動きがひとつの物理的な変化として伝わるようにします

重なりとレイヤー

• 複数の情報レイヤーを分かりやすくする場合に、重なりを使います
• 奥行きやグループ分けを強調できる場合は、カード、コントロール、メディアを境界を越えて重ねます
• 重なりは読み取りやすく保ちます。レイヤーがぶつかり始めたら、間隔を設けるか、背景になじむ縁を追加します

サーフェスの色によるフラットな奥行き表現

• 明るいサーフェスは手前に、暗いサーフェスは奥に感じられることがよくあります
• シャドウを増やす前に、サーフェスの色をわずかに変えるだけで、同じことをよりすっきり伝えられないか試してください

やりすぎに注意

• 現実世界からヒントを得つつ、インターフェースが写真のようにリアルになったり、煩雑になったりする前に留めます
• 構造がすでに明確なら、よりシンプルな奥行き表現がたいてい効果的です

絶対に避けること：

• すべてのコンポーネントに同じドロップシャドウを使う
• 色や余白のほうが奥行きを伝えやすい場面で、濃い影を加える
• すべてのボタン、カード、パネル、モーダルを同じように浮き上がらせる
• リアリティを優先して、明瞭さを損なう
• 意味のない奥行き効果を使う

奥行き表現の品質を確認する

• レイヤーの明瞭さ：ページ上に配置されているものと、浮き上がっているものを見分けられますか？
• 状態の明瞭さ：押下時やドラッグ時の状態に、物理的な違いを感じられますか？
• 一貫性：似たコンポーネントに、同じ高さの表現ルールを使っていますか？
• 節度：UI は単に装飾が増えただけでなく、わかりやすくなっていますか？

優れた奥行き表現は、見せびらかすのではなく構造を作ります。レイヤーや状態を明確に感じられるように使い、そこで止めましょう。