ダークモード
Web サイトやアプリの画面を、暗い背景と明るい文字の配色に切り替える表示モードのことです。夜間の目への負担軽減や、スマホのバッテリー消費削減といったメリットがあります。（※ユーザーのスマホ・PC の OS 設定に連動して、自動で切り替える実装が一般的です）
設計の勘所：「本当に必要か？」を最初に見極める
「流行っているから」と安易に導入すると、ライト用とダーク用で 2 パターンのデザイン・保守工数が発生し、コストが二重にかかります。
- 期待値が高いサイト：SaaS（業務ツール）、読書系、ニュースアプリなど、長時間画面を見るもの。
- 期待値が低いサイト：一般的なコーポレートサイトや EC サイト。（無理に導入しなくても問題ないことが多いです）
実務でのチェックポイント（設計の論点）
導入する場合は、制作会社と以下の点をすり合わせます。
- 画像の対応：ロゴやアイコンが、暗い背景でも見えなくならないか（背景が透過されているか）。
- 読みやすさ：文字と背景のコントラスト比が、両方のモードで「AA（WCAG・Web アクセシビリティの推奨基準）」を満たしているか。
- 切り替え機能：OS 連動だけでなく、サイト上でもユーザーが任意で手動切り替えできるボタンを設けるか。
よくある落とし穴（注意点）
- デザインの崩れ：白背景を前提とした画像（PNG）の周りに白い枠が残ったり、ブランドカラーを無理に反転させて企業の印象が変わってしまったりする。
- 埋め込みコンテンツが浮く：YouTube 動画や広告バナーなど、外部のコンテンツが暗い背景の中で悪目立ちする。
- 片方だけ更新を忘れる：運用中、ライトモードの CSS だけを修正して、ダークモード側の更新を忘れて表示が崩れる。
- 画面のちらつき（FOUC）：読み込み時に、一瞬だけ白い画面がちらついてからダークモードになる不具合が起きる。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- ディレクター
会話上での使用例
リニューアル提案でダークモード対応を検討する場面
-
業者ディレクター
今回のリニューアルでダークモード対応も入れますか。
-
Web担当者
うちはBtoBのコーポレートで、見られるのは業務時間が中心なんです。優先度は低めですし、費用対効果も見えにくいので、当面はライトのみでいきましょう。
-
業者ディレクター
承知しました。将来必要になったら後から足せる作りにしておきます。
SaaSの管理画面でダークモード対応を進める場面
-
デザイナー
SaaSの管理画面なので、ダークモードはほぼ必須かと思います。
-
Web担当者
そうですね。ライトとダークの2パレットを最初から並行で設計してください。画像やロゴ、外部ウィジェットが両方でちゃんと見えるか一覧にして、コントラスト比はどちらもAA準拠でお願いします。
-
デザイナー
了解です。あとから片方だけ古くならないよう、更新ルールも決めておきます。