トグルボタン(ON/OFFボタン)を使いやすくデザインする7つのポイント

ユーザーがON／OFFの機能を切り替えるためのトグルボタン。UIデザインではおなじみの存在ですが、誤ったデザインをしている例もしばしば見かけます。

今回はトグルボタンのデザインについて、実例をまじえながらご紹介します。ユーザーにとって使いやすいトグルボタンを考えましょう。

トグルボタンとは

トグルボタンとは、1つのスイッチでON／OFF（有効／無効、再生／停止）といった2つの状態の切り替えをおこなうボタンのこと。「留め釘」という意味を持つ、トグル（toggle）を由来とした用語です。

トグルボタンは、システム設定や環境設定の変更によく用いられています。

▲iPhoneで機内モードを有効にした際の画面

UIデザインにおいてトグルボタンが優れている理由のひとつとして、その面積が挙げられます。ラジオボタンを2つ使う場合と比べると、トグルボタンを使うほうがスペースを節約できます。

トグルボタンを使うべき場面

トグルボタンは、ON／OFF以外の状態に設定できません。

たとえば先ほどのような「機内モードを持続的に有効（無効）にする場合」にはトグルボタンが適していますが、以下のような「一回だけの行動」「一時的な状態」に関しては、トグルボタンを使うべきではありません。

▲「一週間ログインを維持する」はあくまで一時的な状態であるため、トグルボタンは使えない

持続的な状態を選択させる場合にはトグルボタン、一度きりの行動を求める場合はチェックボックスを使用しましょう。

トグルボタンをデザインするときの7つのポイント

ポイント1. ラベルの内容をできるだけ短くする

ラベルの内容はできるだけ短くし、婉曲／冗長表現は避けましょう。単語の数をできるだけ絞り、可能であれば名詞を使ってみてください。

• 悪いラベルの例：「平均価格を閲覧しますか？」
• いいラベルの例：「平均価格の表示」

ポイント2. ラベルは左側に配置する

デバイスを操作するとき、ユーザーは左から右へと視線を動かしていきます。

ユーザーが見やすいように、ラベルは左側に配置しましょう。

▲AppleのiOSでもラベルが左側に表示されている

ポイント3. トグルボタンのON／OFFはすぐに反映させる

トグルボタンを押してから、数秒以内に処理が完了するようにしましょう。

システムの関係ですぐに変化を反映させられない場合は、読み込み中であることを示すローディングアニメーションをつけることも有効です。

▲トグルボタンに処理中であることを示すアニメーションをつけたもの（出典：Material Design）

ポイント4. 直感的なデザインを心がける

他のUIデザインと同じく、トグルボタンについても直感的に操作できるようなデザインが求められます。

ユーザーを混乱させるような、ユニークすぎるデザインは避けましょう。

▲チェックボックスをスイッチにするというアイデアは良いものの、見慣れたデザインのほうが使いやすい（出典：Oleg Frolov）

ポイント5. ON／OFFのテキストは不要

トグルボタンの内部にON／OFFというテキストを記載するのは避けましょう。

現状のステータスがむしろ分かりにくくなってしまいます。

▲ON／OFFという単語をトグルボタン内に記載すると、ステータスが分かりづらい（出典：Zhenya Rynzhuk）

そもそも、トグルボタンの状態をテキストで説明する必要はありません。

▲ON／OFFをわざわざテキストラベルで説明する必要はない

テキストのかわりに色を活用すると、状態が分かりやすくなります。対照的な色を使って状態を明確にしましょう。

グレースケールがOFF、アクセントカラーがONというデザインがおすすめです。

▲AppleのiOSでは、白がOFF、緑がON

ポイント6. 派手なアニメーションの使用は避ける

トグルボタンに派手すぎるアニメーションをつけるのは避けましょう。

はじめて見る際には目新しくうつるかもしれませんが、日常的に使う機能には不向きです。

▲こうした派手なアニメーションは避ける（出典：Aaron Iker）

ポイント7. デザインに一貫性をもたせる

トグルボタンのUIデザインに一貫性がないと、ユーザーが操作をするときに混乱してしまいます。

トグルボタンごとにデザインを変えたりせず、アプリ全体でデザインを統一しましょう。

▲さまざまなデザインを混ぜるのではなく、どれかひとつのスタイルに絞る（出典：Alex Muench）

またトグルボタンのデザインは、各プラットフォームのデフォルトとなっているUIデザインに合わせてみてください。

特定のプラットフォームのUIデザインに慣れ親しんでいるユーザーが、トグルボタンの機能を瞬時に理解できるようになります。

▲AndroidとiOSのトグルボタン。デザインはプラットフォームにあわせる（出典：Material Design）

ユーザーが直感的に扱えるデザインを

UIデザインにおいて重要なのは、人間同士の会話のようにスムーズで、直感的な設計であることです。

ユーザーがトグルボタンをスムーズに使えるよう、今回お伝えしたポイントを考慮して制作を進めてみてください。

【参考】

• Toggle-Switch Guidelines by NNGroup
• Switches by Material Design
• Toggle switches by Microsoft

（執筆：Nick Babich　翻訳：Nakajima Asuka　編集：Kimura Yumi）