本文へスキップ
ui.design

Playbooks

EC商品ページをレビューする

ECの商品ページでは、購入判断に必要な情報と、検索エンジンに伝える商品情報が近い位置にあります。UX、SEO、アクセシビリティを同時に見る必要があります。

ui.design: seo-basicui.design: llm-growthui.design: image-alt

まず確認する症状

  • 価格、在庫、配送、返品条件が購入CTAの近くにない。
  • 商品画像のaltやProduct構造化データが不足している。
  • 診断結果はあるが、業務の意思決定、担当分担、納品物、次回検証へ変換されていない。
  • 業種やページ種別の違いを見ず、全ページを同じチェック順で扱っている。

なぜ問題か

  • 購入前不安が残るとカート投入前に離脱します。
  • Product構造化データは、価格や在庫などの商品情報を検索エンジンが理解する助けになります。
  • プレイブックは知識記事を実務に変える手順です。見る順番、成果物、完了条件があると少人数でも繰り返せます。
  • 人間が判断する部分とAIが修正する部分を分けることで、品質と速度の両方を管理できます。

診断で見る指標

商品名/H1
価格/在庫/返品
画像alt
Product structured data
カートCTA
対象ページ種別
最初に見る導線
成果物一覧
担当者と期限
次回スキャン条件
購入CTA近くの条件
商品画像の役割
Product schema
送料/返品
カート以降の不安

修正方法

最小修正

購入判断情報をCTA近くに置く

価格、在庫、配送、返品、支払い方法を近くに表示します。

推奨修正

商品画像と構造化データを整える

画像alt、商品名、価格、在庫、canonicalを本文と一致させます。

さらに改善

カート以降の不安も見る

送料、会員登録、支払方法、エラー表示まで確認します。

受け入れ条件

  1. 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
  2. 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
  3. 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
  4. 04その業務で最初に見るべき3から5項目、当日直す項目、保留する項目、次回検証方法が分かれている。
  5. 05レポート、タスク、証跡、修正指示を、顧客または開発者がそのまま使える粒度で残している。
  6. 06商品名、価格、在庫、配送、返品、支払い方法が購入CTAの近くで確認できる。
  7. 07商品画像alt、Product構造化データ、canonical、在庫や価格の表示が本文と矛盾しない。

コーディングエージェント向け修正指示

目的: EC商品ページを、購入判断情報、商品画像alt、Product構造化データ、カートCTA、スマホ操作性の観点でレビューしてください。 追加確認: ECでは商品説明の魅力だけでなく、購入直前の条件、在庫、配送、返品、構造化データを同じレビューで確認してください。

参考資料

よくある失敗

  • 商品説明だけ詳しくし、配送・返品・在庫の不安を残す。
  • 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
  • 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
  • スコアを説明して終わり、誰がいつ何を直すかを決めない。
  • 全ページを同じ深さで見ようとして、事業影響が大きい導線の修正が遅れる。

関連ページ