「ダークモード」対応の注意点と手順を知りたい!

2022-04-18

Webサイトの「ダークモード」対応にチャレンジ!

「ダークモード」とは?

パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。
明るい背景に暗色系の文字が「ライトモード」、グレー背景に白文字が「ダークモード」。
2019年くらいからOSの設定で選べる端末が増えてきているようですね。みなさんはどちらでブラウジングする設定にしていますか?

ダークモードのメリットとして、「暗い環境では輝度がおさえられ、目に優しい」ことが言われています。明るい場所で見ることが多いならライトモード、周囲が暗いならダークモードがよいそう。
また、有機EL(OLED)の機種ならば充電の持ちがよくなるということですよ。

アプリとかSNSは浸透してきてるみたいですが、Webサイトはまだ様子を見ているところも多いようです。

サイト側が「ダークモード」に対応していなければ、ユーザーがダークモード設定にしていても、通常のライトモードで表示されます。ユーザーからすると、ずっとダークモードで閲覧していて、ページ遷移してライトモードが表示されたら目が痛いですね…。せっかく訪問してくれたのだからストレスは軽減させたいです。

「ダークモード」のデザイン注意点

「ダークモード」への対応作業、下手するとダークモード時の視認性が低下し、余計に目が疲れるサイトになってしまうことも。
グーグルが推奨している「Material Design」(ダークテーマ)のページを参考にします。

  • ・マテリアルデザインで推奨している背景色は#121212
  • ・背景と文字のコントラスト比は少なくても15.8:1(目が疲れる黒×白にしない!)
  • ・背景の上に透明度0~16%の白を重ねて奥行き・遠近を表現。手前が明るくなる。
  • ・Primary color(原色)は基本的に200番
  • ・画像の彩度も調整

以上を注意してCSS等を設定していきたいと思います!
マテリアルパレットジェネレータCOLOR TOOL、コントラストのチェッカー等の便利なページがあるので、視認性を数値で確かめることもできます。

参考にさせていただきました!ありがとうございます。

 参考

Material Design

「ダークモード」対応の手順

①cssでデザインを設定

ダークモード専用のcssをヘッダーに追加、または本体と同じcssにダークモード時のデザインを記述します。

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

 

または、

本体と同じcssにダークモード時のデザインを記述します。下記は一例です。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eee;
  }
.bg{background-color: rgba(255, 255, 255, .10);}
}

 

②画像の彩度をcssで調整してみる

img {filter: grayscale(15%);}

 

③ダークモード時に画像を切り替えたいとき

ダークモード用に作った画像を表示させたい場合、htmlコードを変更します。

<img src="image-light.jpg" alt="">
↓
<picture>
<source srcset="image-dark.jpg" media="(prefers-color-scheme: dark)">
<img src="image-light.jpg" alt="">
</picture>

 

ライトモードをただ明度反転させただけでは、背景のレイヤーの明暗が逆になったり、コントラストが低くて要素が認識しづらかったりします。可読性もあり、見た目もスタイリッシュなダークモードをめざしたいです。