「ダークモード」対応の注意点と手順を知りたい！
2022-04-18
PR 当ページのリンクには広告が含まれています。
Contents
Webサイトの「ダークモード」対応にチャレンジ！
「ダークモード」とは？
パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。
明るい背景に暗色系の文字が「ライトモード」、グレー背景に白文字が「ダークモード」。
2019年くらいからOSの設定で選べる端末が増えてきているようですね。みなさんはどちらでブラウジングする設定にしていますか?
ダークモードのメリットとして、「暗い環境では輝度がおさえられ、目に優しい」ことが言われています。明るい場所で見ることが多いならライトモード、周囲が暗いならダークモードがよいそう。
また、有機EL(OLED)の機種ならば充電の持ちがよくなるということですよ。
アプリとかSNSは浸透してきてるみたいですが、Webサイトはまだ様子を見ているところも多いようです。
サイト側が「ダークモード」に対応していなければ、ユーザーがダークモード設定にしていても、通常のライトモードで表示されます。ユーザーからすると、ずっとダークモードで閲覧していて、ページ遷移してライトモードが表示されたら目が痛いですね…。せっかく訪問してくれたのだからストレスは軽減させたいです。
「ダークモード」のデザイン注意点
「ダークモード」への対応作業、下手するとダークモード時の視認性が低下し、余計に目が疲れるサイトになってしまうことも。
グーグルが推奨している「Material Design」（ダークテーマ）のページを参考にします。
- ・マテリアルデザインで推奨している背景色は#121212
- ・背景と文字のコントラスト比は少なくても15.8:1（目が疲れる黒×白にしない！）
- ・背景の上に透明度0～16%の白を重ねて奥行き・遠近を表現。手前が明るくなる。
- ・Primary color（原色）は基本的に200番
- ・画像の彩度も調整
以上を注意してCSS等を設定していきたいと思います！
マテリアルパレットジェネレータやCOLOR TOOL、コントラストのチェッカー等の便利なページがあるので、視認性を数値で確かめることもできます。
参考にさせていただきました！ありがとうございます。
「ダークモード」対応の手順
①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>
ライトモードをただ明度反転させただけでは、背景のレイヤーの明暗が逆になったり、コントラストが低くて要素が認識しづらかったりします。可読性もあり、見た目もスタイリッシュなダークモードをめざしたいです。
