Command Bar / Command Palette UIパターン
コマンドバー (Command Bar)またはコマンドパレット (Command Palette) というのは、画面の手前にポップアップ表示されるテキストフィールド型ランチャーを指すUIパターンです。そのツールが備える主要な命令の一覧やアセットなどをいつでもテキストベースで呼び出せる、コマンドラインの体験に近いランチャーをGUIで提供します。そのため、CLIの弱点である「一覧性のなさ」や「使いこなすには多くの記憶に頼る必要があること」を補いつつ、CLIの強みである「瞬時のコマンド呼び出しと実行」を両立させられます。このパターンは「グラフィカル・シェル」とも呼ばれます。
コマンドバーやコマンドパレットは、制作ツールやダッシュボード系ツールなど、比較的多くの機能を有するデスクトップ向けソフトウェアに備わっていることが多い機能です。昨今ですとWebベースのSaaS系アプリケーションにも備わっていることがあります。また、プロンプトベースの生成AI機能を呼び出すためのインターフェイスとしてもコマンドバーが用いられることがあります。
⌘Kである必然はないが
特にデザインの規約があるわけではありませんが、コマンドバーの呼び出しには慣例的に `⌘K (Command K)` が割り当てられる傾向にあるようです。そのため、このパターンを “Command-K bar” とも呼ぶ人が少なからずいますが、こちらの呼び方は避けた方が良いでしょう。
なぜショートカットのシンボルがKなのかは定かではありませんが、Slackなどの有名なソフトウェアがそのキーバインドを採用していること、一等地である `⌘ Space` のキーバインドがすでにSpotlightによって予約されている（それを使いたくてもオーバーライドが難しい）こと、左手周辺のキーの多くはすでに使用済みであることも関係しているかもしれません。その点、`⌘K`の組み合わせはシンプルな割にこれを使っているツールも多くないので被る心配も少なく、都合が良かったのだと思います。
（十分な調査を行なっていないので筆者による憶測です。この辺りの経緯に詳しい方がいらしたらコメントなりくださると嬉しいです。）
“コマンドバー”の「コマンド」とは文字通り命令の意味と捉えるのが自然なので、Macの⌘ (Command) キーのを直接指しているとは考えにくいです。ですので、Windows環境であってもこれを「コマンドバー」と呼称しても差し支えはないと思います。しかしWindowsなど非Mac環境の文脈でこれを「コマンドKバー」と呼んでしまうと話がずれてきてしまうため、注意が必要です。
非Mac環境を想定する場合には、キーボードに⌘ (Command) キーが備わっていない可能性が高いので、代わりに⌃ (Control) キー起点のキーバインドを検討することになると思います。`⌘K`を採用するマルチプラットフォーム展開のソフトウェアでは、macOS版は`⌘K`、Windows版は`⌃K`を割り当てている事例をよく見かけます。
例えばタスク管理ツールのHeight.appは、macOSで`⌘K`、Windowsで`⌃K`を採用しています。
詳しくは後述しますが、macOS環境で⌃ (Control) キー起点のキーバインドを採用してしまうと、システムで定義されている標準のものと衝突しやすいため、これはおすすめしません。仮にWebアプリケーションだとしても、macOSとWindowsのキーボードショートカットを無理に統一させようとするのではなく、OSごとの慣例やルールを尊重して適切なデザインを行っていくことが大切です。
Macでの歴史や採用事例
コマンドバーが “Command-K bar”と呼ばれるようになったのは最近になってからですが、そこに至るまでにも有名なソフトウェアが存在しました（しています）。代表的なものをいくつか挙げてみます。
LaunchBar
LaunchBarは1996年から開発され続けているmacOS向けランチャーソフトウェアです。当初はNeXTSTEP OS向けのソフトウェアとして開発されていました。この後紹介するQuicksilverやSpotlightなどの「コマンドバー系ランチャー」の先駆けとも言えるソフトウェアです。
開発元はLittle Snitchで有名なObjective Development社です。
Quicksilver
Quicksilverは2003年に登場したMac OS X向けのランチャーソフトウェアです。LaunchBarと同様にキーボードによるランチャー機能を実現しますが、異なるUI表現や拡張性などが特徴的です。
Spotlight
Spotlightは現代のmacOSやiOS, iPadOSに標準搭載されている検索エンジンです。原点は2004年に登場したMac OS X 10.4 Tigerにあります。当初のUIは今のような「ポップアップ型」ではなく、プルダウンメニュー型で実装されていました。今では当たり前の高速逐次検索（インクリメンタル・サーチ）も、Spotlightあたりから一般に広まった印象があります。
Spotlightを呼び出すには、メニューバー右側の虫眼鏡アイコンをクリックするか、“⌘ Space” キーボードショートカットを実行します。この組み合わせは当初からOS標準で割り当てられているものなので、Macユーザにとってはもうお馴染みのものとなっています。
Mac OS X 10.3までの日本語環境Mac OSでは、⌘ Spaceの組み合わせは伝統的に入力メソッド（ことえり）の切り替えに割り当てられていたため、古くからの日本人Macユーザたちには少々混乱が生じました。また、当時のMac OS X日本語版は日本語環境向けには代わりに “⌃ Space” を標準で割り当てていた時期がありました。なので、この辺りの変遷を経験しているMacユーザはいまだに二つのキーバインドで混乱してしまうことがあります。
※⌃…Control
Alfred
AlfredはSpotlightやQuicksilverなどと同じく多機能ランチャーとして機能します。Raycastが登場するまではMacのパワーユーザには人気のソフトウェアでした。基本的にはSpotlightに足りない（と思われている）機能を補いつつ、有料パワーパックによって更なる機能拡張ができることに重点が置かれています。
立ち上げには `⌥ Space` が標準で割り当てられています。
Sketch Runner
Sketch RunnerはSketch内のさまざまなコマンドやアセットをキーボードで検索できる機能を追加するSketchプラグインです。Sketchでコマンドバーを使えるようになります。
Open Quickly (Xcode)
Open QuicklyはXcodeに備わっているコマンドバー的機能です。`⇧⌘O` (Shift Command O) でSpotlight風ポップアップウインドウが立ち上がり、テキストを入力するとさまざまなアセットを絞り込んで目当てのところにジャンプすることができます。ファジー検索に対応しています。
ヘルプメニュー (macOS)
Mac OS X 10.5 Leopard以来、macOSのヘルプメニューにはキーワード検索機能が備わっています。これを活用すると、アプリケーションが備えるメニューの中身やヘルプトピック（ローカル、オンライン含む）の検索を行えます。
特にメニュー項目が多いアプリケーションでは、このメニュー項目の検索を活用することで目当ての機能を探すのに非常に役立ちます。この振る舞いは代表的なコマンドバーパターンとよく似ています。
Command Palette (Sublime Text)
Sublime Textに備わっているCommand Paletteは、これらコマンドバー／コマンドパレット系実装の有名な事例の一つです。IDEのUIの歴史は詳しく追えていないので書ききれませんが、立ち上げやすいこと、ファジー検索、コマンド呼び出し…辺りの基本機能を備えており、Spotlightと同じくその後の多くのコマンドバー／コマンドパレット系UIのお手本になったようです。
参考：
別の会話へ移動する (Slack)
Slackのチャンネル移動ショートカットである「別の会話へ移動する」は、macOS環境では `⌘K` によって呼び出すことができます。この機能は慣例的に「⌘K（コマンドケー）」と呼ばれています。
Raycast
RaycastはmacOS向けのランチャソフトウェアです。Alfreadのようにさまざまな操作をコマンドバーを中心に実行することができます。
CotEditor
CotEditorにはv4.7.0よりクイックアクションバーが備わっています。`⌘K`によりさまざまな機能へのショートカットをテキストで実行可能です。
Sketch
Sketchにはv100よりCommand Barが備わっています。`⌘K`によりさまざまな機能へのショートカットをテキストで実行可能です。
デザインの勘所
今日ではコマンドバー／コマンドパレットパターンは広く普及しているため、イディオムとして定着している機能や設計の傾向がわかってきています。ざっと思いつくところを書き出してみましょう。
・簡単なキーボードショートカットでUIを呼び出せる
・キーボード操作で完結
・逐次検索・ファジー検索
・ユーザーの都合を第一に考える
・一覧性を確保する
簡単なキーボードショートカットでUIを呼び出せる
CLI的に即時に呼び出せる体験が重要なので、複雑ではないキーバインドを割り当てることが望ましいです。同時に、OSやブラウザなどのプラットフォームにてすでに予約されている組み合わせを避ける必要があります。
（コマンドバーパターンに限らず、キーボード操作のデザインではこの観点が非常に大切です。）
例えば `⌘ Space` はmacOSではすでにSpotlightに割り当てられているため、これと被ることは避けなければなりません。⌘+●系だとほぼ空きがありませんが、`⌘K` は比較的使われる頻度が少ないのと、各種実装でも慣例的にこれを採用することが多いので、`⌘K` は有力候補になり得るでしょう。
⌃(Control)や⌥(Option)ベースのキーバインドも検討できますが、基本的にはおすすめしません。なぜなら、⌃+●系はmacOS環境ですと入力メソッドの切り替えや、システムワイドで実行できるEmacs風キーバインドとして既に割り当てられているためです。それらを活用しているパワーユーザも多いので、組み合わせが被らない配慮が求められます。
一方⌥+●系はmacOS環境ですと主に特殊記号やヨーロッパ系言語のアクセントやウムラウトなどを入力するために用いられます。ですので⌃+●系と同様にシステムで予約されているものが多いため、避けるのが無難でしょう。
（そもそも、システム側にイベントが取られてうまく機能しない可能性があります。）
キーボード操作で完結
このパターンの核心はキーボード操作で完結できることです。CLIのVimやEmacsのユーザが特に重視しているのは、マウスに一切触れずにすべての操作を効率よくキーボードのみでこなせる体験です。これをGUIデスクトップ環境に持ってくることがこのパターンの趣旨ですから、たとえば途中まではキーボードで操作できるのに、ある操作はマウスのクリックが必要…といったような中途半端なデザインはユーザに歓迎されません。
macOS前提でデザインの勘所を挙げます。
・立ち上げた時点でフォーカスが当たっている状態にする
マルチウインドウ環境では、キーイベントを受け付けるウインドウを自分で選択して手前に持ってくる必要があります。テキストエリアをクリックする操作も必要です。そのような操作が煩わしいので、コマンドバーやコマンドパレットを立ち上げたらすぐにテキスト入力を開始できる状態にします。
・上下左右のカーソル／フォーカス移動
カーソルキー（矢印）と、Emacs風キーバインド（⌃A/E/N/P/F/B/D/H）に対応する。
・実行と取り消し
- Return/Enterで各種操作を決定・実行できるようにする。（macOSではEnter表記ではなくReturn表記を基本とする）
- 必要であればSpaceによる選択にも対応する。
- Escape (⎋) で直前の操作を取り消せるようにする。
- “⌘.” でもEscapeと同様に振る舞うようにする。（macOSではどちらも直前の操作を中止するコマンドとして解釈される）
- Escapeや“⌘.”を押し続けるとコマンドバー／コマンドパレットを閉じて終了できるようにする。
・テキスト入力解釈
フォーカスがどこにあっても、テキストが入力されたらそれを受け入れる。
わざわざテキストフィールドをクリックしなくて良いインタラクションにする。
・テキストの基本ショートカット
コピー、ペースト、カット、すべてを選択／解除などの、いわゆる「編集メニュー系」基本コマンドのショートカットが正しく機能するようにする。
逐次検索・ファジー検索
逐次検索、いわゆるインクリメンタルサーチに対応します。文字を入力して確定して検索を実行する、では手間がかかりすぎるため、これら一連のインタラクションを省略できるようにします。
また、検索アルゴリズムにはファジー検索を取り入れて、曖昧な文字列でもマッチしやすくするとより良い体験を得られやすくなります。
ユーザーの都合を第一に考える
常駐しないポップアップ形式は一つの最適解です。基本的に使い終わったらすぐにUIが消え去って、目的に到達している状態が望ましいので、それを使っている間だけ必要なUIがそこにあるような表現にしましょう。
Escape (⎋) を連打していったら最後にはポップアップウインドウも閉じてしまうのが良いし、何かしらの命令を実行し終えた直後にもポップアップウインドウはすぐに閉じてしまいましょう。
かといってメニューのように揮発性の高いUIにすると逆に操作性が落ちてしまいますので、バーやパレットをドラッグして移動できるようにしたり、一時的に浮遊状態でデスクトップに置いておけるくらいのモードレス性を確保するとバランスが良いと思います。
もし可能ならバーやパレットを最小幅で表示するようにし、表示内容が増えたときに幅を自動調整するなどの計らいがあると使い勝手がぐんと良くなります。
一覧性を確保する
基本的には検索ウインドウとして振る舞うので、検索結果は一覧できるようにしましょう。ただし、余計な情報を載せすぎると一覧性が損なわれてしまうので、最低限必要な情報のみを表示する工夫が必要です。
一覧はなるべくシングルカラムにして認知コストを下げてあげる方が良いと思いますが、場合によってはグリッド状のパレットとして振る舞った方が便利になることもあります。用途によって表現を工夫してみてください。
もしも項目にアイコンがあるならそれを付加してあげると視認性の向上を図れます。項目の種類が多いようなら並べ方を工夫してあげるのも手です。