正しく選ぼう！入力フォームにおける選択式項目【使い分け編】

みなさん、こんにちは。ウェブラボデザイナーチームです。
フォームに使用される様々な入力要素の中でも特に迷いがちなのが選択式要素です。選択式要素にはいくつか種類があるため、どこで何を使えばよいのか混乱しますよね。
そんな選択式要素について各種類の特徴と使い分けのポイントを前後編に分けてご紹介していきます。
後編の今回は【使い分け編】と題しまして、選択式要素の具体的な使い分け方をシーンごとにご説明いたします。
 
※前編の「種類編」はこちら。
正しく選ぼう！入力フォームにおける選択式項目【種類編】
 

シーン1：性別の入力

シーンの特徴

• どれか一つだけ選ぶ「単一選択」。
• 選択項目は、男性、女性、その他、回答しない、などで比較的少ない。

おすすめ

ラジオボタンを採用する。
 
セレクトボックスでも大きな問題はありませんが、一覧性が高くクリック（タップ）数が少なく済むラジオボタンのほうがより親切といえます。選択肢が比較的少なくスペースを取らない場合はラジオボタンを優先するのがよいでしょう。
 

シーン2：はい、いいえ、の選択項目が続くアンケートの入力

シーンの特徴

• 該当するかしないかの二択。
• どちらか一つだけを選ぶ「単一選択」。

おすすめ

チェックボックスを採用する。
より正確性が求められる場合はラジオボタンを採用する。
 
簡易的なアンケートにおすすめなのはチェックボックスです。チェックボックスを一つだけ用意して「はい」ならチェックをつける、とするとスペースの省略にもなりますしクリックの手間も減って一石二鳥です。
ただし、ラジオボタンであれば何も選択しないと「未入力項目」としてエラーを吐き出すことができますが、チェックボックスではこれができません。未選択項目は「いいえ」であると処理されてしまいます。うっかり選択し忘れたものがすべて「いいえ」になってしまうと正しい結果は得られません。
そのため、より正確さが求められるアンケートの場合はラジオボタンを採用して「はい」「いいえ」の項目を作り、未入力でエラーを吐き出すシステムを用意するのがベストです。
 

シーン3：生年月日の入力

シーンの特徴

• 年、月、日の全てにおいて、どれか一つだけ選ぶ「単一選択」。
• 入力される数字はある程度限定的であり選択肢がほぼ決まっている。

おすすめ

選択式にはせず、入力式を採用する。
 
現在最も一般的なのはセレクトボックスですが、生まれた年や日付によってはスクロールがかなり長くなってしまいます。特にiOSではスクロールの勢いがつきすぎると通り過ぎてしまうことも多く、不便を感じたことがある方もいらっしゃるのではないでしょうか。
ここはあえて選択式にせず、キーボードをつかってタイピング入力する方式を採用するのがおすすめです。年月日程度の数字であれば、慎重にスクロールしていくよりもタイピングのほうがはるかに簡単です。
このとき、スマートフォンではカーソルを合わせた時に0～9の数字キーを表示する設定にしておくとより親切ですね。
 

シーン4：宿泊予約などでの日付の入力

シーンの特徴

• 年、月、日の全てをまとめて、どれか一つだけ選ぶ「単一選択」。
• 選べる数字はかなり限定的であり選択肢が決まっている。
• 比較的選択肢が多い。

おすすめ

カレンダー方式を採用する。
 
日付の選択は、催し物のチケット購入や宿泊予約などでよく見られますね。催し物などで開催日が決まっており、選択項目が2〜5個程度であれば年月日をひとまとめにしたセレクトボックスでも問題はなさそうです。
しかし宿泊予約や交通機関の予約などは利用日の1ヶ月前くらいからスタートすることもあり、選択肢がかなり多くなることが考えられます。セレクトボックスだとたくさんの似た数字列から慎重に選ばなければならないため、ユーザーにとっては少し負担が大きいですね。
そのため、ここでよりおすすめなのはカレンダー方式です。日常生活でもおなじみの形で、直感的に日付を選択するのに向いています。カレンダーは曜日も合わせて確認できるためユーザーの入力ミスを減らす効果も期待できるでしょう。
 

【アソビュー！】休日の便利でお得な遊び予約サイト（https://www.asoview.com/）
 

まとめ

以上、入力フォームにおける選択式項目の【使い分け編】でした。
判断の難しいケースもありますが、迷った時は簡易的なものを実際に作成して使ってみるのが一番です。思いがけない不都合や使いづらい部分がないかよく確認しましょう。
ぜひ前編の【種類編】も合わせてご覧ください。
正しく選ぼう！入力フォームにおける選択式項目【種類編】