ダークモードUIデザインガイド：美しく実装しやすいダークテーマ設計

ダークモードはiOS 13・Android 10から標準機能となり、多くのユーザーが暗い環境でダークモードを使用しています。美しく機能的なダークモードを実装するには、カラーシステムの設計段階からダークモードを考慮することが重要です。

ダークモードのメリット

ユーザー体験のメリット：

• 暗い場所での目への負担軽減
• バッテリー消費の削減（OLEDスクリーンの場合、黒ピクセルは消費がほぼゼロ）
• 没入感のある視聴体験（動画・ゲームなど）
• ユーザーの好み・スタイル

ダークモードカラーシステムの設計

セマンティックカラートークンの活用：

ライトモードとダークモードで異なる値に切り替わる「役割ベース（セマンティック）のカラートークン」を設計の中心に置きます。

// NG（固定値を使用）

background-color: #FFFFFF

// OK（セマンティックカラーを使用）

background-color: --color-background

Light: #FFFFFF

Dark: #1C1C1E

iOSのセマンティックカラー例（Apple HIG準拠）：

• システム背景色：Light #FFFFFF / Dark #000000
• グループ化された背景：Light #F2F2F7 / Dark #1C1C1E
• ラベル（テキスト）：Light #000000 / Dark #FFFFFF
• セカンダリラベル：Light #3C3C43 60% / Dark #EBEBF5 60%

ダークモードで気をつける配色

「真黒」と「深いグレー」の使い分け：

背景に#000000（純粋な黒）を使うと、コンテンツとの境界が見えにくくなります。iOSはDark Mode時に画面の種類によって#1C1C1Eや#000000を使い分けています。一般的には純黒よりも少し明るいダークグレーが推奨されます。

コントラスト比の確保：

ダークモードでもWCAG AA基準（コントラスト比4.5:1以上）を満たすことが重要です。ライトモードで4.5:1を満たす配色でも、ダークモードでは基準を下回ることがあります。

Elevationシステム（Material Design）：

ダークモードでは「シャドウ（影）」が見えにくくなるため、Elevation（レイヤーの高さ）を表現するために「重なるほど明るくなる」方法が用いられます（白をオーバーレイで重ねることで表現）。

画像・アイコンのダークモード対応

カラーアイコンの対応：

白い背景を前提としたカラーアイコン（企業ロゴなど）は、ダークモードでは背景が変わるため見えにくくなる場合があります。

対策：

• アイコンに薄い背景（丸型のバックグラウンド）を追加
• ダークモード専用のアイコンバリアントを用意
• アイコンをSVGで実装し、ダークモードで色を切り替え

画像のダークモード対応：

• 写真などの自然な画像：特別な対応不要
• UIの図解・スクリーンショット：背景が白い場合は暗い背景バリアントを用意

ダークモード切り替えUIのデザイン

設定→「テーマ」または「表示」の中にダークモードの設定を配置します。

モード選択のUI：

• システム設定に従う（推奨デフォルト）
• ライトモード
• ダークモード

クイック切り替え：

ヘッダーや設定画面にトグルスイッチで切り替えられるUIも人気です。

まとめ

ダークモードを美しく実装するには「セマンティックカラートークンを使ったカラーシステムの設計」が鍵です。ライトモードとダークモードの両方を設計段階から考慮し、コントラスト比・画像対応・Elevationシステムを整えることで、すべてのユーザーに快適な体験を提供できます。