depth

レイヤー、サーフェス、状態に意図が感じられ、読みやすく、物理的にも自然に見えるように奥行きを作成または改善します。過剰な装飾で雑然とした印象にならないようにします。

必須の準備

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

---

奥行きの問題を評価する

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

1. エレベーション構造：

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

2. サーフェスの表現：

   • 浮き上がって見せるべき要素はどれですか？
   • 入力欄やくぼみのように、内側に沈んで見せるべき要素はどれですか？
   • 強い効果を使わず、色だけで奥行きをより明確に表現できる箇所はありませんか？

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

   • ボタンを押したとき、内側に沈むように感じられますか？それとも色が変わるだけですか？
   • ドラッグ中、項目が隣接する要素の上に浮かび上がるように感じられますか？

4. 節度：

   • シャドウや効果は、ユーザーが構造を理解する助けになっていますか？それとも、UIをただ煩雑に見せていますか？

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

重要：奥行きは、サーフェス、状態、レイヤーをわかりやすくするためのものです。効果が意味よりも目立つようなら、やりすぎです。

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

シャドウのレベル、2段階のシャドウ設計、浮き上がり／沈み込みの対応付け、色によるフラットな奥行きについては、エレベーションシステムを参照してください。 奥行きを、間隔、背景の変化、重なり、境界線、シャドウのどれで表現するか判断する際は、サーフェスの分離を参照してください。 メディアや画像の境界を重ねて、奥行きをより明確に表現する必要がある場合は、画像の処理を参照してください。

以下を中心に計画を立てます。

• エレベーションレベル：意味上のレベルを3〜5段階、どのように設定しますか？
• サーフェスの役割：ベース、浮き上がり、沈み込み、押下、ドラッグ中にあたるものはどれですか？
• レイヤリング：重なりを使うと構造が明確になる箇所はどこですか？
• 節度：どの効果を弱める、または完全に取り除くべきですか？

奥行きを体系的に構築する

エレベーションシステムを確立する

• サーフェス、コントロール、メニュー、オーバーレイ、一時的なUIに対して、意味上のレベルを少数定義します
• 実際に分ける理由がない限り、同種のコンポーネントには同じエレベーションを適用します

浮き上がった要素と沈み込んだ要素

• 浮き上がった要素は、下にシャドウを伴い、ページの上に載っているように見せます
• 沈み込んだ要素は、内側のシャドウ、縁の表現、または周囲より暗いサーフェスを使って、奥に recessed して見せます
• 浮き上がりと沈み込みは意図を持って使います。すべてのコントロールを現実的に見せる必要はありません

2段階のシャドウ設計

• 大きく柔らかなシャドウで、サーフェスからの距離を表現します
• エッジ付近の小さく引き締まったシャドウで、圧縮された環境シャドウを表現します
• エレベーションが高くなるほど、エッジ付近の引き締まったシャドウは通常、控えめにします

押下状態とドラッグ状態

• 押下状態ではエレベーションを下げ、要素が内側または下方向へ沈むように見せます
• ドラッグ状態ではエレベーションを上げ、項目が前面に浮き上がるように見せます
• シャドウ、変形、色の変化を一致させ、動きがひとつの物理的な変化として伝わるようにします

重なりとレイヤリング

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

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

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

やりすぎに注意

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

絶対に避けること：

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

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

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

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