coastdigitalgroup/coastai-skills

エレベーションと奥行きシステム

目的

エレベーションと奥行きシステムは、Webインターフェースの垂直次元（Z軸）を管理するための方法論を提供します。影、サーフェスの処理、スタッキング順序といった視覚的な手がかりを使用して、レイヤーの明確な階層を確立します。このシステムにより、ユーザーは重なり合う要素間の関係を理解し、インタラクティブなサーフェスを識別でき、現実世界の奥行きを模倣した予測可能で触覚的な環境を体験できます。

ユースケース

• デザインシステムで一貫性のある影のスケールを定義する。
• ダッシュボードやIDEのような複雑な多層インターフェースを設計する。
• スタッキング順序（z-index）の標準を確立し、UIの「衝突」を防ぐ。
• インタラクティブな状態（ホバー時のボタンの浮き上がりなど）に触覚的なフィードバックを提供する。
• 永続的なページコンテンツと一時的なオーバーレイを区別する。

使用すべきでないケース

• フラット／ブルータリストデザイン: 意図的な美学が2Dで、知覚される奥行きや影が欠如している場合。
• 純粋なテキストベースのコンテンツ: 重なり合うレイヤーやインタラクティブなサーフェスがない単純な記事やドキュメント。
• パフォーマンスが重要なローエンドデバイス: CSSフィルターや複雑なbox-shadowの多用がレンダリングの遅延を引き起こす可能性がある場合。

入力

1. ブランドの美観: 奥行きは「物理的／マテリアル」（現実的な影）か、「グラフィック」（ソリッドなオフセット）か。
2. コンポーネント一覧: エレベーションが必要なすべてのUI要素のリスト（カード、ナビバー、モーダル、ボタン）。
3. 主光源: 通常は上方向または上部中央から来ると想定される。
4. スペーシングシステム: fluid-spacing-systemを使用して、影の広がりをレイアウトのマージンと整合させる。

出力

1. エレベーションスケール（影）: 5〜6個の標準化されたbox-shadowトークンのセット（例: elevation-sm から elevation-xl）。
2. スタッキングコンテキストマップ（Z-Index）: レイヤー機能ごとに分類されたz-index値の定義されたスケール。
3. サーフェスパレット: エレベーションに基づいて変化する背景色の定義（例: 暗いサーフェスは「沈み」、明るいサーフェスは「浮かび上がる」）。
4. インタラクション仕様: ホバー、アクティブ、フォーカス状態におけるエレベーションの変化ルール。

ワークフロー

1. スタッキングティアの確立

インターフェースを下から上に向けて機能レイヤーに分割する:

• レベル 0 (ベース): ページの背景／キャンバス。
• レベル 1 (フラット): ベース上に配置されるコンテンツ（例: フラットカード、区切り線）。
• レベル 2 (浮上): 微妙に「浮かぶ」インタラクティブ要素またはプライマリカード。
• レベル 3 (スティッキー／フローティング): グローバルヘッダー、FAB（フローティングアクションボタン）。
• レベル 4 (オーバーレイ): モーダル、ドロワー、およびその背景。
• レベル 5 (システム): ツールチップ、トースト、および重要なアラート。

2. 影のスケールの定義

ベースからの距離に対応する影のプログレッションを作成する:

• Small (2dp): ボタンや小さなカードのための微妙な分離。
• Medium (4dp-8dp): ドロップダウンやナビゲーションのための標準的なエレベーション。
• Large (12dp-24dp): モーダルやフローティングレイヤーのための高いエレベーション。
• X-Large (32dp+): 一時的なフォーカスやシステムアラートのための劇的な奥行き。

注: よりリアルで高品質な効果を得るには、複数の影レイヤー（例: 「鋭い」影と「柔らかい」影）を使用すること。

3. サーフェスカラーの割り当て

奥行きとは影だけではない。それは光の反射でもある:

• ライトモード: 高いエレベーションの要素は、ベースがオフホワイトであるのに対し、わずかに明るくなるか、純粋な白を維持する傾向がある。
• ダークモード: 高いエレベーションの要素は、光源に近いことをシミュレートするために、必ず明るくなければならない（半透明の白のオーバーレイを使用）。
• 実装: color-mix(in oklch, var(--surface-base) 100%, white X%) (または同等のOKLCHベースのトークン関数) を使用して、各エレベーションティアのサーフェスカラーをプログラムで生成する。新しい16進数の値をティアごとに手動で選択するのではなく、この方法を推奨する。OKLCHは、色相全体で知覚される明るさのステップを均一に保つ。これはフラットな16進数調整では保証できない。

4. インタラクションの「リフト」を作成する

interactive-state-system をZ軸に適用する:

• ホバー: 影のぼかしと広がりを増やして、要素がユーザーに向かって持ち上がるのをシミュレートする。
• アクティブ（クリック）: 影を減らすか削除して、要素がサーフェスに押し付けられているのをシミュレートする。

5. スタッキング戦略（Z-Index）を文書化する

10段階または100段階のスケールを使用して、「Z-Index戦争」を防ぐ:

• 0: デフォルト
• 100: ナビゲーション/ヘッダー
• 500: 背景
• 600: モーダル/ドロワー
• 1000: ツールチップ/トースト

決定ルール

• 光源ルール: システム内のすべての影は、視覚的な論理性を維持するために、同じ暗黙の光源（通常は上から下）を共有しなければならない。
• エレベーションは重要度に等しい: 最も重要な一時的な情報（例: アラート）は、最も高いエレベーションと最も劇的な影を持つべきである。
• 影 vs ボーダー: 構造（レベル0-1）にはボーダーを使用し、奥行き（レベル2+）には影を使用する。ブランドが高度に「スキューモーフィック」でない限り、同じ要素に両方を多用してはならない。
• ダークモードのエレベーション: ダークモードでは、暗い背景に暗い影を使用してはならない。主な奥行きの手がかりとして、サーフェスカラーの明るさの変化（明度シフト）を使用する。

制約

• アクセシビリティ: エレベーションの手がかり（影）は、構造的な手がかりを補完するものであり、代替するものではない。要素に影がなくても識別できるように、十分なコントラストまたはボーダーがあることを確認する。エレベーションされたオーバーレイ（モーダル、ドロップダウン）は、フォーカスインジケーターの上に重なってクリップしたり隠したりしてはならない（WCAG 2.2 SC 2.4.11）。
• パフォーマンス: 頻繁にアニメーションする要素や、高頻度のスクロールコンテナ内にある要素には box-shadow を避ける。
• レスポンシブ性: 大きな影はモバイル画面から「はみ出る」可能性がある。小さなビューポートでは影の広がりを減らすか、ボーダーに切り替える。

よくある失敗パターン

• 光源の不統一: 一部の影が右に、他の影が下に落ちるなど、一貫性がなく「酔った」ような、または断片的なインターフェースになる。
• Z-Indexの「マジックナンバー」: 問題を解決するために z-index: 99999 を使用し、最終的に保守不能なコードになる。
• 濁った影: サーフェスカラーの透明版や暗いニュートラルではなく、純粋な黒（#000）を影に使用する。
• フラットなオーバーレイ: 影や背景のないモーダルを設計し、背後にあるコンテンツに溶け込ませてしまう。
• 過剰なエレベーション: すべてのカードに重い影を与えると、何も目立たなくなり、階層が平坦になる。

検証基準

• 一貫性のある5〜6段階のエレベーションスケールが定義され、使用されている。
• すべての影が単一の一貫した光源を共有している。
• Z-index値が論理的で文書化されたティアにグループ化されている。
• ダークモードでは、奥行きを示すためにサーフェスの明るさの変化が使用されている。
• インタラクション状態（ホバー／アクティブ）に、垂直方向の動きまたは影の変化が含まれている。
• 影がモバイルで水平方向または垂直方向のオーバーフローを引き起こさない。
• 影が削除されても要素が区別可能である（アクセシビリティチェック）。
• 高いエレベーションレイヤーが、その下または内側の要素のフォーカスインジケーターを隠さない（WCAG 2.2 SC 2.4.11）。