サイト制作に役立つ！選択式入力フォームの選び方

サイト制作にはさまざまな工程があります。サイトのコンテンツが優れていても、使いにくいUIではユーザーの要求を満たせないため、ユーザーのストレスや手間を軽減させる工夫を施す必要があります。本記事ではユーザー視点を重要視したうえで、選択式入力フォームの特徴や機能解説をしていきます。

フォームごとに使い分けが重要です。

ユーザー視点でのUIを意識しなければ、入力エラーや不適切な選択誘発を引き起こす危険性があります。選択式入力フォームそれぞれの特徴を理解し、設定することで様々なエラーや離脱を防ぐことができます。

適切なフォームを選びサイトをデザインしていきましょう。

■選択式入力フォームの種類

選択式入力フォームを選ぶうえで、特徴と機能の理解は欠かすことができません。

ここでは、代表的な選択式入力フォーム6つについて解説します。・

• ラジオボタン

ラジオボタンは、複数の選択肢のなかから「必ずひとつの項目を選択する」際に使用する入力フォームです。

1度選択すると取り消すことができないため、「いずれも該当しない」等の選択肢を項目に入れておく必要がある場合もあります。

比較的少ない選択肢の際での使用をおすすめします。

• チェックボックス

チェックボックスは複数の項目が選択可能で、選択を通して「希望・希望しない」を表現できます。

たとえば、「ログイン状態を保持する」にチェックボックスが適応されているケースです。チェックを入れればログイン保持、入れなければログイン保持しないと意思表示できます。

「ログイン状態を保持する」「メルマガ登録する」など、1つの項目に対しての意思表示選択にて使用をおすすめします。

• プルダウンメニュー（ドロップダウンリスト）

ドロップダウンメニューは専有スペースを縮小したうえで、複数項目の選択が可能な入力フォームです。

たとえば「都道府県名の選択」をする場合、47つの項目を1つのスペースに集約できます。

ドロップダウンメニューを表示すればスワイプ操作で簡易に操作可能です。

数字の選択であれば直接入力の方が手間を省けるケースがあるので、選択項目の内容を考慮したうえでの使用をおすすめします。

• カレンダー

カレンダーは名前の通り、カレンダーから日付を選択できます。

日付を直接的に選択するため、数字のミス入力を回避できます。

日時の予約等の使用におすすめします。

• トグル

トグルはオンオフを切り替えられる機能です。AかBの2つの状態をシステム上に保持し、ユーザーに展開します。「どちらでもない」「少しだけA」といった曖昧な選択はできないものとなっています。

トグルには「トグルスイッチ」と「トグルボタン」の2種類があります。

1. トグルスイッチ

システム設定や環境設定などに用いられるケースが多く、iPhoneの設定画面にも使用されています。ラジオボタンを2つ並べるよりも見やすくスペースをとらないため、適していると言えます。オンとオフは色で区別できるようにデザインし、余計な装飾は施さず明確にすることをおすすめします。

2. トグルボタン

ページ内の表示方法を一括で変更する際に使用されることが多いフォームです。

たとえば、オンラインショップの商品一覧画面で「画像表示」「詳細表示」の選択ができる仕組みもこの機能が使われています。

• テキストボックス

テキストボックスは名称のとおり、自由にテキストを入力できるフォームです。

他の入力フォームと組み合わせることで、よりユーザビリティの向上が見込めます。

たとえばラジオボックスを適応し、「その他」の項目にテキストボックスを組み合わせれば、より広い選択肢をユーザーに提供できます。

■選択式入力フォームの適切な選び方

選択式入力フォームにはさまざまな種類がありますが、使い分けの際、意識すべき3つのポイントを忘れてはなりません。

・目的とする情報への到達のしやすさ

・情報の網羅性

・迷わず選択できる操作性

混乱を招くような類似した項目の設定や、選択肢に過不足があるなどは避ける必要がある。また、都道府県など一般的に表示順序が決まっている項目にも留意し、ストレスの少ない操作性を提供する必要があります。

上記を考慮したうえで、適応する入力フォームの選定基準は「選択肢の数」です。

まず、選択肢が5つ以下の場合はラジオボタン、チェックボックスの使用をおすすめします。

人間は6つ以上の情報を見ると、選択や意思決定の際にストレスを感じやすくなります。これは、マジカルナンバー理論（4±1）とも呼ばれており、一般的に人間が短期で暗記し処理できる数です。ラジオボタンやチェックボックスを一覧にして選択してもらう場合は、選択肢を５つにとどめ、また、縦並びにしてユーザーに潜在的ストレスを与えないように注意する必要があります。

次に、選択肢が10個以上と極端に多くなるケースはドロップダウンメニューの使用をおすすめします。

選択肢が多くなるとページの情報負荷が増加してしまいます。都道府県名など選択肢の順序に規則性を持たせる必要があるケースは注意して設定ください。

また、ドロップダウンリストは操作が1つ増えるため、選択肢が比較的少ない場合は、グループ分けしたうえでラジオボタンの選択肢を適応する方法もおすすめです。

(例)都道府県の選択

・北海道地方：北海道

・東北地方：青森、秋田…

・関東地方：東京、埼玉…

最後に、「日付選択」のおすすめ入力フォームです。

カレンダー、プルダウンメニュー、テキストボックスをケースに応じて使い分けすることでユーザーの満足度が向上します。

お店の予約など直近の日付選択にはカレンダーを、生年月日などユーザーの状況によって選択肢が大きく変化するケースは、プルダウンメニューやテキストボックスの適応をおすすめします。

■まとめ

本記事では選択式入力フォームの解説、選び方についてご説明しました。

それぞれの特徴や機能を理解することで、貴社サイト内において選択式入力フォームを適切に配置できます。ユーザーにとって満足度の高いUIを提供することで、より一層サイトの使いやすさは向上します。

自社サイトを運用中の方や今後、自社サイト制作を検討中の方の参考になれば嬉しいです。

最後までご覧いただき、ありがとうございました。