スマートフォンの設定画面でよく見る横長のスイッチを自分のデザインにも使ってみたいけれど、チェックボックスとどう使い分ければいいのか迷っていませんか。
トグルスイッチは見た目が分かりやすい反面、使う場面を間違えたり、オンとオフの見分けが色だけになっていたりすると、利用者を混乱させてしまいます。
この記事では、トグルスイッチとは何か、チェックボックスとの使い分け、オン・オフを色だけに頼らずに見せる方法を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
トグルスイッチの基本
まずは、トグルスイッチがどんな部品で、どんなパーツでできているのかを押さえましょう。
トグルスイッチとは
トグルスイッチとは、オンとオフの2つの状態を、押すたびに切り替える部品です。
「トグル」は、同じ操作で2つの状態を行き来する、という意味の言葉で、部品としては「スイッチ」「トグル」とも呼ばれます。
壁にある照明のスイッチのように、切り替えた結果がその場ですぐに反映されるのが特徴です。
デジタル庁デザインシステムでは「スイッチ」という名前で、切り替えたら即座に反映される設定項目に使う部品として紹介されています(スイッチ – デジタル庁デザインシステム)。
デジタル庁デザインシステムは、行政機関などのWebサイトやサービスを、誰にとっても使いやすく作るためにデジタル庁が公開しているデザインのルール集です(デジタル庁デザインシステム)。この記事ではほかにも海外の専門機関などの資料を紹介しますが、どれも利用者が「これはどう動くのだろう」と迷わないための共通のルールで、考え方はほぼ同じです。迷ったときは、この記事で紹介する「保存や送信のボタンが必要かどうか」という判断基準に立ち返りましょう。
通知のオン・オフ、ダークモード(画面を暗い配色にする表示)の切り替え、位置情報の利用許可などが、よくある使いどころです。
トグルスイッチを構成するパーツ
トグルスイッチは、横長の土台、その上を動く丸いつまみ、そして何の設定かを示すラベルの3つでできています。
見本の中では、ラベル「メール通知」を行の左端に、スイッチを行の右端に置いています。
オフの見本とオンの見本を比べると、土台の色だけでなく、つまみの位置と「オフ/オン」の文字も変わっていることが分かります。
横書きの画面では「つまみが右にあるとオン」という見せ方が多くのアプリで使われているので、特別な理由がなければこれに合わせましょう。
トグルスイッチの使い分けとデザインのコツ
ここからは、トグルスイッチを使うかどうかの判断と、オン・オフが確実に伝わる見せ方を見ていきます。
すぐに反映されるならトグル、保存が必要ならチェックボックス
トグルスイッチとチェックボックスの使い分けは、「切り替えた瞬間に反映されるかどうか」で決めます。
スイッチの形は「押したらすぐに切り替わる」ことを連想させるので、保存ボタンを押すまで反映されない項目に使うと、利用者は「もう変わった」と思い込んで、保存せずに画面を閉じてしまうおそれがあるからです。
つまり、2つの部品のいちばんの違いは「いつ反映されるか」です。
- トグルスイッチ
押した瞬間に、その場で設定が切り替わります(例: スマートフォンのWi-Fiのオン・オフ、ダークモードの切り替え)。 - チェックボックス
「保存」「登録する」などのボタンを押すまでは仮の選択で、ボタンを押して初めて反映されます。
デジタル庁デザインシステムでも、保存ボタンや送信ボタンなどの確定操作が必要なものや、操作したその場で結果が分からないものには、スイッチを使わずにチェックボックスやラジオボタンを使うよう定めています(チェックボックスとラジオボタンの使い分けはチェックボックスとラジオボタンの違いとは?で解説しています)。
Webの使いやすさ(ユーザビリティ)を長年調査・研究しているアメリカの専門機関のNielsen Norman Groupも、トグルスイッチはすぐに効果が出るべきで、送信ボタンが必要なフォームには使わないよう勧めています(Toggle-Switch Guidelines(英語))。
会員登録
会員登録
NGの見本では、「メルマガを受け取る」をオンにした時点で登録されたのか、「登録する」を押すまで決まらないのかが、見た目から判断できません。
OKの見本では、チェックボックスにしたことで「選んでから、ボタンで確定する」という流れが自然に伝わります。
反対に、アプリの設定画面のように、切り替えるとすぐに通知が止まったり表示が変わったりする項目では、トグルスイッチがよく合います。
デジタル庁デザインシステムでは、オン・オフのほかに、「摂氏・華氏」や「リスト表示・カレンダー表示」のように、すぐ反映される2択の切り替えにもスイッチを使う例を挙げていて、その場合は両方の選択肢にラベルを表示するとしています。
オン・オフを色だけで見分けさせない
オンとオフの違いは、土台の色だけでなく、つまみの位置や「オン/オフ」の文字など、色以外の手がかりでも分かるようにします。
色の見分けにくい人や、日差しの強い屋外でスマホを見ている人には、色の違いだけでは今どちらの状態なのかが伝わらないからです。
Webのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)の国際的なガイドラインWCAG 2.2でも、色を情報を伝える唯一の手段にしないよう求めています(WCAG 2.2 達成基準1.4.1・WAIC日本語訳)。
NGの見本は、わざと見分けにくくした見本で、薄い青と薄い灰色の違いしかなく、白いつまみも背景に溶け込んで、どちらに寄っているのかが分かりにくくなっています。
OKの見本では、オンの土台を濃い色で塗り、つまみの中にチェックの印を入れ、さらに「オン/オフ」の文字を添えて、色が分からなくても状態を読み取れるようにしました。
スイッチの土台やつまみのように、部品の状態を見分けるために必要な形は、隣り合う色とのコントラスト比(明るさの差を数値にしたもの)を3:1以上にすることも求められています(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。
色だけに頼らない考え方は色だけに頼らないデザインとは?で、コントラスト比の測り方はコントラスト比とは?で解説しています。
ラベルは「オンにすると何が起きるか」を書き、状態で変えない
トグルスイッチのラベルには、「メール通知」「位置情報を使う」のように、オンにしたときに何が有効になるかを、短くはっきり書きます。
「通知を止める」のような否定の言葉だと、オンにすると通知が止まるという逆の意味になり、どちらが望む状態なのかを考え込ませてしまうからです。
Nielsen Norman Groupは、ラベルの後ろに「オン」「オフ」を付けて声に出してみて、意味が通じるかで確かめる方法を紹介しています。
また、切り替えたときにラベルの文字そのものを「通知オン」から「通知オフ」に書き換えるのは避けましょう。
たとえばラベルが「通知オフ」になっていると、「今オフになっている」という意味なのか、「押すとオフになる」という意味なのかを一瞬考えなければならず、かえって迷わせてしまいます。ラベルは「何の設定か」を示す項目名として、状態が変わっても同じ文字にしておきましょう。
Webの技術の標準を定めている国際的な団体のW3Cが公開している、部品の作り方のガイド(WAI-ARIA Authoring Practices Guide)でも、スイッチのラベルは状態が変わっても変えないことが重要だとしています(Switch Pattern(英語))。
状態を文字で見せたい場合は、ラベルとは別に「オン/オフ」の小さな表示を添える形にします。
押せる範囲と状態の見た目を用意する
トグルスイッチは、小さなスイッチ部分だけでなく、ラベルを含めた行全体を押しても切り替わるようにすると、スマートフォンでも操作しやすくなります。
そのうえで、オン・オフに加えて、フォーカス(キーボードで操作対象として選ばれている状態)と無効の見た目も用意しておきます。
無効の状態にする場合は、「ほかの設定をオンにすると選べます」のように、なぜ切り替えられないのかを近くに書いておくと親切です。
キーボードでは、フォーカスを当ててSpaceキーで切り替えるのが基本の操作です(WAI-ARIA Authoring Practices Guideでは、Enterキーでの切り替えは任意とされています)。
ここからは、Webサイトを自分でコーディングする人向けの補足です。
主要なブラウザすべてで使えるスイッチ専用のHTML要素はまだないため、チェックボックスの<input>要素にrole="switch"を付けて、読み上げソフトに「スイッチ」として伝える作り方がよく使われます。
roleは、その要素が何の部品なのかを、目の見えない人や見えにくい人が使う読み上げソフトなどに伝えるための目印です。見た目をスイッチの形に整えても、HTMLの上ではチェックボックスのままなので、role="switch"を付けて「これはオン・オフを切り替えるスイッチです」と教えてあげる、というイメージです。
<label>
<input type="checkbox" role="switch" checked>
メール通知
</label>見た目はCSSで横長のスイッチの形に整えますが、<label>で囲んでおくと、ラベルの文字を押しても切り替えられます。
実践のポイント
トグルスイッチで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 見た目がおしゃれだからと、申し込みフォームの選択肢までトグルスイッチにしてしまうことがあります。
たとえば会員登録の「メルマガを受け取る」をトグルにすると、利用者は切り替えた時点で手続きが済んだと思い込み、「登録する」を押さずに画面を閉じてしまうかもしれません。
送信ボタンで確定する項目は、チェックボックスにしましょう。 - オンの色に赤を使ってしまうことがあります。
赤は「エラー」「止まれ」を連想させやすいので、オンの色にはサイトの主要な色や落ち着いた濃い色を選び、エラーの色と重ならないようにしましょう。 - 同じ画面の中で、似た設定項目にトグルスイッチとチェックボックスが混ざっていることがあります。
どれがすぐ反映されて、どれが保存を待つのか分からなくなるので、同じ性質の項目は同じ部品にそろえましょう。 - 切り替えたあと、通信の失敗などで実際には設定が変わっていないのに、スイッチだけがオンのままになっていることがあります。
反映に失敗したときは、スイッチを元に戻したうえで、失敗したことを文字で知らせましょう。
よくある質問
- Q. トグルスイッチとトグルボタンは同じもの?
A. 似ていますが別の部品として扱うことが多いです。
トグルボタンは、文字の太字ボタン(B)のように、押すと「押された状態」が続き、もう一度押すと戻るボタンのことです。
WAI-ARIA Authoring Practices Guideでも、スイッチとは別に、ボタンの一種として紹介されています(Button Pattern(英語))。 - Q. 複数の選択肢から1つを選ぶのにトグルスイッチは使える?
A. 使えません。
トグルスイッチはオンとオフの2つの状態しか持てない部品です。
3つ以上から1つを選ぶならラジオボタンを使いましょう。 - Q. 「オン/オフ」の文字は必ず必要?
A. 必須ではありません。
つまみの位置と、背景とのコントラストが十分な塗りで状態が分かるなら、文字がなくても伝わることは多いです。
ただ、文字やつまみの中の印を添えると、初めて見る人や色の見分けにくい人にも確実に伝わります。
まとめ
トグルスイッチとは、オンとオフの2つの状態を押すたびに切り替える部品で、切り替えた結果がその場ですぐ反映されるのが特徴です。
保存や送信が必要な項目にはチェックボックスを使い、オン・オフは色だけでなくつまみの位置・印・文字でも伝え、ラベルは状態で書き換えないことがポイントです。
まずは、スマートフォンの設定画面を開いてトグルスイッチを1つ切り替え、何がすぐに変わったか、オンとオフをどうやって見分けているかを観察してみてください。
