使い方ガイドへスキップ
Search UX作者 Owl-Listener

Search UX スキル。

失敗する検索も含め、情報取得の体験全体をデザインします。

  • インタラクションデザイン
  • 検索
ソースレビュー · Search UXSKILL.md
タスク インタラクションデザイン 成果物 • 検索入力とサジェストの仕様。 • 結果カードまたは結果行の内容とフィルターの挙動。 • 検索結果ゼロ時のリカバリーと、検索行動を計測するための要件。 始める前に 検索サービスとクエリの計測は、このガイダンスの対象外です。
編集部による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

ユーザーが立て直せる検索をデザインする

入力、サジェスト、ランキングの見せ方、絞り込み、結果ゼロ時のリカバリーまでを網羅した、検索インターフェースの完全ガイドです。

ソースに基づくワークフロー実行ベンチマークではありません

進め方

Search UXは、クエリの入力から、どの結果を開くか決めるまでの流れを扱います。検索を単独の入力ボックスとして扱うのではなく、サジェスト、キーボード操作、結果のグルーピング、スニペット、メタデータ、絞り込みを考慮します。また、コンテンツ項目ではなく設定のような目的地を探す人がいることも踏まえています。

最も重視しているのはリカバリーです。結果ゼロの画面では、入力したクエリを保持し、何を検索したかを説明し、関連する修正案や別の経路を提示する必要があります。これらはインターフェース上の要件であり、タイポ許容、関連度ランキング、パーソナライズの実装は実際の検索システムに依存します。

想定される成果物

  • 検索入力とサジェストの仕様。
  • 結果カードまたは結果行の内容とフィルターの挙動。
  • 検索結果ゼロ時のリカバリーと、検索行動を計測するための要件。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    検索対象を定義する

    コンテンツの種類とナビゲーション上の目的地を一覧にし、クリックの判断に結果が備えるべき情報を選びます。

  2. 02
    検索と絞り込みを仕様化する

    クエリの保持、サジェスト、キーボード移動、結果件数、個別に解除できるフィルターを設計します。

  3. 03
    うまくいかなかった検索に対応する

    対応可能な場合は修正案やより広い経路を提示し、観察すべきクエリや離脱のシグナルを特定します。

02 利用場面

使う場面

検索サービスとクエリの計測は、このガイダンスの対象外です。

適したケース

  • 大規模なカタログ小さな階層をたどるのではなく、属性でアイテムを探し出す必要がある場合に役立ちます。
  • 検索のリカバリー現状ではタスクがそこで終わってしまう空の結果画面を、改善するのに役立ちます。

確認すべき制約

  • 検索エンジンではありませんこのソースはインデックス基盤を提供せず、ランキングアルゴリズムも実装しません。
  • ブラウズ構造の代わりにはなりません優れた検索インターフェースがあっても、分かりやすいカテゴリーやナビゲーションは引き続き必要です。

用意するもの

  • コンテンツの種類検索対象のフィールドと、ユーザーが結果を見分けるために必要なメタデータを提供してください。
  • クエリの根拠データ可能であれば、よくあるクエリ、結果ゼロの例、ナビゲーション目的の検索を含めてください。
  • バックエンドの機能タイポ対応、フィルター、並べ替え、パーソナライズが利用可能かどうかは、前提とせず明記してください。

03 重要な判断

重要な判断ポイント

  1. なぜその結果が一致したのかを説明する

    役に立つスニペットや一致フィールドの手がかりがあれば、結果を開く前の当て推量が減ります。

  2. フィルターは元に戻せる

    見えていて個別に解除できるフィルターは、絞り込まれた結果を理解し、取り消す助けになります。

04 依頼例

絞ったブリーフで試す

以下のサンプルブリーフはテストされていません。使用する前に、スキルのセットアップを確認してください。

セットアップを確認する

リポジトリに記載されているインストール手順を使い、参照されている付属ファイルも保持してください。このエントリーが説明するのは実行可能なアプリケーションではなく、焦点を絞ったデザイン手法です。

上流のソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/search-ux/SKILL.md

検索サービスとクエリの計測は、このガイダンスの対象外です。

まず一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、ソース資料、制約を状況に合わせて調整してください。

サンプルブリーフ
デザインテンプレート、著者、チュートリアルを含むライブラリにsearch-uxを使います。サジェスト、グルーピングされた結果、解除できるフィルターを設計してください。スペルミスによる結果ゼロのクエリと、アカウント設定へのナビゲーション目的のクエリを含めてください。検索バックエンドの作業が必要な挙動には印を付けてください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 入力したクエリが、絞り込み後や結果ゼロの状態でも保持される。
  • 適用中のフィルターが表示され、解除できる。
  • 結果のメタデータが、似たタイトルを見分ける助けになる。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェアの依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、以下にリンクされた固定リビジョンのソースについて説明しています。上流の挙動や要件は変更される可能性があります。

ソースの所有者
Owl-Listener
ライセンス
MIT
確認済みスナップショット
2026-10-07 · 9a6930cf84a8
編集部によるソース要約
入力、サジェスト、ランキングの見せ方、絞り込み、結果ゼロ時のリカバリーまでを網羅した、検索インターフェースの完全ガイドです。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付付きの人気の目安であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

タイポ許容を追加できますか?

望ましい挙動を仕様として示すことはできます。ただし、その挙動は検索バックエンドが対応または実装している必要があります。

結果は常にグリッドで表示すべきですか?

いいえ。ソースでは、流し読みしやすいリストと、ビジュアルのサムネイルが主な選択手がかりとなるグリッドを区別しています。

なぜナビゲーション先を含めるのですか?

クエリの中には、ドキュメントを探すのではなく、プロダクト内の既知の場所へ行きたいという意図を表すものがあります。

OpenDesign

次のデザイン反復のための余白をつくりましょう。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに加える前に、スキル自体のセットアップを確認してください。

上流のソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/search-ux/SKILL.md