“ダーク・モード”とは？ウェブサイトをダーク・モードに対応させる

“ダーク・モード”や“ダーク・テーマ”

デバイスやOS、アプリによってその名称が異なりますが、“ダーク・モード(Dark mode)”や“ダーク・テーマ(Dark theme)”は一般的には白い背景に黒い文字で表示されるアプリのインターフェースやウェブサイトなどを黒い背景に白い文字で表示する機能のことです。

iOSやAndroidなどのスマートフォンを中心に普及が進み、パソコンでもWindows10やmacOSでダーク・モードが使用できます。

スマートフォンのアプリで徐々に広がっているダーク・モードですが、ウェブサイトでも徐々にダーク・モードに対応したウェブサイトが増えてきています。

ウェブブラウザがダーク・モードに設定されていて、表示しようとしているウェブサイトもダーク・モードに対応していればそのウェブサイトは黒基調で表示されます。

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

メリット

ダーク・モードには一般的に次のようなメリットがあるとされています。

暗い場所で見やすい

暗い場所では白基調の内容に比べて黒基調の内容はまぶしさが低減されるので見やすく、目への負担が軽減されるとされます。

バッテリー消費の節約になる

有機ELディスプレイを搭載したデバイスに限りますが、これらのデバイスでは黒を発光素子を消灯して表現するので黒基調の内容を表示している時はバッテリー消費の節約になります。

写真や動画が映える

彩度の高い色は背景が黒いとコントラストが高く見えるので写真や動画が映えます。

デメリット

反対にダーク・モードには次のようなデメリットがあるとされています。

明るい場所で見づらい

暗い場所で見やすいとされるダーク・モードですが、明るい場所では黒に反射した明かりに白い文字が埋もれて字が見づらくなります。

未対応のアプリやウェブサイトとの明暗の差が大きい

ダーク・モードに対応していないアプリやウェブサイトは変わらず白基調で表示されるため、ダーク・モードに対応しているアプリやウェブサイトから遷移すると明暗の差が大きく不快に感じられます。

目が疲れやすいと感じられる場合もある

黒基調に明るい色の文字や画像があると配色によってはコントラストが高すぎてダーク・モードの方が負担に感じられる場合があります。

ダーク・モード用のCSS

レスポンシブ・ウェブ・デザインへの対応などでもなじみ深いメディア・クエリですが、メディア・クエリの“prefers-color-scheme”メディア・フィーチャーを使用することでスタイルシートをダーク・モードに対応させることができます。

“prefers-color-scheme”メディア・フィーチャーはユーザーが求めている“カラー・スキーム”をスタイルの適用条件とするメディア・フィーチャーで、これを使用することでダーク・モードの時にだけ適用されるスタイルを指定することができます。

スタイルシートの一部だけをダーク・モードの時に適用させる場合は“@media”ルールや“@import”ルールを使用して設定できます。

完全にスタイルシートを分ける場合には“link”要素の“media”属性を使用して設定できます。

なお、メディア・クエリを使用してスタイルを適用する場合はユーザーはデバイスの設定によってのみウェブページのダーク・モードとライト・モードを切り替えることができます。

ブラウザのスクロール・バーやフォームの入力欄などのウェブサイトのブラウザによって生成される部分については“color-scheme”プロパティを使用して設定します。

値を“light dark”と指定しておくと要素はライト・モードとダーク・モードのどちらにも対応しているとみなされ、スクロール・バーやフォームの入力欄、背景色などのシステムカラーで色が指定された部分はダーク・モードの時にはダーク・モードに合わせた色で表示されます。

ダーク・モード用のHTML

“meta”要素

CSSの“color-scheme”プロパティを使用したカラー・スキームの設定はHTMLの“meta”要素で行うこともできます。“name”属性の値に“color-scheme”を指定した“meta”要素はルート要素に適用される“color-scheme”プロパティと同じ役割をします。“color-scheme”プロパティで設定がされていればこれは必須の設定ではありませんが、スタイルシートの読み込みが遅れると一瞬だけライト・モードで表示されることがあり、“meta”要素で設定をしておけばこのようなことを防ぐことができます。

現代ではそのような簡素なウェブサイトはなかなかありませんが、すべての色をシステムカラーで指定していたり、文字色や背景色を既定の色のまま変更していない場合には“meta”要素で設定しておけばCSSのカラー・スキームをまったく設定しなくてもライト・モードとダーク・モードの切り替えができます。

画像を切り替える

CSSの“display”プロパティで表示したり、隠したりして切り替えるという方法もありますが、“picture”要素を使用すると無駄な画像を読み込まずに済みます。

“picture”要素はよくレスポンシブ・ウェブ・デザインで大きさの異なる画像を出し分けるために使用されますが、ユーザーが設定しているカラー・スキームに合わせて異なる画像を出し分けるために使用することもできます。

<picture>

<source media="(prefers-color-scheme: dark)" srcset="sample-dark.png">
<img src="sample-light.png" alt="サンプル画像">

</picture>

表示サンプルはリンク先を参照

ダーク・モードに画像を適用させる方法としては、後述するCSSの“filter”プロパティでフィルター効果をかけて色合いを変える方法もあります。

フィルター効果で簡易的にダーク・モードに対応する

テキストだけで構成されているウェブサイトであれば背景色と文字色を変更するだけでダーク・モードに対応することができますが、画像などが多用された既存のウェブサイトを後からダーク・モードに対応させるのは大変な作業です。

CSSには“filter”プロパティを使用して要素や画像が表示される色などを変更することができるフィルター効果があり、これを使用すると簡易的にダーク・モードに対応することができます。

まず、“invert()”関数を使用して色を反転させます。これによって白は黒に、黒は白になります。

この時、白と黒以外の色も反転してしまうので、“hue-rotate()”関数を使用して色相を元に戻します。

このスタイルをメディア・クエリを使用してダーク・モードの時に適用されるように設定することで、ウェブページ全体を簡易的にダーク・モードに対応させることができます。

全体にこのフィルター効果を適用すると写真などの変更しなくて良い部分もすべて色合いが変更されてしまいます。なので、色合いを変更しなくて良い部分にだけもう一度フィルター効果を適用して再度色を反転させる、もしくは全体には適用せずにダーク・モードの時に色合いを変更したい部分だけにフィルター効果を適用するといった調整が必要になります。

単純に色を反転させただけではユーザーが快適に閲覧できる理想的な配色にはならない場合が多いので他にも細かな調整は必要となりますが、このようにしてあまり手間をかけずにウェブサイトをダーク・モードに対応することができます。

なお、フィルター効果には明度を変更する“brightness()”関数や彩度を変更する“saturate()”関数などもあり、全体にフィルター効果を使用せずに背景色や文字色を一つ一つスタイルシートで設定していく場合でも、画像の色の調整などに役立ちます。

コントラストの調整

読みやすさを確保するうえで、背景色と文字色の間に十分なコントラストは必要ですが、一方でコントラストが高すぎると逆に目への負担が大きく、読みづらくなってしまいます。なので、純粋な黒の背景の上に純粋な白の文字を表示させるのは好ましくないとされます。

背景色は純粋な黒色ではなく、黒に近い濃い灰色が理想的とされます。

また、純粋な黒色の背景の上に明るい色のコンテンツを表示させると有機ELディスプレイではブラック・スミアが発生しやすくなるのでやや灰色の背景が好ましいとされます。純粋な黒色に比べるとバッテリーの消費を抑える効果はやや劣りますが、明るい色の背景と比べれば効果は十分です。

明るい色の部分を減らす

基本的にダーク・モードに設定しているユーザーは黒基調の表示を求めていると考えられるので、明るい色の部分はできるだけ減らし、暗い色の部分ができるだけ多くなるようにします。

写真や動画などどうしても色合いを変更できない部分もありますが、それ以外の部分はできるだけ黒基調にするのが好ましいとされます。一般的なウェブサイトでは上部に配置したナビゲーションなどをウェブサイトのテーマカラーにしている場合もありますが、ダーク・モードでもそのようにすると色が明るい部分が多くなりすぎるので良くありません。

なお、常に表示される部分で明るい背景を使用するのは好ましくありませんが、注意をひかなければならないポップアップなどを明るい色にして強調するのは効果的です。

遠近感は明暗で表現する

一般的に、インターフェースなどに遠近感をつける場合には影をつけることで浮き出て見えるようにしますが、黒い背景の上では影は見えづらくなります。

なので、ダーク・モードでは一般的に色を明るくすることで遠近感を表現します。人は暗い色の中にある明るい色は手前にあるように錯覚するので、浮き上がって見えるようにしたい部分は背景色によりも明るい色で表現します。例えば、ボタンなどのインターフェースは背景色よりも明るい色である方が浮き出て見えます。

また、ウェブページのコンテンツがある部分とその周りの部分の背景色が異なる場合、コンテンツの部分の背景が周囲の背景よりも明るい色である方がやや手前に見え、コンテンツが周りの部分よりも奥にあるように見える場合よりもユーザーにも心理的な安心感を与えることができます。

彩度の調整

黒い背景の上では鮮やかな色はコントラストが高く見えるので、配色によってはコントラストが高すぎてチラついて見える場合があります。そのため、黒い背景の上では彩度が高い色、特に純色の多用は避け、写真なども彩度はやや下げるのが良いとされます。

ブランド・イメージを強調するために彩度を高めた色をあえて使用することもできます。ただし、ロゴやボタンなどウェブページ内の一部だけにとどめ、多用するべきではありません。