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

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

トグルボタンとは

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

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

Toggle Switch Design

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

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

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

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

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

Toggle Switch Design

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

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

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

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

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

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

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

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

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

Toggle Switch Design

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

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

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

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

Toggle Switch Design

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

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

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

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

Toggle Switch Design

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

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

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

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

Toggle Switch Design

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

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

Toggle Switch Design

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

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

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

Toggle Switch Design

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

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

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

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

Toggle Switch Design

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

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

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

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

Toggle Switch Design

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

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

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

Toggle Switch Design

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

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

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

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

【参考】

(執筆:Nick Babich 翻訳:Nakajima Asuka 編集:Kimura Yumi)

いまの働き方に悩んでいるあなたへ。

「フリーランスとして働いているけど、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ