Kohei Asai

Kohei Asai

2019/08/25に投稿
  • English
  • 日本語
  • Webでダークモードに対応する

    このウェブサイトをダークモードに対応させました。ライトモード (通常) では白い背景ですが、ダークモードで見ると紺色の背景になっているのが確認できると思います。

    LightDark
    iOS (Light)iOS (Dark)

    ダークモードはすでに主要なすべてのOS (Windows、Android、iOS、macOS) にあり、その設定はCSSのメディアクエリ prefers-color-scheme によって読み取ることができるようになっています。

    color: #000;
    
    @media (prefers-color-scheme: dark) {
      color: #fff;
    }

    また、 window.matchMedia() を利用すればJavaScriptからもダークモードが使われているかどうか判別できます。

    window.matchMedia("(prefers-color-scheme: dark)").matches  // true

    ダークモードに対応しているブラウザは現在のところChrome、Safari、Firefoxです。EdgeとInternet Explorerは未対応です。

    prefers-color-scheme Compatibility

    現在最新のmacOSではダークモードはユーザーが個別に設定する「切り替え式」のものですが、次のバージョンのmacOS Catalinaでは日の出と日没によって切り替えるオプションが用意されています。多くのスマートフォンに搭載されているNight LightやNight Shift (ブルーライトの軽減を目的として時間帯によってディスプレイの色味を変える機能) と同じように生活に馴染んでいく機能になりそうです。

    Dark mode setting in macOS Catalina

    ダークモードで気を付けること

    ダークモードに対応するにあたって、気をつけたことは思ったよりも多かったです。最初は2つのカラースキームを用意すればいいだけだと思っていましたが、他のウェブサイトやアプリケーションでも対応してみようと掘り下げてみると結構ありました。

    • 彩度の高い画像の色をfilter: grayscale(50%)などを利用して淡くする。その方が好まれることがユーザーへの調査から分かっている。web.devにガイドラインがあります
    • ダークモードでも破綻しないUIにする。例えばドロップシャドウによってコンテンツの境界を示すようなデザインは暗い色の背景と相性が悪いので避ける必要がある
    • サービスやコーポレートのロゴ。明るい色と暗い色両方の背景を前提とすると、紺色や茶色などのくすんだ色は採用しづらい (別のプライマリカラーを用意する必要がある)
    • 色の定数。単値で持たず、ハッシュマップや構造体で持つようにする (サンプル)
    • アイコンにはCSSで色を変更できるようにインラインSVGかアイコンフォントを使う (サンプル)

    おわりに

    ダークモードは未ださほど一般的ではありませんが、2018年にmacOSで実装されたのを皮切りに今では主要なOSすべてに実装されています。有機ELディスプレイでの寿命やバッテリーの持ちを改善する効果が期待でき、これから徐々に一般的になっていくことが予想できます。

    1-2年後を見越したプロジェクトなどではダークモードを配慮してデザイン・実装する必要が出てくるかもしれません。

    関連リンク