Component Gallery

Screen Pattern

商品詳細画面（Product Detail Screen）UIの作り方

商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。

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

30秒でわかる要点

商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。

自前ワイヤーフレーム

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

主なユースケース

  • ・商品仕様を確認する
  • ・購入または問い合わせへ進む
  • ・レビューや関連商品を見る

レイアウトの考え方

  • ・主要画像と購入導線を近くに置く
  • ・詳細情報は折りたたみで整理する
  • ・在庫や配送条件を購入前に示す

アクセシビリティ

  • ・画像に内容が分かるaltを付ける
  • ・レビュー点数をテキストでも表す
  • ・数量変更をキーボードで操作できるようにする

よくある失敗

  • ・CTAが画面下に埋もれる
  • ・配送条件が見つけにくい
  • ・画像だけで仕様を伝える

構成コンポーネント

カルーセル（Carousel）カルーセル（Carousel）は、複数の画像やカードを横スクロールまたは自動再生で切り替えて表示するコンポーネント。ドット・矢印などのナビゲーターを持つ。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。アコーディオン（Accordion）アコーディオン（Accordion）は、ヘッダーをクリックすることでコンテンツを展開・折りたたみできるコンポーネント。FAQやコンテンツのグループ表示に使用される。評価（レーティング）（Rating）評価（レーティング）（Rating）は、星や数値でユーザーの評価を入力・表示するコンポーネント。読み取り専用・インタラクティブのバリアントがある。

AI実装プロンプト

商品詳細画面実装

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

運営・更新・参照元

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

参照元

FAQ

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

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

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

CTAが画面下に埋もれる

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

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