ダークモードUIデザイン完全ガイド：美しく・使いやすいダークUIの作り方
ダークモードUIの正しい実装方法を解説。カラーパレット設計・コントラスト確保・エレベーション表現など、美しいダークUIを作るための実践的な技術をまとめました。
ダークモードはもはやトレンドではなく、標準機能となりました。バッテリー消費の削減、目の疲れの軽減、そして現代的な美しいビジュアルを実現するダークモード。しかしその実装は、単純に白と黒を入れ替えるだけでは上手くいきません。
本記事では、美しく・使いやすいダークモードUIを作るための実践的なガイドをまとめます。
ダークモードの基本概念：「黒」ではなく「暗色」を使う
最初にして最も重要なポイント：ダークモードに純粋な黒（#000000）は使ってはいけません。
純粋な黒は目に強すぎるコントラストを生み出し、長時間の使用で疲れやすくなります。代わりに、やや明るい暗色を使うことで、目に優しく深みのあるダークUIが実現できます。
推奨ベースカラー：
- 最も暗い背景：#121212（Material Designの推奨値）
- カード背景：#1E1E1E
- サーフェス2：#242424〜#2A2A2A
- ボーダー：#2E2E2E〜#3A3A3A
エレベーション（階層）の表現
ライトモードでは影（シャドウ）を使って要素の階層を表現しますが、ダークモードでは影が見えにくいため、明度の差（ライトネス）でエレベーションを表現します。
| エレベーションレベル | 推奨オーバーレイ透明度 | 使用場所 |
|---|
|---|---|---|
| Level 0 | 0% | 背景 |
|---|---|---|
| Level 1 | 5% | カード・サーフェス |
| Level 2 | 8% | サイドドロワー |
| Level 3 | 11% | ナビゲーションバー |
| Level 4 | 12% | FAB（浮遊ボタン） |
| Level 5 | 14% | モーダル |
テキストカラーとコントラスト
ダークモードでのテキストは、白（#FFFFFF）ではなく透明度を調整した白を使うことで、自然な読みやすさを実現します。
推奨テキストカラー（ダークモード）：
- プライマリテキスト：rgba(255, 255, 255, 0.87) ≈ #DEDEDE
- セカンダリテキスト：rgba(255, 255, 255, 0.60) ≈ #999999
- 無効テキスト：rgba(255, 255, 255, 0.38) ≈ #616161
- ヒントテキスト：rgba(255, 255, 255, 0.30)
WCAG AA基準（コントラスト比4.5:1以上）を満たすことを常に確認しましょう。
アクセントカラーの調整
ライトモードで使っていたアクセントカラーをダークモードにそのまま流用するのはNGです。ダーク背景に対して視認性が高く、かつ目を刺すような明るすぎる色にならないよう調整が必要です。
調整の方針：
- 彩度を若干下げる（目への刺激を軽減）
- 明度を上げる（暗い背景に対してのコントラストを確保）
- テスト：実際のダーク背景でコントラスト比を確認する
例：
- ライトモードのプライマリ：#1565C0（ダークブルー）
- ダークモードのプライマリ：#90CAF9（ライトブルー）
セマンティックカラーシステムの構築
ダークモードとライトモードを両対応するためには、「赤を使う」ではなく「エラーカラーを使う」というセマンティック（意味的）なカラーシステムの構築が不可欠です。
セマンティックカラーの例：
--color-primary: (ライト: #1565C0 / ダーク: #90CAF9)
--color-background: (ライト: #FFFFFF / ダーク: #121212)
--color-surface: (ライト: #F5F5F5 / ダーク: #1E1E1E)
--color-on-surface: (ライト: #212121 / ダーク: #E0E0E0)
--color-error: (ライト: #B00020 / ダーク: #CF6679)
--color-success: (ライト: #2E7D32 / ダーク: #81C784)CSSカスタムプロパティ（CSS変数）や、iOSのSemanticカラー、AndroidのMaterial Designカラーシステムを活用すると実装がスムーズです。
画像・アイコンのダークモード対応
画像はモードを切り替えても同じ画像を使いますが、アイコンは配慮が必要です。
アイコンの対応：
- モノクロアイコンはCSS color/fillで切り替え可能
- カラーアイコン（ブランドロゴなど）はダークモード用の別バリアントを用意する
- SVGアイコンはCSSで色を制御しやすい
グラフ・チャートの対応：
- ライトモードで映えるビビッドな色がダークモードでも使えるとは限らない
- グリッドライン・軸ラベルの色もダークモード用に調整する
アニメーションとトランジション
ダークモード切り替え時のアニメーションは、ユーザー体験を大きく左右します。
推奨アプローチ：
- モード切り替えには0.3秒程度のフェードトランジションを実装
- 瞬時の切り替えは目への刺激が大きいため避ける
- システムのダークモード設定変更に自動追従する実装も検討する
ダークモードのテスト方法
ダークモードUIのテストには、以下の環境でチェックすることをお勧めします。
- 実機テスト：iPhoneとAndroid実機でそれぞれ確認
- 輝度テスト：画面輝度を最低・最高の両方で確認
- コントラストチェックツール：Figmaのアクセシビリティプラグインや専用ツールを使用
- 目の疲れテスト：30分以上の実際の使用でテスト
まとめ
ダークモードUIの設計は、単純な白黒の反転ではなく、ダーク環境に最適化されたカラーシステムを一から設計する作業です。適切なコントラスト・エレベーション・セマンティックカラーを組み合わせることで、美しく・使いやすいダークモードUIが実現できます。
UI ZUKANには、ダークUIを採用した優れたアプリ事例が多数収録されています。ぜひ参考にして、あなたのアプリのダークモードUIをブラッシュアップしてください。