Web開発
2ステートテーマトグルの擁護
In defense of two-state theme toggles (joshcollinsworth.com)
要約
この記事は、ウェブサイトにおけるライト/ダークの2ステートテーマトグルと、ライト/ダーク/システム設定の3ステートテーマトグルのどちらが良いかという議論について考察しています。著者は、ほとんどの場合、2ステートトグルで十分であり、システム設定を尊重する巧妙な実装がユーザー体験を損なわずにシンプルさを保てると主張しています。3ステートトグルは特定の状況では有効ですが、多くのユーザーにとっては不要な複雑さを増す可能性があると論じています。
全文翻訳
2ステートテーマトグルの擁護
公開日: 2026年8月21日 更新日: 2026年8月22日
フロントエンド界隈で最近行われている些細な議論についてご存知ない方のために説明すると、シンプルな2ステートのテーマトグル(ライト/ダーク)の利点と、より明確な3ステートのトグル(ダークとライトに加えて、第3の「システム」オプションがあるもの)の利点、そしてその第3のオプションの明確さがもたらす複雑さの増加に見合う価値があるかどうかについて、活発な議論が交わされています。しかし、私が理想的だと考えるもの(そしてそうでないもの)とその理由について意見を述べる前に、この議論がどこから始まったのか、そして両アプローチの詳細とトレードオフについてもう少し詳しく話しましょう。
議論の起源
数週間前、Lea Verouは「ダークモードトグル:2ステートで十分」という優れた記事を発表しました。(明らかに、この議論はそれ以前からかなりの期間続いていました。)この記事は徹底的で洞察に富んでいます。Verou博士は、特にサイトのメインUIの一部であるスイッチの場合、ほとんどの場合2ステートで十分であるという自身の主張を展開しています。その最後の部分が重要です。ほとんどの場合、ユーザーは第3の「システム」オプションを探しているわけではなく、有用だと感じる可能性も低いです。彼らは単にライトスイッチを探しているのです。もちろん例外はあります。例えば、専用の設定ページでは、「今この瞬間に何を望むか」というメンタルモデルよりも「将来このアプリをどうしたいか」というメンタルモデルの方が強いため、3ステートトグルの方が理にかなっています。Verou博士の記事はこの点を非常に明確にしており、私も同意する傾向があります。
バイナリ対トライナリの議論はさておき、私はVerou博士の2ステート実装が特に巧妙だと感じています。内部的には、「ライト」または「ダーク」を明示的に切り替えるのではなく、システム設定にフォールバックするか、システム設定の反対にするかを切り替えています。つまり、localStorageにライトまたはダークテーマのプリファレンスを永続的に保存するのではなく、Verou博士の実装では、そのプリファレンスがデバイスの設定と異なる場合にのみプリファレンスを保存します。その場合、サイトはたまたまそのテーマを保存します。そうでなければ、あるいはユーザーがもう一度テーマを切り替えた場合、新しく選択されたテーマ(これはOSのプリファレンスと再び一致します)を保存するのではなく、保存されたプリファレンスは単に削除され、サイトは再びデバイスのプリファレンスにデフォルト設定されます。これは重要です。なぜなら、バイナリのライト/ダークコントロールに対する一般的な批判は、システムプリファレンスに戻る方法がなく、どちらか一方に固定されてしまうというものですが、この2ステートトグルは巧妙にそのロックインを回避しています。
記事で述べられているその他のポイントをいくつか挙げます。
3ステートトグルでは、いつでも3つのオプションのうち2つが同じことを行います。これは少し冗長であり、ユーザーが望む以上の(あるいは理解できる以上の)選択肢を提供することで、少なくともある程度の複雑さを生み出します(これについては後述します)。
これは万能な実装ではありません。私はすでにここで繰り返していることを知っていますが、多くの人がこの点を無視しているようです。2ステートの議論は文脈に依存します。会話の中で失われがちなため、私はこの点を繰り返し強調しています。
2ステート実装への反論は、前述の注意点やニュアンスにもかかわらず、少なくとも私の周りのウェブ界隈では、大きく激しいもののように感じられました。フロントエンドコミュニティの一部の人々は、ユーザーに第3のオプションを与えないことは、不正行為に等しいと感じているようです。ユーザーを本当に気にかけている人なら、決してしない選択です。
おそらく最も目立つ反論は、Bramusの「3ステートダークモードトグルのためのケース」です。この記事は、そのタイトルの主張を十分に果たしています(皮肉なことに、この記事が公開されているサイト自体にはテーマ設定やテーマトグルが一切ないにもかかわらず)。そのため、私は反対意見に対処するための焦点としてこれを利用します。
3ステートテーマトグルのためのケースに対処する
2ステートトグルに対するほとんどすべての議論と3ステートオプションを支持する議論は、次の2つの懸念のいずれかに集約されます。
シンプルさよりも明確さを優先する。
あるいは、時間帯によってライトモードとダークモードが切り替わる動的なシステムテーマを持つ可能性のあるユーザーを考慮する。
最初の点は有効です。個人的には、ほとんどの場合、そのトレードオフは価値がある(すでに述べた注意点とともに)と信じていますが。一部のユーザーがその選択を望む可能性があり、もし望むならそれを提供するのは良いことです。ここでも両方の見方で合理的な主張ができ、そして――繰り返しになりますが――文脈が答えに影響すべきです。
しかし、動的なテーマは私にとっては極端なエッジケースのように思えます。私が「エッジケース」と言うのは、Appleやその他のデバイスベンダーからの直接的なデータはありませんが、独立した調査からわかっていることは非常に少ないものの、動的なテーマを好むユーザーはごく少数派であるということを示唆しているからです。ユーザーの低一桁パーセンテージである可能性が高いと考えられます。
しかし、覚えておいてください:2ステートアプローチは、それらのユーザーにとって自動的に問題になるわけではありません。動的なOSテーマを持つユーザーにとって、2ステートトグルが問題になるのは、次のケースを除いては実際には問題になりません。
動的なテーマが有効になっているユーザーがサイトを訪れ、手動でサイトのテーマを変更することを決定した場合。
後でサイトに戻ったとき、動的なテーマがライトとダークの間で切り替わった後。
そして、その変更により、テーマがユーザーの望むものでなくなり、もう一度変更したいと思った場合。
これはUIを構築するための多くの条件であり、ユーザーはそれらすべてを通過しなければ、問題が発生する可能性があります。たとえすべてのユーザーの10%が動的なOSテーマを持っていると仮定したとしても(これも、繰り返しますが、ほぼ間違いなく極端な過大評価です)、それらのユーザーの一部は上記の各ステップで離脱します。残るのは、非常にゼロに近い値になる可能性が非常に高いです。そして、たとえその場合でも、覚えておいてください:問題となっているのは、文字通り1回の追加クリックであり、それらの論理ゲートの最後に残るごくわずかなパーセンテージのユーザーにとっては。
明確にしておくと:私は、少数派であるという理由だけでユーザーのグループを無視することを提唱しているわけではありません。(アクセシビリティの失敗の多くや、その他のひどい結果は、このようにして起こります。)これはそういうことではありません。文脈を無視しないでください。視力など、重要な理由でテーマのプリファレンスを持つ人もいます。一方のモードまたは他方のモードは、彼らにとって単に機能しないのです。私たちはそれを絶対に尊重すべきです。この場合の差は、能力、帯域幅、デバイスの電力、またはユーザーが制御できない可能性のあるその他の要因のようなものではありません。私たちが話しているのは、彼らが自由かつ独立して行った選択です。さらに:視力によって、さまざまな時間帯でライトモードとダークモードの両方に快適にオプトインできるユーザーは、どちらのモードでも明らかに妨げられていないため、この選択がアクセシビリティに関連するものではないと安全に仮定できます。(より可能性が高いのは、画面の明るさ、または単なる多様性への懸念です。)そして、少数派のユーザーが意図的に珍しい体験にオプトインし、その珍しい選択の結果として、特定の状況下で、当初の期待によっては予期しない動作に遭遇する可能性のあるさらなる選択を行う場合――これらはすべて実際には彼らにとって問題ではなく、単なるプリファレンスであり、最悪の場合、追加のクリック1回で終わる――
私は、それらのユーザー自身が掘り下げた「もしも」という深い穴だけにに基づいて、他の約95%のユーザーのために余分な複雑さを追加することに非常に困難を感じます。個人的には、自分のマシンにテーマを変更させてほしいと思っているユーザーは、そもそもそれを変更するほど気にするほどではないだろうと推測しています。しかし、たとえそうであっても、両方に慣れているのに、一方または他方に遭遇するだけで、その人がひどく驚いたり中断されたりするのを想像するのは難しいです。あるいは、もっと率直に言うと:実際のユーザーがこの問題を抱えているかどうかはわかりません。私たちは主にそれを発明したのだと思います。これは実際、次のポイントにつながります…
「システム」は多くのユーザーにとって不明瞭です
私たちは皆、自分と同じように考えていると想像してしまうのは、人間の心理における一般的な落とし穴です。金融関係者