セレクトボックス

GOV.UK Design System「Select」。公共サービスでは、セレクトボックスは最後の手段にするよう勧めています。質問に使うときは、答えに影響しないよう最初から選んでおかず、設定に使うときは選んでおいてよいとしています。利用者の調査では、フォーカスしている項目と選ばれている項目を取り違える、一覧を閉じられない、小さな画面で拡大しようとする、続きをスクロールで見られることに気づかない、といった困りごとが報告されています。

Apple「Human Interface Guidelines: Pop-up buttons」。ポップアップボタンはどれかひとつを選ぶ選択肢のメニューを出すとしています。選ぶとメニューが閉じ、ボタンの表示がいまの選択に変わります。まだ選んでいなければ、指定した既定の項目を出し、多くの人が選びそうな項目を既定にするよう勧めています。開かなくても選択肢の見当がつくよう、ラベルを添えることも勧めています。

Apple「Human Interface Guidelines: Menus」。いま有効な項目をチェックマークで示すことを勧め、一覧の中からチェックマークを探すのはたやすいと書いています。ポップアップボタンに限らない、メニュー全般の指針です。

W3C「Understanding WCAG 2.2: 1.4.1 Use of Color」。色を、情報を伝えるただひとつの見た目の手段にしないよう求めています（レベルA）。セレクトボックスの選んだ項目について直接は書かれていません。

W3C「Understanding WCAG 2.2: 2.4.7 Focus Visible」。キーボードで操作できる画面では、いまどこにフォーカスがあるかが見えるようにするよう求めています（レベルAA）。

MDN「Customizable select elements」。セレクトボックスの開けるしるしは閉じているときに下を向く矢印として定められていて、開いている間は 180 度回して上へ向ける例を載せています。この見た目の指定はまだ一部のブラウザでしか使えず、使えないブラウザでは従来のセレクトボックスに戻ります。

Angie Li「Dropdowns: Design Guidelines」Nielsen Norman Group、2017年。開いている間も、メニューのラベルや説明が見えるようにすることを勧めています。使えない選択肢は、消すと並びが変わって覚えにくくなるので、消さずに灰色で残すよう勧めています。ドロップダウンの欄には、ふつう横に下向きの矢印があるとも書いています。文字を打つと、その文字で始まる選択肢へすぐ移れるようにすると、長い一覧で助けになり、目の見えない人も使いやすくなるとしています。

W3C WAI「ARIA Authoring Practices Guide: Select-Only Combobox Example」2025年8月更新。閉じているときは下矢印、Enter、Spaceで開き、開いているときは上下の矢印で動かし、Enterで決めて閉じ、Escで選ばずに閉じるといったキー操作を例として示しています。文字を打つと、その文字で始まる最初の選択肢へ移り、続けて打つと文字列全体に合う選択肢へ移ります。一覧の中を動いても値は決まらないと書いています。規格の決まりではなく、作り方の例です。

MDN「HTML attribute: readonly」。readonly はセレクトボックスには効かないとしています。readonly と違い、disabled にした欄はフォーカスを受けず、フォームを送っても値が送られません。

Anna Kaley「Listboxes vs. Dropdown Lists」Nielsen Norman Group、2020年。ドロップダウンリストの主な部分のひとつに、下向きの矢印のボタンを挙げています。ドロップダウンは選んだ値を枠の中に見せ続け、ほかの選択肢は開いたときにだけ見せるので、選んだ値が見えることのほうが大事なときに向くとしています。選択肢が5つ以下ならラジオボタン、15を超えるなら多くが最初から見えるリストボックスを勧めています。

Apple「Macintosh Human Interface Guidelines」第4章 Menus、1996年。ポップアップメニューには、スクロールするメニューの印に似た下向きの三角形を付け、開いたメニューでは、いまの選択の横にチェックマークを付けるとしています。矢印の形は時代や OS によって違います。

W3C「Understanding WCAG 2.2: 2.1.1 Keyboard」。すべての機能をキーボードで操作できるよう求めています（レベルA）。頭の文字で項目へ飛ぶことまでは求めていません。

Christian Holst「5 Common Usability Pitfalls of Custom Designed Drop-Downs」Baymard Institute、2017年。支払い画面で独自のドロップダウンを使っている通販サイトは82%で、そのうち31%に大きな使い勝手の問題がありました。問題として、Tabキーで届かない、フォーカスが見えない、文字を打って値へ飛べない、開いた一覧が短すぎる、いつも下に開いて画面からはみ出す、の5つを挙げています。見た目を変えたいだけなら、閉じた枠だけを独自の見た目にし、開いたら標準の一覧に任せる方法を強く勧めています。

W3C WAI「Labeling Controls」2024年5月更新。テキストの欄、チェックボックス、ラジオボタン、ドロップダウンを含むすべてのフォームの部品にラベルを付け、できれば label 要素で結び付けるよう勧めています。

Katie Sherwin「Placeholders in Form Fields Are Harmful」Nielsen Norman Group、2014年（2018年に見直し）。入力欄の中の薄い文字をラベル代わりにすると、入力すると消えるので覚えておく必要がある、見直しやエラーの修正がしにくい、既定の値と間違えて飛ばされる、薄い色で読みにくい、読み上げで読まれないことがあると挙げています。文字を打ち込む欄についての記事で、セレクトボックスの最初の項目を直接扱ってはいません。

Wiktionary「select」。英語の select は、ラテン語 sēlēctus（sēligō「選び出す」の過去分詞）から来ていて、sēligō は sē-（離して）と legō（集める、選ぶ）を合わせた語だとしています。誰でも編集できる辞書で、語源辞典の原典はたしかめていません。

Marc Andreessen「NCSA Mosaic for X 2.0 prerelease 5 available」www-talk、1993年10月10日。入力フォームに、選択肢のメニューとして INPUT 要素の type OPTION を足したと告知しています。HTML+ の仕様にはまだないと断っています。

Dave Raggett「Re: request for new forms submission consensus」www-talk、1993年10月12日。INPUT TYPE="option" の案ではなく、SELECT タグを使うよう勧めています。いくつも選べる場合の属性は、このときは SEVERAL という名前でした。

T. Berners-Lee, D. Connolly「Hypertext Markup Language - 2.0」RFC 1866、1995年11月。SELECT 要素は欄の値を決まった選択肢の一覧に限るものだとしています。1行の欄はふつうポップダウンメニュー、2行以上はふつう一覧として表示されると書いています。この規格は1994年6月より前によく使われていた HTML におおよそ合わせたものです。

Google ドキュメント エディタ ヘルプ「フォームの質問の種類を選択する」。日本語版では、英語版の Dropdown にあたる質問の形式を「プルダウン」と呼んでいます。

Microsoft サポート「ドロップダウン リストを作成する」（Excel）。日本語のヘルプでは「ドロップダウン リスト」と呼び、「プルダウン」という言葉は使っていません。

Apple「Macintosh Human Interface Guidelines」第4章 Menus の Pop-Up Menus、1996年。ポップアップメニューはダイアログやウインドウの中で、どれかひとつを選ぶ選択肢の一覧を出すものとし、プルダウンメニューに出すべき項目には使わないよう書いています。項目が5〜12個のときに使い、12個を超えたらスクロールする一覧を使うよう勧めています。

Hansen Hsu「The Lisa: Apple's Most Influential Failure」Computer History Museum、2023年。1983年の Lisa で、画面の上のメニューバーとプルダウンメニューが登場したと書いています。

stiefkind（Wolfgang Stief）「Apple Lisa at VCFB 2019」2019年撮影。2019年の VCFB で展示されていた Apple Lisa です。CC0（パブリックドメイン提供）です。