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

ラジオボタンは、複数の選択肢から1つだけ選ぶときに使います。チェックボックスは、それぞれの選択肢を独立して選べるときに使います。使い分けの基準は、丸と四角のどちらが画面に似合うかではなく、どのような回答を受け付けるかです。

たとえばワークショップの予約では、参加日時は1つに絞る一方、追加の教材は複数選べます。同じフォームの中でも、質問によって適した部品は異なります。ラベル、エラー表示、送信まで含めた流れはフォームUIの設計ガイドで確認できます。ここでは、選択のルールを迷わず理解できるようにする方法を解説します。

フォームが受け付ける回答を先に決める

部品を選ぶ前に、正しい回答の例を文章で書き出します。「どの回に参加しますか」という質問に対し、1回だけ予約できるなら「火曜の午前」は有効ですが、「火曜の午前と木曜の午後」は受け付けられません。別の項目を選ぶと以前の選択が解除されるラジオボタンは、このルールを表すのに適しています。

教材の場合は、「印刷した資料」「演習資料」「両方」「どちらも不要」の4通りが考えられます。2つのチェックボックスなら、それぞれの要否をそのまま表現できます。「印刷した資料／演習資料／両方／不要」という一覧から1つ選ばせると、本来独立している2つの判断を、組み合わせの一覧に読み替えなければなりません。

「2つまで選択」は、上限のある複数選択です。チェックボックスを使い、選択数の制限を示します。3つ目を選ぼうとしたときの動作も決めておきましょう。以前の選択を黙って解除してはいけません。逆に、チェックボックスを並べておきながら1つしか選べないようにすると、見た目と動作が食い違います。

ワークショップの予約フォームを設計する

この例では、フォームに2つのグループを設けます。必須の「参加日時を選択」には「火曜 10:00–12:00」と「木曜 14:00–16:00」を用意します。任意の「教材を追加」には「印刷した資料」と「演習資料」を置きます。次の操作は「予約内容を確認」です。

参加日時は、ラジオボタンを縦に並べます。周囲の説明だけでは選択数が分からない場合は、「1つ選択」と添えます。各項目の横に日時を省略せず表示し、別のパネルを開かなくても比較できるようにします。

教材は別のチェックボックスグループにまとめ、グループ名に「任意」と示します。両方を選べるほか、何も選ばなければ教材の追加はありません。他の2項目と矛盾する可能性がある「不要」のチェックボックスを、3つ目として追加する必要はありません。

火曜を選んだ後に木曜を選ぶと、火曜の選択は解除されます。一方、「印刷した資料」を選んだ後に「演習資料」を選ぶと、両方が選択されたままになります。選択肢を大きなカードとして見せる場合も、この動作の違いが伝わるようにします。

確認画面には部品の名称ではなく、選んだ内容を表示します。「木曜 14:00–16:00」「教材：印刷した資料、演習資料」と書けば、予約内容をそのまま確認できます。「ラジオボタン2を選択」や説明のないチェックマークを、利用者が読み解く必要はありません。

初期値と「選ばない」場合を設計する

利用者自身の判断が必要なら、必須のラジオボタングループでも未選択の状態から始められます。この予約フォームで、単に先頭にあるからという理由で火曜を選択済みにすると、希望と異なる日時で予約されるおそれがあります。参加者が選ぶまでは未選択にします。

既に保存された回答を示す初期値は役立ちます。木曜の予約を編集する場合は、木曜を選択済みにして表示します。既存の回答を再表示することと、フォームを埋めて見せるために新しい回答を勝手に設定することは、区別してください。

ラジオボタンは通常、選択済みの項目をもう一度押しても未選択には戻りません。回答しないことを許す質問なら、「希望なし」という項目や、選択を明示的に解除する方法を用意します。ただし、文言は保存する意味に合わせます。「希望なし」と「まだ回答していない」は同じではありません。

任意のチェックボックスでは、すべて未選択なら「何も選ばない」という回答になります。画面を埋めるために追加サービスをあらかじめ選択しないようにします。手続き上、本当に必要な確認事項がある場合は、その意味を明記し、無関係な任意項目とは分けます。

質問によっては、意図的に「該当なし」と答えた場合と、回答を飛ばした場合を区別する必要があります。この場合、「該当なし」を選ぶと他の選択が解除され、別の項目を選ぶと「該当なし」が解除されるルールを示します。ルールが分かりにくくなるなら、最初の質問と、その回答に応じた追加質問に分ける方法も検討してください。

選択肢だけでなく、質問も見えるようにする

「火曜」「木曜」は選択肢のラベルであり、「参加日時を選択」はそれらをまとめる質問です。両方が必要です。グループ名がないと、フォームに戻ってきた人は、それがワークショップの開催日なのか、配送日なのか、面談日なのかを判断できません。

ラベルの書き方をそろえ、違いが分かる情報を同じ順序で並べます。「火曜 10:00–12:00」と「木曜 14:00–16:00」は、「火曜の午前」と「木曜日に開催する午後のワークショップ」より比較しやすくなります。補足説明は、開催形式や会場など、選択に影響する情報がある場合に添えます。

長いラベルは折り返しを許し、部品をラベルの先頭行に合わせます。ラベルと補足説明は一つのまとまりとして配置します。複数行になったためにラジオボタンが項目同士の中間に見えたり、補足説明が別の選択肢に見えたりしないようにします。

実装時は、小さな丸や四角だけでなくラベルも操作対象に含めます。選択状態は色だけに頼らず、点やチェックマークでも示します。カード型の選択肢では、枠線だけで状態を表すとフォーカスと混同されやすいため、選択マークを残し、選択状態とフォーカス状態を区別できるようにします。

項目が多い場合は、別の選択方法が適することもあります。ドロップダウンUIの設計ガイドでは、省スペースの選択欄や検索できる選択方法の使い分けを説明しています。ただし、少数の重要な候補を比較する場面で、数行分の高さを節約するためだけに選択肢を隠さないようにします。

選択を消さずに、不足や利用できない理由を伝える

教材を2つ選んだものの、参加日時を選ばずに進もうとした場合は、日時のグループに「続行するには参加日時を選択してください」と表示します。選択済みの教材はそのまま残します。不足しているのは1つの回答であり、フォーム全体ではありません。

メッセージは、対象のグループに属していることが分かる位置に置きます。同じエラーを各ラジオボタンの下に繰り返すと、1件の問題が複数あるように見えます。実装でエラーの一覧を設ける場合は、そこから対象の質問へ移動できるようにします。

木曜を予約できなくなった場合は、理由を分かりやすい言葉で示します。説明のない灰色の選択肢では、満席なのか、受付開始前なのか、予約条件が合わないのか分かりません。選択済みの日時が無効になったときは、変更内容を説明して選び直してもらいます。黙って火曜に切り替えてはいけません。

チェックボックスの一部選択状態は、多数の子項目のうち一部だけが選ばれていることを、親項目で示す場合などに使います。「はい」と「いいえ」の中間にある別の回答ではありません。この予約例には独立した教材が2つしかないため、「すべて選択」は不要です。追加すると、判断に必要な要素より操作部品の方が増えてしまいます。

キーボード操作まで設計に含める

通常のラジオボタングループでは、WAI-ARIAのラジオボタンパターン（英語）に従うと、Tabキーでグループに入り、または抜け、矢印キーで項目を移動しながら選択します。Spaceキーはフォーカス中の項目を選択します。ツールバー内のラジオボタンには異なる操作パターンがあるため、その例外を通常の予約フォームに当てはめないようにします。

フォーカス中のチェックボックスでは、Spaceキーでチェック状態を切り替えます（英語）。実装には、プログラムから判別できるラベルと状態、意味の分かるグループ名も必要です。チェックマークを描いたり、プロトタイプの画面をつないだりするだけでは、ブラウザが扱うこれらの意味や動作は実装されません。

PixsoのUIデザイン機能では、未選択、選択済み、フォーカス中、利用不可の見た目を持つラジオボタンとチェックボックスを、再利用できるコンポーネントとして作成します。予約フォーム全体に配置し、ラベルの折り返しやグループ間の余白を確認します。「日時は1つ、教材は複数選択可能、確認画面で確定するまでは予約しない」という動作の説明も、該当するグループの近くに残します。

火曜を選んでから木曜に変更し、教材を両方追加してから一方を外す流れを試します。続いて、日時を未選択のまま進めようとする場合も確認します。どの段階でも、回答がどう変わるのかが明確であることが大切です。意図した内容を選び、簡単に変更し、送信する内容を理解できるかどうかで、部品の使い分けを判断できます。