選択

あらかじめ決められた選択肢の中から選ぶことで入力する、非常に基本的なUIパターンのひとつです。既定のもののなかから選ばせることで無効な値の入力によるエラーの発生を防止できるほか、上手に利用することで、ユーザーの記憶や判断に頼ることを避け負荷を減らすことができます。

選択肢の数や情報の性質に応じて、適したパターンは変わってきます。各基準をもとに判断し、もっともユーザーにとってスムーズな体験となるようにします。

二者択一の選択

選択肢の数が2つで、どちらか一方のみが選択可能なケースです。

概念的にアクティブと非アクティブの間を行き来が可能なもの

一方がON（有効）、もう一方がOFF（無効）の概念がぴったりくるようなものはまさにスイッチが適しています。

ただし、モバイルの場合は設定値のON/OFFのためにスイッチが縦方向に並ぶのは標準的ですが、PC向けの画面の場合にはあるトピックについての並列な設定値としてON/OFFの概念の項目が複数並んでいるような場合は、スイッチが繰り返し並ぶよりもチェックボックスとした方が視覚的にすっきりとしてわかりやすいケースもあります。

概念的に等価なもの

アクティブと非アクティブの間を繰り返し行き来するという概念的にはそぐわず、2つの選択肢が概念的に同じ重みで取り扱えて、関係性としても並列のものの場合はラジオボタンが適しています。

2つの選択肢が主従（裏表の）関係であるためもう一方は明記が不要なもの

一方を選択することがそのままもう一方を選択しないことになるのが自明であるようなものの場合、単一チェックボックスとするのが良いでしょう。下記の場合、「期限切れも表示」にチェックが入っているということは、チェックが入っていない場合にはそのまま「期限切れは表示しない」ことになりますので、これで意味が通じ、見た目にもシンプルです。この場合の選択肢の文言は表裏の関係ゆえに2つとも語尾以外は似たものになります。そのため、もし2つ並べてしまうと、どっちがどっちかパッと見ではわかりづらくなり、“一字一句きちんと読んで判断する”という負荷をユーザーにかけることになってしまいます。

また、選択肢の文言自体がやや説明的で長くなるケースが多いです。

二者択一の選択のドロップダウンの例外

二者択一の選択の場合に、ドロップダウンが最適ということは基本的にありません。ただし、ドロップダウンの中の項目の数が状況に応じて変動するケースで場合によっては項目数が2つになることはあります。また、表組のなかでスペースの制約が強い時に、二者択一の選択をあえてドロップダウンにするということはありえます。

少ない候補からの選択

選択肢の数がごく少ない場合（最大8個程度まで）

候補となる選択肢の数がごく少ない場合、ラジオボタンを使用します。選択肢がいちどに見えるため、全部でどういった選択肢があるのかユーザーが把握しやすいという利点があります。

ラジオボタン

選択肢の数が20個程度まで

選択肢の数は8個程度以下だが同時に見える必然性が低かったり、スペース上の制約がある場合。または選択肢の数が8個程度よりは多く、一度に並べてしまうと視覚的に把握しづらかったりスペースを取りすぎてしまう場合、最大20個程度までならドロップダウンが適しています。

ドロップダウン

下の都道府県の例のように、ドロップダウンの中はグループに区分けすることもできます。

絞り込み付きドロップダウン

また、選びやすさを向上させるために、ドロップダウンに絞り込み機能をつけることもできます。

フリー入力もできる場合

既定の選択肢の中から選ぶか、もしくは新たにフリーテキストを入力できるようにするケースの場合、入力可能ドロップダウン（コンボボックス）を使います。

入力可能ドロップダウン

ドロッブダウンの項目数の例外

ドロップダウンは通常20項目程度までが望ましいですが、都道府県のように選択肢が対象の一般的に浸透・共有されており、想定するユーザーの大半がだいたい記憶していることが期待されるような場合には47項目も許容範囲と言えます。北から南に向かって並べ、地方ごとに区切りを設けることで、多い選択肢でもなるべく見つけやすいようにしています。

多い候補からの選択

20個程度以上の候補から選択する場合いちどに選択肢を並べてしまうのはスペース的にも人間の認知・処理能力的にも無理があり、使いやすいとは言えません。

手がかりになる文字列から探す場合

選択肢の数がせいぜい数十から百数十程度で、ユーザーが選択肢の文言に含まれる文字やコードをある程度アタリをつけられることを前提にできる場合、手がかりとなる文字やコードを元に絞り込んで候補を表示するのが有効です。

サジェスト付きテキストフィールド

例として「123」あるいは「村」と打ち込んでみてください。一字打つごとに該当する候補が絞り込まれて提示されます。提示する候補の数は5件程度が妥当です。正確な名称やコードを記憶していなくてもその一部の検討がつけば正しい値を入力できるため、ユーザーの負荷が軽減されます。担当者や店舗、色柄など、似た名称のものが多いケースもあります。ユーザーに完璧な記憶を求めずあいまいな記憶を補完する形で正確な選択肢へたどり着く手助けをすることに意味があります。

ワード検索で一覧を絞り込み

いったん全件を表示しておいて、ワード検索用フィールドに打ち込んだコードや文字列で絞り込むこともできます。一覧表示部分は固定または最大の高さを設定しておき、表示スペースがいたずらに長くならないようにします。

このパターンはモーダルを利用すると良いでしょう。

階層構造から探す場合

選択肢が階層構造を持っていて、ユーザーがその分類を掘り下げていく形が目当ての選択肢を探しやすい場合には、ドリルダウンやツリーテーブルが有効です。所属組織から掘り下げていって部署や社員を入力する場合や、大分類から中分類、小分類とカテゴリ階層を掘り下げていって商品を入力する場合、広域から狭域へとエリアを狭めていって店舗や事業所を入力するなどが当てはまります。

ドリルダウン

階層ごとにリストを掘り下げていくことで、目的の選択肢へたどり着くことができます。また、最終的な各項目単位だけでなく階層（分類）自体も選択することができます。

このパターンもモーダルの利用が有効です。

複合条件で絞り込み

選択肢の数が非常に多かったり、コードや文字列以外の手がかりから絞り込みを行うのがユーザーにとって有用な場合、複合的に条件を設定して検索することになります。

複数選択

選択肢の中から一つだけ選択する他に、複数を選択するケースもあります。上記にあげた各パターンにも複数選択のものが用意されています。また、検索条件の入力において、各レコードでは単一選択の属性となっている項目について条件を指定するのに、通常は複数選択となります。検索条件の入力においては全選択も未選択も実質的に同じ条件になります。

チェックボックス

単一選択の場合のラジオボタンに対して、複数選択の場合はチェックボックスを使用します。

複数選択ドロップダウン

全部選択されているときは「すべて」、何も選択されていない時は「何も選択されていません」や「指定しない」を表示します。

サジェスト付き複数入力

サジェストされた候補をクリック、または該当する候補がない場合も入力したテキストをリターンキーで追加できます。例として「東京」と打ち込んでみてください。

ワード検索で一覧を絞り込んで複数指定

複数選択ドリルダウン

リストメーカー

分析システムの中の軸設定などで利用することが多いリストメーカーは、各項目についての共通の条件を複数追加してセットしていくことができます。