coastdigitalgroup/coastai-skills

ダークテーマデザインシステム

目的

ダークテーマデザインシステムスキルは、ライトテーマのウェブインターフェースをダークテーマの同等物に変換するための方法論を提供します。ダークモードのデザインは、単に色の値を反転させるだけでは実現できません。そうすると物理的な照明メタファーが崩れ、深刻な視覚疲労を引き起こし、読みづらくぎらつくインターフェースになってしまいます。

このシステムは、低照度設計の視覚的および空間的なルールを確立します：

• エレベーション反転： ダークモードで深度を表現するために、暗い影ではなく、浮き上がったサーフェスの背景を明るくします。
• 色の脱彩度： 鮮やかなブランドやセマンティックアクセントカラーを低コントラストレベルに適応させ、視覚的な「振動」や目の疲れを防ぎます。
• コントラストとハレーション防止： 純粋な白黒の組み合わせを避けます（乱視やディスレクシアの読者にとって極端なグロー効果（ハレーション）を引き起こすため）。代わりにオフホワイトとオフブラックを選びます。
• **タイポグラフィウェイトの調整：「照射効果」（暗い背景に明るいテキストがあると、明るい背景に暗いテキストがある場合よりも、テキストが太く、太く見える錯覚）に対抗します。
• メディアの調光： 低照度条件でユーザーを視覚的に「盲目」にしないように、画像、動画、ベクター図を適応させます。

---

ユースケース

• デュアルテーマUIキットのデザイン： ライトモードとダークモードの両方をネイティブにサポートするシステムのためのセマンティックデザイントークンアーキテクチャを確立します。
• SaaSダッシュボードと読み取り環境のリデザイン： 長時間の閲覧、開発者ワークフロー、または夜間使用に最適化された、疲れにくいインターフェースを作成します。
• アクセシブルでないダークテーマの監査： コントラストの問題、振動するアクセント、判読できないテキストのウェイト、目をくらませるメディアアセットを特定して修正します。
• マルチテーマハンドオフ仕様の提供： 要素がテーマ間でどのように動作するかを正確に示す、クリーンで開発者対応の仕様を生成します。

---

使用すべきでないケース

• デフォルトでダーク（シネマティック）な環境： アプリケーションが排他的にダーク（例：Spotify、Netflix、ゲームストリーミングプラットフォーム）であり、ライトテーマをサポートしない場合。この場合、デュアルテーマデザインシステムは不必要なオーバーヘッドです。
• 非常に表現力豊かな/アーティスティックなマイクロキャンペーン： 視覚的な混乱、極端な高彩度パレット、またはアーティスティックなブランディングが、長時間の視聴快適性や厳格なアクセシビリティルールよりも優先されるスタンドアロンのランディングページ。
• 厳密に静的なレガシーフレームワーク： フロントエンドアーキテクチャが動的スタイルシートをロードできない、またはCSS変数のサポートが不足しており、体系的なテーマ適応が妨げられるアプリケーション。

---

入力

1. ライトモードのコアパレットとブランドスタイル： 既存のプライマリブランドカラー、セカンダリカラー、タイポグラフィスケール、流動的なスペーシングトークン。
2. コンポーネントインベントリと深度階層： ページレイアウトとUIレイヤー（背景、サイドバー、カード、モーダル、ドロップダウン）の包括的なリスト。
3. 照明環境コンテキスト： ターゲットユーザーの典型的な物理的環境（例：夜間就寝前の読書 vs. 明るく照らされた産業用コントロールフロア）。
4. アクセシビリティターゲット： 標準のWCAG 2.2 AA（最低）またはAAA（拡張）。乱視や色覚異常への考慮を含みます。

---

出力

1. 統一セマンティックトークンマップ： ライトモードの値を対応するダークモードの同等値に直接ブリッジする体系的な仕様。
2. エレベーションベースのサーフェススケール： Z軸上で高く浮くにつれてサーフェスの背景値がどのように明るくなるかを定義する5～6段階のスケール。
3. 脱彩度アクセントパレット： 暗い背景用に彩度を落とした、プライマリ、セカンダリ、セマンティックステータスカラーの調整済みセット。
4. タイポグラフィスタイルシートの補正： フォントウェイト、文字間隔、テキストカラーの調整に関する特定のルール（照射効果を打ち消すため）。
5. メディア調光仕様： 画像のコントラスト/輝度を下げ、ベクターグラフィックを調整するためのCSSおよびHTMLテクニック。

---

ワークフロー

1. 基盤を設定する：オフブラックとオフホワイトを選択

背景に絶対的な#000000（純粋な黒）を、本文テキストに絶対的な#FFFFFF（純粋な白）を使用することは避けてください。

• ベース背景： 暗く、色味を帯びたニュートラル（例：深いスレート、チャコール、または#121212から#1A1A1Aの間の濃いネイビーグレー）を確立します。これにより、眼精疲労が軽減され、画面のちらつきが防止され、視覚的な奥行きが維持されます。
• テキストベース： オフホワイトまたは明るいグレー（例：#E2E8F0または#EAEAEA、不透明度85%から90%）を選択します。これにより、快適なコントラストが確保され、ハレーション（読者の目での光の散乱）が防止されます。

2. エレベーションの明るさによって深度を変換

ライトテーマでは、より暗い影を落とすことで要素が浮き上がっていることを示します。ダークテーマでは、暗い背景に対して暗い影は見えません。

• 明るさの原則： 要素がZ軸上で高く上昇するにつれて、仮想的な環境光源に近づき、暗くなるのではなく明るくなります。
• エレベーションサーフェススケールを作成：
  • レベル0（キャンバスベース）： 最も暗い色（例：#121212）。
  • レベル1（カード/リストアイテム）： わずかに明るい（例：#1D1D1D）。
  • レベル2（スティッキーヘッダー/フローティングアクション）： さらに明るい（例：#242424）。
  • レベル3（モーダル/ダイアログボックス）： 最も明るいサーフェス（例：#2C2C2C）。
• ソフトシャドウで補完： レベル1のアイテムの上に配置される大きなサーフェスに分離を提供するために、浮上レイヤーに非常に微妙な、暗いグレーまたは半透明の黒の影（例：rgba(0, 0, 0, 0.5)）を使用します。

3. アクセントカラーを調整し、彩度を下げる

白いキャンバス上で鮮やかに見える高彩度の色は、暗いキャンバス上では「振動」し、深刻な視覚疲労を引き起こし、コントラストテストに不合格になります。

• ブランドアクセントの彩度を下げる： ブランドカラーを、より明るく、よりソフトで、パステル調の同等物にシフトします（例：ライト背景の鮮やかなプライマリブルー#0055FFは、ダーク背景では彩度を下げたブルー#66A3FFまたは#80B3FFにマッピングします）。
• 安全なアクセントコントラストを維持： 暗いサーフェス上の彩度を下げたアクセントカラーが、依然としてWCAG 2.2 AA基準（テキストは最低4.5:1、インタラクティブ状態は3:1）を満たしていることを確認します。
• 大きな彩度ブロックを避ける： ボタンやバナー全体を単色の彩度の高い色でレンダリングする代わりに、テキストリンク、境界線、または微妙なインジケーターなど、控えめに使用します。

4. 光学的照射効果に合わせてタイポグラフィを調整

暗い背景上の明るいテキストは照射効果に悩まされます。白いテキストが周囲の暗闇に「にじみ出ている」ように見え、文字が明るい背景上の暗いテキストよりも太く、太く、近くに見えるようになります。

• ウェイトの調整： ライトテーマの太字見出しのフォントウェイトを1段階下げます（例：ダークでは700（ボールド）を600（セミボールド）またはさらに500（ミディアム）に変更）。
• 文字間隔の調整： ダークモードの本文テキストでは、文字間隔（トラッキング）をわずかに増やします（例：letter-spacing: 0.02em;または0.015em;）。これにより、個々の文字が互いににじみ合うのを防ぎます。
• セカンダリ/ターシャリ階層： サイズだけでなく、テキストカラーの不透明度を調整して階層を制御します。優先度の高い本文にはopacity: 0.87、セカンダリヘルパーテキストにはopacity: 0.60、無効化インジケーターにはopacity: 0.38を使用します。

5. メディアとリッチコンテンツを適応

変更されていない写真、チャート、ダイアグラムは、明るくハイコントラストな白でユーザーを盲目にすることで、それ以外は完璧なダークモード体験を台無しにする可能性があります。

• 写真の調光： 写真に微妙な輝度とコントラストの低減を適用して、低照度の雰囲気に溶け込ませます。

  [data-theme="dark"] img:not(.avatar) {
    filter: brightness(0.85) contrast(0.95);
  }
  

• ベクターアセットとイラスト： SVGの明るい背景色を交換するか、SVGフィルターを使用して特定のパスを反転します。イラストグラフィックの場合は、メディアクエリと共に<picture>を使用して、カスタマイズされたダークテーマアセットをロードします。
• データビジュアライゼーション： 彩度を下げた線と半透明のエリア塗りつぶしを使用するようにチャートのカラーシリーズを再定義し、過度な輝度なしで判読性を維持します。

---

決定ルール

エレベーション明るさルール

視覚的なコンテナの背景を設定するときは常に、エレベーションレベルを参照してください。浮上したモーダルやドロップダウンを、その下のページ背景よりも暗くしないでください。

エレベーションレベル	ライトモード背景	ダークモード背景	暗黙のエレベーションキュー
レベル0（キャンバス）	#FFFFFF（白）または#F8F9FA	#121212（オフブラック）	グラウンドレベル/ベース
レベル1（カード/セクション）	#FFFFFF（白）枠線あり	#1E1E1E（サーフェス1）	1-2dp浮上
レベル2（ヘッダー/スティッキー）	#FFFFFFまたは微妙な半透明色	#252525（サーフェス2）	4-8dp浮上
レベル3（モーダル/ダイアログ）	#FFFFFF 強い影あり	#2D2D2D（サーフェス3）	12-24dp浮上

彩度の上限

• インタラクティブ状態の背景として使用されるアクセント（例：セカンダリチップコンテナ）は、ダークモードでは**10%～15%**の彩度にします。
• 前景テキストまたはアイコンとして使用されるアクセントは、暗い表面に対して振動することなく目立つように、**40%～60%**の彩度にします。

コントラストバッファ

画面のぎらつきや低品質の画面は、ライトモードよりもダークモードの可視性をより深刻に低下させるため、物理的な環境が悪い場合のバッファとして機能するように、ダークモードの本文テキストでは常に5.0:1のコントラスト比を目指します（WCAG 4.5:1の最小値を超える）。

---

制約

• アクセシビリティ（WCAG AA）： テキスト要素は少なくとも4.5:1のコントラスト（大きなテキストは3:1）を達成する必要があります。UIの境界線、フォーカスリング、機能アイコンは少なくとも3:1のコントラストを達成する必要があります。フォーカスインジケーターは、非常に視認性が高く、暗い背景のグローにかき消されないようにする必要があります（WCAG 2.2 SC 2.4.11）。
• レスポンシブグレア適応： テキストの色は、高い環境グレア（屋外で使用されるモバイル画面など）に対して耐性がなければなりません。つまり、絶対的な最小コントラストレベルは避ける必要があります。
• 色のみの階層は禁止： ステータス（例：チャートの警告とエラー）を伝えるために、彩度を下げた色の色相のみに依存しないでください。明確なパターン、テキストラベル、またはアイコンを統合します。

---

よくある失敗パターン

• 「リテラルインバーター」： ライトテーマに自動色反転フィルターを実行する。これにより、暗い影を持つ浮上したライトモード要素が、輝く白いリングを持つ沈んだダークモード要素に変わり、すべての自然な照明モデルが壊れます。
• 「振動するネオン」の悪夢： 完全に飽和したブランドカラー（例：#00FF00または#FF00FF）を純粋な黒の背景に直接配置する。これにより視覚疲労が引き起こされ、数秒以上テキストを読むことがほぼ不可能になります。
• OLEDエクストリーム（純粋な黒のグロー）： #000000の背景に直接#FFFFFFのテキストを使用する。これにより、多くのディスプレイで深刻なハロー/グレア効果が発生し、読解速度が低下し、眼精疲労を引き起こします。
• 消えるフォーカスリング： 美しいダークモードをデザインしても、デフォルトのブラウザフォーカスインジケーターは多くの場合濃い青色であり、暗いスレートの背景では完全に見えなくなります。
• 目をくらませるイラスト： シームレスなダークUIを作成するが、SVGチャート、ロゴ、またはイラストアイコン内にハイコントラストで純粋な白の背景を残す。

---

検証基準

• ベース値： メインキャンバスの背景に絶対的な純粋な黒（#000）は使用されておらず、本文テキストに絶対的な純粋な白（#FFF）は使用されていません。
• エレベーションモデル： サーフェスは、Z軸上で高く上がるにつれて、徐々に明るくなります（より高い輝度値）。
• コントラストチェック： ミュートされたヘルパーテキストを含むすべてのテキストカラーが、WCAG 2.2 AAコントラスト比（標準4.5:1、大規模3:1）を満たしているか、それを超えています。
• 振動しないアクセント： アクセントカラーとステータスカラーは、適用に応じて10%から60%の範囲の彩度に抑えられ、視覚的な振動を回避しています。
• フォーカスの可視性： インタラクティブ要素には、暗い表面に対して明確に表示される、ハイコントラストで明確なフォーカスインジケーターがあります。
• タイポグラフィの調整： 太字テキストは、照射効果を補正するために調整されています（ウェイトを1段階下げるか、トラッキングを広げる）。
• メディアフィルター： リッチメディアとベクターアセットの明るさとコントラストを低減するためのレスポンシブメカニズム（CSSフィルターまたはダークアセットの交換）が指定されています。