ダークモードの切り替えボタンは、何を見て置かれているのか

ヘッダーの端に、太陽と月のアイコンが並んでいる。配色を切り替えるあのボタンは、誰を見て置かれているのでしょうか。

この記事は、デザインに関心のある方に向けて、世の中にあるデザインの背後の考えを読み、ツクロアならどう設計するかを考えるものです。

切り替えボタンのあるサイトと、ないサイト

配色をライトとダークで切り替えるボタンは、Web サイトで見かけるようになりました。

一方で、ボタンを置かずにダークテーマで表示されるサイトもあります。OS には画面全体の外観をライトとダークで切り替える設定があり、ブラウザはその設定をサイトに伝えます（CSS では prefers-color-scheme というメディア特性で受け取ります）。サイトがこれを受け取っていれば、利用者は OS で一度選ぶだけで済みます。

同じ「ダークで読める」という結果に、二つの形があることになります。

ボタンの背後にある前提

ボタンを置くという設計からは、一つの前提が読めます。見え方の調整は、そのサイトの中で行うものだ、という前提です。利用者はサイトを訪れ、そこで自分に合うように整える。サイトは、整えるための道具を用意する。

ボタンを置かずに環境の設定を受け取る設計には、別の前提があります。見え方は利用者が自分の環境であらかじめ決めているものだ、という前提です。サイトはそれを尋ねず、黙って従う。

どちらも筋は通っています。前者は訪問者をもてなす発想で、後者は訪問者の持ち物を尊重する発想です。どちらが正しいかは、ボタンの形だけでは決まりません。

自分の端末と、そうでない端末

このことを考え始めたときは、環境の設定を受け取ればボタンは要らない、と思っていました。

自分の端末を使っている人にとっては、たしかに環境の設定のほうが向いています。画面が明るすぎて読みづらいという困りごとは、特定のサイトだけで起きるものではありません。OS で一度ダークを選べば、あとは設定不要です。受け取ってくれるサイトはどこでもダークで表示され、訪れるたびにボタンを探す必要もなくなります。

ただ、閲覧する端末が自分のものとは限りません。公共の施設に置かれた共用のパソコンのような場所では、OS の設定を触ることに抵抗があるはずです。自分のものではない機械の設定を変えて、次に使う人へ影響を残したくはない。この状況では、サイトの中にボタンを置くほうが合理的です。

ボタンを置くべきかどうかは、前提の正しさではなく、利用状況と利用者の特性とシステムが噛み合うかで決まります。共用のパソコンという状況、設定を触りたくないという特性、そこに置かれたボタンというシステム。三つが噛み合ったとき、よい体験になります。

ツクロアならどう設計するか

ツクロアがダークモードに対応するとしたら、まず環境の設定を黙って受け取ることを必要条件とします。ボタンを置くかどうかに関わらず、ここは外しません。利用者がすでに決めていることを、サイト側で尋ね直す理由はないからです。

そのうえで、想定する利用状況にボタンが必要なら足します。前面に出すか、設定の奥に置くかも、誰がどんな状況で使うのかによって決めます。

ボタンを足すなら、押した結果をいつまで覚えておくかも決めます。共用のパソコンのためにボタンを置いたのなら、その人が使い終わるまで覚えていれば足ります。ブラウザを閉じたあとも覚えていると、次に使う人へ前の人の選択が残ります。OS の設定を触らせたくなかった理由が、そのままサイトの中に戻ってくることになります（実装で言えば、localStorage ではなく sessionStorage に置く、という選択です）。

理想は、利用者に何も言わずに対応していることです。「このサイトはダークモードに対応しています」と告げる必要があるのは、告げないと伝わらない設計のときだけです。環境の設定を受け取っているなら、利用者は気づかないまま、自分に合った見え方で読み始めています。

おわりに

同じ見た目のボタンでも、環境の設定を受け取ったうえで置かれたものと、受け取らずに置かれたものは、別の設計です。前者は利用者を見て置かれています。後者が見ているのは、ボタンがあるという事実です。OS の設定を最初の一度だけ読んで、あとは自分の記憶を優先するボタンも、後者に近づいていきます。

形には、何を見て設計したかが出ます。ツクロアは、利用者を見て置きたいと考えています。利用者が自分のために見え方を変えられて、その結果として、さまざまな人にとってのインターフェースになっている。インクルーシブデザインという思想と、それが形として現れた姿を、ツクロアは尊重したいのです。

しかし、切り替えのボタンひとつに、思ったより考えることが多かったですね。

次にあのアイコンを見かけたら、その前にサイトが OS のダークモードに合わせて表示してくれるか？ボタンで切り替えた後に、再読み込みするとどうなるか？確かめてみてください。ボタンが何を見て置かれているのかが、分かるはずです。