コマンドパレット
Command palette
別名: コマンドメニュー、Ctrl+Kメニュー、Command menu、Quick switcher、Command bar
生態（さわってみる）
一言定義
キーボードショートカット（多くはCtrl+K）で呼び出し、入力しながら候補を絞り込んでコマンドや画面へ即座に移動できる検索型の操作UI。
分類
使う場面
- 機能・ページ数が多いSaaS/エディタ系アプリで、マウス操作なしに素早く目的の操作へ到達させたいとき
- キーボード中心のパワーユーザー層が主要な利用者であるとき
避ける場面
- 対象ユーザーがキーボードショートカット文化に不慣れなとき（発見性が低い）
- コマンド数が少なく、通常のメニューで十分足りるとき
近縁種との比較
コマンドパレットはVS CodeやNotion、Slackなどが広めた通称で、多くのデザインシステムにはまだ正 式収載されていない比較的新しいパターンである。多くはCtrl+K（Macでは⌘K）で呼び出し、入力しながら 候補を絞り込む点はオートコンプリートと共通するが、オートコンプリートが1つの入力フィールドの値 を確定させるための入力補完であるのに対し、コマンドパレットは画面遷移やコマンド実行そのものを目的 とした探索型のUIである点が異なる。コンテキストメニューとは「対象に応じた操作の一覧を提示する」 という役割は似ているが、コンテキストメニューが右クリックした対象に紐づく限定的な操作列であるのに 対し、コマンドパレットはアプリ全体のコマンドを検索して横断的にアクセスできる点でスコープが大きく 異なる。
実例リンク
アクセシビリティ
- role
- ダイアログはrole="dialog" aria-modal="true"、入力欄はrole="combobox" aria-expanded aria-controls、候補一覧はrole="listbox"、各候補はrole="option"
- キーボード操作
- Ctrl+K（Macは⌘K）で開く、↑↓で候補移動、Enterで実行、Escで閉じる
- 補足
- Ctrl+Kのグローバルキー登録はデモがマウントされている間だけ有効化し、アンマウント時に必ず解除する（他のカードのデモと衝突させないため）