こんにちは。UIデザイナーの梁川です。

最近、「トグルスイッチ」と「チェックボックス」のどちらを使うべきか迷うことがありました。
どちらもオン／オフを扱うUIですが、使い分けが曖昧なことも多い気がします。
そこで今回は、自分の中で整理する意味も込めて、この2つの違いをまとめてみました。

トグルスイッチは「即時反映」と「状態の変更」に使う

まず一番の判断基準になるのは、設定がいつシステムに反映されるかです。

トグルスイッチは、部屋の照明スイッチのような操作をイメージして作られたUIです。

ユーザーは、スイッチを動かした瞬間に状態が切り替わることを自然に期待します。
そのため、操作した瞬間に効果が反映される「即時反映」のコンテキストで使うのが基本になります。

また、トグルスイッチは「状態の変更」に使うUIです。
例えば次のようなものです。

逆に、「ダウンロードする」のようなアクション（CTA）では使用するべきではないです。

チェックボックスは「遅延反映」や「一括処理」に使う

一方で、次のようなケースではチェックボックスの方が適しています。

設定を見直してから確定させたいとき

画面の最後に「設定を保存する」ボタンがあるタイプのUIです。
トグルスイッチと保存ボタンを併用してしまうと、どのタイミングで設定が反映されたのか分かりにくくなります。
チェックボックスで選択させ、最後に保存する形の方が自然です。

複数の設定をまとめて変更したいとき

トグルスイッチは操作するたびに状態が反映されます。
そのため、設定をいくつも変更する場合、システム側は都度処理を行うことになります。
設定項目が多い画面では、「チェックボックスで選択 → 最後にまとめて保存」という流れの方が扱いやすいです。

あえて「摩擦」を生みたい設定か

トグルスイッチのメリットは手軽な操作感ですが、「間違えて触ってしまった」ときのリスクが大きい設定には不向きです。

例えば、次のようなケースです。

こういった場面では、トグルの軽さで操作できてしまうと、意図せぬ変更を招くリスクがあります。

チェックボックスを使い、「チェックを入れる」→「画面下の保存ボタンを押す」というワンクッションを挟むことで、ユーザーに一度立ち止まってもらうことができます。

また、次のような同意などのアクションを伴うときも同様です。

単純なオン／オフではありますが、「確認して同意する」という重い意味合いが強いため、慣習的にもチェックボックスが使われることが多いです。

UIデザインでは「迷わせないこと」が重要ですが、場合によっては意図的に摩擦を作ることも大切だと思います。

トグルスイッチを使うときに気をつけること

トグルスイッチを採用する場合、いくつか気をつけるべき点があります。

テキストを入れない

スイッチの横や内側に「ON / OFF」と直接テキストを添えると、「今ONである」のか「押すとONになる」のか、ユーザーを混乱させてしまうので避けるべきです。

処理の遅延や通信エラーを考慮する

トグルスイッチは「即時反映」が前提のUIです。そのため、システム側で処理に時間がかかる場合や、通信エラーを考慮すべき場面で使用する場合には注意が必要です。

例えば、ユーザーがスイッチをONにする → 通信エラーで保存に失敗する → 数秒後にOFFに戻る、という挙動になると、UXとしてはかなりストレスになります。

処理に時間がかかる設定や、エラーが想定される場面では、「チェックボックス＋保存ボタン」という形が適しています。

まとめ

今回はトグルスイッチとチェックボックスの使い分けについてまとめてみました。

「ユーザーがどのタイミングで変更を確定するのか」を基準に考えると、
この2つの使い分けは整理しやすい気がします。