ドロップダウン(プルダウン)
クリックやタップをすると、下方向に展開するメニューや選択肢のことです。フォームの入力項目（都道府県や職種など）、ナビゲーションメニュー、商品の絞り込み（フィルター）機能などで多用される標準的な UI です。
鉄則：「選択肢の数」に応じて UI を使い分ける
何でもドロップダウンにすると、かえって使いにくくなります。以下の目安で使い分けるのがベストプラクティスです。
- 5 つ以下：ラジオボタン（一覧性が高く、ワンクリックで選べるため）。
- 6〜30 個程度：ドロップダウン。
- それ以上：検索機能付き、またはオートコンプリート（文字を打つと候補が出る仕組み）。50 項目をスクロールして探させるのは避けます。
実務での向き合い方と注意点
フォーム設計やナビゲーション設計で頻繁に登場します。特にモバイル対応において、以下の点に注意して実機確認を行いましょう。
- タップ領域の確保：スマホでは小さすぎて指で押し間違いやすくなります。タップ領域の最小推奨サイズ（44×44px など）を満たす設計を制作会社に求めましょう。
- OS 標準の動きへの理解：スマホでドロップダウンをタップすると、iPhone なら画面下からドラムロールのような選択画面が立ち上がるなど、OS 独自の表示になるのが一般的です。「PC 版と同じ見た目にならない」と慌てないようにしましょう。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
会話上での使用例
入力フォームの都道府県の選び方をディレクターと相談する場面
-
ディレクター
都道府県の入力欄って、どんな形にしますか。
-
Web 担当者
普通にドロップダウンで 47 項目並べる形でもいいんですが、検索機能付きのセレクトにすると、頭文字を打つだけで絞り込めて入力が速くなりますよ。
モバイルで選択肢がタップしづらいとデザイナーから指摘される場面
-
デザイナー
スマホで確認したら、このメニューがちょっと押しにくいんですよね。
-
Web 担当者
ドロップダウンのタップ領域が小さいのが原因だと思います。最低でも 44 かける 44 ピクセルは確保したいので、そのサイズに広げて調整しましょう。