memo
memo
ウェブサイトをCSSでダークモード対応する

ウェブサイトをCSSでダークモード対応する

みなさん、スマホやパソコンでダークモード使われていますか？

スマホの普及により、夜間であったりや暗い場所で画面を見る機会が増えていると思います。
そんな中、少しでも目の負担を減らそうと2019年頃から続々とOS対応されはじめ、それに伴いダークモードを取り入れているウェブサイトやアプリも増加傾向にあります。

2019年というと、MacOSだとMojave、IOSで言うと13あたりですかね。
間違ったらすみません。

※デバイスやOSによって、ダークモードやダークテーマはなど呼び方が異なるようですが、本記事ではダークモードに統一して書かせて頂きます。

サービスを例に挙げるなら、YouTubeとかGoogleMap、SNSだとTwitterやInstagramなんかでも対応されてますよね。

今回は、そのダークモードの特徴や、cssだけで簡単に対応できる実装方法をご紹介していきます。

ダークモードとは？

一般的にウェブサイトやアプリの表示画面は、デフォルトであれば白い背景に黒い文字でを基本とする表示ですが、それを黒い背景に白い文字に表示させる機能のことを指します。
（反転という表現は適さないような気がしたので使用しませんでした）

Wikipediaでは下記のように説明されています↓

暗い背景に明るい色のテキスト、アイコン、およびグラフィカルユーザーインターフェイス要素を使用するカラースキームであり、多くの場合、用語で説明されています。
https://en.wikipedia.org/wiki/Light-on-dark_color_scheme


このダークモードですが、表示のされ方はウェブサイト側の設定に依存します。
ブラウザをダークモードに設定している場合でも、閲覧サイトがダークモード対応していれば黒を基調とした表示になりますが、対応していない場合はデフォルトの白基調で表示されます。

デバイスの外観モードを変えたからといって全てのサイトやアプリの表示が一律に変わるわけではなく、それぞれの運営者側で対応していないと表示は変わりません。

では次に、ダークモード対応することによってユーザーに与えるメリット・デメリットを考えていきます。

メリット

暗い場所で見やすい

白背景のサイトに比べて、暗い場所では黒背景の方が閲覧環境と画面の明るさの差が少なくなります。
そのため、発光も少なく眩しさが低減されるため、ユーザーにとって見やすいウェブサイト・アプリを提供することができます。
また、眩しさがない分、目への負担も軽減できます。（これが一番大事）

長時間画面を見続ける必要があるサイトは、対応していた方が優しいかなと思います。

バッテリーの節約

有機EL（OLED）搭載のデバイスに限った話ですが、有機ELでは黒を発光素子を消灯して表現するので、黒基調の内容を表示している時はバッテリー消費の節約になります。

画像や動画映え良くなる

彩度の高い色は背景が黒いとコントラストが高く見えるので、写真や動画映えがとても良くなり、インパクトのあるデザインに見せることができますね。

デメリット

明るい場所で見づらい

メリットでは暗い場所で見やすいとお話ししましたが、明るい場所では黒に反射した光に白い文字が埋もれて字が見づらくなります。
もし細めの明朝体のような視認性の高くないフォントの場合は余計に見えづらくなってしまう可能性があります。
この辺は、対応する際にしっかりとした設計が必要かなと思います。

対応済・未対応間の明暗差が大きい

前述した通り、ダークモードに対応していないウェブサイトはそのまま白基調で表示されます。
そのため、対応しているウェブサイトから遷移すると明暗の差が大きく、目にかなりストレスがかかります。

さて、ここまでメリットデメリットをご紹介しましたが、次に対応方法をご紹介したいと思います。

対応方法

対応方法は本当ーに簡単！
レスポンシブ対応時なんかによく使うメディアクエリで prefers-color-scheme を指定。
モードを dark で指定して、その中にダークモードで適応したいcssを書くだけ。

@media (prefers-color-scheme: dark) {
  // ここにダークモード用のスタイルを記述
  .main {
    background: #222;
    color: #fff;
  }
}

これだけ。

たった数行で実現できるので、導入の敷居も低く既存サイトへの対応も簡単にできますね。

prefers-color-scheme?

prefers-color-schemeというメディア特性では、閲覧ユーザーのテーマを検出する役割をはたしています。
※メディア特性は、画面サイズやデバイスの機能、環境などの特性を指定します。

そのため、上記のコードで dark と記述しているモード指定を light と書き換えると、ライトモード（デフォルトの外観モード）専用の記述をすることも可能です。

// ライトモード・ダークモード用にそれぞれのスタイルを記述する場合

@media (prefers-color-scheme: light) {
  // ライトモードの時に使用するスタイル
  .main {
    background: #fff;
    color: #222;
  }
}

@media (prefers-color-scheme: dark) {
  // ダークモードの時に使用するスタイル
  .main {
    background: #222;
    color: #fff;
  }
}


表示確認方法

ウェブサイトやアプリなどの外観モードはデバイスの設定に依存するのですが、だからと言って開発・制作時にいちいち切り替えるのは面倒ですよね。
ウィンドウも増えますし。

そんな時に便利なのが、Chromeのデベロッパーツール。
なんと、ツール内でダークモード/ライトモードの表示切り替えができてしまうんですね。

①デベロッパーツールを開く

Macの方　　【　option + ⌘ + I　】
Windowsの方【　F12 or Ctrl + Shift + I　】

②3点リードメニュー内『More tools』から『Rendering』の順に開く

検証領域右上、閉じるボタンのすぐ横にあります。

③Renderingメニュー内の「Emulate CSS media feature prefers-color-scheme」を変更する

ここで light / dark を切り替えることで、表示を変更することが可能です。


開発時はデスクトップで作業すると思うので外観モードの変更自体は面倒ではないかもしれません。
ですが、ウィンドウも増えるし何より検証ツールは常に使うと思うので、その中で完結できたら効率的かと思います。
便利だと思うので、ぜひ試してみてください。

対応ブラウザ

対応ブラウザですが、投稿日現在では下記のようになっています。

いわゆるモダンブラウザでは対応されていますので、安心ですね。

さいごに

対応方法は、Darkmode.jsのようなライブラリや、prefers-color-scheme特性をJavaScriptで取得してそれぞれのテーマ用のクラスを作って当て〜なんていうやり方などありますが、今回は個人的に一番簡単な方法をご紹介しました。

また、一番最初にも書きましたが、ダークモードの対応自体は必須ではないです。
設定していなければそのままの表示がされるだけなので、絶対に対応しなければならない・対応しないとペナルティが...みたいなことはありません。

ただ、個人的にはダークモード対応しているサイトを見ると、『あ、優しい...』と感じることはあります。
あと、どういう設計にしてるのかな？っていうところの勉強になります（笑

僕が思い当たったダークモード対応の注意点としては、ダークモード用のデザイン設計かなと思いました。
単純に背景色を #ffffff から #000000 、文字色を #000000 から #ffffff にすればいいわけではないですし、全体の配色深度や画像の彩度など、考えることが結構あると思います。
そこでも制作にかかる工数を使うことになるので、その部分をどう考えるかかなと。


参考になれば幸いです。
最後までお読み頂きありがとうございました。