ダークモード

定義

ダークモードは、明るい背景の代わりに暗い背景を基本にしたテーマです。明るいテーマの色を そのまま反転すればいいと思われがちですが、単純な色の反転はほぼ必ず失敗します。白い背景を 黒に変えた瞬間、文字もカードも影も強調色も、すべて元の意図とは違って見えてしまうからです。 ですからダークモードは色を反転する作業ではなく、暗い環境に合わせて色と明るさを最初から 設計し直す作業に近いものです。明るいテーマと暗いテーマを、別々の二着の服だと考えると わかりやすくなります。

なぜ重要か

ダークモードは夜間や暗い場所で目の疲れを和らげ、ユーザーに好みに合った選択肢を提供します。 最近はOSレベルでダークモードに対応していることが多く、ユーザーはすべてのアプリやサイトが 自分の設定に従ってくれることを自然に期待します。ただ、もっと大切なのは、ダークモードを 作る過程で画面の階層と色の役割をあらためて見直すことになる点です。明るい背景では影で 表していた奥行きを、暗い背景では表面の明るさの差で表さなければならないため、どの要素が より手前に浮いているのかを色で定義し直す必要があります。このプロセスをきちんと踏むと、 明るいテーマの構造まで一緒に引き締まります。逆にざっくり反転しただけだと、文字が背景に 埋もれたり強調色がまぶしく飛び出したりして、明るいテーマよりかえって読みにくい画面に なってしまいます。つまりダークモードはおまけの機能というより、色の設計力を一段引き上げる トレーニングに近いものなのです。

よくある間違い

• 背景を純粋な黒（#000）にしてしまうことです。完全な黒はコントラストが強すぎて目がすぐに 疲れますし、その上に載せた影も見えなくなります。ほんの少し明るい濃いグレーを背景に使う ほうが、はるかに目にやさしくなります。
• 明るいテーマで使っていた彩度の高い色をそのまま持ち込むことです。暗い背景の上では同じ色が 蛍光ペンのように滲んで見え、目がまぶしくなります。彩度と明るさを一緒に下げてはじめて、 自然になじみます。
• 手前に浮いたカードやモーダルを背景より暗くしてしまうことです。暗いテーマでは奥行きは 暗くする方向ではなく、明るくする方向で表現する必要があります。方向を逆にすると、上に 浮いているはずの要素が、かえって画面の奥に沈んで見えてしまいます。

実務のヒント

• 手前に浮いた表面ほど、背景より少しずつ明るくしましょう。カードは背景より明るく、その上の モーダルはカードよりもう一段明るくしておくと、影がなくても要素が浮いている高さが自然に 伝わります。
• 背景は純粋な黒ではなく、ほんの少し明るい濃いグレーに、文字は純粋な白ではなく、少しトーンを 抑えた明るいグレーにしましょう。コントラストをほんのわずかにやわらげるだけで、長時間見ても 目が楽になります。
• 強調色は明るいテーマの値をそのまま使わず、彩度を下げたり明るさを調整したりした別の値を 用意しましょう。二つのテーマの色をそれぞれ管理してはじめて、どちらでもまぶしさが 生まれなくなります。

関連概念