Component Gallery

Screen Pattern

商品一覧画面（Product List Screen）UIの作り方

商品一覧画面は、複数の商品を比較しながら絞り込み、目的の商品詳細へ進むための画面です。

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

30秒でわかる要点

商品一覧画面は、複数の商品を比較しながら絞り込み、目的の商品詳細へ進むための画面です。

自前ワイヤーフレーム

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

主なユースケース

  • ・商品を一覧する
  • ・カテゴリや価格で絞り込む
  • ・並び替えで比較する

レイアウトの考え方

  • ・カード内の情報量を揃える
  • ・フィルタ条件を見える場所に置く
  • ・一覧と詳細への導線を明確にする

アクセシビリティ

  • ・カード全体リンクのラベルを明確にする
  • ・価格や在庫状態をテキストで示す
  • ・絞り込み解除を用意する

よくある失敗

  • ・カード情報が不揃い
  • ・フィルタ適用状態が分からない
  • ・売り切れ表示が色だけ

構成コンポーネント

カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。選択ボックス（Select）選択ボックス（Select）は、ドロップダウン形式で選択肢の一覧を表示し、ユーザーが選択するための入力コンポーネント。単一・複数選択のバリエーションがある。ページネーション（Pagination）ページネーション（Pagination）は、複数ページに渡るコンテンツを区切り、ページ間を移動するためのナビゲーション。ページ数・現在位置・前後移動ボタンで構成される。空の状態（Empty State）空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。

AI実装プロンプト

商品一覧画面実装

商品一覧画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

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

参照元

FAQ

商品一覧画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、card、badge、selectなどの構成要素を優先度順に配置します。

商品一覧画面でよくある失敗は何ですか？

カード情報が不揃い

商品一覧画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。