ダークモードとは何？メリットは？ウェブサイトにダークモードを実装するために

長時間にわたるデジタルデバイスの利用が、睡眠の質や視力に悪影響をおよぼすことを聞いたことがありませんか。かといって、PCやスマートフォンを「使わない」日常は考えられません。そこでデジタルデバイスを使いながら、画面のまぶしさやブルーライトの軽減が期待できるダークモードを選択するユーザーが増えています。
ダークモードはデバイスによって「ダークテーマ」、「ナイトモード」とも呼ばれ、ほとんどのPCやスマートフォンに標準装備され、設定画面から選択が可能になっています。

iPhoneの「画面表示と明るさ」設定画面

ダークモードのメリット、その1

PC、またはスマートフォンの白い背景がまぶしく、文字が見づらいといった経験をしたことはないでしょうか。1日中画面を見続けるプログラマーやコーダーは、画面背景を黒に設定してコードを書くケースが多く、その理由のひとつに「目が疲れにくい」ことがあります。とくにマウスクリックではなく、文字列を入力してPCの操作をするCUI (Character User Interface) はデフォルトで黒い背景です。
※Windowsのコマンドプロンプトの場合。Macのターミナルは環境設定から変更。

ビー・オー・スタジオのエンジニア、コーダーが使用するエディタ (文字や記号などのテキストで構成されているテキストファイルを編集するソフト) については、ほぼ100%ダークモードでした。

ダークモードのメリット、その2

エディタの場合であれば、黒背景でシンタックス (構文) を任意の色に指定して識別しやすくカスタマイズすることが可能です。黒い背景に白文字、そこへグリーンなどの色が強調 (ハイライト) されて、複雑なソースコードのタグが「見やすい」という利点があります。

ダークモードのメリット、その3

デバイスにもよりますが、ダークモードにするとバッテリー寿命が長くなる可能性があります。例えば有機ELパネルがディスプレイに使われていれば、ダークモードで消費電力が下がる効果が期待できます。また輝度が100%に設定されているなど「特定のシナリオが用意されている」場合では、ライトモードよりダークモードの方が電力を節約できるという調査結果を米インディアナ州にあるパデュー大学が公開しています。

「没入感」をうながす

ダークモードにすると、いい意味で「集中力」を高めてくれます。その反面、ゲームやSNSへの「のめり込み」を増長します。TikTokをはじめ、InstagramやFacebookなどSNSアプリでもダークモードを用意するほか、Xはダークモードがデフォルトです。Kindleなどの電子書籍のユーザーでダークモードを指示する割合は85%という2020年のデータもあります。

YouTubeはダークモードではなく「アンビエントモード (Ambient mode)」を2022年末に発表。スマートフォンやPC本体の設定でダークモードを選択していれば、アプリ側で設定しなくてもダークモードで表示されます。

ウェブサイトもダークモードが選べた方がよい？ダークモードで閲覧していた画面から、急に白い背景に変わると…

ウェブサイトにダークモードを実装する方法はいくつかあります。
そのひとつがメディアクエリ「prefers-color-scheme」の使用です。ユーザーの閲覧環境に応じてライト、ダークを自動的に切り替えて表示します。既存のウェブサイトのスタイルシートに適用することも可能です。

ただし既存サイトをCSSメディアクエリ「prefers-color-scheme」を使ってダークモード対応に改変する際は、以下に留意する必要があります。

ダークモードに対応するCSSスタイルを別途用意する。
CSS変数 (カスタムプロパティ) を用いて既存のウェブサイトをダークモード対応に変更可能。
ダークモード対応に既存の画像の明度、彩度を調整する。

とくに3については、透過画像を使用している場合に注意です。黒背景で表示されたとたん、画像で示す要素や文字が判別できなることもあるあるです。

ダークモードに対応する際には、目に優しい色合いを選ぶことが重要です。
以上のポイントに注意しながら、ウェブサイトにダークモードを実装することができます。

WordPressならプラグインを使ってダークモード化

すでにWordPressで運用しているサイトであれば、いくつかのプラグインを実装してダークモード対応させることができます。レビューでも高評価を得ている「WP Dark Mode」は、アクティブ化すぐに反映され、しかも多くのWordPressテーマと互換性があることを利点に持ちます。無料版のほかに1年の有料版、そして永久版を用意しています。

Chromeのダークモードを有効にする拡張機能

ブラウザの拡張機能にも、閲覧画面を黒背景にするためのさまざまなタイプが用意されています。Chromeのウェブストアでは、ダークモードに対応していないウェブサイトをダークモードで表示する「Dark Reader」や「Lunar Reader」が使いやすいと高く評価されています。ユーザーサイドで自由にダークモードに変更できる一方、ウェブサイトに使われている画像や文字がダークモードに対応していないと、文字が読みにくかったり、画像が非表示になったりといった不具合が生じます。

閲覧環境でダークモードがポピュラーになるほど、ウェブサイトもダークモード対応が求められていくでしょう。サイトリニューアルを機会に、ダークモードの実装を計画してみてはいかがでしょうか。ユーザー満足度を上げるためにも、機能要件のひとつに「ダークモード対応」を入れてみることをおすすめします。