ラジオボタンとは？UI/アクセシビリティ設計について解説
ラジオボタンの概要と重要ポイント
ラジオボタンは複数の選択肢から1つだけを選ばせる入力部品です。最初に押さえるべきは、同一グループが常に一意の値を持つという特性です。つまり、相互に排他的な質問に最適で、誤入力を抑えます。利用目的が合致するなら、相互排他的な単一選択の設計を徹底します。
アクセシビリティでは、fieldsetとlegendで質問文をグループ化し、各input type="radio"には同じnameを付与します。labelはクリック可能な領域を広げ、モバイルでは44px以上のタップ領域を確保します。キーボードは↑↓（または←→）で移動、スペースで選択が基本です。
用語の定義（意味としくみ）
ラジオボタンは、同名グループの中で一度に1つだけchecked状態を持てるコントロールです。送信される値は選択中の項目のみで、未選択を許す場合は「選択してください」を別設計にするか、明示的な「未選択」を用意します。表示と値の対応をUIとコードの両方で保証することが重要です。
実務での論点（使い分け・設計・よくある失敗）
選択肢が少数（2〜5件）で比較したい場合に適します。大量の候補はセレクトや検索型に切替えます。既定値の有無、エラー表示、説明文の位置は回答品質に直結します。とくに、明確なラベルと説明、そしてグループ単位のバリデーションが鍵です。
- 質問文は
legendに集約し、補足は説明テキストで併記 - 必須項目は未選択時にグループの直下でエラー提示（項目ごとの誤表示を避ける）
- 選択肢は論理順（推奨→その他／高→低など）に並べ、意味の近い語を集約
- 既定値は無理に選ばせない。意図が明確なときのみ既定値を設定
- 「その他」を用意する場合はテキスト入力を連動し相互排他にする
比較・使い分け表
| UI | 意味 | 用途 |
|---|---|---|
| ラジオボタン | 相互排他的な単一選択 | 少数の候補を並べて比較したい |
| チェックボックス | 独立した複数選択 | 同時に複数可・ON/OFFが独立 |
| セレクトボックス | 折りたたみ式の選択 | 候補が中〜多。省スペースを優先 |
| トグルスイッチ | 二者択一の即時適用 | 設定変更など即反映のON/OFF |
SEO・運用上の注意
ラジオ選択でコンテンツを切り替える設計は、URLが変わらず共有や計測が困難になります。必要に応じてクエリやハッシュへ反映し、インデックス対象の状態はリンク遷移で提供します。フォーム成果を高めるには、初期選択の有無とエラー復帰の体験を検証し、離脱を抑えます。
よくある質問（FAQ）
ラジオとチェックボックスの違いは？（近縁UIとの違い）
ラジオは1つだけ選択、チェックボックスは複数選択です。質問が相互排他かどうかで選び分けます。迷う場合は要件を整理してからUIを確定します。
既定で1つ選んでおくべきですか？
意思決定を歪める恐れがあるため、原則は未選択から開始が無難です。必須項目なら送信時に未選択エラーを示し、選択を促す設計が安全です。
選択肢が多い場合はどうすべきですか？
10件以上ならセレクトや検索付きUIが適します。どうしても並べる場合はカテゴリ分割や段階的質問で認知負荷を下げます。
「その他」を選んだ際の追加入力はどう連動しますか？
「その他」選択時にテキスト欄を有効化し、それ以外では無効化・クリアします。送信時は双方を検証し、矛盾がないように相互排他を保ちます。
ラジオボタンのまとめ
ラジオボタンは相互排他的な単一選択に最適なUIです。fieldset/legendとlabelを適切に用い、既定値・エラー表示・並び順を丁寧に設計すれば、誤入力を抑え回答品質が上がります。候補数や目的に応じて他UIと使い分け、計測で継続的に改善していきます。
