トグルスイッチ

Toggle Switch

web development beginner

一つの設定をオンとオフの二状態で切り替え、現在の状態を見た目で示すUI部品のこと。

概要（サマリー）

トグルスイッチとは、一つの設定をオンとオフの二状態で切り替え、現在の状態を見た目で示すUI部品である。部屋の照明スイッチのように、操作した直後に状態が切り替わる設定へ向いている。

以下は、スイッチを操作するとオンとオフの状態が切り替わる簡単なデモである。

通知を受け取る

現在の設定: オフ

通知を受け取るか、ダークモードを使うか、自動保存を有効にするかなど、二択の設定に使う。現在がオンかオフかを、つまみの位置だけでなく文字でも伝えるとわかりやすい。

Webではチェックボックスを基にスイッチ風の見た目を作る方法がある。

<label>
  <input type="checkbox" name="notifications">
  通知を受け取る
</label>

標準の入力要素を残すと、フォーム送信やキーボード操作の仕組みを利用しやすい。

チェックボックスと:checked疑似クラスだけで作るトグルスイッチは、次のページで実装例を確認できる。

一般にトグルスイッチは、操作した時点で設定が反映されるUIとして理解されやすい。あとで保存ボタンを押す必要があるフォームでは、チェックボックスのほうが利用者の予想に合う場合がある。

オンを緑、オフを灰色にするだけでは、色を区別しづらい人へ伝わらない可能性がある。ラベル、つまみの位置、オン・オフの文字などを組み合わせることがアクセシビリティにつながる。

サーバーへ設定を保存する場合、通信中に連打されない工夫や、保存失敗時に元へ戻す処理が必要になる。見た目だけ切り替わり、実際の設定が保存されていない状態を避けるべきである。

AIには「チェックボックスを基にしたスイッチ」「通信中は連打を防ぎ失敗時は元の状態へ戻す」のように、基礎要素と通信時の挙動を伝えるとよい。生成されたコードでは、状態が色だけでなく文字や位置でも伝わるか、キーボード操作で切り替えられるかを確認する必要がある。

二状態の即時切り替えに向く。複数候補から一つ選ぶ用途には向かない。

十分ではない。文字や形、位置でも状態を伝える必要がある。

通信を伴う場合は失敗することがある。処理中と失敗状態もUIへ反映する必要がある。