企業サイトのダークモード対応、導入前に知るべきこと

企業サイトにダークモードのデザイン対応が求められる理由

Webサイトのリニューアルにおいて、なぜダークモードへの対応がこれほど議論されるのでしょうか。単なる「見た目の好み」だと思われがちですが、実はユーザーの利用実態に基づいた合理的な理由があります。

最大の要因は、スマートフォンユーザーの環境変化です。iOSやAndroidといった主要OSがシステムレベルでダークモードを標準搭載したことにより、多くのユーザーが常時、あるいは夜間にこの設定を利用するようになりました。

ここで問題となるのが、WebサイトとOS設定の「不一致」です。ユーザーが端末をダークモードに設定している状態で、背景が真っ白なWebサイトを開いた瞬間を想像してみてください。暗い部屋で突然懐中電灯を照らされたような眩しさを感じ、反射的にブラウザを閉じてしまう可能性があります。この「離脱リスク」を避けることが、企業サイトにおける対応の第一義です。

また、機能面での具体的なメリットも立証されています。特に有機ELディスプレイ（OLED）を搭載したスマートフォンでは、ダークモードの使用がバッテリー寿命の延長に貢献します。

これに関しては、米国のパデュー大学が2021年に発表した研究結果が参考になります。同研究によると、明るさ100%の状態でダークモードを使用した場合、一般的なアプリで平均して約39%〜47%ものバッテリー消費を節約できるというデータが示されました。

つまり、ダークモードへのデザイン対応は、流行を追うだけでなく、「ユーザーの目への負担軽減」と「デバイスのバッテリー節約」という、使いやすさや快適さといったユーザー体験（UX）を提供する施策と言えます。

ユーザーに好かれるダークモードのデザイン対応と配色ルール

ダークモードの導入を決めたとしても、単に「白と黒を反転させる」だけでは不十分です。質の高いダークモードは、ユーザーの目の健康や読みやすさに配慮された、緻密な計算の上に成り立っています。ここでは、プロが意識しているデザインの鉄則をご紹介します。

ダークモードは目に悪い？メリットとデメリットを整理

「ダークモードは逆に目に悪いのではないか」という疑問をよく耳にします。結論から言えば、環境とデザインの品質に左右されます。

暗い場所で画面を見る際、ダークモードは瞳孔の収縮を抑え、目の疲れ（眼精疲労）を軽減する効果が期待できます。しかし、明るい場所での使用や、コントラストが強すぎる設定においては、文字が滲んで見える「ハレーション」という現象を引き起こすことがあります。

特に乱視の傾向があるユーザーにとっては、真っ黒な背景に真っ白な文字が表示されると、光が散乱して読みづらくなるケースがあります。つまり、「目に悪い」と言われる原因の多くは、適切なコントラスト調整がされていない「配色の失敗」にあるのです。

視認性を高めるダークモードの配色とコントラスト

では、読みやすく快適なダークモードを作るにはどうすればよいのでしょうか。Googleが公開しているデザインシステム「Material Design」のガイドラインが、非常に具体的で参考になります。

まず、背景色には「完全な黒（#000000）」を使用しないことが推奨されています。完全な黒は有機ELディスプレイ（黒い部分は発光しない仕組み）などでスクロールした際に、ピクセルが消灯状態から点灯状態へ切り替わる遅延により、スクロール時に文字や輪郭がにじんで見える「黒滲み（Black Smearing）」を起こす可能性があるからです。

そのため、Googleのガイドラインでは、背景色として濃いグレー（推奨例：#121212）を使用することを提案しています。濃いグレーを使用することで、要素にドロップシャドウを落とした際の立体感も表現しやすくなります。

また、文字色についても「完全な白（#FFFFFF）」を避け、不透明度を調整してコントラストを和らげることが重要です。例えば、最も強調したいテキストには87%程度の白、補足的なテキストには60%程度の白を使用することで、目の負担を減らしつつ情報の階層構造を明確にできます。

デザインのクオリティが高いダークモードの参考サイト

自社サイトのデザインを検討する際は、すでに多くのユーザーに受け入れられている大手プラットフォームの配色を分析するのが近道です。

例えば、エンジニア向けプラットフォームの「GitHub」や、動画サイト「YouTube」のダークテーマは、長時間見ていても疲れにくい絶妙なグレーの配色を採用しています。開発者ツール（F12キー）を使って、彼らがどのようなカラーコードを使用しているかを確認してみると良いでしょう。

また、デザインギャラリーサイトの「Dribbble」や「Awwwards」で「Dark Mode」と検索すると、最新のトレンドを取り入れた洗練されたUIデザインを数多く閲覧できます。これらを参考に、自社のブランドカラーをどのようにダークモードに落とし込むか、イメージを膨らませてみてください。

参考：デザイナーのSNS「dribbble」を知ってる？
参考：WEB制作者なら知っておきたい！世界最大級のWebサイトのアワード「Awwwards」をまるっと解説

Webサイトをダークモードのデザイン対応にする実装ステップ

デザインの方針が決まったら、次はそれをWebブラウザ上で動作させるための実装段階に入ります。現代のWeb制作では、OSの設定を読み取る方法と、ユーザーが手動で切り替える方法の2つを組み合わせるのが主流です。

CSSで実装するダークモードの基本設定

最も基本となるのが、ユーザーのOS設定（iPhoneやWindowsのテーマ設定）を検知して、自動的にデザインを切り替える方法です。これにはCSSのメディアクエリである prefers-color-scheme を使用します。

効率的な管理のためには、「CSS変数（カスタムプロパティ）」を活用するのが鉄則です。色を直接指定するのではなく、あらかじめ「背景色」や「文字色」という変数を定義しておき、ダークモードの時だけその変数の中身を入れ替えるという手法をとります。

/* ベースとなる色の定義（ライトモード） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* ダークモード時の色の定義（上書き） */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

/* 実際の適用 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

このように記述することで、ページ数が増えても一箇所の修正でサイト全体の色を管理でき、メンテナンス性が向上します。

HTMLとJavaScriptで作るダークモードの切り替えスイッチ

OSの設定にかかわらず、ユーザーが自分の好みで「ライト」か「ダーク」を選べるようにすることも、ユーザビリティの観点で重要です。これには、HTMLで切り替えボタンを作成し、JavaScriptで制御を加えます。

一般的な実装ロジックは以下の通りです。

まず、CSSでは先ほどのCSS変数を活用し、.dark クラスが付いた時に色を切り替えるよう設定します。

/* ベースとなる色の定義（ライトモード） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* .darkクラスがある時（ダークモード） */
:root.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}

/* 実際の適用 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

次に、JavaScriptでボタンのクリック処理と、設定の保存・復元を行います。

const toggleBtn = document.getElementById('toggle-btn');

// ページ読み込み時に保存済みの設定を適用
if (localStorage.getItem('theme') === 'dark') {
  document.documentElement.classList.add('dark');
}

// ボタンをクリックした時の処理
toggleBtn.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');

  // 現在の状態をlocalStorageに保存
  const isDark = document.documentElement.classList.contains('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

このコードでは、document.documentElement で html 要素を取得し、classList.toggle() でクラスの付け外しを行っています。また、localStorage に設定を保存することで、ユーザーがブラウザを閉じて再訪問した際も、前回選んだテーマが自動的に適用されます。

画像やロゴ素材の出し分けと最適化

見落としがちなのが、ロゴや写真などの画像素材です。例えば、背景が透明で文字が黒いロゴ画像は、ダークモードの黒い背景上では見えなくなってしまいます。

この問題は、HTMLの <picture> タグを使用することで解決できます。CSSやJavaScriptを使わずに、HTMLだけでOSの設定に応じた画像の出し分けが可能です。

<picture>
  <!-- ダークモード用のロゴ（白文字など） -->
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">

  <!-- 通常のロゴ（黒文字など） -->
  <img src="logo-light.png" alt="会社ロゴ">
</picture>

また、一般的な写真画像についても、ダークモード時には少し明るすぎて目が眩むことがあります。その場合は、CSSフィルターを使って画像の輝度をわずかに下げるといった配慮を組み込むと、サイト全体のトーンが統一され、非常に洗練された印象になります。

/* OS設定に連動する場合 */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.8);
  }
}

/* 手動切り替え（.darkクラス）に対応する場合 */
:root.dark img {
  filter: brightness(0.8);
}

このように、テキストの色だけでなく画像の見え方にも気を配ることで、ダークモード時の体験が格段に向上します。

失敗しないダークモードのデザイン対応における注意点

ダークモード対応で最も陥りやすい失敗は、既存のデザイン資産（影や奥行き表現）が機能しなくなることです。

一般的な「ライトモード」のデザインでは、カード型のレイアウトやボタンを背景から浮かび上がらせるために「ドロップシャドウ（影）」を多用します。しかし、ダークモードの暗い背景上では、黒い影はほとんど視認できません。

そのため、ダークモードでは「影」ではなく「面の明るさ」で奥行きを表現する必要があります。Googleのマテリアルデザインでも定義されている通り、手前にある要素ほど、背景色を少し明るくして重なりを表現するのが正解です。

また、企業サイト特有の注意点として、ブランドカラーの扱いには慎重さが求められます。企業のコーポレートカラーが濃い青や彩度の高い赤である場合、黒背景の上に乗せると視認性が極端に落ちたり、不快な振動（ハレーション）を感じさせたりすることがあります。

厳格なブランドガイドラインがある場合でも、ダークモード専用の「アクセシビリティ対応カラーパレット」を新たに策定し、彩度を落としたり明度を上げたりした代替色を用意することが、ブランドイメージを守ることにつながります。

まとめ：ダークモードのデザイン対応でWebサイトの価値を高めよう

この記事では、なぜ今ダークモード対応が求められているのか、目にやさしい配色の考え方、そして実際の対応方法までを順を追ってご紹介してきました。

ダークモードのデザイン対応は、特別な人だけが使う機能や一時的な流行ではありません。パソコンやスマートフォンの基本機能として広く使われるようになった今、利用者の目への負担を減らし、さまざまな利用環境に配慮するための、ごく自然な取り組みだと言えます。

ここで、今回お伝えしたポイントを簡単に整理します。

• 色を反転するだけでは不十分
  真っ黒な背景ではなく、少しやわらかい濃いグレーを使い、文字が無理なく読める配色を考えることが大切です。
• 自動と手動の両方に対応する
  端末の設定に合わせて自動で切り替わる仕組みに加え、利用者が自分で表示を選べる切り替えボタンがあると親切です。
• ロゴや画像もあわせて調整する
  背景が暗くなることで見えにくくならないよう、画像やロゴもダークモード向けに確認・調整します。
• 影に頼らず、明るさの差で区別する
  暗い画面では影が目立ちにくいため、色の明るさの違いで情報の区切りを表現します。

Webサイトを新しく作る場合やリニューアルする際に、最初からダークモードデザイン対応を前提にしておくことで、後から対応するよりも手間やコストを抑えやすく、全体の見た目も整えやすくなります。