Accessibility First

ダークモードとライトモード：Webデザインと開発の完全ガイド

Julia Undeutsch

3分で読む

ダークモードとライトモードは、Webサイトやアプリのデザインにおいて重要な要素です。本記事では、それぞれの特徴や利点、アクセシビリティへの影響、実装方法、システム設定との連携、テスト方法について詳しく解説します。トグルなしのデザインの考慮点についても触れ、すべてのユーザーにとって最適な体験を提供する方法を紹介します。

ダークモードとライトモードとは？

ダークモードとライトモードは、Webサイトやアプリケーションのカラースキームを変更する2つの異なる視覚テーマです。ライトモードは通常、白または明るい背景に黒いテキストを使用し、ダークモードはその逆で、暗い背景に明るいテキストを使用します。

これらのモードの目的は、ユーザーの好みや環境条件に応じて、快適でカスタマイズ可能な閲覧体験を提供することです。

なぜ必要なのか？（アクセシビリティとユーザビリティ）

ダークモードとライトモードを提供する主な理由は、アクセシビリティとユーザビリティの向上です。一部のユーザーは、特に暗い環境での目の負担を軽減するためにダークモードを好みます。一方で、明るい環境ではライトモードの方が読みやすいと感じる人もいます。

さらに、以下のような利点があります。

  • 目の疲れを軽減： 暗い環境ではダークモードの方が目に優しい。
  • 読みやすさの向上： 明るい環境ではライトモードの方が高いコントラストを提供。
  • 省エネルギー： OLEDやAMOLEDディスプレイでは、ダークモードの方が電力消費が少ない。
  • アクセシビリティの向上： 視覚障害、光過敏症、写真恐怖症のユーザーにとって、カスタマイズ可能なテーマは有益。

Webサイトでの一般的な実装方法（トグルスイッチ）

ダークモードとライトモードの最も一般的な実装方法は、トグルスイッチを使用することです。これにより、ユーザーが手動でモードを切り替えることができます。一般的な実装プロセスは次のとおりです。

  1. トグルボタンを追加： UIにシンプルなスイッチを配置。
  2. CSS変数を使用： カラーバリエーションを定義し、動的に切り替え。
  3. ユーザー設定を保存： 選択したモードをlocalStorageやクッキーに保存。
  4. スタイルを適用： JavaScriptを使用して選択したモードを適用。

CSSの実装例

:root {
  --background-color: white;
  --text-color: black;
}

[data-theme='dark'] {
  --background-color: black;
  --text-color: white;
}

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

JavaScriptのトグル例

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.setAttribute(
    'data-theme',
    document.documentElement.getAttribute('data-theme') === 'dark'
      ? 'light'
      : 'dark'
  );
  localStorage.setItem(
    'theme',
    document.documentElement.getAttribute('data-theme')
  );
});

システムおよびブラウザの設定による影響

最近のブラウザやオペレーティングシステムは、ダークモードやライトモードの環境設定をビルトインでサポートしています。手動でスイッチを切り替える代わりに、ウェブサイトはcolor-schemeを使用してユーザーの好みを検出することができます：

:root {
  color-scheme: light dark;
}

CSSに頼りたくない場合は、HTMLでモードを追加することもできます。

<head>
  <meta name="”color-scheme”" content="”light" dark” />
</head>

これだけで、ライトモードとダークモードが提供されます。

body {
  background-color: plum;
  color: indigo;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: indigo;
    color: plum;
  }
}

場合によっては、ブランディングや好みに応じて色を調整したいこともあるでしょう。このような場合は、CSSのmedia query prefers-color-schemeを使用します：

しかし、最新の機能の1つでは、media queriesなしで効果を得るオプションも提供されています。

:root {
  --light: plum;
  --dark: indigo;

  color-scheme: light dark;
}

input {
  --accent-color: light-dark(var(--dark), var(--light));
  accent-color: var(--accent-color);
}

オペレーティング・システムやブラウザがライト・モードの場合は1番目の値が使用され、ダーク・モードの場合は2番目の値が使用されます。その結果、ウェブサイトはユーザーのオペレーティング・システムやブラウザーの設定に自動的に適応し、シームレスなユーザー体験を保証します。

prefers-color-schemeのテスト方法

ダークモードとライトモードの実装が正しく動作することを確認するには、Chrome DevToolsを使用できます。

  1. Chrome DevToolsを開く（Windows/Linuxでは F12 または Ctrl+Shift+I、macOSではCmd+Opt+I）。
  2. Rendering タブを開く。表示されていない場合は、Command Menu (Ctrl+Shift+P または Cmd+Shift+P) を開き、「Rendering」を検索し、「Show Rendering」を選択。
  3. Emulate CSS media feature prefers-color-scheme のセクションまでスクロール。
  4. Dark を選択するとダークモードに、Light を選択するとダークモードに戻ります。

これにより、システム設定を変更せずにWebサイトの外観と動作を簡単に確認できます。

トグルなしでのデザインと開発の考慮事項

prefers-color-schemeのみに依存し、手動トグルを提供しない場合、次の点に注意が必要です。

  • 適切なコントラストを確保： ダークモードでは真っ黒 (#000000) や真っ白 (#FFFFFF) に頼らず、 #121212 や #F5F5F5 のような柔らかい色合いを使うと読みやすくなります。
  • 異なるデバイスでテスト： システムの設定が必ずしもユーザーの好みに合っているとは限らないため、すべてのモードでデザインを確認することが重要。Chrome DevToolsの「Enforce Dark Mode」を利用してダークモードの動作をチェック。
  • カラーバランスの考慮： ブランドカラーがダークモードで見づらくならないように調整。
  • 画像の適応： ダークモードでは一部の画像が見えにくくなる可能性があるため、filter: invert(1)の適用や、異なるモードごとの画像を用意する。

まとめ

ダークモードとライトモードは、ユーザー体験、アクセシビリティ、エネルギー効率を向上させる機能です。手動のトグルは依然として広く使用されていますが、最新のCSSとシステム設定を活用することで、自動的な適応も可能になります。トグルの有無に関わらず、デザインと実装の工夫により、どちらのモードでも視認性が確保されることが重要です。

This post was originally published on Fronta11y for GAAD (Global Accessibility Awareness Day) 2025, in German.

Original article on Fronta11y.