セレクトボックス(プルダウン)とは?ラジオボタンとの使い分けと初期値

セレクトボックスの基本

まずは、セレクトボックスがどんな部品で、どんなパーツでできているのかを押さえましょう。

セレクトボックスとは

セレクトボックスとは、押すと選択肢の一覧が開き、その中から1つを選ぶ部品です。

一覧が下に垂れ下がるように開くことから、「プルダウン」「ドロップダウン」「ドロップダウンリスト」とも呼ばれます。

選択肢の一覧はふだん閉じていて、選んだ項目だけが表示されるので、都道府県のように選択肢の多い項目でも、画面の場所をとりません。

なお、Webサイトのヘッダーで、メニューの項目にマウスを乗せると下に開く「ドロップダウンメニュー」は、ページを移動するためのナビゲーションの部品で、フォームで値を選ぶセレクトボックスとは役割が違います。

迷ったときは目的で見分けるとすっきりします。選んだ値をフォームで送るための道具ならセレクトボックス、選ぶと別のページへ移動するための道具ならドロップダウンメニューです。

見た目が似ていて呼び方も重なるので、この記事では「フォームで1つを選ぶ部品」をセレクトボックスと呼びます。

セレクトボックスを構成するパーツ

セレクトボックスは、次のパーツで構成されます。

パーツ	見本での例	役割
ラベル	都道府県	何を選ぶ欄かを示す名前
選択中の値	東京都	今選ばれている項目。何も選んでいないときは「選択してください」などを表示する
矢印のアイコン	下向きの矢印	押すと一覧が開く部品だと伝える目印
選択肢の一覧	茨城県〜神奈川県	開いたときに表示される選択肢。選んでいる項目は印や背景色で示す

矢印のアイコンは、テキストフィールド(文字を入力する欄)と見分けるための大切な手がかりです。

矢印がないと、ただの入力欄に見えて、文字を打とうとして押してしまうことがあるので、省かないようにしましょう。

セレクトボックスの使い分けとデザインのコツ

ここからは、セレクトボックスを使うかどうかの判断と、使うときのデザインのコツを見ていきます。

選択肢が少ないならラジオボタンを使う

1つだけ選ぶ項目で選択肢が少ないときは、セレクトボックスではなく、ラジオボタン(丸い印で1つを選ぶ部品)で全部の選択肢を並べます(ラジオボタンの使い方はチェックボックスとラジオボタンの違いとは?で解説しています)。

ラジオボタンなら、押して開かなくてもすべての選択肢が見え、1回押すだけで選べるからです。

デジタル庁デザインシステムでは、選択肢が5つ以下の場合はラジオボタンの使用を勧めています(セレクトボックスの使い方 – デジタル庁デザインシステム)。

NGの見本では、選択肢を確かめるために一度開き、選んで閉じる、という手間がかかります。

OKの見本では、選択肢が最初から見えているので、読んだその場で選べます。

反対に、都道府県・国・生まれた月のように選択肢が多い項目は、ラジオボタンで並べると画面が縦に長くなりすぎるので、セレクトボックスが向いています。

初期値は場面に合わせて決める

セレクトボックスでは、画面を開いたときに何を表示しておくか(初期値)を、場面に合わせて決めます。

最初から一覧の先頭の項目が選ばれていると、利用者が自分で選んだのか、元からそうだったのかが見分けにくく、選び忘れたまま送信されてしまうことがあるからです。

NGの見本では、北海道以外に住む人が選び忘れても、北海道のまま送信できてしまいます。

「利用者に多い都道府県を最初から選んでおけば楽になるのでは」と思うかもしれませんが、ほかの地域の人が変え忘れると、間違った住所のまま申し込みが届いてしまいます。1回選ぶ手間を省くことより、間違いを防ぐことを優先しましょう。

OKの見本のように、住所や生年月日など利用者自身のことを聞く項目では、「選択してください」と表示して未選択の状態にしておき、選ばずに送信されたらエラーで知らせます。

一方で、表示の並び順や1ページの表示件数のような設定の項目では、多くの人が使う標準の値(「新しい順」「20件」など)を最初から選んでおくと、手間が減ります。そのままでも困ることは少なく、あとから変えることもできるからです。

イギリス政府のデザインシステム(GOV.UK Design System)も、設定では初期値を選んでおき、質問では答えを誘導しないよう選んでおかない、という考え方を示しています(Select – GOV.UK Design System(英語))。

迷ったときは、「選び忘れたまま送信されたら困る項目か」で判断しましょう。困るなら「選択してください」で未選択に、困らないなら標準の値を選んでおきます。

選択肢は探しやすい順に並べる

一覧の中の選択肢は、利用者が目的の項目を探しやすい順番に並べます。

セレクトボックスは選択肢をすべて見渡しにくい部品なので、並び順に決まりがないと、長い一覧を上から下まで読むことになるからです。

• 決まった順番があるもの
  月・年・サイズ(S・M・L)などは、その順番どおりに並べます。
  都道府県は、北海道から沖縄県へ北から南に並べる順番が一般的です。日本の国家規格であるJIS(日本産業規格)で都道府県に付けられた番号(01の北海道〜47の沖縄県)と同じ順です。
• 決まった順番がないもの
  五十音順やアルファベット順に並べると、利用者が見当をつけて探せます。

よく選ばれる項目を先頭に出す方法もありますが、並び順のルールが崩れて探しにくくなることもあるので、使うなら区切り線などで「よく選ばれる項目」と「すべての項目」を分けましょう。

押せる部品だと分かる見た目と状態を用意する

セレクトボックスは、下向きの矢印と、背景とはっきり区別できる枠線で、「押すと一覧が開く部品」だと分かるようにします。

枠線のように部品を見分けるための線は、Webのアクセシビリティ(障害の有無や年齢にかかわらず使いやすくすること)の国際的なガイドラインであるWCAG 2.2で、隣り合う色とのコントラスト比を3:1以上にすることが求められています(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。

状態の見た目も、テキストフィールドと同じように用意しておきます(テキストフィールドの状態はテキストフィールドとは?で解説しています)。

エラーの見本のように、枠の色だけでなく、何をすればよいかを文字で添えるのは、ほかの入力部品と同じです(色だけに頼らない考え方は色だけに頼らないデザインとは?で解説しています)。

開いたときの一覧の見た目は、ブラウザやスマートフォンの種類によって変わることが多く、特にスマートフォンでは画面の下から選択肢がせり上がるなど、端末の標準の画面で表示されます。

デザインで作り込むのは主に閉じた状態の見た目と考え、開いた一覧は実際の端末で確認しましょう。

セレクトボックスを使わないほうがよい場面

セレクトボックスは便利ですが、次のような場面では、ほかの部品を検討しましょう。

• 選択肢を見比べてほしいとき
  料金プランのように、内容を比べてから選んでほしい場面では、開くまで中身が見えないセレクトボックスは向きません。
  ラジオボタンやカードで並べて、全部を同時に見せましょう。
• 複数選んでもらいたいとき
  セレクトボックスには複数を選べる形式もありますが、操作が分かりにくいため、複数選択にはチェックボックス(四角い印で好きな数だけ選べる部品)を使うのが基本です。
• 入力したほうが速いとき
  生まれた年のように、数十〜百以上の選択肢から探すより、数字を直接入力したほうが速い項目もあります。
• 一覧が長すぎるとき
  選択肢が何十個も続く一覧は、スマートフォンでは特にスクロールして探すのが大変です。
  デジタル庁デザインシステムでも、長すぎるリストはモバイルでの使い勝手を下げるため、前の質問で選択肢を減らせないか検討するよう勧めています。

GOV.UK Design Systemはさらに慎重で、セレクトボックスは使いこなせない利用者もいることが調査で分かっているとして、一般向けのサービスでは「最後の手段」として使うよう求めています。

よく見かける部品なので意外に感じるかもしれませんが、開くまで中身が見えない、長い一覧をスクロールして探す、開いて選んで閉じるという何段階もの操作が必要、といった使いにくさがあるためです。使ってはいけないという意味ではなく、ほかによい方法がないかをまず考え、それでもないときに使う部品、ということです。

「選択肢が多いから、とりあえずセレクトボックス」ではなく、ほかの部品や質問の分け方で解決できないかを先に考えてみましょう。

実践のポイント

セレクトボックスで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「はい/いいえ」の2択のような少ない選択肢まで、見た目をそろえるためにセレクトボックスにしてしまうことがあります。
  選択肢が少ないなら、ラジオボタンで並べたほうが早く選べます。
• セレクトボックスの中の「選択してください」を、ラベルの代わりにしてしまうことがあります。
  選んだあとは消えて何の項目か分からなくなるので、ラベルは枠の外に必ず置きましょう。
• セレクトボックスで何かを選んだ瞬間に、別のページへ移動するようにしてしまうことがあります。
  キーボードで選択肢を順に確かめようとしただけで移動してしまうことがあるので、選んだあとに「表示」などのボタンを押して確定する形にしましょう。
  WCAG 2.2でも、入力や選択を変えただけで、予告なく画面が切り替わるような変化を起こさないよう求めています(WCAG 2.2 達成基準3.2.2 入力時・WAIC日本語訳)。
• 枠の幅を選択肢の長さに対して狭くしすぎ、選んだ項目の文字が途中で切れてしまうことがあります。
  一番長い選択肢が収まる幅にしておきましょう。

よくある質問

• Q. セレクトボックスとプルダウンは同じもの?
  A. フォームで1つを選ぶ部品を指す場合は、ほぼ同じものを指します。
  ただし「プルダウンメニュー」「ドロップダウンメニュー」は、ヘッダーのナビゲーションで下に開くメニューを指すこともあるので、チームで話すときはどちらの意味かを確認しましょう。
• Q. 選択肢がいくつ以上ならセレクトボックスにする?
  A. デジタル庁デザインシステムでは、5つ以下ならラジオボタンを勧めているので、6つ以上が目安の1つになります。
  ただし、見比べてほしい選択肢なら6つ以上でもラジオボタンで並べるなど、数だけでなく場面で判断しましょう。
• Q. コーディングではどの要素を使う?
  A. ここからはコーディングする人向けの補足です。
  HTMLでは<select>要素の中に、選択肢を<option>要素で並べて作ります(MDN: <select>)。
  見た目を独自の部品で作り直すと、キーボードや読み上げソフトで使えなくなりやすいので、まずは標準の要素を使うのがおすすめです。

まとめ

セレクトボックス(プルダウン)とは、押すと選択肢の一覧が開き、その中から1つを選ぶ部品で、都道府県のように選択肢の多い項目を省スペースで扱えます。

選択肢が少ないときや見比べてほしいときはラジオボタンを使い、利用者自身のことを聞く項目では「選択してください」で未選択にしておくことがポイントです。

まずは、自分が作ったフォームや身近なサイトのフォームを開き、選択肢が5つ以下なのにセレクトボックスになっている項目がないか探してみてください。