search

ユーザーが探しているものをはっきりと把握していない場合でも、必要なものをすばやく見つけられる検索エクスペリエンスを構築します。最初から完璧な関連性を実現することが目的ではありません。柔軟な検索と分かりやすい検索結果を通じて、ユーザーを意図から目的の達成へ導くことが目標です。

オートコンプリートのパターン、フィルターの構成、検索結果の表示、検索結果がゼロの場合のリカバリーについては、検索とフィルタリングの UX のリファレンスを参照してください。 サイト検索、入力中の候補表示、コマンドパレット、意図を考慮した見つけやすさについては、検索と見つけやすさ のリファレンスを参照してください。 長い検索結果の一覧、ファセット検索、フィルターオーバーレイについては、コレクションの閲覧とフィルタリング のリファレンスを参照してください。 おすすめ、スマートデフォルト、再開フローについては、予測型 UI と意図駆動型 UI のリファレンスを参照してください。

必須の事前準備

ユーザーは /search を使ってこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。ここには設計原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前に、このプロトコルに従ってください。設計コンテキストがまだない場合は、必ず最初に $setup を読み込んでください。さらに、ユーザーが通常どのような検索をするか、よくある検索クエリが失敗する理由、検索対象データセットの規模を確認してください。

検索ニーズの評価

インターフェースを設計する前に、検索の状況を把握します。

1. 検索意図：ユーザーは特定の項目を探していますか（既知項目検索）、カテゴリを探していますか（探索型）、それともタスクを完了しようとしていますか（トランザクション型）？
2. データセットの規模：小規模なデータセット（100 項目未満）では、検索は不要な場合があります。フィルタリングやカテゴリ分けで十分なこともあります。大規模なデータセットでは、ファセット検索とランキングが必要です。
3. クエリのパターン：ユーザーは実際に何を入力しますか？よくあるスペルミス、同義語、省略形に対応する必要があります。
4. 失敗時の動作：検索結果がない場合、どうなりますか？検索結果が多すぎる場合はどうなりますか？

検索インターフェースの設計

クエリ入力

• 汎用的な文言ではなく、具体的なプレースホルダーテキスト（「"プロジェクト アルファ" を検索」など）を使用します
• ユーザーが入力すると、クリアボタンを表示します
• Enter キーで検索を実行できるようにします。ライブ検索の結果だけに頼らないでください
• 装飾的なアイコンだけでなく、見える検索ボタンを設置します
• 検索範囲（「すべて」、「製品」、「ヘルプ」）を選択できる場合は、選択肢を分かりやすく表示し、変更可能にします

オートコンプリートと候補

• 2～3 文字の入力後に候補を表示します
• 最近の検索、人気のクエリ、製品、ヘルプ記事など、種類ごとにグループ化します
• 一致した部分文字列を太字で表示します
• 矢印キーでの移動、Enter キーでの選択、Escape キーでの終了に対応します
• モバイルでは、候補をスクロール可能にし、表示領域からはみ出さないようにします
• 一致する候補がない場合は、空のリストではなく役立つメッセージを表示します

フィルターとの連携

• フィルターが多い場合は、幅の広いレイアウトではサイドバーフィルターを使用します
• 主要なフィルターが少数の場合は、トップバーを使用します
• 狭いレイアウトでは、ドロワー／オーバーレイを使用します
• 適用中のフィルターは、直接削除できるインラインチップで表示します
• 共有できるよう、フィルターの状態を URL と同期します
• 折りたたまれている場合は、適用中のフィルター数を表示します

検索結果の表示

検索結果の一覧

• 明確な階層構造にします。タイトル、メタデータ、抜粋、サムネイルを表示します
• タイトルと抜粋で、検索クエリに一致する語句を強調表示します
• すべての検索結果で書式を統一します
• 各検索結果は明確なリンクにするか、主要なアクションを用意します

空の状態

• 検索クエリを明示します（「'xyz' の検索結果はありません」）
• スペルの修正候補、関連語句、より広いカテゴリなどの代替案を提案します
• フィルターが適用されている場合は、フィルターをクリアできるようにします
• フォールバックとなるアクションを用意します（「すべてを閲覧」、「サポートに問い合わせる」）

ランキングの操作

• ユーザーが並べ替え順（関連性、価格、日付、評価）を変更できるようにします
• デフォルトの並べ替え順を明示し、それがデフォルトである理由を説明します
• 検索結果を優先表示する場合は、「おすすめ」などのラベルを付けて明示します

ページネーションと読み込み

パターン	最適な用途
ページネーション	大量の検索結果、SEO が重要なページ、特定のページを参照するユーザー
無限スクロール	コンテンツの閲覧、画像ギャラリー、ソーシャルフィード
さらに読み込む	バランスの取れた方法。読み込みのタイミングをユーザーが選べます

• 読み込み中は、検索結果のレイアウトに合ったスケルトンスクリーンを表示します
• 可能であれば、新しい結果の読み込み中も以前の結果を表示し続けます

アクセシビリティ

• スクリーンリーダー向けに、検索結果件数の変更を通知します
• aria-controls を使用して、フィルターの操作部と検索結果の領域を関連付けます
• 変更時に、有効なフィルターが通知されるようにします
• フィルターから検索結果へ移動できるスキップリンクを用意します
• 候補やフィルターをキーボードで操作できるようにします

アンチパターン

• 大文字と小文字を区別する検索：ユーザーが大文字・小文字を推測する必要があってはなりません
• 検索中に視覚的なフィードバックがない：何も表示されない検索は、壊れているように感じられます
• 検索結果がゼロ件になるフィルター：無効な組み合わせは無効化するか、非表示にします
• 圧倒的なフィルターパネル：フィルターが多すぎると、選択できなくなります
• 有効なフィルターが隠れている：ユーザーは何を絞り込んだか忘れてしまいます
• 更新時にフィルター状態が失われる：フィルターは URL に保持する必要があります
• フッターにアクセスできない無限スクロール：ユーザーがフッターのリンクにたどり着けません
• 完全一致が必須の検索：あいまい検索と語幹処理は不可欠です
• 検索結果がゼロ件のときに回復手段がない：案内のない空の画面では、先に進めません
• カーソルを乗っ取るオートコンプリート：候補を自動送信してはいけません

検索品質の検証

リリース前に、次の項目を確認します。

• 検索が誤字、部分一致、一般的な同義語に対応している
• オートコンプリートをキーボードで操作でき、モバイルでも使いやすい
• 有効なフィルターが表示され、個別に削除できる
• フィルターの状態が URL に反映されている
• 検索結果がゼロ件のページに代替案と復旧手段がある
• ユーザーが検索結果のランキングを変更できる
• 読み込み中の表示が検索結果のレイアウトに合っている
• スクリーンリーダーが検索結果件数とフィルターの変更を通知する
• フォーカス管理が論理的な流れに沿っている
• 現実的な検索語句や誤字を使って検索がテストされている