search

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

オートコンプリートのパターン、フィルターのアーキテクチャ、結果の表示、検索結果がない場合のリカバリーについては、検索とフィルタリングの UX のリファレンスを参照してください。 サイト内検索、入力候補、コマンドパレット、意図を考慮した見つけやすさについては、検索と見つけやすさ のリファレンスを参照してください。 長い結果リスト、ファセット検索、フィルターオーバーレイについては、コレクションの閲覧とフィルタリング のリファレンスを参照してください。 レコメンデーション、スマートなデフォルト設定、再開フローについては、予測型 UI と意図に基づく UI のリファレンスを参照してください。

必須の事前準備

frontend-design を読み、Context Gathering Protocol に従ってください。利用可能なコンテキストを再利用し、重大な情報が不足している場合に限って質問してください。さらに、ユーザーが通常何を検索するのか、よくある検索クエリがどのような場合に失敗するのか、検索対象のデータセットがどの程度の規模なのかを把握してください。

検索ニーズを評価する

インターフェイスを設計する前に、検索の文脈を理解してください。

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

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

クエリ入力

• 汎用的なプレースホルダーではなく、具体的なテキスト（「"project alpha" を検索」など）を使用します
• ユーザーが入力した後に、クリアボタンを表示します
• Enter キーで検索を実行できるようにします。ライブ検索結果だけに頼らないでください
• 装飾的なアイコンだけでなく、視認できる検索ボタンを含めます
• 検索範囲を選択できる場合（「すべて」、「製品」、「ヘルプ」）、選択肢がわかりやすく、変更可能であることを示します

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

• 2～3 文字の入力後に候補を表示します
• 種類ごとにグループ化します：最近の検索、よく検索されるクエリ、製品、ヘルプ記事
• 一致する文字列を太字にします
• 矢印キーでの移動、Enter キーでの選択、Escape キーでの閉じる操作に対応します
• コンパクトなビューポートでは、候補をスクロール可能にし、画面からはみ出さないようにします
• 一致するものがない場合は、空のリストではなく、役立つメッセージを表示します

フィルターとの連携

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

検索結果の表示

結果リスト

• 明確な階層を設けます：タイトル、メタデータ、抜粋、サムネイル
• タイトルと抜粋で、検索クエリに一致する語句を強調表示します
• すべての結果で書式を統一します
• 各結果は、わかりやすいリンクにするか、主要なアクションを持たせます

空の状態

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

ランキングの操作

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

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

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

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

アクセシビリティ

• スクリーンリーダー向けに、検索結果数の変更を通知します
• aria-controls を使って、フィルターコントロールを検索結果の領域に関連付けます
• フィルターが変更されたときに、アクティブなフィルターが通知されるようにします
• フィルターから検索結果へ移動するスキップリンクを用意します
• 候補とフィルターのキーボード操作に対応します

アンチパターン

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

検索品質の確認

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

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