2ステートテーマトグルの擁護

2状態テーマトグルの擁護

［画像: 記事のテーマトグルに関する議論の様子を示す画像］

フロントエンド界隈で最近（また）行われている「バイク小屋談義」に追いついていない方のために説明すると、シンプルな2状態テーマトグル（ライト/ダーク）の利点と、ダークとライトに加えて「システム」オプションを持つ、より明確な3状態トグルのどちらが良いか、そしてその3番目のオプションの明確さがもたらす複雑さを考慮する価値があるかについて、活発な議論が交わされています。

しかし、この議論がどこから始まったのか、そして私が理想的だと考えるもの（およびそうでないもの）とその理由について意見を述べる前に、まず2つのアプローチの詳細とトレードオフについて少し掘り下げてみましょう。

議論の起源

数週間前、Lea Verou氏がダークモードトグル：2状態あれば十分という素晴らしい記事を公開しました。（明らかに、この議論はそれ以前からかなりの期間続いていたようです。）

この記事は徹底的で洞察に富んでいます。Verou博士は、メインサイトUIの一部であるスイッチの場合、ほとんどの場合2状態トグルで十分であるという主張を展開しています。この最後の部分が重要です。

ほとんどの場合、ユーザーは3番目の「システム」オプションを探しているわけではなく、有用だと感じる可能性も低いです。彼らは単にライトスイッチを探しているのです。

もちろん例外もあります。例えば、専用の設定ページでは、「今この瞬間に何を求めているか」というメンタルモデルよりも「将来このアプリをどうしたいか」というメンタルモデルの方が強いため、3状態トグルの方が理にかなっています。Verou博士の記事はこの点を非常に明確にしており、私も同意する傾向があります。

バイナリ対トライナリの議論はさておき、Verou博士の2状態実装は特に巧妙だと感じます。内部的には、「ライト」または「ダーク」を明示的に切り替えるのではなく、システム設定にフォールバックするのと、システム設定の反対との間で切り替えています。

つまり、「ライト」または「ダーク」のテーマ設定をlocalStorageに永続的に保存するのではなく、Verou博士の実装では、その設定がデバイス設定と異なる場合のみ、その設定を保存します。その場合、サイトはその時点でのテーマを保存します。

それ以外の場合—またはユーザーがテーマをもう一度切り替えた場合—新たに選択されたテーマ（これはOSのプリファレンスと再び一致します）を保存するのではなく、保存されたプリファレンスは単に削除され、サイトは再びデバイスのプリファレンスにデフォルト設定されます。これは重要です。なぜなら、バイナリのライト/ダークコントロールの一般的な批判は、システムプリファレンスに戻る方法がなく、どちらか一方に固定されてしまうというものだからです。この2状態トグルは、そのロックインをうまく回避しています。

記事で述べられているその他のポイントをいくつか挙げます。

1. 3段階トグルでは、常に3つのオプションのうち2つが同じ動作をします。これは少し冗長であり、ユーザーが望む以上の（あるいは理解できる以上の）選択肢を提供することで、少なくともある程度の複雑さを生み出します（これについては後述します）。
2. これは万能な実装ではありません。すでに繰り返していることは承知していますが、多くの人がこの点を見落としているようです。2状態の議論は文脈に依存します。

私がこれについてしつこく言及するのは、会話の中で失われてしまうように見えるからです。1

前述の注意点やニュアンスにもかかわらず、2状態実装に対する反発は、少なくとも私の周りのウェブの世界では、大きく厳しいものに見えました。フロントエンドコミュニティの一部の人々は、ユーザーに3番目のオプションを拒否することは、医療過誤のようなものだと感じているようです。真にユーザーを気遣う人なら決してしない選択です。2

おそらく最も目立つ反論は、Bramus氏のトライステートダークモードトグルのためのケースでしょう。この記事は、そのタイトル通りの主張を（皮肉なことに、この記事が公開されているサイト自体にはテーマ設定やテーマトグルが一切ないにもかかわらず）まともに展開しており、私の反対意見に対処するための焦点として役立つでしょう。

トライステートテーマトグルのためのケースに対処する

2状態トグルに反対し、3状態オプションを支持するほとんどすべての議論は、次の2つの懸念のいずれかに集約されます。

1. シンプルさよりも明確さを優先する。
2. 時間帯によってライトモードとダークモードが切り替わる動的なシステムテーマを持つ可能性のあるユーザーを考慮する。

最初の点は有効です。個人的には、ほとんどの場合そのトレードオフは価値がある（すでに述べた注意点とともに）と信じていますが。一部のユーザーがその選択を望む可能性があり、もし望むならそれを提供できるのは良いことです。ここでも、どちらの方向にも合理的な主張ができ、そして—繰り返しになりますが—文脈が答えに影響すべきです。

しかし、動的なテーマは私には少し極端なエッジケースのように思えます。

私が「エッジケース」と言うのは、Appleやその他のデバイスベンダーからの直接的なデータはありませんが、独立した調査からわかっていることは非常に少ないことから、動的なテーマを好むユーザーはごく少数派であると示唆されているからです。それは、ユーザーの低単桁パーセンテージである可能性が高いと考えられます。3

しかし、覚えておいてください：2状態アプローチは、これらのユーザーにとって自動的に問題になるわけではありません。2状態トグルは、動的なOSテーマを持つユーザーにとって、以下のケースを除いて問題にはなりません。

1. 動的なテーマが有効になっているユーザーがサイトを訪問し、手動でサイトのテーマを変更することを決定した場合
2. 後で、その動的なテーマがライトとダークの間で切り替わった後に、サイトに再度アクセスした場合、そして
3. その変更時に、テーマがユーザーの望むものでなく、再度変更したい場合

これはUIを構築するための多くの条件であり、ユーザーは上記のすべてを通過しなければ、問題が発生する可能性があります。仮に全ユーザーの10%が動的なOSテーマを持っていると仮定しても（これも、繰り返しますが、ほぼ確実に過大な見積もりです）、上記の各ステップでそのユーザーの一部が脱落します。残るのは、おそらくゼロに近い値でしょう。

そしてその場合でさえ、問題は文字通り1回の追加クリックであり、それらの論理ゲートの最後に残る、ごくわずかなパーセンテージのユーザーにとってです。

明確にしておきますが、私は単に少数派であるという理由だけで、ユーザーのグループを無視することを提唱しているわけではありません。（アクセシビリティの失敗の多くは、他のひどい結果とともに、そのようにして起こります。）これはそういうことではありません。文脈を無視しないでください。

視力のように、重要な理由でテーマの好みが異なる人もいます。一方のモードまたは他方のモードでは、彼らにとって機能しません。私たちはそれを絶対に尊重すべきです。

このケースでの違いは、能力、帯域幅、デバイスの電力、またはユーザーが制御できない可能性のあるその他の要因について話しているのではなく、彼らが自由かつ独立して行った選択について話しているということです。

さらに：両方のモードで、さまざまな時間帯に快適に選択できる視力を持つユーザーは、どちらか一方によって明らかに妨げられていないため、この選択がアクセシビリティに関連しないと安全に仮定できます。（より可能性が高いのは、画面の明るさ、あるいは単なる多様性への懸念です。）

そして、少数派のユーザーが意図的に異常な体験にオプトインし、その珍しい選択の結果として、特定の状況下で、さらなる選択を行う可能性があり、それが彼らの期待に基づいた予期せぬ動作につながる可能性がある場合—それは実際には彼らにとって問題ではなく、単なる好みであり、最悪の場合、1回の追加クリックで終わる—

さて、そのユーザー自身が最初に掘った「もしものこと」の深い穴に基づいて、他の約95%のユーザーのために余分な複雑さを追加することは、非常に困難です。

個人的には：マシンにテーマを自動的に変更させたいユーザーは、そもそもテーマを変更するほど気にするほどではないと思います。しかし、たとえそうであっても、両方に慣れている人が、どちらか一方に遭遇しても、ひどく驚いたり中断されたりするとは想像しにくいです。

あるいは、もっと率直に言うと：

実際のユーザーがこの問題を抱えているのかどうか、私にはわかりません。ほとんどの場合、私たちがそれを発明したのだと思います。

それが私の次のポイントにつながります…

「システム」は多くのユーザーにとって不明確です

私たちは皆、自分と同じように考えるだろうと想像してしまうのは、人間の心理における一般的な落とし穴です。金融関係者は、誰もが金利と投資を理解していると思っています。車好きは、誰もがオイル交換の方法を知っていると思っています。開発者は、誰もがカラーテーマに夢中になっていると思っています。

しかし、コンピューターに詳しくないユーザーが、私たちが思うほど気にかけているという証拠はほとんどありません。多くのユーザーには好みがあることは確かですが、ほとんどのユーザーがテーマについて、私たちが考えているほんのわずかでも考えているとは、私は強く疑っています。

私たちの知識の呪いは、誰もがカラーテーマについて私たちと同じくらい知っているわけではないことを忘れさせてくれます。多くのユーザーは、それについて全く理解していない可能性が高いです。

私の理論をテストするために、妻（開発者ではありませんが、スマートフォン、iPad、ラップトップを日常的に使用しています）に、携帯電話のカラーテーマがライトかダークか尋ねました。

彼女は全く知りませんでした。

1日に何時間も携帯電話を見ているにもかかわらず、デフォルトのカラーテーマが何であるかを知るために、実際に確認する必要がありました。彼女にとって、それはそれほど目に見えないものなのです。（興味深いことに：彼女自身、それを認識せずにダークモードを見ていたことに驚いていました。）

他のデバイスでも同じプリファレンスが設定されているか尋ねましたが、それも知りませんでした。

そして、サイトやアプリのボタンを押して別のカラーテーマに変更したことがあるか尋ねました。

彼女はいいえと言いました。文字通り一度もありませんでした。

基本的に：彼女はライトモードとダークモードの両方が存在することを知っていましたが、それが彼女の知識と経験のすべてであり、自身のプリファレンスに関してもそうでした。

さて、これは単一のデータポイントであることを認めます。これが意味のある研究であると一瞬たりとも主張しませんし、私の妻がどんなユーザーベースの大多数を代表しているとも想像しません。ユーザーは間違いなく、彼女と、まあ、ブログ記事を書くほどこの問題について考えるオタクたちの間の広いスペクトルに存在します。（あー、はい。）

しかしそれでも：これは、一部のユーザーは自分のシステムテーマが何であるかさえ知らない—あるいは「システム」という言葉が何を意味するのかさえ理解していないかもしれない—ということを避けられないほど示しています！

かなりの数のユーザーは、おそらく自分がデフォルトのテーマを持っていることさえ認識していないでしょう。なぜなら、デバイスに現在設定されているものに慣れすぎてしまい、何も設定したことさえ忘れてしまっているからです。彼らは、物事はただそのように見えるものだと思っています。

「システム」設定は、そのようなユーザーにとって積極的に役に立ちません。そのオプションを提供することは、彼らに余分な複雑さを与えることになり、非常に混乱を招く可能性があります（特に、再び：3つのオプションのうち2つは全く同じように見え、ユーザーは違いが何であるかを理解できないかもしれませんし、3つのうちの1つが壊れていると思うかもしれません）。

そして、これはすべて、「システム」（または「OS」または「デバイス」など）という言葉がそもそも存在することを前提としています。多くの3状態トグルは、単に小さなコンピューターのようなアイコンを表示するだけで、混乱をさらに悪化させる可能性があります。

Bramus氏はかつて、トライステートトグルはユーザーに考えさせることを減らす（Steve Krugの著書に言及して）と主張していましたが、私がこれまで明確にしてきたように、かなりの数のユーザーにとってはそうではない可能性が非常に高いです。したがって、その権威への訴えは、私の意見では誤っています。

あなたと私は、そのコンピューターアイコンが何を意味するかを知っていますが、あなたの知っている人は皆、考えずにすぐにそれを理解できるでしょうか？私はそうは思いません。

「システム」は非常に特定の状況でしか役に立ちません

「システム」オプションはすでにデフォルトであるため、誰かがそれから切り替えて、そして元に戻したい場合にのみ重要であることに注意する価値があります。

したがって、「システム」オプションが役立つためには、まず最低4つの条件を満たす必要があります。

• ユーザーは自分のシステムテーマが何であるかを認識している必要があります。
• ユーザーは、その小さなコンピューターアイコンが何を表しているかを理解している必要があります（そうでなければ、オプションは明確にラベル付けされている必要があります）。
• ユーザーは、デフォルトであるため、すでにシステムテーマから切り替わっている必要があります。そして
• ユーザーはシステムテーマに戻りたいと思っている必要があります—そして、現在のテーマの反対のものに戻りたいと思っているのではなく、明確に戻りたいと思っている必要があります。

私は、ほとんどのユーザーが定期的に、あるいは一度でも、これらのすべてのボックスにチェックを入れるとは疑っていません。

さらに、そうする人のほとんどは、すでにこの分野に非常に詳しいか、単にテストのためにすべての設定を試しているだけだと思います。（個人的には、テストシナリオだけが「システム」オプションをクリックしたことを覚えている唯一の時です。）

いずれにせよ、人々はこの点をスキップするように見えるため、繰り返しになりますが：これは、3状態トグルを絶対に使用すべきではないという意味ではありません。それらには場所があり、文脈が重要です。私（そしてVerou博士、そして2状態トグルを支持する他の人々）は、それが理にかなっている場所では、3状態を完全に支持しています。

私は、それがメインサイトUIにあるとは思いません。

トライステートをデフォルトにするという動きは、ほとんどの場合、そもそも対応を必要としない可能性が高い極端な少数派のユーザーに対応するという名目で行われており、少なくともそれ以上の多くのユーザーを混乱させたり遅くしたりする犠牲を払っています。

疑問のあるデータ

前述のトライステートダークモードトグルのためのケースで、Bramus氏はソーシャルメディアで実施したアンケートに言及しており、フォロワーに2状態か3状態のトグルかを尋ねています。アンケートは3状態の圧倒的な支持で締めくくられましたが、このデータ収集方法にはいくつかの問題があります。

まず：人々は常に、より多くのオプションを望むと言うでしょう。心理学的に、私たちは実際にはそれを使用しない、あるいは実際には望まない場合でも、選択を好むと想像します。このトピックに関係なく、この種のアンケートでは高い数字がほぼ常に勝ちます。（私がどれだけのディップソースのオプションを望むか尋ねれば、おそらく5つか10つと言うでしょう。しかし、実際に使用するオプションはいくつかと尋ねれば、おそらく1つか2つしか言わないでしょう。）4

次に：Bramus氏は彼が好むオプションがあることを示唆しており、それが結果をさらに歪める可能性があります。回答者は、自分の意見を提供するのではなく、Bramus氏が正しい答えだと思っていることを推測するように強制されるかもしれません。

しかし、最も重要なのは：このオーディエンスは、開発者で構成されている可能性が高いです。したがって、その結果は、ユーザーのプリファレンスではなく、開発者の意見を反映したものになるでしょう。それは、おそらく、トピックについて異常に深い知識（そして異常に強い意見）を持つ人々からのみ聞いていることを意味し、ユーザーの代表的なグループではなく、そのユーザー自身の理解とプリファレンスは大きく異なる可能性があります。

Valeのアプローチ

彼の記事で、Bramus氏は、理想的な中間地点かもしれないと彼が感じているVale（別名Declan Chidlow）によるトライステート実装にも言及していますが、検討に値するとまでは言えません。以下にCodePenデモを埋め込みます。

See the Pen Light/Dark/System Theme Setting by Declan Chidlow (@OuterVale) on CodePen.

確かに巧妙です。それは2状態トグルのように見えますが、どちらのオプションも選択されていないことでシステムプリファレンスにデフォルト設定されます。もしあなたがどちらかのテーマを選択した場合、それを再度クリックすることで解除でき、トグルは再びシステムデフォルトにフォールバックします。

それがなぜ良い感じなのかはわかります。もし誰かが自分の個人的なウェブサイトや小さなアプリでこれを使いたいなら、そうすればいいと言います。それはクールです。

しかし、私は個人的には、意味のある規模ではこのアプローチに反対します。

この実装の主な問題は：このような既存のアフォーダンスが存在しないということです。私が知る限り、このトグルに似ている、またはそのように機能する一般的なユーザーコントロールはありません。それは新規で、発明された動作であり、ユーザーが以前に遭遇したことがない可能性が高いです。それがどれほど巧妙であれ、またはそれが実際に内部で操作している機能が何であれ、必然的に混乱を招くでしょう。

それは実質的に、チェックボックスとラジオボタンのプロパティを混在させた、2状態トグルを装った3状態トグルです。その真の性質も、現在のテーマを選択解除するオプションも、試行以外では全く明らかではなく、発見できません。（皮肉なことに、このアプローチは、その明確さと透明性の欠如についてVerouアプローチを批判する一部の人々に支持されています。）

Valeのトグルは、2方向トグルとして十分に摩擦なく機能し、一部のユーザーが学び、使用する可能性のある素敵な秘密の3番目のオプションがあると主張できるかもしれません。しかし、もしあなたがシステムオプションが容易にアクセスできることを本当に気にかけているなら、それは奇妙な選択です。

［編集 2026/8/22］Sara Joy氏がMastodonで指摘したように、Valeのアプローチの1つの利点は、ユーザーが何に切り替わっているかが非常に明確になることです。それは、トライステートについても同様に、非常に良い点だと思います。これはまた、2状態トグルに何を表示すべきかという問題も提起します。現在の状態か、または押された場合に切り替わる新しい状態か。これについては現時点では強い意見はありませんが、それ自体で全く新しい活発な議論を引き起こす可能性があると推測しています。

では、正しいアプローチは何でしょうか？

これらすべてを経て、私たちは元の記事に立ち返ります。なぜなら、すべての反発にもかかわらず、Verou博士は最初に正しかったからです。いつものように：それは状況によります™。

• トグルがメインUIの一部である場合は、2状態トグルにしてください。これは、その時点で何であれテーマを変更したいだけのユーザーに役立ちます。これは、ユーザーの圧倒的多数であり、メインユーザーインターフェイスに表示されるあらゆるコントロールの主な目的です。設定を求めている人に、単なるライトスイッチを提供しないでください。

• 設定またはアカウントページにある場合は、明示的な3状態トグルがより良いでしょう。ユーザーがアプリを好みに合わせて設定する、またはアカウントを選択するという考え方をしている場合、その選択は正当化されます。そのような場合、ユーザーは現時点だけでなく、将来どのような体験をしたいかを決定しています。（そして、各オプションを明確にラベル付けするためのスペースがあります。）

さらに、SlackやGitHubのような、ユーザーが一日中、または一日に何度も見ることになるアプリやサイトは、おそらく3方向トグルに値するでしょう。ほとんどのサイトやアプリはこのカテゴリには当てはまりませんが、一部は当てはまります。

しかし、ここでは主に、Verou博士によってすでに非常に明確に書かれていることを繰り返しています。

彼女は女性です。

博士号を持っています。

ユーザビリティの。

MITから。

だから、まあ、インターネットの皆さん、彼女は自分が何について話しているか知っているかもしれませんね。