Webサイトをダークモード対応にする

ダークモードとは？

パソコンやスマホ等端末のOS設定で「ライトモード」と「ダークモード」の表示切替が可能です。（デフォルトではダークモードはOFFになっています。）

下の参考画像は、グーグル検索画面です。
左側はライトモード。明るい背景色に暗色のテキストです。
右側はダークモード。暗い背景色に明るい色のテキストになります。

ライトモード

ダークモード

ユーザーが「ダークモード」設定をしていても、Webサイト側で対応していない場合は「ライトモード」の表示になります。自動的に「ダークモード」になってくれるわけではないんですね。

2019年ごろから次々とデバイスにダークモード設定が導入されてきました。
現在はSNSや人気のアプリの多くはダークモードに対応しているようです。

なぜこのように注目されてきたのでしょうか。ダークモードの特徴を見てみましょう。

ダークモードのメリット

• 夜や暗い場所で目の疲れが軽減する。目に優しいと言われている
• 有機ELディスプレイの場合、充電が長持ちする
• シャープでカッコいい見た目（好みによる）

暗いところでは、眩しさが抑えられた暗色系が基調のページの方が閲覧しやすくなりますよね。就寝前にスマホを眺めるユーザーも多いので、そんな時はダークモードが楽なのではないでしょうか。
また、使用機種が有機ELディスプレイに限りますが、バッテリーの持ちが良くなるのは嬉しいですね。

ダークモードの注意点

• 昼間や明るい場所では逆に目が疲れやすくなる
• 液晶ディスプレイでは消費電力は変わらないと言われている

閲覧環境、ディスプレイによってはメリットが享受されないようですね。
それではWebサイトのダークモード対応についてはどうでしょうか。

Webサイトのダークモード対応

サイトをダークモード対応にするメリット・デメリット

モードはユーザー自ら設定しているので、サイトもそれに合わせて切り替わった方が顧客満足度が高まると言えます。
また、ダークモード対応サイトから非対応サイトにページ遷移した際、急に画面の輝度が変わります。ユーザーの目に負担となり、ストレスを感じさせてしまうことが考えられますが、ダークモード対応ならば、このようなことが避けられますね。

デメリットとしては制作時間、工程、予算が増えることが挙げられます。

対応方法

ダークモード時のデザインを、メディアクエリ「prefers-color-scheme」を使用してスタイルシートに記述します。
背景色、文字色の他にも使用画像の彩度・明度の調整（cssのfilterプロパティ）を行い、視認性をチェックします。

デザインの注意点

• 黒100％、白100％にしない（ピュアブラック、ピュアホワイトを使用しない）
• レイヤーの奥にある層を暗くする（光の入り方を自然にし違和感を与えないようにする）
• 視認性を確認
• 画像の彩度・明度を下げる

真っ黒×真っ白で合わせるとコントラストが強すぎて目が疲れます。反対に明暗差が弱いと要素が目立たなくなります。メリハリがないと可読性が低下するので注意しましょう。

色を反転しただけでは配色（光の加減）も自然に反してしまい、快適なサイトにはなりません。目への負担を軽減させる調和のとれた疲れにくいページをめざしたいですね。

ダークテーマのUIデザインについてGoogleが提供しているページはこちらです。Material Design

おわりに

少し前からWebデザインのトレンドになっているダークモード。みなさまは利用されていますか？

閲覧場所や時間帯によって目の負担が変わるので、「ライトモード」「ダークモード」が簡単切り替えられるサイトだとより便利です。これからはON・OFFのスイッチがあるサイトのニーズが増えるかもしれません。

また、ユーザーからすると、本来はライトモードのサイトなのに、自分のスマホで開くとダークモードになるってちょっと嬉しいですよね。

ダークモード対応は中途半端に行うと、暗い場所でも読みづらくなったり、目の疲労を増やしてしまうことになります。より快適に感じられるサイト制作を行うためにも、ユーザー目線で丁寧な作業を行ないます。
ダークモード対応をお考えの方、ぜひお気軽にご相談ください！