効果的な商品詳細ページの作成方法

Design an effective product detail page

商品詳細ページ（PDP）は、オンラインの買い物客が商品について知る必要のある情報を載せた、コマースサイトのページであり、コンバージョンを向上させるための重要な要素です。包括的でユーザーフレンドリーな商品詳細ページは、ターゲット顧客が購買プロセスのどの段階にいるかにかかわらず、購買の意思決定に影響を与えることができます。実際、Google Consumer Insightsによると、買い物客の55%以上が、実店舗にいる間にモバイルデバイスを使用して、得する情報を探しています。

多くのコマース企業は、大量の商品データからユーザーフレンドリーで魅力的なコマース体験を生み出すことに苦慮していますが、いくつかの戦略的な手段によりこれを実現できます。

商品詳細ページを最適化するためのベストプラクティスは以下の通りです。

商品詳細ページが重要な理由


オンラインショップの利用者は、商品詳細ページで提供される情報によって商品について学ぶため、売上の大部分がここで生まれていると言っても過言ではありません。オンラインでは商品に実際に触れることができないため、商品詳細ページで、より具体的でわかりやすい情報を提供することが重要です。


商品詳細ページの質は、訪問者が満足して顧客になるか、カートを放棄するかを決めてしまいます。商品詳細ページで有益かつ快適な顧客体験を提供することが、売上増加と直帰率低下の鍵を握ります。

商品詳細ページのベストプラクティス


商品カテゴリーやオーディエンスがそれぞれ異なるため、商品詳細ページに画一的なルールはありません。すぐに利用できる実証済みのベストプラクティスはいくつかありますが、CTA、配置、コピーなどの要素に対してスプリットテストをおこない、オーディエンスの反応が良いものを見つけましょう。

高品質な商品画像を使用する

デジタルコマースは急速に普及していますが、購入者が購入前に商品に触れたり、試したり、試着したりすることができないという欠点があります。高品質な商品写真は、この課題を解決し、顧客が安心して購入するために役立ちます。

ここでは、商品写真に関するいくつかの戦略を紹介します。

Lovesacでは、商品詳細ページの商品撮影方法をさらに一歩進めています。商品ページのバーチャルショールームは、オンラインと実店舗でのショッピング体験のギャップを縮めるのに役立ちます。

Lovesace product detail page

このインタラクティブなビジュアル機能により、床材や壁材をカスタマイズすることで、商品が実際の使用空間でどのように見えるかを確認することができます。これにより顧客は、自信を持って購入の意思決定をしやすくなります。

魅力的な商品説明文を書く

商品説明では、商品の特徴やメリットを簡潔に説明する必要があります。どの説明も、顧客に情報を提供すると同時に、その商品がどのように生活を向上させるかのを理解してもらうという、ふたつの目的を果たすものでなければなりません。

そのための方法をいくつか紹介します。

商品説明では、顧客が質問しなくても、商品に関する一般的な疑問が明らかになるようにすることが理想的です。

顧客にとって最も重要なことに焦点を当てるようにしましょう。たとえば、Missguidedの商品説明では、商品の特徴ではなく、サステナビリティに焦点をあてています。「Global Sustainability Study 2021」によると、消費者の60%にとって、持続可能性は重要な購入基準であることが明らかになっています。Missguidedの商品説明は、廃棄物の軽減と消費材のアップサイクルに焦点を当てていますが、これはオーディエンスを理解しているからです。

説明的な商品タイトルをつける

商品タイトルは、顧客がページで最初に目にするもののひとつです。タイトルがきっかけで、他のwebからクリックされることさえあります。商品タイトルは、購入者に商品が何であるかを正確に伝え、その商品についてもっと知りたいと思わせるものでなければなりません。

商品タイトルは、通常、ページで最もサイズが大きいテキスト、または最初に表示されるテキストです。そのため、タイトルは説明的でありながら簡潔である必要があります。明確であること、可能な限り商品メリットを示すこと、シンプルにまとめることが大切です。顧客の関心を惹くと同時に、決して混乱させるようなことがあってはなりません。

JCrew product detail page

J Crewは、優れた商品タイトルをつけています。短いながらも説明的なタイトルコピー「Broken-in organic cotton oxford shirt」で、顧客の興味を惹きつけ、写真を見る前から、快適かつ上品な印象を与えています。

明確で目立つCTAを使用する

CTA（行動喚起）は、コマースのページで最も重要な要素であり、すぐに目につくものでなければなりません。効果的なCTAは、購買体験における迷いを最小限に抑え、何よりもわかりやすさを優先します。

効果的なCTAには、以下のような特徴があります。

さらに高度な戦略として、CTAを「スティッキー」にすることで、訪問者がページをスクロールしても画面に表示され続けるようにすることができます。

Bite product detail page


上の写真は、Biteによる、優れたスティッキーCTAの例です。同社の商品詳細ページでは、商品オプションと「Add To Cart」ボタンが画面下部のバーに移動し、ページをスクロールダウンするとそれに追随するようになっています。

CTAはコンバージョンにとって非常に重要であるため、これらの方法に対してスプリットテストを実施するのは良いアイデアです。CTAが期待通り機能しているように見えても、コピーや色などの変数を数週間定期的にテストして、クリック率（CTR）が向上するかどうかを確認しましょう。

ソーシャルプルーフで消費者を納得させる


自社商品の品質に自信を持っていても、購入者は、企業の宣伝は信用しないかもしれません。商品詳細ページがセールスツールであることは、誰もが知っています。

しかし、BrightLocalの調査によると、消費者の79%が、オンラインレビューを個人的な推薦と同じくらい信用していると回答しています。ソーシャルプルーフの力は、以下のようなさまざまな方法で商品詳細ページに取り込むことができます。


Glossierは、大量の商品コピーを使用する代わりに、「レビューハイライト」セクションで顧客にプロモーションを任せることで、商品詳細ページのソーシャルプルーフを効果的に利用しています。また、この動物実験抜きの化粧品ブランドは、商品タイトルの下に星評価ではなくレビュー数を表示しています。

利用しやすい顧客サービスを提供する

商品詳細ページで、さまざまな形で情報を提供しても、依然として、一部の顧客は疑問を感じます。質問にすぐに回答しなければ、競合他社に移ってしまう可能性があります。

ここでは、訪問者が必要な回答やサポートを得られるようにするための方法をいくつか紹介します。

Natural Textiles product detail page


このベストプラクティスの優れた例は、Coast New Zealandのチャットボットです。利用者のIPアドレスを検出し、その場所にもとづいてメッセージを送信することができます。また、質問に対応しているカスタマーサービスの担当者を表示して、人間的な要素を加えることで、自動応答システムのフラストレーションを軽減しています。

返品と配送に関する明確なポリシーを示す

優れた返品ポリシーと無料（または妥当な）送料は、購入者のリスクを最小限に抑えて購入を促すため、コンバージョン率を高めることができます。

わかりやすい返品条件は、商品の品質に対する企業の自信を示すものです。また、商品が求めるものでなかった場合、容易に返品できることを顧客に保証することにもなります。

送料を明確にすることで、コマース体験におけるつまずきを減らし、期待値を高めることができます。そのため、送料の詳細は、商品詳細ページで容易に確認できるようにする必要があります。Barillianceのレポートによると、カートを放棄する理由の第1位は、予想外の送料や税金の支払いであることが明らかになっています。

成功を収めている商品詳細ページのほとんどは、次の項目を明確に示しています。

送料と保証に関する情報を最も効果的に表示できる場所は、CTAの近くです。また、ページ下部のFAQセクションや、CTAの近くのポップアップ機能で、配送や返品に関する詳細情報を示すこともできます。



Element product detail page

Casperの配送情報は、見つけやすいよう巧みに配置されており、潜在顧客に安心感を与える手厚い返品保証になっています。また、クエスチョンマーク（？）のアイコンにカーソルを合わせると、配送にかかる時間や配送地域についての詳細が表示されます。必要な情報を視覚的に優れた方法で入手することができます。

ページの読み込み速度を確認する

商品詳細ページの構成がどれほど優れていても、ページの読み込みに時間がかかると、訪問者はページを見る前に離脱してしまう可能性があります。Akamaiのレポートによると、読み込みに3秒以上かかると、利用者の40%がwebサイトから離脱します。

ページ読み込み速度が速ければ、検索ランキングでwebページが上位に表示されやすくなるため、ページ読み込み速度は非常に重要です。ここでは、読み込み速度を向上させるための簡単な手順を紹介します。

ページ読み込み速度の向上は、デスクトップPCだけの問題ではありません。Google Consumer Insightsのレポートによると、消費者の59%が、モバイル端末で購入できるかどうかが購入の意思決定に影響すると回答しています。ページ読み込み速度を最適化することで、商品詳細ページをよりモバイルフレンドリーにすることができます。

商品レコメンデーションを提供する

商品レコメンデーションにより、厳選された顧客体験を提供して追加購買を促すことができます。パーソナライズされた商品レコメンデーションは、それぞれの顧客の購買傾向に合わせて、他の方法では発見できないような商品を表示することができます。

レコメンデーションは、アドオンやアップセルなどの目的に応じて、商品詳細ページのどこにでも設置できます。一般的な設置場所は、サイドバーかページの下部です。

ここでは、商品レコメンデーションの最も効果的な戦略をいくつか紹介します。

Poly & Barkは、一部の商品詳細ページに搭載されたユニークなアドオン機能によって、商品レコメンデーションをアートの域に高めています。訪問者が商品ページをスクロールしていくと、ウィジェットがほかの家具やインテリアをオファーし、コーディネートを完成させることができるのです。訪問者はカラーテーマを変更したり、個々の商品を交換したりすることができ、ワンクリックでセット全体をカートに追加することができます。




Poly & Bark product detail page

容易に比較やカスタマイズができるようにする

コマースサイトで類似商品を販売している場合、各商品詳細ページに、使いやすいカスタマイズ機能と比較機能を提供することで、購入する際の迷いをなくすことができます。

GoProは、顧客が各商品の違いを容易にすばやく確認できるように、一般的でありながら非常に効果的な比較形式を使用しています。このセクションは、テーブルレイアウト、チェックマーク、ネガティブスペースを整頓して使用することによって、顧客が知りたいあらゆることを示しています。

割引やプロモーションを強調する

多くの消費者が最安値を求めて買い物をするため、お得な情報を知らせることは効果的なコンバージョン戦略です。ここでは、商品詳細ページでセールやプロモーションを実施していることを顧客に知ってもらうための優れた方法をいくつかご紹介します。

Bookshop.orgは、商品詳細ページで、元の価格に取り消し線を付けて赤色にすることで割引を強調しています。これにより、購入者の目を差額に引き付け、お買い得であることを認識させているのです。さらにページの下方にある商品の詳細ページでも、この戦略を繰り返しています。

商品詳細ページの例

これらのベストプラクティスをすべて組み合わせて、簡潔な商品詳細ページを制作するのは大変なことです。ベストプラクティスのリストから、まずはオーディエンスにとって最も効果的と思われる戦略を採用し、定期的にスプリットテストを実施するようにしましょう。効果的な商品詳細ページの3つの例をご覧ください。

Nike

Nikeは、スクロール部分の上にあるセクションを合理化することで、商品詳細ページを最適化しています。ハイライトの商品画像は、実際に商品が使われている様子を映した動画に連動しており、自動的に再生されます。

Nike product detail page

商品タイトルと説明はメリットを示す簡潔なもので、カスタマイズオプション、CTA、配送情報はまとまっていて簡単に見つけることができます。スクロールダウンすると、パーソナライズされたレコメンデーションがページの下部に表示されます。また、ページ上部のバナーには、現在実施されているプロモーションが表示されます。

Love Hair

クリーンな成分を大切にするヘアケアブランドとして、Love Hairの商品詳細ページには、消費者の心をつかむ高品質な商品画像と動画が使用されています。また、商品詳細ページには、スティッキーCTAも設置され、ページ内のどの位置からでも容易に数量を選択し、カートに入れることができるようになっています。

Love Hair product detail page

これは、Biteと同様に、顧客を重視していることを示すものです。すぐにアクセスできる情報と一体になって、購入の意思決定を容易かつ魅力的なものにしています。

Bang & Olufsen

Bang & Olufsenの商品詳細ページの特徴は、商品タイトルと説明文のセクションにあります。商品タイトルはオーバーイヤー型の機能を簡潔に強調し、説明文は想像力をかき立て、商品の特徴をシンプルに強調し、利用者に価値を伝えています。

Bang & Olufsen product detail page


商品詳細ページでは、送料無料やギフト包装サービスなどの機能をチェックマークで表現しています。また、実店舗での購入を希望する利用者のために、最寄りの販売店を検索するための別のCTAを設置しています。

優れた商品詳細ページを作成する

商品詳細ページは、消費者に購入を促し、決断させる最大のチャンスとなり、コンバージョン率に大きな影響を与える可能性があります。商品詳細ページは、見た目が美しく、包括的な情報を提供し、顧客が質問する前に、質問に答えるものでなければなりません。

効果的な商品詳細ページを作成するための最初のステップは、自社の目標に合わせて、適切なコマースソリューションを導入することです。その上で、A/Bテストや多変量分析テストをおこない、ページのパフォーマンスを最適化することが重要です。

Adobe Commerceなら、単一の使いやすい基盤から、あらゆるチャネル、ブランド、サイトを管理できます。柔軟性に優れ、B2BやB2Cを問わず、あらゆるコマースを効率的かつ効果的にするのに役立ちます。詳細については、無料の製品ツアーをご利用いただくか、概要ビデオをご覧ください。