【UIパーツ大全】セレクター[selector]参考パーツ一覧

WebアプリケーションやモバイルアプリのUI設計において、ユーザーが選択肢から項目を選ぶ場面は非常に多く存在します。その中でも「セレクター」と総称されるパーツ群はインタラクティブなUIに不可欠な存在です。

本記事ではセレクター系UIパーツの中でも、特に以下の5種類にフォーカスしそれぞれの特徴、使用場面、UXの観点からの設計ポイントを紹介します。

• セレクター（Selector）
• セレクトインプット（Select Input）
• セレクトメニュー（Select Menu）
• ドロップダウンメニュー（Dropdown Menu）
• プルダウンメニュー（Pulldown Menu）

1. セレクター（Selector）

特徴

「セレクター」という言葉は広義には、ユーザーが複数の選択肢から一つまたは複数を選択するUI部品全体を指します。HTMLにおいては<select>タグを使うパーツを基本とし、視覚的な実装としてはドロップダウン、セレクトインプット、セレクトメニューなどを含みます。

使用例

• 選択肢の少ないフォーム入力
• 国や地域の選択

UXのポイント

適切な選択肢数（3〜10程度）であれば、セレクター形式は直感的で操作しやすい。選択内容が分かりやすく表示される設計が重要です。

2. セレクトインプット（Select Input）

特徴

セレクトインプットは、ドロップダウン機能とテキスト入力機能を組み合わせたUIパーツです。ユーザーは候補リストから選ぶだけでなく、自ら入力して検索・補完が可能です。

使用例

• 大量の候補がある場合の検索（例：都市名、商品名）
• 自由入力＋候補からの選択を両立したい場合

UXのポイント

オートコンプリートやインクリメンタルサーチとの相性が良く、利便性が高い。必ず現在の選択が明確になるよう、入力と候補のUIに一貫性を持たせましょう。

3. セレクトメニュー（Select Menu）

特徴

セレクトメニューは、ポップアップ形式で選択肢を一覧表示するUIです。一般的にはクリックまたはタップで開き、項目を選ぶと閉じる挙動を持ちます。

使用例

• アプリケーション設定の切り替え
• フィルターや並び替えメニュー

UXのポイント

選択肢が5〜15程度の中規模で、一覧性が重視される場面に適しています。スクロール対応と視認性のバランスが重要です。

4. ドロップダウンメニュー（Dropdown Menu）

特徴

ドロップダウンメニューは、ボタンやラベルをトリガーにして、縦方向に選択肢が展開する形式のセレクターです。主にナビゲーションやオプション選択に使われます。

使用例

• ナビゲーションバー内の階層メニュー
• フィルタリングやソートオプションの選択

UXのポイント

ユーザーが意図的に展開する操作を行うため、展開・非展開の状態が視覚的に明確であることが重要です。ホバーやクリック時のレスポンス速度にも配慮しましょう。

5. プルダウンメニュー（Pulldown Menu）

特徴

プルダウンメニューは、特にモバイルで多用されるインターフェースで、画面上部から引き下げて表示する形式です。一般的にはシステムレベルの操作や通知表示に利用されます。

使用例

• スマートフォンの設定メニュー
• 通知センターやコントロールパネル

UXのポイント

操作がジェスチャー起点になるため、誤操作防止と引き下げるトリガーの視認性が重要です。アニメーションによる状態遷移も、使いやすさに大きく影響します。

まとめ

セレクター系のUIパーツはその種類ごとに特徴と適性があります。特にユーザーの選択行動を前提としたUI設計において、適切なパーツを選ぶことはUXの向上に直結します。

• フォームにはシンプルなセレクター
• 大量データにはセレクトインプット
• 中規模選択にはセレクトメニュー
• メニュー型ナビゲーションにはドロップダウンメニュー
• モバイルや通知にはプルダウンメニュー

それぞれの違いを理解し場面に応じた選択を行うことで、ユーザーにとってストレスの少ない操作体験を提供することができます。