チェックボックスとラジオボタンの違いとは?使い分けと並べ方のコツ

チェックボックスとラジオボタンの基本

まずは、チェックボックスとラジオボタンがそれぞれどんな部品で、何が違うのかを押さえましょう。

チェックボックスとは

チェックボックスとは、四角い枠に印(チェック)を付けて、選択肢の中から好きな数だけ選べる部品です。

1つも選ばなくても、全部選んでもよく、もう一度押せばチェックを外せます。

「興味のあるジャンルをすべて選んでください」のように、同時に選んでもかまわない選択肢に使います。

また、「利用規約に同意する」のように、1つだけ置いて「はい/いいえ」を表すのにも使えます。

ラジオボタンとは

ラジオボタンとは、丸い印で、複数の選択肢の中から1つだけを選ぶ部品です。

別の選択肢を選ぶと、それまで選んでいたものは自動的に外れます。

名前は、1つを押し込むとほかのボタンが戻る、昔のラジオの選局ボタンに由来するといわれています。

「支払い方法を1つ選んでください」のように、同時には選べない選択肢に使います。

チェックボックスの見本は四角い枠にチェックの印、ラジオボタンの見本は丸い枠に中の点、と形が違うので、見ただけで「いくつ選べるか」の見当がつきます。

チェックボックスとラジオボタンの違い

チェックボックスとラジオボタンのいちばんの違いは、選べる数です。

違いを表にまとめると、次のようになります。

	チェックボックス	ラジオボタン
選べる数	0個〜全部(いくつでも)	1つだけ
形	四角	丸
選択の解除	もう一度押せば外せる	一度選ぶと、ほかを選ぶまで外せない
1つだけ置く使い方	できる(「同意する」など)	しない(選択肢が1つでは選ぶ意味がない)
向いている質問	「あてはまるものをすべて選んでください」	「1つ選んでください」

「四角は複数、丸は1つ」という形のルールは多くのサービスで共通しているので、形を勝手に入れ替えないことが大切です。

Webの技術の標準を定めている国際的な団体のW3Cが公開している、部品の作り方のガイド(WAI-ARIA Authoring Practices Guide)でも、ラジオボタンの集まりは「一度に1つまでしかチェックできないもの」と定義されています(Radio Group Pattern(英語))。

この記事では、W3Cやデジタル庁、海外の専門機関などが公開しているガイドラインをいくつか紹介します。どれも「多くの人が迷わずに使えるフォームを作るためのルール集」で、基本の考え方はほぼ共通しています。すべてを読み込む必要はなく、迷ったときは日本語で読めるデジタル庁デザインシステムと、この記事のOK/NGの見本を目安にすれば十分です。資料によって考え方が分かれる点は、どう判断すればよいかもあわせて紹介します。

チェックボックスとラジオボタンの使い分けとデザインのコツ

ここからは、2つの部品をどう使い分け、どうデザインすれば迷わず選べるようになるかを見ていきます。

「いくつ選べるか」で使い分ける

使い分けの基本は、「1つだけ選ぶならラジオボタン、複数選んでよいならチェックボックス」です。

1つしか選べない質問にチェックボックスを使うと、利用者は複数選んでもいいと誤解し、送信してからエラーになってしまうからです。

デジタル庁デザインシステム(行政機関などのWebサイトやサービスを、誰にとっても使いやすく作るためにデジタル庁が公開しているデザインのルール集)でも、複数の選択肢から1つしか選べない場合は必ずラジオボタンを使うよう定めています(チェックボックスの使い方 – デジタル庁デザインシステム)。

迷ったときは、次の順に考えると選びやすくなります。

1. 同時に選んでもよい選択肢か考える
   よいならチェックボックス、1つだけならラジオボタンを候補にします。
2. 選択肢の数を数える
   1つだけ選ぶ質問で選択肢がとても多い場合は、ラジオボタンを並べると画面が縦に長くなるので、セレクトボックス(押すと選択肢の一覧が開く部品)も検討します(セレクトボックスを使う場面はセレクトボックス(プルダウン)とは?で解説しています)。
3. 押した瞬間に反映される設定か考える
   通知のオン・オフのように、その場で切り替わる設定なら、トグルスイッチ(スイッチの形をした切り替えの部品)が向いている場合があります(チェックボックスとの使い分けはトグルスイッチとは?で解説しています)。

チェックボックスやラジオボタンは、あくまで「選んだ状態」を表す部品です。

押した瞬間に別の画面へ移動するような使い方はせず、選んだ内容は「次へ」「送信」などのボタンを押してから反映させるのが基本です。

選択肢は縦に1行ずつ並べる

選択肢は、横に詰めて並べるより、縦に1行に1つずつ並べるのが基本です。

横に並べると、ある印が前後どちらの文字のものなのか分かりにくくなり、目で上から順に追うことも難しくなるからです。

Webの使いやすさ(ユーザビリティ)を長年調査・研究しているアメリカの専門機関のNielsen Norman Groupも、選択肢は縦に1行1つずつ並べることを勧めています(Checkboxes vs. Radio Buttons(英語))。

NGの見本では、「スマートフォン」の後ろにある四角が、スマートフォンの印なのかタブレットの印なのか、一瞬考えないと分かりません。

OKの見本では、印が文字の前に縦一列にそろっているので、どれを選んだかが一目で分かります。

デジタル庁デザインシステムでも、チェックボックスは文字の前(左)に置くよう定めていて、画面を拡大して見ている人にも見つけやすくなるとしています。

「はい/いいえ」のように選択肢が2つで短い場合は、横に並べても迷いにくいですが、その場合も選択肢同士の間は、印と文字の間より広く空けましょう(近いもの同士がまとまって見える性質は近接の原則とは?で解説しています)。

文字も含めて押せるようにする

チェックボックスやラジオボタンは、小さな印だけでなく、横の文字(ラベル)を押しても選べるようにします。

印そのものは文字と同じくらいの小さな大きさであることが多く、スマートフォンで指を使って正確に押すのは難しいからです。

見本の青い点線は、説明のために押せる範囲を示したもので、実際の画面には表示しません。

OKの見本のように、印と文字を含めた1行全体を押せるようにすると、指が少しずれても選びたい選択肢を選べます。

Webサイトでは、HTMLの<label>要素で文字と印を結び付けると、文字を押しても印を押したのと同じように選べるようになります(MDN: <label>: ラベル要素)。

デザインツールで作る段階から「1行全体が押せる」前提で、選択肢同士の上下の間隔にゆとりを持たせておきましょう(押せるもの同士の間隔はUIコンポーネントの間隔とは?で解説しています)。

状態ごとの見た目を用意する

チェックボックスとラジオボタンは、選択前・選択中だけでなく、フォーカス・無効・エラーの見た目も用意しておきます。

キーボードで操作している人には今どの選択肢を操作しているか、送信に失敗した人にはどこを直せばよいかを、見た目で伝える必要があるからです。

フォーカスとは、マウスを使わずにTabキーなどで画面の中を移動しているときに、今どの部品を操作しようとしているかを示す状態のことです。見本の「フォーカス」のように印の外側に線を出しておくと、キーボードで操作している人が自分の位置を見失わずに済みます。

選択中の見た目は、枠の色を変えるだけでなく、チェックの印や中の点という「形の変化」で示します。

色の違いだけでは、色の見分けにくい人に選んだかどうかが伝わらないからです(色だけに頼らない考え方は色だけに頼らないデザインとは?で解説しています)。

枠線の色は、白い背景とのコントラスト比(色の明るさの差を数値にしたもの)が3:1以上になる濃さにすると、印の範囲がはっきり見えます(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。

要するに、ごく薄い灰色の枠線では、視力の弱い人や、明るい屋外でスマートフォンを見ている人には印の場所が見えにくくなるので、はっきり見える濃さにしましょう、ということです。選んだ色が基準を満たしているかは、色のコードを入れると比を計算してくれるコントラストチェッカーで確かめられます(確かめ方は色のアクセシビリティとは?で解説しています)。

チェックボックスには、このほかに「一部だけ選ばれている」ことを表す状態もあります。

「すべて選択」のチェックボックスの下に個別の選択肢が並んでいて、その一部だけが選ばれているときに、四角の中に横線を入れて示すもので、WAI-ARIA Authoring Practices Guideでは「部分的にチェックされた状態」として紹介されています(Checkbox Pattern(英語))。

状態の見せ方の全体像は、ほかの部品とも共通の考え方なので、サイト全体でそろえておきましょう。

ラジオボタンの最初の選択を決める

ラジオボタンでは、画面を開いたときにどれか1つを最初から選んでおくか、何も選ばずにおくかを決める必要があります。

ラジオボタンは一度選ぶと「何も選んでいない状態」に戻せないため、最初の状態の決め方で使い勝手が変わるからです。

• 最初から選んでおくのが向いている場面
  表示の並び順や配送方法のように、多くの人が選ぶ標準の選択肢がある設定です。
  そのまま進めば済むので、手間が減ります。
• 何も選ばずにおくのが向いている場面
  アンケートの答えや本人に関する質問のように、利用者に自分で考えて答えてほしい場面です。
  最初から選ばれていると、確認せずにそのまま送信されてしまうおそれがあります。

この点は資料によって考え方が分かれていて、Nielsen Norman Groupはラジオボタンには初期選択を用意するよう勧める一方、イギリス政府のデザインシステム(GOV.UK Design System)は、答え忘れに気づかなかったり間違った答えのまま送信したりしやすくなるとして、質問の答えを最初から選んでおかないよう勧めています(Radios – GOV.UK Design System(英語))。

どちらに従えばよいか迷うところですが、場面で分けて考えると判断しやすくなります。配送方法や表示の並び順のように、大半の人が同じものを選び、すんなり先へ進んでほしい設定なら、最初から選んでおきます。アンケートの答えのように、本人の考えをきちんと聞きたい質問なら、そのまま適当に進まれないよう何も選ばずにおきます。

何も選ばずにおく場合は、選び忘れたまま送信されたときに、エラーとして分かりやすく知らせましょう。

また、答えなくてもよい任意の質問では、一度選ぶと外せないことに備えて、「あてはまるものはない」「答えない」といった選択肢を用意しておきます(ラジオボタンの使い方 – デジタル庁デザインシステム)。

実践のポイント

チェックボックスとラジオボタンで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目をおしゃれにしようとして、チェックボックスを丸く、ラジオボタンを四角くしてしまうことがあります。
  「四角は複数、丸は1つ」という共通のルールが崩れ、いくつ選べるかを誤解させるので、形は入れ替えないようにしましょう。
• 質問文に「複数選択可」「1つ選択」と書かず、部品の形だけで伝えようとすることがあります。
  形を知らない人もいるので、質問文にも選べる数を書いておくと確実です。
• 「メールを受け取らない」のように、否定の言葉をチェックボックスの文字にしてしまうことがあります。
  チェックを付けると何が起きるのかが分かりにくくなるので、「メールを受け取る」のように肯定の言葉にしましょう。
• メールマガジンの購読などのチェックボックスに、最初からチェックを入れておくことがあります。
  利用者が気づかないまま同意したことになり、不信感につながるので、本人が選ぶべき項目は最初はチェックなしにしておきましょう。
  最初からチェックを入れておく、否定の言葉で紛らわしくする、といった、利用者のうっかりを利用してサービス側に都合のよい選択をさせる設計は「ダークパターン」と呼ばれます。目先の登録者数は増えても、気づかれたときにサービスへの信頼を大きく損ねるので、デザインのルールというより、利用者との信頼関係を守るためのマナーと考えましょう。

よくある質問

• Q. ラジオボタンで選んだものを取り消したいときは?
  A. ラジオボタンは、一度選ぶとほかの選択肢を選ぶまで外せない仕組みです。
  「選ばない」ことも答えとして認めたい場合は、「あてはまるものはない」のような選択肢を加えましょう。
• Q. 選択肢が2つだけなら、チェックボックス1つで済ませてもいい?
  A. 「同意する/しない」のように、片方がもう片方の否定になっているなら、チェックボックス1つで表せます。
  「男性/女性」や「宅配便/店舗受け取り」のように、どちらも独立した答えの場合は、ラジオボタンで2つ並べたほうが選んだ内容がはっきりします。
• Q. キーボードではどう操作する?
  A. チェックボックスは、Tabキーで移動してSpaceキーでチェックを付け外しします。
  ラジオボタンは、Tabキーでグループに入り、矢印キーで選択肢を移動すると、移動した先が選ばれます(Radio Group Pattern(英語))。
  キーボードで操作したときにフォーカスの位置が見えるかも、デザインの段階で確認しておきましょう。

まとめ

チェックボックスは選択肢から好きな数だけ選べる四角い部品、ラジオボタンは1つだけ選ぶ丸い部品で、「いくつ選べるか」で使い分けます。

選択肢は縦に1行ずつ並べ、文字も含めた1行全体を押せるようにし、選択中の状態は色だけでなく形の変化でも示すことがポイントです。

まずは身近な申し込みフォームを開き、「1つだけ選ぶ質問」と「複数選べる質問」で部品の形が正しく使い分けられているかを確かめてみてください。