あやね
あやね

公開日:2026年10月14日 更新日:2026年10月14日

検索ページは結果が0件になった時点で完成ではありません。何が起きたかを理解し、入力ミスや狭すぎるクエリから復旧し、役に立つ次の操作を選べる必要があります。まず検索UIデザインのワークフローで状態を整理し、「結果なし」を1つの汎用メッセージにせず、空結果、部分一致、読み込み、失敗をまとめてプロトタイプします。

クエリの復旧候補と明確な次の操作を備えた検索結果の空状態

検索が空になる理由を分ける

「結果がありません」には複数の意味があります。新しい訪問者はインデックス作成前に検索したかもしれません。戻ってきた利用者はスペルを間違えたかもしれません。チームメンバーは一致する記録への権限がないかもしれません。単にクエリが細かすぎる場合もあります。システムが証明できない説明を断定せず、対応できる理由を反映した状態ラベルを使います。

状態伝えること役立つ次の操作
一致なし現在の範囲ではクエリに一致しない。クエリを広げ、フィルターを外す、またはカテゴリを閲覧する。
入力ミスの可能性既知の語に似ているが完全一致しない。候補のつづりを試し、元のクエリは編集可能に保つ。
権限外の一致権限範囲の外に結果がある可能性がある。範囲を説明し、ポリシーが許せば権限申請を案内する。
インデックス作成中追加したばかりの作業はまだ検索できない可能性がある。項目へ戻るか後で再試行し、固定の待ち時間を約束しない。
検索利用不可サービスがリクエストを完了できなかった。クエリを保持して再試行し、検索以外の経路を示す。

空結果のたびに権限メッセージを表示しないでください。隠れた記録があると明かすこと自体が情報漏えいになります。権限外の一致と一致なしを安全に区別できないなら、中立的な空状態にし、記録の存在を確認せずサポートまたはアクセスの経路を示します。

説明より先に復旧経路を書く

最初の行は「今できること」に答えるべきです。コンパクトな空状態は次の順序にできます。

  1. クエリを平文で繰り返し、入力ミスに気付けるようにする。
  2. 「summer campagin に一致するプロジェクトはありません」のように1文で結果を伝える。
  3. 確度の高い修正候補または範囲を広げる選択肢を1〜2個出す。
  4. 検索欄をフォーカスしたまま、または簡単に開けるようにする。
  5. 検索が適さない場合は、最近のプロジェクトを閲覧するなど別の経路を出す。

たとえば「summer campagin」の後に「summer campaign」を提案し、「Archived」フィルターを外す操作と「すべてのプロジェクトを閲覧」を示せます。推測で10個も候補を出さないでください。選択肢が増えるほど復旧の判断が難しくなります。

候補を説明可能にする

候補はスペル修正、一致する語句、広いカテゴリなど、目に見える理由に基づけます。修正と新しい検索を区別します。「summer campaign」を選んだらクエリを更新し、適用したことを示します。「完全一致で検索」を選んだ場合は元の語を保ちます。クエリを黙って変えないでください。見えない書き換えは後の結果を信頼しにくくします。

フィルター、範囲、入力内容を保つ

空状態はクエリよりフィルターが原因であることがあります。メッセージの近くに有効なフィルターを表示し、1つずつ外せるようにします。フィルターを外して結果が変わったら、クエリを保持し、可能なら同じスクロール位置へ戻します。ミスのたびに全フィルターをリセットすると、意図を作り直させることになります。

プロジェクト検索では、現在のファイル、現在のチーム、許可された全ワークスペースのどこを検索しているかを明示します。広い範囲への権限がない場合、切り替えれば結果が見えるとは示さないでください。リクエストが失敗しても未送信のクエリを保持し、ネットワークエラーと正常な0件を区別します。

クエリ、フィルター、範囲、復旧操作を示すPixsoの検索状態プロトタイプ

イラストだけでなく遷移をテストする

状態変化を小さな判断モデルとしてプロトタイプします。クエリと範囲を決めて送信し、インターフェースが伝えられるすべての結果を試します。

トリガー表示結果受け入れ確認
完全一致読み込み状態が結果に置き換わる。クエリ、フィルター、結果数が理解できる。
0件復旧候補と閲覧経路が表示される。クエリを失わず明確な次の操作が1つある。
フィルターで全件消失原因のフィルターが特定される。そのフィルターだけを外し結果を比較できる。
リクエスト失敗エラーと再試行が表示される。クエリを保ち、盲目的に重複送信しない。
範囲変更結果と範囲ラベルが同時に更新される。根拠なく非公開権限の存在を示さない。

入力ミス、同義語、長い語句、特殊文字、空のクエリ、権限外の範囲だけで一致するクエリを含む小さなテストセットを使います。どの操作を使うか教えずに復旧してもらいましょう。空メッセージを読んでも次の操作を言えないなら、文言と階層を見直します。

モバイルとキーボードで行き止まりを作らない

狭い画面では、最初のビューポートにクエリ、結果状態、主要な復旧操作を収めます。候補はキーボードで到達でき、現在のクエリとの関係を読み上げます。失敗後は検索欄へフォーカスを戻すか、結果読み込み中なら選択した候補に留めます。「すべてクリア」だけを空状態から出る道にしないでください。役立つ文脈まで消えてしまいます。

インデックスが本当に空なら、権限モデルに合う場合だけプロジェクト作成や最近の項目を開く操作を最初の手順として示します。空画面を飾るのではなく、予想外の変更を最小にして作業を続けられるようにします。

空状態の契約を文書化する

引き渡し前に、検索サービスが区別できる空状態、候補が決定的かどうか、タイムアウト時の挙動を記録します。文言、フォーカス順、フィルター動作、分析イベント、権限外一致のプライバシー判断を含めます。簡潔な契約があれば、デザイン、開発、サポートが同じ「結果なし」画面を別々に解釈しません。

Pixsoでは、状態マトリクスを接続した画面の隣に置き、復旧経路を注記します。クエリから空結果、修正済みクエリ、再試行へ移る正確な遷移を、静止画に頼らずレビューできます。検索範囲や権限モデルが変わるたびに状態を再確認します。

ページ上部へ
Xで共有
Facebookで共有