ECサイトの商品ページデザイン：構成要素と実例
ECサイトの商品ページデザイン
商品ページデザイン：構成要素、ライブ実例、チェックリスト | We.Inc
ECサイトの商品ページの構成要素を、編集できるライブレイアウト、自己診断チェックリスト、Googleの最新要件に沿ったProduct構造化データとともに解説します。
商品ページは、購入ボタンの前に3つの疑問に答える必要があります。それが何か、自分に合うか、支払い後に何が起こるかです。デスクトップでは鮮明な写真、商品名、価格、オプションをファーストビューに置き、その下に配送、返品、詳細情報を配置します。さらに価格と在庫状況をProduct構造化データでマークアップしましょう。
商品ページの構成要素（上から順に）
- ギャラリー
- 商品をあらゆる角度から、使用中の様子や実際の大きさとともに見せる
- スタジオ撮影の写真が1枚だけ
- 商品名と価格
- 目的の商品であることと、価格がわかることを確認させる
- 決済まで価格が表示されない
- オプション
- サイズ、色、数量と、わかりやすい在庫状況
- 選んだ後で在庫切れが判明する
- カートに追加
- 唯一のメインアクション
- 同じ強さのボタンが競合している
- 配送と返品
- 購入後の不安を取り除く
- ポリシーがフッターにしかない
- 詳細と仕様
- 素材、寸法、お手入れ方法
- 見出しのない長い文章の塊
- よくある質問
- 購入の決断を妨げる疑問への答え
- まったく存在しない
このガイドでは、他店のスクリーンショットを並べる代わりに、架空の陶芸スタジオの商品ページを素のHTMLとCSSで一つずつ組み立てていきます。チェックリストで自分のページを採点し、Googleの現行ルールに合った構造化データをコピーしてください。
- チェックリストで現在の商品ページを採点し、足りない要素を確認します。
- ライブレイアウトの実例を開き、自分の商品情報で編集します。
- ProductのJSON-LDをコピーし、ページに表示しているものと同じ価格と在庫を入力します。
- 公開前に、GoogleのRich Results Testでマークアップをテストします。
- ボタンの近くには送料だけでなく、お届け日や期間も書きましょう。人はいつ届くかを基準に予定を立てます。
- 各オプションの在庫状況は選択前に表示し、売り切れのサイズを誰も選ばないようにしましょう。
- 実際の寸法を記載し、手やマグカップなど身近なものと一緒に写した写真で大きさを伝えましょう。
- ボタンのラベルは具体的にし、どこでも同じ表現にしましょう。例：Add to basket。
- 構造化データはページと一致していなければなりません。マークアップの価格が画面と異なると、Googleがそれを無視する理由になります。
よくある質問
商品ページのファーストビューには何を置くべきですか？
デスクトップでは、メインの写真、商品名、価格、オプションの選択欄、カートに追加ボタンです。スマートフォンでは通常、写真が最初の画面を占めるため、そのすぐ後に商品名と価格が続き、ボタンもすぐ近くにあるようにしましょう。
商品ページにはどの構造化データが必要ですか？
購入できるページの場合、Googleのマーチャントリスティングのドキュメントでは、name、image、offersを含むProductと、0より大きいpriceとpriceCurrencyを持つOfferが必須とされています。在庫状況、配送情報、返品ポリシー、ブランド、GTINは推奨項目です。
商品スニペットとマーチャントリスティングの違いは何ですか？
商品スニペットはレビューなど、直接購入できないページ向けで、nameに加えてreview、aggregateRating、offersのいずれか1つが必要です。マーチャントリスティングは商品を販売するページ向けで、価格と通貨が必要です。
商品ページにレビューを表示すべきですか？
本物のレビューがあるなら、価格の近くか詳細情報の下に表示しましょう。レビューや評価を捏造してはいけません。またaggregateRatingのマークアップは、その評価がページに表示されていて、実際の顧客によるものである場合にのみ追加してください。
販売の大部分は写真が担う
- ギャラリーはセットで計画しましょう。正面、背面または側面、素材のクローズアップ、使用中の様子、そして大きさがわかるものと一緒に写した1枚です。各画像には、その写真が何を写しているかを説明する代替テキストが必要です。
- 画像の読み込み時にページがずれないよう、widthとheight、またはaspect-ratioでギャラリーの領域を確保しておきましょう。
購入ボックス
- 価格、オプション、数量、ボタンをひとまとめにし、そのすぐ下に配送と返品の概要を置きます。この1つのブロックで、スクロールせずにほとんどの疑問に答えられるようにしましょう。
- 無効なオプションは、灰色の文字にするだけでは不十分です。ラベルに「Sold out」という言葉を加え、スクリーンリーダーの利用者を含む誰にでも状態が伝わるようにしましょう。
返品を減らす詳細情報
- 寸法、素材、お手入れ方法、同梱物は、見出し付きの読み流しやすいセクションにまとめましょう。サイズや着用感についての短い注記があるだけで、多くの誤注文を防げます。
- 顧客が最もよく尋ねる2つか3つの質問にはページ上で直接答え、それ以外は完全なFAQページへのリンクで案内しましょう。
商品ページのレイアウト例
ギャラリーと購入ボックスを備えた2カラムの商品ページ
広い画面ではギャラリーが左、購入ボックスが右に並び、スマートフォンでは縦に積み重なります。売り切れのサイズは灰色にするだけでなく、言葉でもそう表示します。
ラベル付きセクションに分けた詳細情報
見出し付きの短いセクションは、1つの長い説明文よりも読み流しやすくなります。最初のセクションは最もよくある質問に答えるため、開いた状態にしています。
販売ページ向けのProduct構造化データ
マーチャントリスティングの必須項目は、name、image、そしてpriceとpriceCurrencyを含むoffersです。availabilityなどその他の項目は推奨です。値はページと一致させる必要があります。
- 使用中の写真と大きさがわかる写真を含め、写真が4枚以上ある
- すべての画像に、その写真の内容を説明する代替テキストがある
- 商品名の横に価格が表示されている
- 各オプションの在庫状況が選択前に表示されている
- 明確にメインとわかるカートに追加ボタンが1つある
- ボタンの近くに送料と配送日数が表示されている
- ボタンの近くに返品ポリシーの概要がある
- 寸法、素材、お手入れ方法がラベル付きのセクションにある
- 最もよくある質問にページ上で答えている
- 幅375 pxで横スクロールなしに表示できる
- Product構造化データが表示中の価格と在庫に一致している
- レビューを表示する場合は本物のレビューだけを使っている
商品ページのチェックリスト
商品ページですでにできている項目にチェックを入れてください。スコアで残りの改善点がわかります。データはどこにも保存も送信もされません。
{total}項目中{score}項目完了
。リストに残っている項目はありません。
。修正が必要な項目：{n}件。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る