ダークモードの特性とトレンド状況を調べてみた

注目され始めているダークモード

近年、Webデザインにおいてダークモードが注目を集めています。

ダークモードは暗い背景色と白い文字色で構成されたUIデザインのことです。

ディスプレイに表示される光量が少なくなるので、目に優しく、バッテリー消費を抑えられるなど、多くの利点があります。

iPhoneやWindowsなど主要な端末のOSでは、2019年頃から導入され始めました。

また、ダークモードに対応しているWebサービスには以下のようなものがあります。

• YouTube
• X
• Instagram

このQiitaも、2023年からダークモードを正式に導入されています。

ダークモードの特徴について、具体的に見ていきましょう

ダークモードのメリット

目の負担軽減

暗い画面は、明るい画面よりも瞳孔の収縮を抑え、目の疲労を軽減する効果があります。

バッテリー消費の節減

ダークモードは、バッテリー消費を抑える効果があります。これは、有機ELディスプレイ搭載のデバイスの場合、黒い画面の方が白画面よりも消費電力が低いためです。

米国パデュー大学による研究

2021年8月に発表された米国パデュー大学の研究によると、有機ELディスプレイ搭載のスマートフォンで、屋外など明るい場所で、ライトモードからダークモードに切り替えた場合、平均39%～47%　のバッテリー消費を節約できることが示されています。

参考↓

ダークモードのデメリット

実装の手間

「文字を白く、背景を黒くする」とだけ聞けば、簡単そうに感じるかもしれませんが、大抵は細かいデザインの微調整が必要です。

例えば以下画像のように、ページ内に黒いアイコンを使用している場合、背景を黒くすることによってアイコンが見えなくなってしまう、もしくは見えにくくなってしまうことがあります。

これに対応するためには、ダークモード時に表示される画像を出し分けたり、どちらのモードでも見えやすいアイコン色に変更したりなどする必要があります。

こういったデザインのエラーを全ページ確認して修正していくとなると、なかなかに骨が折れる作業になるでしょう。

デザイン性の悪化

背景色と文字色が変わるわけなので、ページの印象がガラリと変わります。

ダークモードに対応することで、本来意図したデザインと乖離してしまう可能性があります。

例えば、もともと明るい印象のページにしていたのに、ダークモードになると一気にその印象がなくなって、なんかどんよりとした雰囲気のページになってしまった...
これでは本末転倒ですね。

何でもかんでもダークモードに対応すればいいってもんじゃありません。

Webサイトを通してユーザーに提供したいことは何か、その本筋をしっかりと考え、実施の有無を判断するのが重要です。

日本のWebサイトにおけるダークモードの対応

このブログを書く上で、ダークモード対応されているWebサイトをリサーチしたのですが、意外とまだダークモード対応されているWebサイトは少ない印象でした。

特に日本のWebサイトでは、海外に比べてダークモードを採用しているWebサイトはまだ多くありません。

これは、文化的な背景や、Webデザインのトレンドの違いが影響しているのではないかと私は考えます。

まとめ

「ダークモード」が最近のトレンドとは言われていますが、もともとPCは、真っ黒な画面に白文字でコマンドを打ち込んでいくものでした。

GUIの登場によって、画面は色鮮やかになり、その後「スキューモーフィズム」のようなリアルな質感がトレンドになり、そのアンチテーゼとして「フラットデザイン」が提唱されて、一周回って初期CUI時代のような、黒に白い文字が光るダークテーマがトレンドになっているのは、流行のサイクル性を感じて面白いなと思いました。

次回はダークモードを実装する方法を紹介していきます。