ダークモードに対応！Webサイトへの実装方法とデザインポイント

ios13の新機能として搭載され、今大注目のダークモード。yahooニュースやInstagramなど有名なアプリは続々とダークモードに対応していますが、今後はWebサイトもダークモードの対応を求められるでしょう。今回はWebサイトをダークモードに対応させる方法と、デザインを考案する時に注意すべきポイントをご紹介します。

ダークモードとは？

「ダークモード」とは、モニターに表示される背景色やメインカラーを黒基調にし、反対にテキストやアイコンなどを白基調の明るい色にしたデザインに変更する機能を指しています。株式やFXなどのチャート画面、建築や土木のCAD画面といった方がイメージしやすいかもしれません。

このダークモードはスマホユーザーに欠かせない各種SNSをはじめ、YouTubeなど人気アプリなどで次々と導入されており、徐々にWebサイトにも実装されつつあります。

ダークモードの名称は端末によって異なる

ちなみに、一般的にはダークモードという名称が広く浸透していますが、ダークテーマやナイトモード、ナイトテーマ、ハイコントラストなどとOSをはじめブラウザや機種によって異なる名称が使われています。

ダークモードのメリット

なぜダークモードはこれほど急速に普及しているのか、その理由はライフスタイルの変化や実利的なメリットに関係しているようです。

• 夜や暗い部屋でも見やすいため、寝る前の視聴が苦にならない
• ライトモードより眩しさが軽減されているため、眼への負担が軽くなる
• 有機ELディスプレイなど一部の端末で使用するとバッテリーの節約になる

確かに寝る前お布団の中でスマホを見ていても、ダークモードにしてからは眼への負担が減ったような気がします…！

各種OS・SNS・アプリでダークモードが続々と導入

実はYouTubeではかなり以前から導入されていたダークモードなのですが、ここでは、2019年に発表されたダークモードに関する大きなニュースを時系列でピックアップしてみました。
表にすると2019年はダークモード旋風と言っても過言ではないぐらい、各種OSをはじめSNSやアプリで続々とダークモードの導入されていることがわかります！

▼2019年に発表されたダークモード対応のニュース

2019年3月11日	Slack（iOS／Androidアプリ）で設定が可能に
2019年3月12日	Google Chrome 73（macOS）で設定が可能に
2019年3月28日	Twitter（iOS）で「ダークブルー」と「ブラック」を追加
2019年4月15日	Facebook Messengerで設定が可能に
2019年10月~	Twitter（Android）で濃い紺色」→「黒」へ変更
2019年10月~	Instagram（iOS 13／Android 10）で設定が可能に
2019年10月~	LINE（Android 10）で設定が可能に

定番アプリとして世代を問わず高い人気を誇っている「Yahoo!ニュース」もダークモードに対応しました。

「Yahoo!ニュース」がダークモードの導入に踏み切った理由として、ユーザーからのリクエストが多かったという理由があるようです。
メジャーなSNSが続々とダークモードへの対応を開始している中、Twitter上で「Yahooニュースもダークモードにして欲しい」というツイートが増え、従来からユーザーの声を重視していたYahooとしては、ダークモードの導入がユーザビリティの向上になると判断したのでしょう。

ここまで見てきたように、スマホアプリでは続々とダークモードが採用されているのですが、WEBサイトはまだほとんどが非対応です。

では、WEBサイトはどのようにダークモードに対応させれば良いのでしょうか。

cssのメディアクエリprefers-color-schemeで簡単実装

実はダークモードはcssのメディアクエリprefers-color-schemeで簡単に実装出来てしまいます！

@media (prefers-color-scheme: dark){
/*    ここにダークモード時のコードを記述*/
/* 例 */
.dark{
        background-color: #1c1a1a;
        color: #faf8f7;;
    }
}

@media (prefers-color-scheme: dark)にスタイルを書き、デバイス側でダークモードに設定をすれば、反映されます。

後述するデザインポイントを踏まえたデモページを作りました。
この記事をPCで読んでいただいてる方はQRコードを貼りますのでスマホをダークモードにした上でご確認ください

DEMO

CSS変数を使う

とはいえ、もともとダークモードを想定せず作っている既存サイトをダークモードに対応させるのは、けっこう大変ですね。
そのような時はcss変数を使えばコードも少しすっきりするかと思います！

@media (prefers-color-scheme: dark) {
    :root {
    --bg-base: #1c1a1a;
    --text-main: #faf8f7;
    --grayscale-percentage:30%;
    }
    .dark{
        background-color: var(--bg-base);
        color: var(--text-main);
    }
    .dark-img img{
        filter:grayscale(var(--grayscale-percentage));
    }

対応OSとブラウザの種類

上記のコードはWebサイトにダークモードを手軽に実装できる優れモノです。しかし、不具合なく反映させるには基本的にOSおよびブラウザのバージョンが対応していなければなりません。中にはOSやブラウザが対応外であっても問題なく読み込めるというケースもあるようですが、Can I useで確認しておきましょう。

ダークモードデザインのポイント

ダークモードデザインはUI（User Interface）の側面において、すでにスタンダードになりつつあります。この段落では、ユーザーにとって快適で読みやすいという必須条件はもちろん、全体のバランスも考慮したダークモードをデザインするためのポイントについてご紹介しましょう。

目に優しいか

ユーザーの目に優しいかどうかは、ダークモードをデザインするうえで欠かせない要素です。この点において特に重要な2点について取り上げてみました。

ピュアブラックとピュアホワイトは使わない

▼避けるべき理由

• 日常には存在しないピュアブラックは、見ている人に不快感を抱かせやすい。
• ピュアブラックの前面で極端に明るいコンテンツを動かすと、「ブラックスミア」という視覚的な歪みが発生しやすい。
• ピュアブラックより濃いブラックがないためシャドウが機能しない。なので通知パネルなどで奥行を表現できない。
• ピュアブラック×ピュアホワイトはコントラスト比が最も高い1：21なので、特に乱視の人にとっては目への負担が強すぎる。

OLEDスクリーンでダークモードを利用するとバッテリーが節約できる反面、ピュアブラックを背景にしているとブラックスミアが発生しやすいという難点があります。OLEDスクリーンの場合、ピュアブラックのピクセルが常にオフになっていますので、ダークモードで見るにはオンに切り替えなければなりません。ところが、カラーを変更するよりもピクセルをオフからオンに切り替える作業に時間がかかるため、ブラックスミアが発生しやすいのです。

カラーの彩度を落とす

▼彩度を落とすべき理由

• ダーク系の背景は高彩度カラーの見え方を粗くさせるため、アクセントカラーの彩度を落とした方が全体のバランスが取れる。
• 背景がダークだと写真画像が粗く見えるため、大多数の人が彩度を下げた画像を好む

ちなみに、Googleのウェブデベロッパーアドボケートとして活躍しているトーマス・シュタイナー（Thomas Steiner）氏の調査によると、ダークモードの彩度に関して下記の結果が報告されています。

大多数の人（57.7％）はグレースケールフィルターを好み、40.9％の人はフィルターなし（つまり、色をそのままにする）を好み、ごく一部の人（1.5％）はグレースケールフィルターと反転フィルターの組み合わせを好みました。

引用元：Re-Colorization for Dark Mode

不自然ではないか

多くのメリットが得られるダークモードですが、安易にデザインしてしまうと不自然な仕上がりに成り兼ねません。違和感のないダークモードをデザインするには、少なくとも下記の3点を押えておきましょう。

奥の面を暗く、手前の面を明るくする

ダークモードは「遠いほど暗く、近いほど明るい」という原則によってユーザーに物理的な安心感を与えています。ここで問題となるのが、初心者にありがちなライトモードを反転させただけのダークモードです。Webサイトは背景と文字だけでなく、何枚ものレイヤーを重ねるように構築されていますので、採用しているカラーによっては手前より奥の方が明るくなって不自然に見えてしまいます。

対策としては、ライトモードのメインカラーだけを反転させる、複数のグレーカラーを組み合わせる手法などが効果的です。特にグレーは黒基調というダークモードの必須条件を満たしているうえ彩度やニュアンスによって種類が豊富なため、各種SNSでも多用されています。

知覚コントラストを5％ほど上乗せする

ライトモード時にfontのcolorを不透明度(%)で指定している場合は注意が必要です。
例えば白背景に対して黒#000000が60%で設定されていたとします。
ブラックモードにした際は文字が白色になるかと思いますが、不透明度を継続して60%のままにしてしまうととコントラスト比が低く、文字が読みにくくなってしまいます。
この場合、60%を65%に変更しましょう。たった5%コントラストをプラスする事で、ライトテーマさながらの読みやすさを実現できます。

明るい色の面積を少なくする

ダークモードでは、手前のコンテンツほど明るい色調にする必要があります。なぜなら、ユーザーの意識を背景の黒基調より手前の白基調の方に誘導する効果があるからです。
ここで問題となるのが、ライトモードで水色の背景に白地の枠を重ね、中に黒のテキストを採用しているケースです。この場合、背景の水色が明るい色の大きなブロックになります。

ところが、これをダークモードにすると水色の大きなブロックに黒地の枠が重なってしまい、背景より手前の方が暗くなってしまうのです。Webサイトは構造上、サイズが大きいブロックの上に小さいブロックを重ねて配置します。つまり、最もユーザーに見てもらいたい小さなブロックを一番明るい色にするには、奥にある大きなブロックの色調を最も暗くするべきなのです。

まとめ

いかがでしたか？ダークモードについての簡単な説明と、WEBサイトへの実装方法、ダークモードをデザインする上でのポイントをまとめました。

スマホユーザーが増え、従来のPCデザインをスマホに対応させる”レスポンシブ化”に追われたあの頃のように、今度はダークモード対応を求められるようになるかと思います。

cssのメディアクエリ「prefers-color-scheme」を使えば、技術的には簡単にダークモードを実装できます。
しかし、ライトモードベースで作っている既存サイトをダークモードデザインに対応させるには、配色の再設計を始め、細かい調整が必要となり、簡単ではないと思います。せっかくダークモードに対応させても、違和感が生じたり読みにくいサイトになってしまっては本末転倒です。

ますます増えていくであろうダークモード化に置いてかれないよう、サイト制作において追求していければと思います。