トレンドのダークモード
実際どう設計すべき？

近年、アプリやWebサイトで「ダークモード」に対応するのが非常に多くになってきました。
スマホの設定やPCのOSテーマに合わせて、画面が暗く切り替わるサイトを見たことはありませんか？

このダークモード、単に背景を黒くすればいいわけではありません。
「読みやすさ」「目の疲れ」「色のバランス」など、独自のデザインルールがあるのです。

今回はダークモード対応の基本から、配色のコツなどをシェアしていこうと思います！

そもそも「ダークモード」って何？

ダークモードとは、背景を暗く文字やUIを明るく表示するカラーモードのことです。
主にスマートフォンやパソコンの画面で、目の負担を減らしたり、電池消費を抑える効果があります。

【ライトモードとダークモードの比較】

ダークモード対応が重要な理由

1. ユーザーの快適さ

目への負担をやわらげ、夜間でも見やすく快適に閲覧できるようになります。

2. 省電力効果

有機ELディスプレイでは、黒いピクセルが発光しないためバッテリー消費を抑える効果があります。

3. デザイン性の向上

適切にデザインすれば、洗練されたモダンな印象を与えることが可能です。

4.アクセシビリティの向上

視覚に障がいのあるユーザーにとっても、コントラストの高い表示は情報にアクセスしやすくなる可能性があります。

ダークモード設計の「5つの原則」

① 背景は“黒に近いグレー”が◎

完全な黒（#000000）はコントラストが強すぎて、逆に目が疲れやすくなります。
代わりに、以下のような「ダークグレー」を使いましょう。

② 白すぎる文字も疲労に繋がる

ライトモードでの黒文字に対して、ダークモードでは白文字になります。
でも、純白（#FFFFFF）だとコントラストが強くて見づらいことも。

③ アクセントカラーは「光りすぎ注意」

ダーク背景に鮮やかな色をそのまま置くと、光って見えて目にキツい印象になります。
以下のように、彩度を抑えて調整しましょう。

④ 立体感の出し方

ダークな背景だとドロップシャドウが目立たなくなるため、代わりに以下を意識します。

• ボーダーで区切る（#2C2C2Cと#1E1E1Eの境目を使う）
• 内側の光（インナースタイル）で浮かせる感を演出

⑤ イラスト・アイコン・ロゴの差し替えを行う

明るい背景用の画像をそのまま使うと、白飛び・見づらさが出ます。
元々黒いアイコンだったものをそのまま使用してしまうと、目立たないどころか全く見えなくなってしまう可能性もあるのです。
それを回避するためにも、SVGやPNGで「ダーク用バージョンのアイコン」も用意しておくのがベストです。

ダークモードの実装

1. CSSで切り替える（prefers-color-scheme）

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #E0E0E0;
  }
}

この「メディアクエリ」を使えば、OSやブラウザがダークモードに設定されている人だけ、背景色と文字色が暗く切り替わります。

メディアクエリとは

「メディアクエリ（Media Query）」とは、Webサイトの見た目（レイアウトや色など）を、ユーザーの画面サイズや環境に応じて切り替えるCSSの仕組みのことです。
たとえば、

• スマホとパソコンでレイアウトを変えたい
• 画面が小さいときは文字を大きくしたい
• ユーザーがダークモードにしていたら、サイトも暗くしたい

こういった場合に用いられるのがメディアクエリです。

2.CSS変数（カスタムプロパティ）で管理する

CSS変数とは、「あとで何度でも使える“色や数値の名前”をCSSの中で登録しておく機能」です。
別名「カスタムプロパティ」とも呼ばれます。
そしてそのCSS変数とprefers-color-scheme（1.で紹介したメディアクエリ）を組み合わせれば、ユーザーのモードに応じて、自動で色を切り替えられます。

ライトモード（明るいとき）

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

ダークモード（暗いとき）

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #E0E0E0;
  }
}

実際に使うとき

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

これで、ユーザーがライトモードでもダークモードでも、背景や文字の色が自動で切り替わるようになります。

紹介済み・ダークモード推奨カラーコードまとめ

まとめ

ライトモードと並んで、ダークモードも標準設計として意識する時代です。
「黒くすればOK」ではなく、ユーザーにとって快適か、読みやすいか、美しいかを軸に設計しましょう。

一度しっかり設計しておけば、あらゆるデバイスやOSに対応し、ユーザー体験（UX）の向上につながります。

今後のサイト制作・改善で、ぜひ「ダークモード対応」を取り入れてみてください！