チェックボックス・ラジオボタン

定義

チェックボックスとラジオボタンは、複数の選択肢から選ばせるための入力方式です。両者の違いは、一度にいくつ選べるかにあります。チェックボックスは、リストの中から好きなだけ複数を同時にオンにでき、ラジオボタンは、複数のうちたった一つだけを選べるので、一つをオンにすると先にオンにしていたものが自動的にオフになります。ですからチェックボックスは、各項目が互いに独立したオン・オフの質問に使い、ラジオボタンは、互いに排他的で必ず一つに絞らなければならない質問に使います。この性格の違いが、どちらの入力を使うべきかを分ける基準になるので、画面を作る前に、その質問が複数を許すのか一つだけを受け取るのかを、まず決めておく必要があります。

なぜ重要か

どちらを使うかによって、ユーザーが画面を理解する仕方はまったく変わります。ラジオボタンを見るとユーザーはすぐに、ここでは一つだけ選べばいいのだと判断し、チェックボックスを見ると、複数を選んでもいいのだと受け取ります。つまり入力の見た目そのものが、ルールをあらかじめ教えてくれるわけです。この合図を逆に与えると、ユーザーは複数を選ぼうとして止まったり、一つだけ選ぶべきなのに複数をオンにして、あとでエラーに突き当たったりします。特に支払い方法や配送方法のように一つしか成り立たない選択で方式を間違えると、誤った組み合わせがそのまま送信され、取り消しの面倒な問題につながります。逆に方式を正しく選べば、注意書きの文言がなくてもルールが自然に伝わり、フォームはずっと簡潔に、間違いなく動いてくれます。

よくある間違い

• 一つだけ選ぶべき質問に、チェックボックスを使ってしまうケースです。ユーザーが支払い方法を二つオンにしてしまうと、システムはどちらを使えばいいのか分からず、結局は送信の段階でエラーを出し、ユーザーを最初へ引き戻すことになります。
• 見た目の慣習を破ることです。チェックボックスは四角、ラジオボタンは丸という約束を無視して両者を混ぜると、ユーザーは形だけを見て、いくつ選べるのかを判断できず、毎回まごついてしまいます。
• ラジオボタンを何も選ばれていない状態のままにすることです。初期値がないと、ユーザーは毎回ゼロから一つを選ばなければならず、うっかり飛ばしてしまうと値が空のままエラーになりがちです。

実務のヒント

• 独立したオン・オフはチェックボックスで、一つだけ選ぶ選択はラジオボタンで、はっきり分けましょう。規約への同意のように、それぞれ個別にオン・オフする項目はチェックボックス、支払い方法のように一つに絞る項目はラジオボタンが正解です。
• 見た目の慣習は必ず守りましょう。チェックボックスは四角、ラジオボタンは丸にしておけば、ユーザーはアイコンを見るだけで、複数を選べるのか一つだけなのかを、すぐに見分けられます。
• ラジオボタンは、最もよく使われる、あるいは安全な項目を初期値として一つ選んでおきましょう。あらかじめ選ばれていれば、ユーザーが毎回ゼロから選ぶ手間が減り、空の値で送信されるミスも一緒に減ります。ただし個人情報の収集のような繊細な選択は、初期値をオンにせず、空のままにしておくほうが安全です。

関連概念