商品ページとは、オンラインで商品を販売するために作られたウェブページのこと。 通常、画像、説明、価格、「カートに入れる」ボタンが含まれます。
しかし、最高の商品ページにはもっと多くの戦略がある。
刺激的な17の製品ページ例をご覧ください（順不同）。 アマゾン、アップル、ナイキのようなトップブランドを取り上げたので、最高のeコマース・ウェブサイトが何を行っているかを学ぶことができる。
そして、自分のデザインにベストプラクティスを導入する方法を学ぶ。
1. アマゾン // 詳細情報の提供
アマゾンは米国で最も訪問者の多いeコマースサイトである。 商品ページのデザインはきれいではないが、機能している。
この例では、説明的な製品名で主な特徴を強調している。 ページを目立たせ、検索結果でクリックを集める。
注：アマゾンで商品を販売する場合 SemrushのAmazonマーケティングツールは、リスティングの可視性とコンバージョンを高めることができます。
平均星評価と評価数が目立つように配置されている。 アマゾンは、これらの指標が信頼を築くために極めて重要であることを理解している。
(米国では 調査では、回答者の98％が、レビューは購買を決定する際に不可欠な情報源であると回答している)。
画像は、製品の利点を実際に示している。 オーバーレイテキストは文脈を提供する。
この製品ページには、他にもいくつかの有益な機能が紹介されている：
- 買い物客の買い逃し恐怖症（FOMO）を呼び起こす「ベストセラー1位」のラベル
- 環境意識の高い消費者を安心させるサステナビリティ情報
- Pocket Lintなどのサードパーティ・クリエイターによるレビュー動画
- 製品の主な利点のスキマリスト
- 製品仕様の完全な内訳
- お客様からの質問と回答
- 他モデルとの比較表
- 関連製品へのリンク
重要なポイントアマゾンの忙しい商品ページデザインは、すべての商品サイトに通用するわけではない。 しかし、それは消費者が情報を求めていることを示している。 理想的な買い物客に対応するために、様々なフォーマットをテストしましょう。
2. アップル // 買い物客をレジへ誘導
アップルは洗練されたミニマリストの美学で知られている。 商品ページのデザインも同様だ。
iPhone 14 Proの製品ページを考えてみよう。 すっきりとしたデザインで、商品写真を前面に押し出した。 そして、買い物客に選択するよう指示する。
モデル、カラー、ストレージの組み合わせごとに別々のページを用意するのではなく、アップルはすべての選択肢を一箇所にまとめている。 ユーザーエクスペリエンス（UX）を向上させ、買い物を容易にする。
価格設定が強調されていることに注目してほしい：アップルには、製品の利点や仕様に焦点を当てた他のランディングページがある。 こちらは、購入する準備ができている人たちに合わせたものだ。
トップの "New "ラベルは、最新モデルを手に入れたいという人々の欲求を利用している。
ライブチャットにより、会社は迅速に質問に答えることができます。 この重要な段階で顧客が離れてしまうリスクを減らす。
重要なポイントユーザーの注意を次のステップに向ける。 商品をカゴに入れるのも、色を選ぶのも。
3. Gymshark // ユーザーをページに留める
ファッションをオンラインで購入する際の最大の問題のひとつは？ 試着はできない。
Gymsharkは、買い物客が自分に似合う服をイメージしやすいように、様々なモデル写真を提供している。 すべてのカラーバリエーションをカバーするように。
さらに、インタラクティブなサイズガイドで、完璧なフィット感を見つけることができる。
この商品ページで最も目立つのは「バッグに追加」ボタンだが、「ウィッシュリストに追加」オプションもある。 これは、商品を絞り込んだり、後で購入したい買い物客に対応するものだ。 つまり、興味をそそられたことを忘れる可能性が低いということだ。
Gymsharkはこれらのユーザーにリマインダーのメールを送ることもできる。
重要なポイント買い物客が必要とするすべての情報を商品ページに掲載すること。 他の場所に誘導して、彼らの旅を邪魔してはいけない。
4. リーサ // レビューで信頼を築く
オンラインショッピングでは、マットレスの上に寝て感触を確かめることはできない。
Eコマース・ブランドのリーサは、コピーライティングによってこの問題を解決している。 例えば、この製品は「体型に適応する」と書いてあり、「回復のための休息」といった効能を売りにしている。
社会的証明も重要だ。 リーサは、カスタマーレビューと業界の称賛を、主要な製品写真の上または近くに目立つように表示しています。 買い物客を安心させ、賢い買い物をさせる。
商品ページには、200ドルの割引と月払いオプションも宣伝されている。 大きな値札をより扱いやすく見せる。
重要なポイントカスタマーレビューや業界からの称賛は、信頼を築き、顧客の購買意欲を高める。
5. アノーバ // ターゲット・オーディエンスに語りかける
アノーバの精密調理器は、料理愛好家をターゲットにしている。 そして、メインの商品写真は、このことを前もって明らかにしている。
同社はまた、「高級レストラン」や「プロのような料理」といったフレーズを使って、ターゲットとする読者を惹きつけている。
商品ページのさらに下には、ライフスタイルをイメージさせる特徴的な画像が掲載されている。
カートに入れる」ボタンがどのようにユーザーを追いかけているかに注目してほしい。 ユーザーは一度購入を決めたら、スクロールして上に戻る必要はない。
重要なポイント商品ページをターゲットオーディエンスの願望やペインポイントに合わせる。
6. 普通 // 情報をより魅力的に
ザ・オーディナリーのスキンケアに対する科学的アプローチは、製品ページのデザインにも反映されている。 広々とした白を基調としたレイアウトは研究室を思わせる。 食材に重点を置くことで、さらに権威が増す。
さらにそのページでは、臨床研究への言及が、スキンケア業界では貴重な信頼性のレベルを提供している。
そしてこの表は、買い物客が重要な情報を素早く消化することを可能にする：
ザ・オーディナリーは「スキンレジメンの作り方」のコーナーで、買い物客に製品の使い方を教えている。 これにより、ブランドは関連商品を宣伝することもできる。
重要なポイントクリエイティブなデザインは、消化しやすく魅力的な方法で情報を提示することができる。
7. Boohoo // 主要な要素を目立たせる
このBoohooの商品ページで、商品価格と「全品20％オフ」のバナーがどれだけ目立つかに注目してほしい。
このオンライン・ファッション・ブランドは、セールやディスカウントで知られている。 そして、それを強調することを恐れない。 また、予算重視の買い物客を転換させるために、さまざまな後払いオプションも提供している。
Boohooは常に在庫が入れ替わるファストファッションブランドだが、高品質の商品写真に投資している。 モデリング付き。 美学が顧客の優先事項であることを認識しているからだ。
似たようなものをお探しですか？」セクションでは、買い物客のサイズが在庫切れだったり、デザインが適切でなかったりした場合に、おすすめの商品を紹介してくれる。 コンバージョンの可能性を高める。
重要なポイント商品ページのデザインから一歩引いたとき、最も重要な要素はすぐに目立つはずです。
8. 昆布 // 大胆になる勇気
飲料会社の昆布の大胆なデザインは、標準的な商品ページのレイアウトを捨てることができることを証明している。
昆布の訪問者はすでにこのドリンクを味わい、大量注文を望んでいるのだろう。 だから、手の込んだ説明やライフスタイル画像で商品を「売る」必要はない。
同社はユニークなUXを提供することに集中できる。 ブランドイメージを強化し、買い物客をリピーターにする。
重要なポイントあなたのブランドがそれを許すなら、あえて大胆に、目立つことをする。
9. ターゲット // ユーザー生成コンテンツの追加
ターゲットは、買い物客がフルフィルメント・オプションを選択できるよう、明確な在庫情報と配送の見積もりを提供している。
製品ページもユーザー生成コンテンツを活用している。 レビューを残す際、ターゲットの顧客は以下のことができる：
- 快適さ、価値、スタイルについて具体的な評価を行う。
- 今後買い物をする人に、その商品がジャストサイズかどうかを知らせる
- 自分の写真を共有する
ターゲットとなる顧客（スタッフとともに）も、ユーザーの質問に答えることができる。
これにより信頼が築かれ、消費者は購買の旅を通して十分な情報を得ることができる。
重要なポイントユーザー生成コンテンツを追加することで信頼を築く。
10. バーナー // 店舗での経験を再現する
バーナーは、買い物客にメガネの全体像を理解してもらうために、さまざまな商品写真とアニメーションGIFを使用している。
そして、興味を持った買い物客は「バーチャル試着」機能を使って、店頭での体験を再現することができる。 このクリエイティブなアプローチは、ブランドが売上を最大化し、返品を最小化するのに役立つ。
バーナーはまた、この商品ページの例で、いくつかの興味深いアップセリング戦術を使っている：
- 送料無料の最低購入金額
- 複数購入割引
重要なポイント店舗でのショッピングとアップセル体験について考える。 そして、それらをどのように製品ウェブサイトに反映させるかを検討する。
11. シルバークロス // 観客の異論を解決する
ベビーカーを購入する際、妊婦の両親は多くの疑問を持ちます。 シルバークロスは、この商品ページの説明でそれらに答えようとしている。
その情報のほとんどは、フォールドの上（ページの上部、ユーザーがスクロールする前）で行われる。 これは観客の注意を素早く引きつけるのに有効だ。
そして、訪問者の注意を次のステップに集中させる。 BUY NOW"ボタンは、ハイコントラストな色使いで、ユーザーを下へ下へと導きます。
重要なポイント商品ページの説明文の中で、オーディエンスの反論を解決する。 購入を躊躇させるような質問にも対応する。
12. ガーミン // 折り目の上に優先順位をつける
多くの人は、第三者のブログやレビューサイトなどで大手ブランドの製品をリサーチしている。 商品ページに到達する頃には、彼らは取引を開始する準備ができている。
そのため、ガーミンの製品ページでは、価格、サイズ、色など、購入の最終段階で重要な要素に焦点を当てている。
しかし、優柔不断な買い物客も取り残されてはいない。 仕様、箱の内容、および対応デバイスは、この下に記載されている。 その他の有益な情報とともに。
重要なポイント商品ページの逆ピラミッド型アプローチを検討しましょう。 折り目の上に最も重要な情報を掲載し、その下にさらに詳細な情報を掲載する。
13. REI // 優れたモバイルUXの提供
調査会社ベイマード・インスティテュートによると、REIはモバイルUXにおいて最高の商品ページを持っている。
以下はその理由である：
- 不必要なスクロールを防ぐ折りたたみ可能なセクション
- クロスセル（＝"こんな人も見ています"）セクションを最後に配置
- 製品バリエーションはリンクされている
- 製品ビデオはイメージギャラリーの一部として表示されます。
- 製品価格の可視化
重要なポイント多くの消費者がスマートフォンを使ってオンラインショッピングをしている。 そのため、商品ページはモバイル画面でも見栄えがよく、機能する必要があります。
14. Zara // クリエイティブになろう
ZARAのオンラインストアは商品説明が短い。 ドラマチックなイメージで語らせる。
珍しいモデルのポーズが、オンラインショッピングの買い物客の注目を集めるのに役立っている。 そして、製品にハイファッションの雰囲気を与える。
このアプローチは、ZARAの無料宣伝活動にもなっている。
重要なポイント商品ページのレイアウトの自由度が限られている場合は、他の要素でクリエイティブなアプローチを試してみましょう。 写真やテキストなど。
15. ファイヤーボックス // 緊急性を高める
ファイヤーボックスは、ユーザーが "珍しいものを買う "場所だ。 写真やビデオでは、実際に商品が使われている様子が紹介されており、買い物客は風変わりなギフトの機能性を確認することができる。
さらに、このサイトのユーモラスなコピーライティングが、ノベルティ商品を完璧に引き立てている。
Fireboxの商品ページでは、在庫レベルを強調することで、緊急感を演出している。 これにより、より多くの買い物客がレジに向かうようになる。
重要なポイントオンラインショッピングの利用者に在庫が少なくなっていることを知らせる。 これにより、コンバージョンを促進することができる。 また、予期せぬ売り切れによる失望も避けることができる。
16. ダイソン // USPを強調する
ダイソンの商品ページは、買い物客に第三者の小売店ではなく、直接購入するよう説得している。
作った人から直接買う」というセクションは信頼を築く。 そして忠誠心だ。 また、無料翌日配達や返金保証といった独自の販売提案（USP）にも注目が集まる。
さらに、このブランドの効率的なデザインへのこだわりは、製品ページにも反映されている。 たとえば、この製品仕様書のレイアウトは明快で魅力的だ。
一方、この再販業者は、同じスペックをあまり魅力的でない方法で表示している：
重要なポイント貴社の製品が他でも入手可能な場合、USPを強調することが極めて重要である。 そして際立ったUXを提供する。
17. ナイキ // 関連商品のプロモーション
ナイキの商品ページはビジュアルが支配的だ。 製品の詳細や素材の種類を、間近で撮影した写真で紹介。 モデルショットはスタイリングのヒントになる。 また、ユーザーが作成したコンテンツは、ページの美しさを引き立てる。
コンプリート・ザ・ルック」セクションは、買い物客が商品をワードローブに取り入れるイメージを膨らませ、サイト内の他の商品も閲覧するよう促す。
重要なポイント商品ページに関連商品を掲載することで、平均注文金額（AOV）を増加させることができます。
製品ページのベストプラクティス
商品ページのデザインは、オンラインストアの良し悪しを左右します。
Eコマース・マーケティングには、商品ページにトラフィックを誘導するための無数の戦術がある。 しかし、こうした努力も、ページがコンバージョンしなければ意味がない。
以下は、より多くの訪問者を顧客に変える（つまりコンバージョン率を向上させる）9つの商品ページのベストプラクティスです。 最高の商品ページを作るお手伝いをします。
ブランドであり続ける
商品ページのデザインは、あなたのブランド・アイデンティティ、つまり、あなたが描きたい個性に沿ったものでなければなりません。 そうすることで、ターゲット顧客の関心を引き、リピーターを増やすことができる。
例えば、創造性と楽しさはレゴのブランド価値のひとつだ。 そのため、商品ページはカラフルで、気まぐれで刺激的だ。
ブランド・アイデンティティは、レイアウトから個々の言葉の選択に至るまで、あらゆるものに影響を与える。 インスピレーションが必要なら、尊敬するブランドの商品ページの例を見てみよう。 どうやって個性を出すのか？
ヒント ブランドのトーン・オブ・ボイスを定義する方法については、こちらのガイドをご覧ください。 これは、あなたのブランド・アイデンティティを構築し、コンバージョンにつながるコピーを書くための重要なステップのひとつです。
商品名と説明文の最適化
すべての製品には、ユニークで説明的な名前が必要です。 この名前を商品ページのタイトル（H1タグとも呼ばれる）に含める。
ページのタイトルタグ（検索エンジンの検索結果に表示されるタイトル）と同様に。
これにより、貴社の製品が関連する検索結果で上位に表示されるようになります。 そして、ターゲットとなる買い物客からのクリックを集める。
また、商品名を含むSEOに強い商品説明文を書く必要があります。 しかし、顧客を説得してコンバージョンに導くことに集中することがより重要なのだ。
誰かが購入を決断するために必要なすべての詳細を提供する。 そして、そうしなければページを離れてしまうような反対意見に取り組む。
質の高いユーザー・エクスペリエンスを提供する
最高の製品ウェブサイトは、デスクトップ、タブレット、モバイルなど、あらゆるデバイスで高品質のUXを提供する。
つまり商品ページである：
- 素早くロードする
- 視覚的に魅力的である
- HTTPSセキュリティを使用する
- カートに入れる」を簡単にする
- 有益で正確な情報を提供する
- 明快で見やすいレイアウト
- 巧みな書式を使って情報を消化しやすくする
最後にオンラインで買い物をしたときのことを考えてみてください。 順調だったことは？ 何がもっと良かったのか？ あなたの個人的な経験は、エンドユーザーにとってより良いショッピング体験をデザインするのに役立ちます。
ヒント商品ページのURLをGoogleのPageSpeed Insightsツールに通すと、ページの読み込み時間を短縮するヒントが得られます。 また、Semrushのサイト監査ツールを使用して、サイト全体の技術的な問題の特定、優先順位付け、修正を行うこともできます。
[SITE AUDIT: [create-campaign destination_url=”https://www.semrush.com/siteaudit/” show_input=”false”header=”Find and Fix Sitemap Errors” text=”with the Site Audit Tool” button_text=”Try for Free”bg_images=”https://static.semrush.com/blog/uploads/media/96/fd/96fd495930d058321d5f78f5554aff88/trial-superbanner-1.png”bg_button=”-success"]
明確なCall-to-Actionボタンを追加する
商品ページのデザインは、ユーザーに "購入 "をクリックしてもらうことがすべてだ。 だから、コール・トゥ・アクション（CTA）ボタンは目立つことが重要だ。
ほとんどの製品ウェブサイトは、人目を引く背景色を使用しています。 そして、"Add to Cart "や "Buy Now "といったストレートなCTAテキスト。
ボタンを画面上部付近に配置する。 買い物客が購入する準備ができたらスクロールする必要がないように、折り返しの上に表示するのが理想的です。
質の高いビジュアルを提供する
高品質な写真は、商品をより魅力的に見せ、顧客が何を手に入れるのかを正確に理解するのに役立ちます。 誤解を招くことなく、商品を最大限にアピールする。
真っ白な背景で撮影した、大きくて鮮明な写真を用意すること。 さまざまな角度や特徴をカバーするように。 スピン撮影を使ってインタラクティブな360度ビューを提供することもできる。
ライフスタイル・ショットは、あなたの製品が実際に動いている様子を撮影したものです。 そして、買い物客が自分たちの生活の中で商品をイメージできるようにする。
このイケアの商品ページは、すべての条件を満たしている：
ヒント：複雑な製品の特徴を実演する必要がありますか？ カスタムグラフィック、アニメーション画像、動画などを使ってみよう。
明確な価格と配送情報の表示
商品ページの訪問者は、多くの場合マーケティングファネルのコンバージョンステージにいます。 そのため、明確な価格と配送情報を前もって提供することが重要だ。
いくつかヒントを紹介しよう：
- 商品価格を目立つように表示する
- 割引やキャンペーンを強調する
- KlarnaやGoogle Payなどの便利な支払いオプションを広告する。
- 配送の見積もりと価格の提供
買い物客を他のページ（例：/shipping-faqs/）に誘導することは避けましょう。 これは購買プロセスを混乱させ、売上の損失につながる可能性がある。
評価とレビューで信頼を築く
最高の商品ページの例は、顧客の評価とレビューを提供している。 買い物客が商品を買うかどうかを決める手助けをする。 そして、あなたから買うかどうか。
だから、顧客のフィードバックを求めよう。 そして、それを目立つように飾る。
これには、ページ上部の平均星評価も含まれる。 そして、画像、コメント、評価の内訳を完備した個々のレビューを下部に掲載。
必要に応じて、レビューに返信できるようにしてください。 これは、あらゆる苦情を解決し、ブランドの評判を守るのに役立ちます。 フリジデールがここでやっているようにね：
ヒント：認定、賞賛、顧客サービスの特典を宣伝することで、顧客に信頼を与える。 買い物客に商品のウェブサイトが信頼できるものであることを知らせましょう。
構造化データの使用
構造化データとは、検索エンジンがウェブページをよりよく理解するための情報である。 スキーマと呼ばれるマークアップ言語を使用する。
商品スキーマを使用すると、商品ページで次の要素をタグ付けすることができます：
- 平均評価
- 画像
- カラー
- 価格
- 等々
これは、より詳細で魅力的なリスティングであるGoogleのリッチリザルトを確保するのに役立ちます。
ウォルマートのこれとか：
このリッチリザルトは、ウォルマートが結果ページで目立ち、グーグルからより多くのクリックを集めるのに役立つ。
ヒント：Googleは、商品ページにスキーマを適用するのに役立つ構造化データマークアップヘルパーを提供しています。
スプリットテストによる改善
最良の商品ページは、A/Bテストとも呼ばれる大規模なスプリットテストの結果であることが多い。
こんな感じだ：
- カートに入れる」ボタンの色を変えるなど、ページを少し調整する。
- サイト訪問者の半分に新バージョンのページを配信し、残りの半分に旧バージョンのページを配信する。
- 一定期間後、主要な指標を分析し、どちらのバージョンのパフォーマンスが優れているかを確認する。
- 機能する変更を適用し、機能しない変更は無視する
商品ページのデザインに対するこのデータ主導のアプローチは、変更を迅速かつ効率的に特定、テスト、適用するのに役立ちます。
ヒント： SplitSignalツールを使って、商品ページの変更がオーガニックトラフィック（検索エンジンからの未払い訪問）にどのような影響を与えるかを正確にテストしましょう。 複雑な開発やデータ分析作業を必要としない。
商品ページのエキスパートによるサポート
これらの製品ページの例とベストプラクティスは、多くのアイデアを提供してくれます。 しかし、それを実行する時間とスキルがあるだろうか？
そうでない場合は、Semrushの信頼できる代理店パートナーをご利用ください。 ウェブデザイン、ウェブ開発、UXデザインの専門家と提携し、より良い商品ページの構築をお手伝いします。 そして、より多くの売上を生み出す。
プロジェクト概要をご提出ください。
この記事は2023年に更新されました。 エリカ・ヴァラゴーリによるオリジナル記事からの抜粋が残っている場合がある。