本文へスキップ

セレクト・コンボボックス・コマンドパレット

選択肢が多いとき、セレクト・コンボボックス・コマンドパレットのどれにする?

判断表

判断軸セレクト
一覧から1つ選ぶ
オートコンプリート
打って絞り、候補から選ぶ
コマンドパレット
画面のどこからでも呼び出して実行
選択肢の数5〜15個。全部見て選べる範囲数十〜数千。打たないと探せない画面の機能すべて。10個でも100個でも同じ操作
利用者が知っていること何があるか知らなくてよい(見て選ぶ)名前の一部を知っている(都道府県・駅名)やりたいことの名前を知っている
置き場所フォームの1項目フォームの1項目画面全体に重なるオーバーレイ(⌘K で開く)
キーボード矢印・Enter・Esc で操作できる(見本あり)↑↓ Enter Esc に加え、打ち込みで絞るショートカットで開き、打って Enter で実行
モバイルネイティブの select に任せる手もあるキーボードが出るので、候補は上に寄せる向かない。ショートカットが無くメニューで代替

迷ったらこれ

迷ったらセレクト。ただし選択肢が15個を超えたらコンボボックスにして打って絞れるようにし、機能や画面へ飛ぶ「操作の入口」を探させるなら、慣れた利用者向けにコマンドパレットを足す(通常のメニューは残す)。

複数選んでチップに積む型は combobox、結果のプレビュー付きの検索モーダルは search-modal-preview を参照。カスタムのセレクトを作るなら、まずネイティブ select で足りないかを確かめる。

候補の見本

  • クリック

    セレクト

    Select / Dropdown

    ボタンを押すとリストボックスが開くカスタムのセレクト。矢印キー・Enter・Escで操作でき、選択中の項目にはチェックが付く。

  • 入力

    オートコンプリート解説あり

    Autocomplete

    入力に応じて候補リストを絞り込み表示。↑↓キーやタップで選択でき、選ぶと入力欄に反映される。都道府県など日本語ダミー候補つき。

  • クリック

    コマンドパレット解説あり

    Command Palette

    ボタンまたは ⌘K/Ctrl+K でコマンド検索オーバーレイを開き、入力で絞り込み、↑↓キーまたはタップで実行できる。