coastdigitalgroup/coastai-skills

検索インターフェースシステム

目的

検索インターフェースシステムは、一貫性のある高性能な発見体験を設計するための方法論を提供します。internal-search-optimizationが「成長」とロジック面に焦点を当てるのに対し、このシステムは検索UIのデザインパターンと空間的エルゴノミクスを定義します。これにより、ユーザーが検索エントリポイントを即座に見つけ、モバイルでも楽に操作し、認知的負荷を最小限に抑えつつ「情報の香り」を最大化する方法で結果を処理できるようになります。

ユースケース

• グローバルヘッダーや固定ツールバーでの検索エントリポイントの設計。
• SaaSアプリケーション向けの「コマンドセンター」または「オムニボックス」体験の作成。
• Eコマースの「ビジュアル検索」とオートコンプリートドロップダウンの構造化。
• ドキュメントやカタログ向けの高密度検索結果ページ（SERP）の設計。
• モバイルファーストデザイン向けの「全画面検索」オーバーレイの実装。

使用すべきでない場合

• 静的ランディングページ： コンテンツが固定されており、発見が主な目的ではない場合。
• マイクロサイト（20ページ未満）： 堅牢なナビゲーションとパンくずリストで発見性が十分に確保できる場合。
• 純粋に関連性ベースのダッシュボード： フリーテキスト検索ではなく、定義されたフィルターとタブでのみデータにアクセスする場合。

入力

1. ユーザーインテントプロファイル： ユーザーは特定のSKU（正確性）を探しているのか、トピックを探索（発見）しているのか？
2. カタログ密度： システム内のアイテム数と、メタデータの多様性はどの程度か？
3. プライマリデバイス： 検索は主にモバイル（タッチ）かデスクトップ（キーボード）で使用されるか？
4. 既存システム： カラーシステム、スペーシングトークン、タイポグラフィスケール（fluid-spacing-systemおよびfluid-typography-systemから）。

出力

1. 検索トリガー仕様： 検索バー（静的、拡張可能、またはアイコンのみ）の視覚的定義。
2. オートコンプリートアナトミー： カテゴリ、画像、キーボード状態を含むサジェストドロップダウンの設計。
3. SERPレイアウト設計図： メタデータ密度と可読性のバランスをとった結果ページの空間的構成。
4. モバイルインタラクションマップ： 検索がヘッダーアイコンから全画面フォーカスインターフェースにどのように遷移するかの計画。

ワークフロー

1. 検索トリガーパターンの定義

ユーザージャーニーにおける重要度に基づいてトリガーを選択します：

• 固定バー： 常に表示され、高コントラストの入力フィールド。Eコマースや検索中心のサイトに最適。
• 拡張可能入力： アイコンまたは小さなバーとして始まり、クリックで拡張。検索がナビゲーションよりも二次的なサイトに最適。
• 「Command + K」トリガー： モーダルを開く控えめなヒントまたはアイコン。パワーユーザー向けSaaSツールやドキュメントに最適。

2. オートコンプリート（インスタント）体験の設計

即時のフィードバックを提供することで「結果までの距離」を短縮します：

• カテゴリ化： 結果をタイプ別にグループ化（例：商品、記事、ヘルプ）。
• リッチメタデータ： ドロップダウン内に小さなサムネイル、価格、ステータスバッジを含める。
• フォーカス状態： interactive-state-systemを使用して、キーボードユーザー向けに現在選択されているサジェストを明確にハイライトする。
• ARIAパターン： カスタムインタラクションモデルを考案する代わりに、ARIA APGコンボボックスパターン（role="combobox"、aria-expanded、aria-controls、aria-activedescendantがハイライトされたrole="option"を指す）に基づいて入力/リストボックスの関係をモデル化する。

3. 結果ページ（SERP）階層の確立

visual-hierarchy-systemを検索結果に適用します：

• 「クエリエコー」： ユーザーの検索語を目立つように表示してコンテキストを確認する。
• 結果カード： card-ui-systemを使用して結果フォーマットを標準化する。
• メタデータの重み付け： タイトルを最も目立たせ、次に「スニペット」（クエリに一致するコンテンツの部分）を目立たせる。

4. モバイル発見レイヤーの構築

モバイルでの検索はウィジェットではなく、専用モードです：

• モードシフト： 検索をタップすると全画面オーバーレイを開き、背景の邪魔な要素を排除する。
• オートフォーカス： 入力に自動的にフォーカスし、キーボードを起動する。
• 「サムゾーン」アクション： 「クリア」ボタンと「キャンセル」ボタンを手の届きやすい場所（最小44x44px）に配置する。

5. ローディング状態と空状態の定義

• スケルトン結果： skeleton-state-systemを使用して、結果取得中もレイアウトの安定性を維持する。
• スマートな「該当なし」表示： empty-state-systemを使用して、完全一致が見つからない場合に代替パスを提供する。

決定ルール

• 可視性ルール： 検索がユーザーの30%以上に使用されている場合、デスクトップでは固定の全幅バーにする必要があります。
• 「3単語」最小ルール： ユーザーが少なくとも3文字入力するまで自動サジェストを表示しない（視覚的なちらつきを防ぐため）。
• 結果制限： オートコンプリートのサジェストは5〜8項目に制限します。それ以上存在する場合は、「'...'のすべての結果を表示」リンクを提供します。
• 情報の香り： 検索結果スニペット内の一致する用語を太字にして、ユーザーが関連性をすばやくスキャンできるようにします。

制約

• アクセシビリティ： 検索入力には表示ラベル（またはaria-label）が必要です。キーボードユーザーは矢印キーでオートコンプリートリストをナビゲートし、Enterで選択し、Escapeで入力を失うことなく閉じることができなければなりません。すべてのインタラクティブターゲット（クリアボタン、サジェスト行）はWCAG 2.2の24x24px最小ターゲットサイズ（2.5.8）を満たす必要があります。
• レスポンシブ対応： オートコンプリートドロップダウンはビューポート幅を超えてはなりません。
• コントラスト： 一致テキストのハイライトはWCAG AAのコントラスト比を満たす必要があります（通常、背景色の変更または太字を使用）。

よくある失敗パターン

• 「隠れた検索」： 検索が主要なナビゲーション手段であるにもかかわらず、ユーザーに虫眼鏡アイコンを探させる。
• 「切り離された」ドロップダウン： 入力の幅や配置と一致しないオートコンプリートメニューにより、視覚的な「浮遊感」が生じる。
• キーボードトラップ： Escapeキーで検索オーバーレイやドロップダウンを終了できない。
• 行き止まりの結果： 結果ページで入力ボックスに検索語が保持されず、絞り込みたい場合にユーザーが再入力しなければならない。

検証基準

• 検索エントリポイントがページスキャンから2秒以内に表示される。
• オートコンプリートドロップダウンに、適切な場合はリッチメタデータ（画像/ラベル）が含まれている。
• キーボードナビゲーション（矢印、Enter、Escape）が検索に対して完全に定義され、ARIA APGコンボボックスパターンに従っている。
• モバイル検索で全画面モードが開き、即座にキーボードフォーカスが当たる。
• 検索結果ページがクエリをエコーし、一致する用語をハイライトしている。
• 結果ローディングにスケルトン状態が使用されている。
• すべてのインタラクティブ要素が44x44pxのタッチターゲット最小値を満たしている。