ラジオボタン

基本的な意味と UI における役割

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

現場における核心：EFO(入力フォーム最適化)と部品の使い分け

フォームでの離脱(CV(CVR)の取りこぼし)を防ぐ最大の鍵は、「選択肢の性質に部品を合わせる」こと。

• 1 つだけ選ぶ(2〜5 個程度)：一覧性が高く、ワンタップで済む「ラジオボタン」。
• 複数選べる：「チェックボックス」。
• 1 つだけ選ぶが、選択肢が多すぎる(都道府県など)：縦長になるのを防ぐ「プルダウン(ドロップダウン)(ドロップダウン)」。

この使い分けが、入力のしやすさ＝EFOに直結する。

実務におけるディレクションとエンジニアへの指示

担当者がテスト環境をチェックする際は、以下の点に目を光らせる。

• <label> タグの紐付け：小さな丸いボタンだけでなく、「ラベル(文字)の部分をタップしても選択できるか」を必ず実機で確認する。反応しない場合は、エンジニアに「<label> タグが正しく紐付いていません」と修正指示を出す。
• スマホでの誤タップ防止：指でタップしやすい余白(Apple 推奨の 44px 以上のタップ領域)が確保されているか(Fat Finger 問題の回避)。
• アクセシビリティと必須明示：キーボード操作(Tab キーと矢印キー)で選択できるか。必須項目であることが視覚的に明示されているか。

Web 担当者が陥りやすい落とし穴とリアルな対策(NG 事例)

• 【最重要】リセット不能の罠：ラジオボタンは一度どれかを選ぶと、リロードしない限り「未選択状態」に戻せない。「任意項目」にラジオボタンを使ってしまうと、誤タップしたユーザーが選択を外せずに強烈なストレスを感じて離脱する。任意項目には必ず「選択しない(とくにない)」という選択肢を用意するか、プルダウンを利用する。
• 初期選択(デフォルト値)によるデータの汚染：良かれと思って「A プラン」を最初から選択済みにしておくと、ユーザーが見落としたまま送信し、「意図しない不正確な顧客データ」が大量に蓄積されて営業部からクレームが来る。
• 部品の誤用と見づらさ：1 つだけ選ぶべき場面でチェックボックスを使ってユーザーを混乱させる。選択肢が 10 個以上あるのにラジオボタンを使い、スマホ画面がボタンで埋め尽くされて選びにくくなる。