ダークモードとテーマシステム

ダークモードとテーマシステム

はじめに

ダークモードは単なるトレンドではなく、ユーザーの利用環境に応じた必須機能として定着しています。さらに、ブランドカラーやカスタマイズ可能なテーマを提供するSaaSも増えています。この章では、デザインシステムにテーマ機能を組み込む方法を学びます。

ダークモードの設計原則

ライトモードの色を単純に反転させるのではなく、専用の設計が必要です。

• ◆純黒を避ける: 背景色は#000000ではなく#121212〜#1A1A1Aを使用。目への負担を軽減
• ◆彩度を下げる: ライトモードの鮮やかな色をダークモードでは少し落ち着かせる
• ◆影の扱い: ダークモードでは影が見えにくいため、ボーダーや背景色の差で要素を区別
• ◆テキストコントラスト: 白文字が眩しくならないよう、本文には#E0E0E0程度を使用
• ◆階層表現: 暗い色→やや明るい色で要素の重なりを表現（ライトモードとは逆）

セマンティックトークンによるテーマ対応

テーマ切り替えを可能にするトークン設計を学びます。

• ◆参照トークンの活用: color-background: light→white / dark→gray-900 のように、テーマごとに値を切り替え
• ◆CSS Custom Properties: :root と [data-theme="dark"] でCSS変数の値を切り替える
• ◆レイヤートークン: surface-1、surface-2、surface-3のように、背景の階層レベルをトークン化
• ◆インタラクティブトークン: hover、active、focusの各状態の色もテーマごとに定義する

テーマ切り替えの実装

フロントエンドでのテーマ切り替え実装パターンを学びます。

• ◆OS設定の検出: prefers-color-schemeメディアクエリでOSのテーマ設定を検出する
• ◆ユーザー選択: システム/ライト/ダークの3択を提供し、localStorageに保存する
• ◆FOUC防止: ページ読み込み時のテーマのちらつきを防ぐ。HTMLヘッドにインラインスクリプトを配置
• ◆トランジション: テーマ切り替え時にスムーズなアニメーションを適用。transition: 200ms

マルチテーマ対応

ダークモードを超えた、複数テーマの提供方法を学びます。

• ◆ブランドテーマ: 企業カラーに合わせたカスタムテーマ。SaaSではテナントごとのブランディングに活用
• ◆アクセシビリティテーマ: ハイコントラストテーマ、色覚多様性対応テーマなど
• ◆季節テーマ: クリスマスや新年など、期間限定のテーマ。トークンの上書きだけで実現
• ◆テーマエディタ: エンドユーザーがカラーやフォントをカスタマイズできる機能

Figmaでのダークモード設計

Figmaでライト/ダークの両方を効率的に管理する方法を学びます。

• ◆Variable Modes: Figma Variablesのモード機能で、ライト/ダークの値を1つの変数で管理
• ◆セクション別表示: 同じ画面のライト版とダーク版を並べて確認・比較する
• ◆コンポーネント共有: ライト/ダークで別コンポーネントを作らず、変数の切り替えだけで対応
• ◆プロトタイプ: テーマ切り替えのインタラクションをFigmaプロトタイプで検証

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆自分のカラーパレットのダークモード版を設計し、コントラスト比を検証してみましょう
• ◆CSS Custom Propertiesでライト/ダーク切り替えを実装してみましょう
• ◆Figma Variablesでライト/ダークのモードを作成し、画面を切り替えてみましょう

📝まとめ

ダークモードとテーマシステムは、セマンティックトークンの設計が鍵です。色の直値ではなく意味ベースのトークンを使うことで、テーマの追加や変更が容易になります。Figma VariablesのMode機能を活用すれば、デザインファイルでも効率的にマルチテーマを管理できます。次の章では、モーションデザインの体系化を学びます。