ダークモード
Webのダークモードを実現するには
Web上でOSの設定に準じてスタイルを切り替えるのは、CSSのメディアクエリで prefers-color-scheme という特性を使うことで実現 Webでもダークモードを実装すべきか
おそらく現在は、ダークモードを使用している多くのユーザーは、WebブラウザではダークでないWebページが表示されることに違和感を持っていません。そのためWebでのみ展開するアプリケーションであれば必ずしもダークモードへの対応を急ぐ必要はなさそうです。しかし、モバイルアプリもリリースしてそちらはダークモードに対応していたりすると、Webとアプリで表示の一貫性が崩れてしまったり、一部画面をwebviewで表示しているとその画面だけ明るい配色になってしまったりします。ネイティブアプリとの連続性を重視すると、ダークモードへの対応を考える必然性が生まれてきそうです。
iOSでダークモードに設定しており、キャンペーンページをWebViewで表示すると若干一貫性に欠けるところがある印象はあるかもです。普段Android使っているので実情は分からないですが。
ただ既存の何千ページ全てダークモード対応するのは時間とコストの面でも現実的ではないので、そこまでする必要なくて、アプリからキャンペーンページ開いたときだけのような限定的なWebでのダークモード提供はけっこういいのかも。
目的
視覚的な疲労緩和ができる
バッテリー消費を抑えることができる
人気のアプリがダークモードを採用するようになって以来、多くのユーザーがこの目の休まるデザインを好むようになりました。ダークモードは、暗い背景の上に、明るい色のテキストやアイコンなどのUI要素を配置します。Webデザインにこれを適用すると、モダンな見た目のサイトにすることができます。顧客が最新の製品やサービスを好む傾向を持つのであれば、サイトにもトレンドやユーザーの嗜好を反映すべきでしょう。
ダークモードの利点のひとつは、明確なコントラストによりデザイン要素を目立たせられることです。暗いインターフェースが明るい要素を補完するため、ユーザーはサイト内を閲覧しながら、容易にテキストを読むことができます。ダークモードにはデバイスのバッテリー消費を減らす効果も知られています。これは多くのユーザーにとって嬉しいギフトです。
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
Dark Mode vs. Light Mode: Which Is Better?
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方