調整中

用語集ら行

ラジオボタン

フォームの入力部品の一つで、複数の選択肢から 1 つだけを選ばせる丸いボタン。「性別」「希望プラン」のように、同時には 1 つしか選べない排他的な選択に使う。複数を同時に選べるチェックボックスとは役割が異なり、選択肢の性質に応じて使い分ける。

押さえておきたいのは「選択肢の性質に部品を合わせる」こと。1 つだけ選ぶならラジオボタン、複数選べるならチェックボックス、選択肢が多いならプルダウン(ドロップダウン)、という使い分けが、入力のしやすさ=フォーム最適化(EFO)に直結する。選択肢が 2〜5 個程度なら、一覧で見えるラジオボタンが分かりやすい。

実務で押さえる点はラベルとボタンの関連付け(ラベルの文字をタップしても選択できる)・初期選択を入れるかの検討・指でタップしやすい余白の確保・アクセシビリティ対応(キーボード操作や読み上げ)メールフォームでは、必須項目であることを明示しておく。

陥りやすいのは、選択肢が多すぎてラジオボタンが縦に長くなり、かえって選びにくくなること(その場合はプルダウン向き)。ほかにも、初期選択を入れたために意図しない値が送信される、ラベルとの関連付け不備でタップ範囲が狭い、1 つだけ選ぶべき場面でチェックボックスを使って混乱させる、といった点に注意する。

言葉をよく利用する人

  • Web 担当者(発注側)
  • デザイナー
  • コーダー / フロントエンドエンジニア
  • マーケター
  • ディレクター

会話上での使用例

フォームの入力部品を選ぶ場面

  • Web 担当者
    希望プランの選択、ラジオボタンとプルダウンどちらがいいですか
  • デザイナー
    選択肢が 3 つならラジオボタンで一覧表示が見やすいです。1 つだけ選ぶ項目なのでチェックボックスは不可。10 個を超えるならプルダウンに

フォームの離脱を改善する場面

  • マーケター
    フォームの途中離脱が多いです
  • Web 担当者
    入力部品を見直しましょう。選択式にできる項目はラジオボタンやプルダウンにして自由入力を減らし、タップ領域も広げます。フォーム最適化の基本です

関連 Lesson(本書本文)

Lesson 4-5 アクセシビリティの最低限