ドロップダウン・セレクトUIのデザインガイド：ネイティブセレクト・カスタムドロップダウンの設計

ドロップダウンとセレクトUIは、フォームで「複数の選択肢から1つを選ぶ」インタラクションのためのコンポーネントです。単純に見えますが、ネイティブのHTMLセレクトとカスタム実装の使い分け・アクセシビリティ・モバイル対応など、設計上の考慮点が多くあります。本記事では、ドロップダウン・セレクトUIの設計パターンを解説します。

ネイティブ select vs カスタムドロップダウン

ネイティブ `<select>` のメリット：

• ブラウザ/OSのネイティブUIを使うため、アクセシビリティが保証されている
• キーボードナビゲーション（矢印キー・文字でジャンプ）が標準で動作
• モバイルでネイティブのピッカーUIが表示される（iOS/Android それぞれ最適化）
• コードが少なく実装が簡単

ネイティブの限界：

• デザインのカスタマイズに制限がある（OSごとの見た目の差異）
• 選択肢のアイコン・複雑な選択肢の表示ができない
• 検索機能がない（選択肢が多い場合）

カスタムドロップダウンのメリット：

• デザインを完全にコントロールできる
• 選択肢にアイコン・バッジ・詳細情報を表示できる
• 検索/フィルタリング機能を追加できる
• グループ分け・セパレーターをカスタマイズできる

使い分けの判断：

• 選択肢が単純なテキストのみ・デザインカスタマイズが不要 → ネイティブ select
• アイコン付き・検索機能・複雑な表示が必要 → カスタムドロップダウン
• モバイルのみ → ネイティブ select（またはボトムシート）

カスタムドロップダウンの設計

トリガー（コントロール）のデザイン：

選択した値（プレースホルダーまたは選択済みの値）を表示するボックス + 右端の下向き矢印アイコンが標準スタイルです。フォーカス時は枠線をプライマリカラーに変えます。開いた状態では矢印を上向きに回転させます（180°）。

ドロップダウンリストのデザイン：

• コントロールの幅以上（内容に合わせてより広くする場合もある）
• 最大高さを設定（多数の選択肢がある場合はスクロール可能に）
• 現在の選択値をハイライト表示（背景色またはチェックマーク）
• ホバー・フォーカスでの選択肢のハイライト

アニメーション：

展開時は transform: scaleY(0→1) + opacity: 0→1（origin: top）で素早く（150〜200ms）表示し、閉じる時は逆方向に縮小します。

検索可能なセレクト（Combobox）

選択肢が20件以上ある場合（都道府県・国・会社名等）は検索機能が必須です。

Comboboxのデザイン：

• テキスト入力フィールド + ドロップダウンリストの組み合わせ
• 入力内容でリストをフィルタリング（フロントエンド検索またはAPIコール）
• マッチする部分のテキストをハイライト（太字またはマーク）
• 「○○は見つかりませんでした」の空のステート表示

マルチセレクト

複数項目を選択できる場合の設計：

チップ（タグ）スタイル：

選択した項目をコントロール内にチップ（×ボタン付き）として表示します。選択数が多くなった場合は「+3件」のように表示を省略します。

チェックボックスリスト：

ドロップダウン内の選択肢をチェックボックスで表示し、複数選択できます。適用ボタンで確定します。

アクセシビリティ

WAI-ARIA Comboboxパターン：

カスタムドロップダウンには以下のARIA属性が必要です：

<div role="combobox" aria-expanded="false" aria-haspopup="listbox">
  <input
    type="text"
    aria-autocomplete="list"
    aria-controls="dropdown-list"
  />
</div>
<ul role="listbox" id="dropdown-list">
  <li role="option" aria-selected="true">選択肢1</li>
  <li role="option" aria-selected="false">選択肢2</li>
</ul>

キーボード操作：

• 下矢印キー: ドロップダウンを開く・選択肢を移動
• 上矢印キー: 選択肢を逆方向に移動
• Enter: 選択肢を確定
• ESC: ドロップダウンを閉じる

まとめ

ドロップダウン・セレクトUIは単純に見えますが、アクセシビリティ・モバイル対応・検索機能など設計上の課題が多くあります。シンプルなケースはネイティブ selectを使い、カスタマイズが必要な場合はWAI-ARIAに準拠したカスタム実装を選択することで、すべてのユーザーが使いやすいセレクトUIが完成します。UI ZUKANではセレクトUIの実装例を掲載しています。