Playbooks
EC商品ページをレビューする
ECの商品ページでは、購入判断に必要な情報と、検索エンジンに伝える商品情報が近い位置にあります。UX、SEO、アクセシビリティを同時に見る必要があります。
ui.design: seo-basicui.design: llm-growthui.design: image-alt
まず確認する症状
- 価格、在庫、配送、返品条件が購入CTAの近くにない。
- 商品画像のaltやProduct構造化データが不足している。
なぜ問題か
- 購入前不安が残るとカート投入前に離脱します。
- Product構造化データは、価格や在庫などの商品情報を検索エンジンが理解する助けになります。
診断で見る指標
商品名/H1
価格/在庫/返品
画像alt
Product structured data
カートCTA
修正方法
最小修正
購入判断情報をCTA近くに置く
価格、在庫、配送、返品、支払い方法を近くに表示します。
推奨修正
商品画像と構造化データを整える
画像alt、商品名、価格、在庫、canonicalを本文と一致させます。
さらに改善
カート以降の不安も見る
送料、会員登録、支払方法、エラー表示まで確認します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: EC商品ページを、購入判断情報、商品画像alt、Product構造化データ、カートCTA、スマホ操作性の観点でレビューしてください。
参考資料
よくある失敗
- 商品説明だけ詳しくし、配送・返品・在庫の不安を残す。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。