なぜダークモードに対応させる必要があるのか？

最近、スマートフォンやPCを使う時間が増えたことで、ダークモードへの関心が高まっています。ダークモードは、画面の背景を暗くして文字やコンテンツを目立たせる方法で、目に優しく、特に夜や暗い場所で使うときに効果的です。
ダークモードにすると、ユーザー体験がぐっと良くなります。自分好みの表示モードを選べると、サイトへの満足度が上がり、また見に来たくなるかもしれません。さらに、最新のトレンドに対応しているサイトだと感じてもらえるので、信頼度もアップします。
また、ダークモードはバッテリーの節約にも役立ちます。特にOLEDディスプレイのデバイスでは、暗い画面が電力消費を抑えてくれるので、バッテリーの持ちが良くなります。こうした理由から、今、多くのサイトやアプリがダークモードを取り入れているんですね。では、ホームページをダークモードに対応させる方法を詳しく見ていきましょう。

ダークモードに対応させるための方法

ホームページをダークモードにするには、主にCSSとJavaScriptを使って設定します。これから、CSSとJavaScriptを使った簡単な方法を紹介します。

CSSの変更

ダークモードに対応させるには、まずCSSでスタイルを変更します。ダークモード用のスタイルを定義して、ユーザーがダークモードを選んだときに自動的に適用されるように設定します。

完成イメージ

基本的なCSS設定

ダークモード用のスタイルは、prefers-color-schemeメディアクエリを使って設定します。このメディアクエリは、ユーザーのデバイス設定に合わせてスタイルを適用してくれます。

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
  a {
    color: #bb86fc;
  }
  header, footer {
    background-color: #1e1e1e;
  }
  img {
    filter: brightness(0.8);
  }
}

/* ライトモード */
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
  a {
    color: #1e88e5;
  }
  header, footer {
    background-color: #f8f9fa;
  }
}

ダークモード用とライトモード用のスタイルを分けて設定することで、ユーザーが設定したモードに応じて、適切なスタイルが適用されます。

特定の要素に対するスタイルの調整

ダークモードでは、特定の要素が見づらくなることがあります。たとえば、背景が白いロゴなどです。これらの要素に対して、CSSを使って調整します。

@media (prefers-color-scheme: dark) {
  img.logo {
    filter: invert(1);
  }
}

この例では、img.logoクラスを持つ画像にinvertフィルタをかけて、白い部分が黒くなるようにしています。これでダークモードでも見やすくなります。

ダークモード用のカスタムスタイルシート

大規模なサイトでは、ダークモード用のスタイルシートを別途作成するのが便利です。これで、スタイルの管理がしやすくなります。

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">

ダークモード用のスタイルシートを別に読み込むことで、簡単にスタイルを切り替えられます。

JavaScriptの変更

JavaScriptを使って、ダークモードの切り替えをもっと動的にする方法もあります。ボタンをクリックしてダークモードとライトモードを切り替えることができるので、柔軟に対応できます。

完成イメージ

ダークモードのトグルボタンを追加

ダークモードの切り替えボタンを作成します。

<button id="dark-mode-toggle">ダークモード切り替え</button>

JavaScriptでスタイルを変更

const toggleButton = document.getElementById('dark-mode-toggle');
toggleButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

このコードでは、dark-modeクラスをbodyに追加したり削除したりして、スタイルを切り替えています。

CSSでダークモード用のスタイルを定義

JavaScriptでの切り替えに対応するために、CSSでdark-modeクラスを設定します。

/* ダークモード */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}
body.dark-mode a {
    color: #bb86fc;
}
body.dark-mode header, body.dark-mode footer {
    background-color: #1e1e1e;
}
body.dark-mode img {
    filter: brightness(0.8);
}

/* ライトモード */
body {
    background-color: #ffffff;
    color: #000000;
}
a {
    color: #1e88e5;
}
header, footer {
    background-color: #f8f9fa;
}

JavaScriptとCSSを組み合わせてダークモードの切り替えを実現することで、ユーザーに使いやすいインターフェースを提供できます。

ユーザーの設定を保存

ユーザーが選んだダークモードの設定をローカルストレージに保存し、次回以降に自動的に適用します。

const toggleButton = document.getElementById('dark-mode-toggle');
const currentMode = localStorage.getItem('darkMode') || 'light';
document.body.classList.toggle('dark-mode', currentMode === 'dark');

toggleButton.addEventListener('click', () => {
  const isDarkMode = document.body.classList.toggle('dark-mode');
  localStorage.setItem('darkMode', isDarkMode ? 'dark' : 'light');
});

このスクリプトでは、ダークモードを選んだ場合、その設定をローカルストレージに保存し、次回の訪問時に自動で適用されるようにします。

まとめ

ホームページをダークモードに対応させると、ユーザー体験が向上し、バッテリーの消費が抑えられたり、視認性が良くなったりと、さまざまなメリットがあります。CSSを使って基本的なスタイルを設定し、JavaScriptで動的な切り替えを実現することで、簡単にダークモード対応のウェブサイトを作ることができます。ダークモードの導入を検討する際には、ユーザーのニーズやデバイスの特性を考慮して、最適な方法を選びましょう。
弊社では、ダークモードに対応したホームページの制作も承っております。お気軽にお問い合わせください。