コマンドパレットシステム
目的
コマンドパレットシステムは、グローバルでキーボード起動のオーバーレイメニュー（通常は Cmd+K または Ctrl+K で呼び出し）のための設計と空間的なフレームワークを提供します。現代の高密度なWebアプリケーション、開発者プラットフォーム、コンテンツが豊富なドキュメンテーションポータルでは、標準的なナビゲーションバーでは機能が不足します。コマンドパレットは「コマンドセンター」として機能し、パワーユーザーに検索、ナビゲーション、アクション実行への摩擦のない直接的なキーボード経路を提供すると同時に、キーボードショートカットのインタラクティブな辞書としても機能します。
このスキルは、コマンドパレットが空間的に人間工学的で、認知的な疲労を防ぐために視覚的に構造化され、高度なアクセシビリティ仕様（WCAG 2.2 AA）に完全準拠していることを保証します。
ユースケース
- SaaSダッシュボード向けのグローバルショートカット駆動ワークスペースコントローラーの設計
- 開発者向けポータルやドキュメント検索ポータル（APIリファレンスなど）の構造化
- エンタープライズCRMやCMSプラットフォーム向けの迅速なアクション管理パネルの実装
- 複雑で多層的なWebプロダクト内での統合コマンドラインインターフェース（CLI）の作成
使用すべきでない場合
- 静的マーケティングランディングページ： ユーザーの意図が純粋に探索的でコンバージョン重視の場合。グローバルナビゲーションバーと明確なコールトゥアクション（CTA）の方が効果的です。
- 浅い情報サイト（15ページ未満）： コマンドパレットの実装と習得のオーバーヘッドが、ナビゲーションの利点を上回る場合。
- シンプルなモバイル消費者向けサイト： 画面領域が最小限で、ユーザーが外部物理キーボードなしのタッチ操作に完全に依存する場合。
入力
- コマンドとアクションのインベントリ： 検索可能なアクション、ページ、設定、ドキュメントの包括的な分類。
- コンテキストマッピングルール： どのコマンドがグローバルで、どれがコンテキスト固有であるかのルール（例：「プロジェクトを削除」はプロジェクト表示中のみ表示）。
- キーボードショートカットシステム： アクションと物理キーボードショートカットのマッピング（例：「ダッシュボードに移動」には
G次にD）。 - ブランドデザイントークン： タイポグラフィスケール、色、スペーシング比率、シャドウトークン（
fluid-spacing-systemおよびfluid-typography-systemから）。
出力
- トリガーアフォーダンス仕様： 永続的なエントリポイントとキーボードショートカットバッジのビジュアルデザイン。
- パレットレイアウトアーキテクチャ： オーバーレイモーダル用のグリッド構造、結果のグループ化、カテゴリナビゲーション、ヘルパーフッター。
- コマンド行のビジュアル仕様： アイコン、コマンドタイトル、カテゴリバッジ、ショートカット注釈の階層仕様。
- キーボードとアクセシビリティ仕様： ARIA APG Combobox パターンに準拠した正確なキーボードイベントマッピングとARIA状態仕様。
ワークフロー
1. パレットトリガーとエントリポイントの確立
コマンドパレットはデフォルトで非表示であるため、発見可能なエントリポイントを設計する必要があります：
- 永続的なヘッダートリガー： グローバルヘッダー内の検索バーを模したボタン。虫眼鏡アイコン、「検索またはコマンドを実行...」などのテキストラベル、右寄せの物理キーボードショートカットバッジ（例
⌘KまたはCtrl+K）を備えます。 - フローティングコマンドボタン： ダッシュボード集約型または全画面ビューポートの場合、ビューポートの右下隅に控えめなトリガーボタンを配置します。
- 不可視のグローバルリスナー： ドキュメント上のどこでも（テキスト入力にフォーカスがある場合を除く）、
Cmd+K（macOS）またはCtrl+K（Windows/Linux）を押すと即座にパレットが開くことを保証します。
2. モーダルオーバーレイと背景（スクリム）の設計
- 背景（スクリム）： 高コントラストで半透明の背景（例
rgba(15, 23, 42, 0.4)）を使用して、背景ページを暗くし、注目をアクティブなタスクに完全に集中させます。 - 垂直配置： モーダルを水平方向に中央揃えにしますが、絶対的な垂直方向の中央ではなく、ビューポートの上部 10%～15% に固定します。これにより自然な視線の高さに合わせ、タッチスクリーン上の物理的な仮想キーボードのためのスペースを確保します。
- サイズ制限： 快適なスキャン範囲に幅を制限します。理想的には 600px～680px の間です。高さは動的とし、最大 450px～550px に制限して、小さなラップトップ画面でもオーバーフローしないようにします。
3. 内部レイアウトグリッドの構造化
コマンドパレットを4つの明確な水平ゾーンに分割します：
- 検索・フィルターゾーン： ボーダーレスで全幅の入力フィールド。目立つ検索アイコン（最小20px）を備えます。ユーザーをガイドするプレースホルダーテキスト（例：「コマンドを入力または検索...」）を使用します。
- カテゴリフィルターバー（オプション）： コンパクトなチップまたはセグメント化されたコントロールの水平行（例：「すべて」、「アクション」、「ページ」、「ユーザー」）。ユーザーが検索前に結果をフィルタリングできるようにします。
- 結果フィード（スクロールコンテナ）： グループ化されたヘッダー（例：「最近」、「ナビゲーション」、「システム設定」）を持つスクロール可能なリストボックス。
- ヘルパーフッター： 低コントラストのステータスバー。キーボードガイド（例：「↑↓で移動」、「↵で選択」、「escで閉じる」）を表示します。
+-----------------------------------------------------------+
| [検索アイコン] コマンドを入力または検索... [ESC] |
+-----------------------------------------------------------+
| ( すべて ) ( アクション ) ( ページ ) ( メンバー ) ( ヘルプ ) |
+-----------------------------------------------------------+
| 最近の検索 |
| [アイコン] 請求設定に移動 [ ⌘ G ] [ B ]|
| [アイコン] 新しい請求書を作成 [ ⌘ N ] |
| |
| ナビゲーション |
| [アイコン] ダッシュボード |
| [アイコン] チーム設定 [ ⌘ , ] |
+-----------------------------------------------------------+
| ↑↓で移動 | ↵で選択 | escで閉じる | ? ヘルプドキュメント |
+-----------------------------------------------------------+
4. コマンド行の視覚的階層の作成
結果リストの各項目は、ミリ秒単位でスキャン可能でなければなりません：
- 左寄せアイコン： 項目の種類を示す明示的で高コントラストなアイコン（例：ドキュメントにはファイルアイコン、アクションには設定の歯車、人物にはユーザーアバター）。
- プライマリラベル： コマンド自体のセミボールド、プライマリカラーのテキスト（例：「チームメンバーを招待」）。
- セカンダリサブラベル（オプション）： プライマリラベルの下または横に、文脈を与える薄暗い小さな説明文（例：「設定 > 組織」）。
- 右寄せショートカットバッジ： そのコマンドに関連付けられた物理キーボードショートカットを、小さな高コントラストなキーストロークバッジ（例
⌥I）で表示します。
5. インタラクティブ状態とキーボード選択の定義
コマンドパレットは主にキーボードで操作されるため、キーボード選択状態がマウスホバーよりも優先されます：
- アクティブ/フォーカスアイテム状態： 矢印キーで項目に移動した場合、目立つ背景塗りつぶし変更（プライマリライトトークンを使用、例
var(--color-primary-light)）と左境界インジケーターを適用します。プライマリテキストはブランドカラーに変更されます。 - ホバー状態（マウス）： アクティブキーボード状態をミラーリングします。マウスを項目に移動すると、二重フォーカス状態を防ぐためにキーボード選択が更新されます。
- 空の状態： 検索結果がない場合、代替アクションを示唆するクリーンで図解的な空の状態を表示します（例：「コマンドが見つかりませんでした。代わりにヘルプセンターを検索してみてください」と検索リンク）。
- ローディング状態： 検索クエリの結果が非同期で取得される場合、レイアウトシフトを引き起こすスケルトンカードを避け、検索入力の下部に控えめな線状のローディングインジケーターを表示します。
決定ルール
- 「Cmd+K 対 永続的検索」ルール: サイトの主な価値が構造化コンテンツの消費（eコマースカタログなど）である場合は、永続的な検索バーを使用します。価値が管理ワークフロー、コマンド実行、高密度ナビゲーションである場合は、
Cmd+Kコマンドパレットを使用します。 - グループ化制限ルール: 同時に3～4以上のカテゴリのコマンドを表示しないでください。各カテゴリの最大表示項目数を5に制限し、それ以上存在する場合は「さらに表示...」オプションを提供します。
- 「キーストローク数」ルール: コマンドの横に表示する物理キーボードショートカットは、3キーを超えてはいけません（例：
Ctrl+Shift+Pは許容、Ctrl+Alt+Shift+Zは複雑すぎる）。 - 動的コンテキストルール: アクティブなルートに基づいてコマンドを動的にフィルタリングします。ユーザーが請求ページにいる場合は、デフォルト（未入力）の結果リストの上部に「クレジットカードを更新」や「請求書PDFをダウンロード」を優先表示します。
制約
1. アクセシビリティ（WCAG 2.2 AA 最低限）
- ARIA Combobox パターン: ARIA Authoring Practices Guide (APG) に厳密に従ってマークアップを構成する必要があります：
- 入力コンテナには
role="combobox"、aria-expanded="true"、aria-autocomplete="list"、aria-controls="command-listbox-id"が必要です。 - 結果リストには
role="listbox"が必要で、各コマンド行にはrole="option"が必要です。 - ユーザーが矢印キーを押すと、入力は
aria-activedescendantをアクティブなオプションのIDに更新し、そのオプションにはaria-selected="true"が設定されていなければなりません。
- 入力コンテナには
- フォーカス管理: パレットを開くと、キーボードフォーカスをオーバーレイ内部に閉じ込める必要があります。
Tabキーの押下は、パレット内で循環するためにインターセプトするか、完全に無効にする必要があります（オプションナビゲーションには矢印キーを推奨）。パレットを閉じると、フォーカスを正確にトリガー要素に戻さなければなりません。 - スクリーンリーダーへの通知: 入力の隣に
aria-live="polite"およびaria-atomic="true"を持つ不可視のdivを配置します。検索時に、結果ステータスを動的にこの領域に挿入します（例：「12件の結果が見つかりました。上下の矢印キーを使って移動してください」）。 - コントラスト比: すべてのテキスト、ショートカットバッジ、フォーカスインジケーターは、WCAG AA（通常テキストは最低4.5:1、UI境界線と選択インジケーターは3:1）を満たす必要があります。
- 背景のロック: パレットがアクティブな場合、アプリケーションの残りの部分は
inertとしてレンダリングされ、スクリーンリーダーから隠されなければなりません。<dialog>.showModal()を使用して、フォーカスの閉じ込め、背景の減光、ネイティブのEscapeキーによる閉じる機能を実現します。
2. レスポンシブデザインとタッチ適応
- タッチビューポート調整: モバイル画面では、コマンドパレットを全画面オーバーレイまたは下部スライドドロワーに切り替える必要があります。
- 仮想キーボードの処理: 開いたら検索入力に自動フォーカスし、
inputmode="search"を使用して、モバイルデバイスが仮想キーボードに正しい「検索」アクションボタンを表示するようにします。 - 物理ヒントの非表示: タッチ専用デバイスでは、物理キーボードショートカットバッジ（例
⌘Kや⌥I）は無関係であり、視覚的な乱雑さを生むため非表示にします。 - タッチターゲットサイズ: 取り外し可能なタグ、カテゴリチップ、リスト行は、タッチスクリーン上で指タップに対応するため、少なくとも 44px の高さが必要です（WCAG 2.2 SC 2.5.8 に準拠）。
よくある失敗パターン
- 「無限スクロール」の罠: 結果フィードがスクロールコンテナなしで100件以上の一致をレンダリングし、画面をオーバーフローさせてフッターガイドにアクセスできなくなる。
- 背景のスクロールロックの欠如: ユーザーがコマンドパレットをスクロールナビゲーション中に、背景ドキュメントのスクロールを許容し、レイアウトの方向感覚を失わせる。
- 入力フォーカスの喪失: カテゴリチップや結果オプションをクリックし、テキスト入力からのキーボードフォーカスを失い、キーボードユーザーがタブで戻る必要が生じる。
- 理解不能なモバイル表示: 320pxのモバイル画面に小さなデスクトップ中央モーダルを維持し、プライマリラベルとショートカットバッジを切り詰める。
- トリガー状態ミラーの欠如: 永続的なヘッダーボタンにキーボードショートカットが表示されておらず、キーボードユーザーがコマンドパレットの存在に気づかない。
検証基準
- ヘッダーに明確な
Cmd+K/Ctrl+Kの視覚的ショートカットバッジを持つ永続的なトリガーボタンが存在する。 - ページ上の任意の場所で
Cmd+KまたはCtrl+Kを押すとモーダルが開く。 - キーボードフォーカスが即座に検索入力に移動し、背景ページのスクロールがロックされる。
- オプションのナビゲーションは上矢印キーと下矢印キーで行われ、非常に視認性の高いフォーカスアクティブ状態を持つ。
- オプション行は構造化された階層を持つ：左アイコン、太字のアクションタイトル、コンテキストルート階層、右ショートカットバッジ。
- ARIA APG Combobox パターンが完全に指定されており、
role="combobox"、role="listbox"、role="option"、aria-activedescendantが含まれている。 -
aria-live="polite"領域が存在し、検索結果数の変更をスクリーンリーダーに通知する。 - モバイルビューポートでは、パレットが全画面または下部ドロワーに適応し、物理ショートカットバッジを非表示にし、行の高さを最低44pxにサイズ変更する。
-
Escapeキーを押すか、背景スクリムをクリックすると、パレットが閉じてトリガーボタンにフォーカスが戻る。