こんにちは、デザイナーの中道です。
本日はダークモードについて改めて考えようと思います。
というのも、これまではデバイスやブラウザをダークモードに設定しても、Webサイト自体はダークモードへ対応することはありませんでしたが、今年の3月21日にGoogle Chromeの最新版にWebサイトのダークモード表示機能が追加されたとのことで、Webサイトに関してもダークモードへの対応が必須になってくるかも、、と軽く不安を感じたからです。
※ちなみに以下の方法でWebサイトのダークモード表示が可能です。
▼ ChromeでWebサイト自体をダークモード表示にする方法（2024年6月現在）
上記の機能は実験的に実装されているようで、将来的に正式版としてリリースされるという保証はなく今後突然削除されることもあるそうです。
しかし、最近ではXのデフォルト表示がダークモードになったりと、様々なプラットフォームでのダークモードの選択は当たり前になっているので、これからももっと標準的に利用率が上がるのかなと感じました。
（かくいう自分も自身のスマホは、目が疲れないようダークモードを使用しています。）
ということで、今回はWebサイトのダークモードについて、今後どのように対応していくべきか自分なりに考えたことをまとめてみました。
ダークモードとは、アプリケーションなどのUIのカラースキームを暗い背景に変える設定のことで、通常白色の背景に黒テキストを表示するライトモードと対照的に、ダークモードでは黒色の背景に白テキストを使用します。
ダークモードがデバイスのUIとして登場したのが、2016年のWindows 10のアニバーサリ・アップデート（英語版）です。
その後、2018年にmacOS Mojaveのダークモードの登場を皮切りに、様々なプラットフォームで採用され、翌2019年に iOS 13 と Android 10 の両方に展開。
そして、YouTubeやX、Adobe製品などにも採用されたりと現在では標準的な仕様となりました。
（Wikipedia参照）
目の疲れの軽減に関しては、暗い背景が光の量を減少させ目に対する刺激を減らすため、低照度環境で目の疲れを軽減する効果があると言われています。
暗い場所での明るい光は眩しいと感じるため、ナイトモードと同じような役割になっていそうですね。
また、視認性・可読性の向上では、実はテキストが小さいほど白背景に黒文字（ライトモード）のほうが読みやすく、長時間となると黒背景に白文字（ダークモード）のほうが目には負担がかからないようです。
ですので、こちらについては一概にダークモードが良いというわけではないようです。デザインによって左右されそうですね。
バッテリーの節約については、OLED（有機発光ダイオード）ディスプレイに表示するとき消費エネルギーが少なくて済み、バッテリーを節約できるようです。
（端末設定で明るさ100%にしている際にライトモードからダークモードに切り替えると、バッテリー電力が平均39〜47%節約される）
このような特徴から、やはりダークモードは今後も重宝されそうな予感がしますね。
ということは、今後はWebサイトでもダークモード対応が必須となるのでしょうか？
こちらも踏まえて、今後のダークモードの行く末を調査し、自分なりに考えてみました。
ダークモードについての記事を調べていると、ダークモードは「UIの透明化」の序章とも言われているようでした。
透明化って？どういうこと？って感じだと思いますが（自分もめっちゃ思いました）、このUIの透明化を示唆する件として以下のような事例がありますので、こちらから理解していきたいと思います。
まず、Youtubeの「アンビエントモード」。
このアンビエントモードとは、視聴中のビデオに合わせてプレーヤーの背景を微妙に変化させる機能です。
この機能は、動画の色調や雰囲気をプレーヤー全体に拡張し、視覚的な一体感を高め、より動画へ没入できるように設計されています。
また、YouTubeの全体的なデザインと調和するように設計されており、UIの一貫性が保たれています。
次に、TiktokのUIデザイン。
Tiktokは、動画の上にアイコンがあるという仕様で、まず背景という概念がないデザインです。
また、UIがとてもシンプルで、初めてのユーザーでもすぐに使いこなせるような直感的な操作方法です。
そして何より、無限スクロールがどんどんユーザーの時間を奪う、夢中にさせるような仕様になっています。
そして、ダークモード。
ダークモードは前述しましたとおり、UIのカラースキームを暗い背景に変える設定で、つまり暗い環境では暗くするという仕様です。
より周りの環境に合わせた見え方になり世界観を統一できるというような仕様です。
また、ダークモードに対応したデザインの設計は煩雑になるため、よりシンプルなUIデザインが求められます。この考え方が自体が、ダークモードがUIを透明化させる序章かなと感じました。
このことから、「UIの透明化」とは、より世界観に没入する感覚や、シンプルで感覚的な仕様ということだと、自分なりに理解しました。
現在は、多くのWebサイトやアプリはライトモードを前提にデザインされているため、ダークモードでの表示が最適化されていないことが多くあります。
これにより、もしWebサイト自体も強制的にダークモード表示にしてしまうと、画像の境界線が目立たなくなったり、色のコントラストが不十分になる可能性が出てきます。
しかし、ライトモードを無理やりダークモードにねじ込むようなデザインを設定するのではなく、UIの透明化を意識することが重要になりそうです。
この、「UIの透明化」を意識したデザインが、自ずとダークモードの対応に導いてくれるんじゃないかと思います。
はじめは、今後は2倍デザイン作成するので制作が大変になる？というダークモード対応への怯えがありましたが、視点を変えたデザイン設計で対応できそうだと思えてきました。
これからもどんどん更新されるプラットフォームなどのUIの変化についていけるよう、自分ももっと視野を広げた考え方を持って、時代に沿ったデザインを考えていきたいです。
