Component Gallery

Screen Pattern

検索結果画面（Search Results Screen）UIの作り方

検索結果画面は、検索条件に合う情報を一覧し、絞り込みや並び替えで目的の項目へ到達する画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

検索結果画面は、検索条件に合う情報を一覧し、絞り込みや並び替えで目的の項目へ到達する画面です。

自前ワイヤーフレーム

検索結果画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・キーワード検索を行う
  • ・フィルタで絞り込む
  • ・結果ゼロ時に次の行動を示す

レイアウトの考え方

  • ・検索条件と結果を近くに置く
  • ・結果件数を表示する
  • ・ゼロ件時の再検索導線を用意する

アクセシビリティ

  • ・検索結果件数をテキストで伝える
  • ・フィルタ解除を明示する
  • ・ページネーションの現在位置を伝える

よくある失敗

  • ・ゼロ件時に何も表示しない
  • ・フィルタ条件が見えない
  • ・結果件数が分からない

構成コンポーネント

テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。空の状態（Empty State）空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。ページネーション（Pagination）ページネーション（Pagination）は、複数ページに渡るコンテンツを区切り、ページ間を移動するためのナビゲーション。ページ数・現在位置・前後移動ボタンで構成される。

AI実装プロンプト

検索結果画面実装

検索結果画面をReact + Tailwind CSSで実装してください。検索バー、フィルタ、結果件数、空状態、ページネーション、モバイル表示を含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

検索結果画面でゼロ件のときはどう表示しますか？

検索語、絞り込み条件、次に試せる操作を表示します。単に「ありません」だけではなく、再検索の方向を示します。

検索結果画面で最初に決めるべきことは何ですか？

この画面でユーザーが完了したい主目的を1つに絞り、input、button、cardなどの構成要素を優先度順に配置します。

検索結果画面でよくある失敗は何ですか？

ゼロ件時に何も表示しない