最近ダークモードが話題です。

ダークモードとは

背景を暗くして、文字を白くすることで画面全体を暗めにしようとするモードです。
それまでは個別のアプリで対応していたダークモードですが、今では多くのOSがダークモードに対応するようになりました。

ダークモードのメリット

目に優しいと言われている。

画面が発光する量が減るので目への負担が減ると言われています。
医学的な根拠は分かりませんが、たしかに長時間作業をしたあとの目への負担は減っている気がします。
特に夜間の周りが暗い状況で目に負担が少ないことを感じます。

バッテリーの消耗を抑えられる

液晶ディスプレイは明るいバックライトに液晶でフィルターをかけて行くのに対して、有機ELにはバックライトがなく、ピクセル自体が自己発光しているので暗い色の面積が大きくなると、点灯しなくて良いピクセルが増え、バッテリーの消費が少なくなります。

かっこいい

しかし、なんと言っても一番のメリットはカッコいいことでしょう。
従来のライトテーマはポップな印象が強く、柔らかさや自然を感じるものでしたが、ダークモードではクールな印象が強く先進感や硬さを感じさせます。
古いコンピューターユーザーにとってはコマンドライン時代を思い出させ懐かしくもあります。

私もこの格好良さに惹かれてMac、Pixel、iPad、iPhoneを全部ダークモードに設定してしまいました。

ダークモードに対応しないとどうなる

さて、ダークモードを使い始めるとダークモードに対応していないアプリやサイトの眩しさが気になるようになりました。
暗い画面に眼が慣れている時に明るい背景画面が出てくるととても眩しく余計に疲れる。
真夜中にトイレに行こうとして蛍光灯をつけたら目がくらむ感じでユーザー体験としてよろしくないです。

今はまだ大手サイトやサービスでもダークモード対応していないところが多く、そこまで気にならないですが、今後ダークモードに対応したサービスが増えてくるとダークモードに対応していないことで評判を落とすことにつながりそうです。
なんだか、ひと時前のスマートフォン対応に似ている状況です。

Firespeedをダークモードに対応させました
ということで、急ぎFirespeedもダークモードに対応させてみました。
ダークモードに対応する過程で様々な課題も見えてきました。
現状のFirespeedについてはまだダークモード対応に関して不満な所が多く色々と模索しているところです。
今回はダークモードへ対応するために行った方法とダークモード対応において気づいたことを紹介します。

ダークモードへの対応のさせ方

技術的に言えば、スタイルシートで
@media (prefers-color-scheme: dark) {
}
として、その中にダークモードのときの色を設定するだけです。
画像をライトモードやダークモードで切り替えたいときは次のようにすると簡単。

css


img.dark{
  display:none;
}
@media (prefers-color-scheme: dark) {
  img.dark{
    display:inline-block;
  }
  img.light{
    display:none;
  }
}

html


<img loading="lazy" src="light.jpg" class="light" />
<img loading="lazy" src="dark.jpg" class="dark" />

色の問題

とりあえず、背景を黒くして文字を白にすればいいんでしょと思ったら、目がチカチカして見づらいサイトになってしまいました。
白地に黒に比べて、黒字に白は存在感が強くなりすぎるようです。
サイト全体が情報過多になって見た瞬間の拒絶感がすごい。
デザイナーさんの間ではターミナル画面のことを黒い画面と読んで嫌う傾向がありますが納得ですね。

結局Firespeedでは、文字色を#efefffまで抑えて全体的にトーンを控えめにしました。
この方法の副次的な効果としてリンクを#ffffffにすることで濃淡でリンクを表現できるようになりました。

色数を減らせ

これはダークテーマに限らない話ですが、使う色を増やすほどデザインは混沌としやすく高度な色管理が必要になります。
ダークテーマに対応させようとするとその問題が更に複雑化します。
Firespeedではダークテーマに対応する前に不要なCSSの整理から初めて出来るだけ使っている色数を減らすようにしました。

使う？使わない？ #000000

もし、デザインを学んだ人であれば　背景に#000000 つまり真っ黒を使ってはいけないと言われたことがあると思います。
背景を#000000にすると不自然な黒さになり質感が損なわれてしまいます。
実際にちゃんとデザイナーが入っているサイトでは黒背景に見えるサイトでも実際にはちょっとだけ明るさをつけている場合が多いです。
Google のMaterial Designでも背景に#121212を使うことが推奨されています。

ところが、環境の変化により現在この状況は変わりつつあります。
有機ELでは#000000の見え方が大きく変わるためです。

#000000は有機ELは完全に真っ黒です。
最近のノートパソコンやスマートフォンではディスプレイ周囲を黒くして、継ぎ目を見せない処理が行われているので、背景を#000000にするとコンテンツと筐体の境目がほとんど目立たなくなります。
それまでのスマートフォンにあった、画面の中にあるコンテンツを読むという印象とは大きく違い、筐体から文字が浮き出してくるような印象です。

twitterアプリでもダークモードに対応していましたが、それでも暗さが足りないという声に答えて背景が#000000になるlights-outモードが追加されました。（現在iOSアプリ向けに提供されており、今後Androidなどへも展開予定とのこと）

Firespeedではいろいろな明るさを検討した結果、セオリーを破り主要なコンテンツの背景は#000000を使うことに決めました。

認識性の問題

上記でも書いたのですが、背景を黒、文字を白にすると文字の存在感が強くなりすぎて情報を認識できなくなります。
一気にたくさんの情報が画面から入ってくるので読みたくないと思う感じ。

文字の太さやジャンプ率が認識しづらい

細く小さな文字でもめだつせいで、文字を太く大きくしてもライトテーマに比べて相対的に目立たなくなります。
Firespeedでは見出しが認識しづらくなり記事の継ぎ目が見えづらくなってしまいました。
そのため見出しはジャンプ率を大幅に上げ、かつ余白を大きく持たせるようにしました。

文字の明るさは際立つ

反面、文字の濃淡はダークテーマのほうがより目立つようです。
タイトルやリンクを他の文字より明るい色にすると色をつけるよりよっぽどよく目立ちます。

参考になる資料

Google のMaterial DesignのDarkTheme部分がとても良くまとまっています。
GoogleはAndroid3.0のときにHolo Designで黒字の背景を推していただけにこの辺のノウハウは深そうです。
ただし、先程書いたように技術的な変化により自分なりの解釈も加える必要があります。

先人たちに学べ

学ぶより真似ろと言うように最初は模倣から始めるのも良い一歩だと思います。

意外と少ない先人たち

しかし、現状多くのサイトを見てみてもまだダークテーマに対応しているサイトは殆どありません。
また以前は背景が黒いサイトも多かったのですが、最近は明るい色がほとんど。

参考になるサイトはtwitterです。
Twitterでは早いうちからダークテーマに対応してあっただけあって、レイアウトにまつわる違和感もなく高度にダークモードに適応しています。
なので、私がTwitterをみていてもそれは遊んでいるのではなくデザインの勉強をしているのですよ。はい、そこ文句を言わない。
また、YouTubeやNetfilx、マツダのサイトも参考になります。

サイトに限定しなければ

IntelliJはダークテーマ対応をかなり以前から行っており、今では違和感なく美しくデザインされたダークテーマを見ることが出来ます。

また、真夜中に運転することも多い自動車は古くから黒を基調とした内装が多く黒の中での高級感の出し方、視認性の高め方に一日の長があります。

ダークテーマに対応する上で注意すること

ダークモードの持つメッセージ

黒地に白文字は硬さや厳密さ、先進感、人工物と言った印象があります。
一方で優しさや安心感、手軽感という印象とは遠いです。
もし、生命保険のサイトを作るのであればダークモードは適さないはずです。
これらのサイトをデザインしつつダークモードのユーザーに不快感を与えないためには、ダークじゃないダークモード対応を行うのが良いように思います。

つまり、こんな感じ


@media (prefers-color-scheme: dark) {
  body{
    background: #f0f0f0;
    color:#101010;
  }
}

あるいは、次のようにコンテンツの周りに黒要素を追加してコンテンツになじませるとかも有りかもしれません。


@media (prefers-color-scheme: dark) {
  html{
    background: #394055;
  }
  body{
    background: #f0f0f0;
    color: #101010;
    margin:8px;
    padding:32px;
    border-radius:16px;

  }
}

prefers-color-scheme: darkは必ずしもダークモードで作らないといけないというわけではなく、ダークモードに設定しているユーザーにどう見せたいかなのでうまく柔軟に使っていきたいですね。

透過画像に注意

ダークモードで背景が暗くなると注意が必要なのが透過画像で、背景が白であることを前提に白背景でデザインを行い、最後に白い部分をくり抜いた透過画像を用意すると絵の周りに白い点が残って汚らしい画像になることがあります。
このあたりはPNG画像を使って半透過を使えば回避可能です。

また、背景が白い前提でデザインされた黒いアイコンがダークテーマで背景に埋もれてしまうなんてことも起こりがち

これは上で紹介したような画像の差し替えテクニックを使うか、アイコンの下には一律で背景色をつける、あるいはWebFontにしてCSSで色を設定可能にするなどで回避が必要です。

意外と忘れがちなFavicon

うちのサイトはダークモードには対応させないと思っても忘れてはいけないのがFavicon対応。
歴史的にFaviconはGIFなどの半透過に対応していない画像で作られがちで上記で書いた白い点が残って汚らしい画像になるというのが発生しがち。
また、黒単色でFaviconを作っている人も背景に埋没するので注意が必要です。
Faviconはブラウザのタブやお気に入りに表示されるのでユーザーがダークテーマに設定しているとWebサイトがダークテーマに対応していなくてもダークテーマのもとで表示されてしまいます。

ということで駆け足でダークテーマに対応する上で気づいたことと注意点についてまとめてみました。
ダークテーマへの対応はまだ各社とも始まったばかりで暗中模索な部分が多くあります。ここで書かれたことも今後はどんどん変わっていくとは思いますが、その分楽しみでもあります。