ドロップダウン
クリック・ホバーで下方向に展開するメニュー・選択肢。フォームの選択肢(国・都道府県・職種など)、ナビゲーションメニュー、ソート・フィルター機能で多用される標準 UI。
Web 担当者にとっては、フォーム設計・ナビゲーション設計で頻繁に検討する UI 要素。選択肢が 5 つ以下ならラジオボタン、6 〜 30 ならドロップダウン、それ以上ならオートコンプリート機能、と使い分けの目安がある。
本書のスタンスは「ドロップダウンは『選択肢が多すぎないか』を毎回チェック」。50 項目のドロップダウンは選びにくいため、検索機能付きセレクトボックスへの置き換えを検討する。
担当者が陥りやすいのは、モバイルでドロップダウンが小さすぎてタップしにくいこと。モバイル UI ではタップサイズの最小推奨(44×44px)を満たす設計が必須。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
会話上での使用例
フォーム選択肢の議論
-
ディレクター
都道府県選択は?
-
Web 担当者
ドロップダウン で 47 項目。検索機能付きセレクトにすると入力スピード上がります
モバイル UI 改善
-
デザイナー
モバイルでドロップダウン使いにくい
-
Web 担当者
ドロップダウン のタップサイズが小さい。44×44px 以上に拡大して、モバイル UI 改善しましょう