セレクトボックスとラジオボタンはどう使い分ける？

Web制作をしていると、フォームで選択肢のどれかひとつを選択して欲しいとき、セレクトボックスとラジオボタンの使い分けに悩むこと、ありませんか？

「他のサイトがそうしていたから」などといったなんとなくの感覚でフォームの形式を選んでしまっているのが正直なところ。

今回はそんなセレクトボックスとラジオボタンの使い分けに境界線をつけるべく、再度考えてみました。

目次

• セレクトボックスとラジオボタン、それぞれの特徴
  • セレクトボックスの特徴
  • ラジオボタンの特徴
• セレクトボックスは「一般的な範囲のひとつ」を選択
• ラジオボタンは「独自」の選択肢に利用
• まとめ

セレクトボックスとラジオボタン、それぞれの特徴

セレクトボックスとラジオボタンはデフォルトでは「どれかひとつのみ」を選択するフォームのひとつですが、どんな特徴があるのでしょうか。

セレクトボックスの特徴

セレクトボックスの特徴は、コンパクトであること。

クリックすることで選択をすることができます。

クリックするまでは選択肢がわからないというのが少しデメリット。

ラジオボタンの特徴

ラジオボタンの特徴は直感的に選べるということ。

全ての選択肢が見える状態なので、見渡した上で選択ができます。

莫大な選択肢だと煩雑になってしまうのがデメリット。

これらの特徴をもとにどんな使い分けができるのか見て見ましょう。

セレクトボックスは「一般的な範囲のひとつ」を選択

「セレクトボックスは選択肢が多いときに使えばいいんでしょ？」

確かにそうなのですが、もう少し踏み込んでラジオボタンとの使い分けをはっきりさせましょう。

セレクトボックスはユーザーにとって何を選択するか前提が決まっている場合や一般常識的な範囲（カテゴリー）の中からひとつを選択する場合に使用します。

例として以下が挙げられます。

• 都道府県
• 国名
• 範囲がある数字（年月日など）
• ある程度カテゴライズされた種類（職種、犬種）

選択肢が多すぎるときにも使うとコンパクトにまとめることができますが、都道府県や国名などのある程度カテゴライズされたもの以外で「選択肢が多すぎる」といったものに関してはアクセシビリティの向上によってある程度分割する必要があります。

以下に例を作ってみました。

See the Pen selectbox by Ito Hiroki (@ito-hiroki) on CodePen.

あまり良くない例としては、ユーザーが何を選択すべきか予測できないときにセレクトボックスを使用する場合です。

クイズやアンケート、自社独自のサービス名を選択してもらうときには直感的に選択できるラジオボタンを使用しましょう。

ラジオボタンは「独自」の選択肢に利用

ラジオボタンは直感的にパッとみて選択しやすいので使いたいところですが、選択肢が多いときにはページが縦に長くなってしまったり、煩雑になってしまったりと使い方によってアクセシビリティを損なうことがあります。

ラジオボタンを使う場合は選択肢が少ないことを前提にして以下が挙げられます。

• クイズ
• アンケート
• 一般に知られていない自社サービス
• カテゴライズされていないもの

以下に例を作ってみました。

See the Pen Untitled by Ito Hiroki (@ito-hiroki) on CodePen.

あまり良くない例としては、選択肢が莫大な場合。

フォームが縦に長くなってしまったり煩雑になるため、離脱するユーザーが増えてしまいます。

まとめ

セレクトボックスとラジオボタンの使い分けについて、

• セレクトボックスは一般的な範囲のひとつを選択するときに使用
• ラジオボタンは選択肢が少ないときに使用

これらの使い道はそれぞれの設計思想によって異なることがあると思われます。

皆さんはどんな使い分けをしていますか？