color-mode-and-theme

カラーモードとテーマ

選択：ライト、ダーク、または両方

カラーモードは個人の好みではなく、ブランドや利用状況に関する判断です。意図を持って選びましょう。

ライト（白を基調としたデザイン）

トーン： 開放的、信頼感がある、コンテンツ重視、アクセシブル、プロフェッショナル
適した用途： マーケティングサイト、eコマース、エディトリアル、幅広いユーザー層を対象とするSaaS、消費者向け製品、コンテンツが中心となるB2Bツール

ライトモードは、ほとんどの製品でより安全なデフォルト設定です。明るい環境で使いやすく、初期状態でも幅広いアクセシビリティに対応できます。

ダーク（暗いデザイン）

トーン： 高級感がある、集中しやすい、没入感がある、テクニカル、高コントラストなデータ
適した用途： 取引プラットフォーム、開発者向けツール、クリエイティブツール（動画・音声エディター）、視覚化の密度が高いデータダッシュボード、エンターテインメント、ゲーム

ダークモードは、暗い環境で長時間使用する際の目の疲れを軽減します。また、色鮮やかなデータ視覚化（グラフ、ヒートマップ）を暗い背景に対してより鮮明に表示できます。

注意： ダークモードを適切に仕上げるのは、より困難です。コントラストの低いテキスト、彩度が高すぎるブランドカラー、背景面ごとの差が不十分といった失敗がよくあります。チームが適切に保守できない場合は、未完成のダークモードよりライトモードのほうが優れています。

両方（システム設定をデフォルトにし、手動で切り替え）

prefers-color-scheme に従ってOSにデフォルトを設定させましょう。設定を上書きしたいユーザー向けに切り替え機能を用意します。これは、リピーターがいるほとんどの製品で、現在の標準となっています。

@media (prefers-color-scheme: dark) {
  :root { /* dark tokens */ }
}
@media (prefers-color-scheme: light) {
  :root { /* light tokens */ }
}
[data-theme="dark"] { /* manual override */ }
[data-theme="light"] { /* manual override */ }

---

UIにテーマセレクターを設けるべきタイミング

テーマセレクターはUIコントロールであり、スペースを取り、複雑さを増します。ユーザーが選択できることに本当に意味がある場合にだけ設けましょう。

状況	テーマセレクター
マーケティングサイト、ランディングページ	いいえ — モードを1つ選び、それに決めます
消費者向けSaaS、一般ユーザー向け	両方（システム設定をデフォルトにし、切り替え可能）
開発者向けツール、テクニカルな製品	はい — 開発者は切り替えを期待しています
取引プラットフォーム、金融ダッシュボード	はい — 長時間使用や暗い環境での利用がよくあります
B2Bエンタープライズツール（ERP、分析）	はい — パワーユーザーが多く、利用時間も長いため、好みが分かれます
eコマースのストアフロント	通常は不要 — ライトをデフォルトにし、必要に応じてシステム設定に従います
クリエイティブツール（デザイン、動画、音声）	はい — ダークが好まれることが多い一方、切り替え機能も期待されます

原則： ユーザーが1日に何時間もそのツールを使うなら、選択できるようにしましょう。取引目的や時々しか使わない製品なら、ブランドに合うモードを選んで、そのまま進めます。

テーマの切り替えは、ヘッダー（右上、アカウントの近く）かユーザー設定に配置し、主要なナビゲーションには置かないでください。

---

ブランドのトーンとカラーモード

ブランドの既存のビジュアルアイデンティティを、デフォルトモードの判断に反映させましょう。

ブランドのトーン	デフォルトモード
清潔感がある、ミニマル、信頼感がある、開放的	ライト
高級感がある、限定的、大胆、没入感がある	ダーク
テクニカル、データ重視、精密	ダーク
遊び心がある、カラフル、活気がある	ライト（鮮やかなブランドカラーを使ったダークモードは、保守が難しくなります）
ニュートラル、エンタープライズ向け、機能的	ライト。システム設定に従う切り替え機能を用意

ブランドのメインカラーが非常に暗い色（ネイビー、深緑、黒に近い色）なら、ダークモードで自然に活かせます。明るく鮮やかな色を中心にブランドを構築している場合は、ライトモードなら色が引き立ちます。

---

ダークモードのトークン原則

テーマ切り替えは、パレットをもう1つ用意することであり、単なる切り替えではありません。 すべてのセマンティックカラーには、アルゴリズムで反転させた値ではなく、各モードで検証済みの値が必要です。ライトモードで合格するコントラストも、ダークモードでは通用しないことがよくあります。彩度やエレベーションの見え方も異なります。実際にコストがかかるため、導入するだけの価値がある場合に限って実装する理由にもなります（上記を参照）。

ダークモードは単に色を反転することではありません。よくある間違いは次のとおりです。

• ベースサーフェスに純粋な黒（#000000）を使わないでください — 奥行きを出すには、非常に暗いニュートラルカラー（#0A0A0F、#111827）を使います
• ダークモードのサーフェス階層には、シャドウではなく明度を使います — ベース、+1、+2のサーフェスは、シャドウを強くするのではなく、段階的に明るくします
• ブランドカラーの彩度を少し下げます — 暗い背景に鮮やかな色を使うと、視覚的に強すぎることがあります。彩度を10～15％下げると、読みやすさを保てます
• 反転したテキストではフォントウェイトを上げます — 暗い背景の明るいテキストは、ライトモードの同じウェイトより「細く」見えることがよくあります。読みやすさを維持するには、ウェイトを1段階上げます（例：RegularからMedium、またはMediumからSemibold）。
• テキストのコントラストは必ず確認します — 暗いサーフェス上の明るいテキストが、自動的にWCAG準拠になるわけではありません。すべての組み合わせを確認してください

トークンの値と同じリテラル値は、そのトークンそのものです。 ハードコードされた色が、現在のテーマでトークンが解決される値と偶然一致しても、それは偶然でもローカルな選択でもありません。テーマに追従できない形式で記述された、そのトークンです。その影響は、値が欠けるのではなく、反転した状態で現れます。ダークモードの値で固定されたサーフェスは、ライトモードで単に見た目が不自然になるだけではありません。周囲との関係が逆転し、沈んで見えていたものが浮き上がり、奥に退いていたものが前面に出てきます。レイアウトはそのまま描画され、エラーも発生しません。報告されるのは、画面に違和感があるという声だけです。規律に頼ってこれを防ごうとしてはいけません。リテラル値は、どのトークン監査でも構造上検出されないからです。機械的に対処してください。マークアップをgrepしてリテラルの色値を探し、その件数を数値で負債として管理し、ゼロになったら新たな値が追加された場合にビルドを失敗させます。grep後も残るリテラルには、書面で理由を残す必要があります。「どうせトークンと同じ値だから」は、決して認められない理由です。

/* Dark mode surface scale */
--color-surface:         #0A0A0F;  /* base */
--color-surface-raised:  #141419;  /* cards */
--color-surface-overlay: #1E1E26;  /* modals, popovers */
--color-border:          rgba(255,255,255,0.08);
--color-text:            #F0F0F5;
--color-text-secondary:  #8A8F98;

---

レビューチェックリスト

• カラーモードの選択は、ブランドのトーンと使用状況を踏まえて意図的に行われていますか？
• 複合モードの場合、prefers-color-schemeでデフォルトが設定されていますか？
• テーマセレクターを実装している場合、目立ちすぎず、かつアクセスしやすい場所に配置されていますか？
• ダークモードでは、サーフェスをシャドウだけでなく明度の段階で区別していますか？
• ダークモードでは、視覚的に強くなりすぎないよう、ブランドカラーの彩度を少し下げていますか？
• どちらのモードでも、テキストと背景のコントラスト比をすべて検証していますか（WCAG 2.2 AA）？
• 光学的な読みやすさを維持するため、反転したテキスト（明るい色のテキストを暗い背景に表示）では、フォントウェイトを1段階上げていますか？
• ダークモードのベースサーフェスに純粋な黒（#000000）を使わないようにしていますか？