多くのWebサイトが備えるダークモードの切り替えUIは、「ライト」「ダーク」「システム」という3つの選択肢を並べるのが定番になっている。しかしCSSの専門家Lea Verouは、この3択は過剰であり、2状態で十分だと主張する。CSS-TricksのGeoff Grahamがその議論を紹介している。要点はシンプルだ。同じ目的を、より少ないUIで達成できるなら、そのほうが良い。
Verouの提案の核心は、常にすべての選択肢を見せる必要はない、という点にある。ユーザーの環境設定（OSやブラウザのカラースキーム）をデフォルトとして尊重し、それを上書きするための1つのボタンだけを表示すればよい。システム設定がライトならダークへ切り替えるボタンを、ダークなら逆を出す。上書きした結果はlocalStorageに保存し、次回以降も維持する。これで「システムに従う」状態は初期値として暗黙的に成立しており、わざわざ3つ目の選択肢として明示する必要はないという理屈である。
背景には、テーマの切り替えがユーザーの本来の目的ではない、という認識がある。訪問者はコンテンツを読みに来ているのであって、配色を選びに来ているわけではない。だからこそ、環境設定と表示が食い違ったときにワンクリックで上書きできる導線さえあれば、大半のケースは足りる。選択肢を減らすことは、ユーザーの認知負荷を下げ、主目的への集中を妨げないという実利につながる。
もっとも、3状態が意味を持つ場面がないわけではない。専用の設定パネルを持つアプリケーションや、ライトとダーク以外に複数の配色テーマが存在するプロダクトでは、明示的な選択肢を並べる価値がある。Verouの主張は「3択を常に否定する」ものではなく、「単純なライト／ダークの切り替えに、3つ目を反射的に足すのはやめよう」という文脈依存の提言だと理解するのが正確だ。
記事のコメント欄では、そもそもこの設定はブラウザ側に持たせ、サイトごとの切り替えUI自体を不要にすべきだという意見も出ている。デザイナーにとっての示唆は明快だ。UIの選択肢は多ければ親切なのではなく、必要な分だけあることが親切なのである。ダークモードの切り替えという身近な部品ひとつをとっても、デフォルトの尊重と上書きの容易さという原則に立ち返る余地は大きい。
