ux-search

検索スキル

このスキルの動作 (最初にお読みください)

これは生成型のスキルです。既定の失敗パターンは次のとおりです: ボックスだけで終わる (入力が素のリストを返すだけ — 候補もなく、クエリの保持もなく、復帰手段もない)、行き止まり (「結果が見つかりませんでした。」で終わり)、そして機能の積み重ね (リッチな候補 + 急上昇 + 最近 + フィルター + チップをどこにでも配置し、検索が小さな補助機能でしかない場所にも盛り込む)。検索は旅です — 作成 → 候補提示 → 結果 → 絞り込み — そしてどの段階に投資すべきかは、ユーザーがどのように探すかによって決まります。このスキルが定める基準は次のとおりです:

1. ユーザーがどのように探すか、検索がどれほど中心的かを明らかにする — これがどの段階に投資するかを決めます。
2. 常に成り立つ中核を適用する — 見つけやすい配置、機能する入力の慣習、候補提示の基本、ざっと見渡せる結果ページ、行き止まりの排除。
3. 文脈依存の判断事項 (リッチな自動候補、フィルターのレイアウト、チップ、表示オプション) をトレードオフとともに浮かび上がらせる。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。

---

ステップ 0 — 設計前に文脈を明らかにする

不明な場合は尋ねてください。回答なしで進める場合は前提を明示してください:

• ここではユーザーはどのように探しますか? 既知項目 (欲しいものを名指しできる — 入力、自動候補、再発見に投資する) か、探索的・半志向的 (漠然としたニーズが変化していく — 候補、関連検索、フィルター、閲覧に投資する) か。再発見は慢性的に手薄です: 最近の検索と履歴はどこでも効果を発揮します。
• 検索はどれほど中心的ですか? 検索優先のプロダクト (eコマース、ドキュメント、予約) → 常設で目立つ検索とリッチな結果ページ。緊急時の逃げ道としての検索 → より簡素な扱いでよいが、それでも見つけられるように。
• プラットフォーム — モバイル: 常設の検索 (検索中心のアプリ) か、展開式のアイコン (検索が二次的なアプリ) か。フィルターはフィルターボタンの背後に隠す。片手で快適に操作できるターゲット。
• 結果の種類 — 画像付きの商品か、ドキュメントか、データ行か: リストかグリッドか、そして結果行に何を表示するかを左右します。

情報のニーズは検索の途中で変化し、人は素早く閲覧する (ほとんどのページ訪問は10秒未満) ことを忘れないでください — 完璧な1回のクエリではなく、反復とスキャンを想定して設計します。

---

常に適用する中核 (ほぼすべてのケースで正しい)

入力

• ユーザーが探す場所に検索を置く: すべてのページの上部中央または上部右。決してハンバーガーメニューの背後に置かない。デスクトップでは、アイコンだけでなく入力欄そのものを表示する。
• 虫眼鏡アイコンはバーの中に、そして機能するボタンであること — クエリを送信します。
• 入力幅は約27文字 — 窮屈な入力は、窮屈で質の低いクエリを生みます。
• プレースホルダー = クエリの例 (「フライト、ホテル、目的地を検索」)、入力済みテキストと誤読されないよう控えめな色で — 決してラベルの代用にしない。

候補 (作成の段階)

• ユーザーが入力するそばから自動候補を表示 — タイプミスが減り、認知負荷が下がり、クエリが速くなります。ドロップダウン内は約10件まで、スクロールなしに制限します。
• 入力した文字と候補の文字を視覚的に分ける (太字/色) ことで、各候補がなぜ表示されているかをユーザーがざっと把握できるようにします。
• 入力欄にフォーカスしたときに最近の検索を表示 — 再発見のための、想起よりも認識を優先。

結果ページ

• クエリを表示したまま、編集可能に保つ — 最初の試行はたいてい調整が必要です。決して再入力させないでください。
• 一致件数を表示する — 絞り込むべきか、広げるべきか、見始めるべきかをユーザーに伝えます。
• 結果内で一致したキーワードを強調表示する — ユーザーは読むのではなく、ざっと見ます。
• 読み込みも体験の一部です: 結果領域にはスケルトン画面を。待ち時間が長い場合は、短い説明を添えた進捗表示/スピナーを。
• ページネーションの種類はコンテンツに合わせる (ページネーションか無限スクロールかの判断とコントロールの仕様については ux-navigation を参照)。

行き止まりは決して作らない

素の「結果が見つかりませんでした」は、検索における最悪の失敗です。結果なしのページは、常に先に進む手段を提供します: 代替クエリの候補、カテゴリへのリンク、類似/関連アイテム、または過去の行動に基づくおすすめ。

---

文脈に依存する判断 (表面化させ、自動適用しない)

判断事項	適用する場合	避ける / 適応させる場合	デフォルトの推奨
リッチな自動候補表示 (サムネイル、カテゴリリンク、商品プレビュー)	視覚的な商品を伴う既知項目の探索 (eコマース)	シンプルなユーティリティ検索 — 情報過多はドロップダウンを遅くする	まずはシンプルなクエリ候補。認識が本当に選択を速める場合にのみ情報を追加
入力前のトレンド / 関連検索	インスピレーションが役立つ探索型プロダクト (ストア、メディア)	ノイズになるタスクツール	発見主導のプロダクトにのみ表示
永続型 vs. 展開型の検索 (モバイル)	検索中心のアプリでは永続型。それ以外ではスペース節約のため展開型アイコン	検索優先アプリで検索を隠す	検索の中心度に合わせて目立たせる
フィルター	絞り込みが必要なほど結果セットが大きい場合	十数件の結果 (フィルターはオーバーヘッド)	表示するフィルターは5〜7個、残りは「その他のフィルター」の背後に。最も使われるものを先頭に (データから)。複数選択にはチェックボックス。馴染みのある言葉 (「Textile」ではなく「Fabric」)
フィルターのレイアウト	縦型サイドバー: フィルターグループが多い場合、デスクトップ。横型パネル: 少数で目を引く場合。モバイル: 結果の上にあるフィルターボタンの背後に配置	グループが多い横型 (画面を圧迫)、ユーザーが見落とすサイドバー	フィルターが多いデスクトップには縦型。数個以下なら横型。モバイルでは隠す
自動更新 vs. 適用ボタン	フィルター変更時に結果を自動更新 (インタラクションコストが低い)	低速接続 / 重いクエリ — 一致件数を表示する適用ボタンでバッチ処理	高速なら自動更新。そうでなければ適用+件数
フィルターチップ	コンパクトでタップ可能な絞り込み (「営業中」、「価格: $$」) が結果をその場で更新。適用済みフィルターの概要タグに × で解除	単一選択と複数選択のチップセットを1ページに混在させる。48px未満のタッチターゲットのチップ	クイックフィルター+適用済みフィルター概要にはチップ。深い絞り込みにはフルパネル
並べ替え	比較可能な項目 (価格、日付、人気) には常に — ユーザーはフィルターより並べ替えを好むことが多い	フィルターパネルに統合する (メンタルモデルが異なる)	独立した、目に見える並べ替えコントロール
リスト vs. グリッド表示	リスト: スペック比較 (型番、評価)。グリッド: 視覚的な商品	混在コンテンツに1つの表示を強制する	適合する方をデフォルトに。表示切替を提供

---

結果を検証する (オーケストレーション)

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。

生成または修正した後は、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補レンズです — 姿勢は docs/orchestration-policy.md で設定されるか、全体を ux-design-review 経由でルーティングします。ここでは、heuristics と microcopy は Tier A (自動実行)、accessibility、aesthetics、information-architecture、mobile-responsiveness は Tier B (提案) です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用状況に絞り込まれます。mobile-responsiveness はモバイルの場合にのみ適用されます。ユーザーが特定の目的でこのスキルを呼び出した場合は、そのスコープを尊重してください。

• ux-heuristics-audit (Tier A) — システム状態の可視性 (読み込み、一致件数、適用されたフィルターが二重に表示される)、ユーザーによる制御 (フィルターの全解除、編集可能なクエリ)、記憶よりも認識 (最近の検索)。
• ux-accessibility-audit (Tier B — 提案; デザインシステムがある場合は絞り込み) — 候補ドロップダウンのキーボード操作、タッチターゲット (チップは 48px 以上、間隔は 8px 以上)、コントラスト、入力と結果の間のフォーカス管理。
• ux-aesthetics-audit (Tier B — 提案; デザインシステムがある場合は抑制) — 結果ページの密度とスキャンしやすさ、ドロップダウンの雑然さ、フィルターパネルの視覚的な整理。
• ux-microcopy-audit (Tier A) — プレースホルダーの例、ユーザーの言葉によるフィルターラベル、結果なしメッセージのトーンとガイダンス。
• ux-information-architecture-audit (Tier B — 提案) — 検索に供給されるコンテンツ構造 (カテゴリ、ファセット、メタデータ) が探索モードを支えているか、また閲覧パスが検索を補完しているか。このスキルは検索ジャーニーを設計し、IA はそれが検索する構造を所有します。
• ux-mobile-responsiveness-audit (Tier B — 提案; モバイルの場合にのみ適用) — コンテキストがモバイルの場合: 展開可能/常時表示パターン、隠されたフィルター、片手での到達性。

監査によって相反する指摘 (例: リッチな候補とドロップダウンの速度・明瞭さ) が浮上した場合は、主要なタスクに立ち返って解決してください。ユーザーが望んでいるのは目的のものを見つけることであり、すべての機能はその道のりを短くするものでなければなりません。

---

よくある do/don't パターン

❌ しない	✅ する
デスクトップでハンバーガー / アイコンのみの背後に検索を隠す	フィールドを常時表示、上部中央/右、すべてのページに
二語しか入らない小さな入力欄	約 27 文字 — キーワードで考える余裕
25 件スクロールする候補ドロップダウン	10 件以下、スクロールなし、入力語と候補を視覚的に分割
結果が読み込まれるとクエリが消える	クエリは残り、編集可能
「結果が見つかりません。」だけで他に何もない	代替案: 修正クエリ、カテゴリ、関連項目
件数のない素の結果リスト	一致件数 + ハイライトされたキーワード
サイドバーに 20 個のフィルターを詰め込む	5〜7 個を表示、人気順、残りは「その他のフィルター」の背後に
設定後に適用済みフィルターが見えない	二重に表示: パネルでチェック + 削除可能な概要タグ
並べ替えがフィルターの中に埋もれている	独立した並べ替えコントロール — 異なるメンタルモデル
組み合わせ可能な条件にラジオボタン	チェックボックス / 複数選択チップ
結果の読み込み中に空白画面	スケルトンスクリーン、長時間待機にはスピナー + 説明
確認せずに出荷	ヒューリスティクス + アクセシビリティ + 美学 + マイクロコピーに引き渡す

---

出典レッスン (Uxcel)

• How to Design Good Search Experiences in UIs
• Best Practices for UI Search Design
• How People Seek Information
• Best Practices for Filtering & Sorting Design
• How to Design UI Chips for Filtering & Selection