「売上を伸ばすには商品ページのどこを変えればいい？」
「商品ページをデザインするときに参考にできるサイトが知りたい」
「商品ページをデザインするにあたってアドバイスがほしい」
自社サイトの商品ページをデザインするにあたって、上記のような悩みを抱えていないでしょうか。
マーケティングの観点において、商品ページのデザインは売上を左右する重要な要素の1つです。
そこで本記事では、売上アップにつながる商品ページのデザインの共通点や、デザインを改善する基本ステップ、デザインする際の注意点を解説します。デザインの参考にできるサイトも紹介していますので、商品ページのデザインを見直したい方は、ぜひ参考にしてください。
Contents
売上が伸びる商品ページのデザインにおける7つの共通点
売上が伸びる商品ページでは、購入を促すCTAボタンやキャッチコピーを活用しているだけでなく、ユーザー目線を意識したデザインが特徴です。ここでは、商品ページに欠かせない要素に加え、売上を伸ばしている商品ページのデザインの共通点を解説します。
商品ページの重要ポイントを理解して、自社サイトのデザインの改善点を洗い出しましょう。
1. 目を引くファーストビュー
商品ページのデザインにおいて、ユーザーが最初に目にするファーストビューは非常に重要です。サイトを訪れたユーザーは、ファーストビューを見て短時間で「ページを読み進めるか」を判断するといわれています。
ファーストビューでの離脱率は高い水準にあるとされ、ファーストビューのデザインを改善することにより、離脱を抑えることが期待できます。
売上を伸ばしている商品ページのファーストビューは、画像・キャッチコピー・補足のコピー・CTAボタンの4つで構成されています。ギャラリーサイトなどに掲載されているファーストビューを参考に、自社の商品ページのデザインを見直しましょう。
2. ターゲットに沿ったデザイン
商品ページのデザインは、プロダクトそのものの印象を大きく左右します。ターゲットの「年齢」「性別」「悩み」などの属性を考慮し、商品ページのデザインへと落とし込むことが重要です。
売上を伸ばしている商品ページでは、配色・フォントの種類・文字の大きさ・デザインのテイストといった方向性を、ターゲットに合わせて決めています。
例えば女性向けの商品なら暖色で淡い色調、シニア向けであれば文字サイズを大きくし彩度を落とした色味のデザインが適切です。サイトを訪れたユーザーは、商品ページの印象が「自分に合わない」と感じると離脱率が高まるため、ターゲットに沿ったデザインを意識して制作しましょう。
3. 使用感をイメージしやすい画像や動画
売上を伸ばしている商品ページでは、実際に使用するシーンやベネフィットを想像しやすい画像を活用しているデザインが特徴です。商品ページでは主に、イメージ画像とディティール画像の2種類が使用されています。
イメージ画像とは商品を使用しているシーンの写真で、ユーザー自身が使用する場面を想像させることで購買意欲を高めます。
ディティール画像は商品の全体像や詳細部分の写真で、「イメージと異なる商品ではないか」という不安を取り除く効果があります。画像だけでなく、動画を商品ページに埋め込むことも効果的です。
4. まとまりのある商品説明
商品説明は「ボディコピー」とも呼ばれ、キャッチコピーの裏付けを行う要素です。商品の信頼性を高める、必要性を示す、購入時の不安を払拭するといった意図で作成され、ユーザーの商品購入を促します。
商品説明ではプロダクトの情報を整理し、シンプルにまとめて見やすくすることが重要です。
売上を伸ばしているサイトの商品説明は、When（いつ）・Where（どこで）・Who（誰が）・Whom（誰に）・What（何を）・Why（なぜ）・How（どのように）・How much（いくらで）という「6W2H」の要素に沿って整理され、情報が網羅的に記載されています。そ
そのほかに「お客様の声」「よくある質問」の項目で補足を行い、ユーザーの不安を払拭して購入を促しましょう。
5. 競合と比べたときの優位性
競合と比べたときの優位性を示すことで、自社商品を選ぶようユーザーへの動機づけが可能です。具体的な数字やスペックを用いて優位性を示せば、ユーザーが自社商品に魅力を感じて競合より選ばれやすくなります。
売上を伸ばしている商品ページでは、受賞歴・ランキング順位・競合商品とのスペック比較表・キャンペーン価格・専門家の意見などが優位性として示されています。
なかでも受賞歴やランキング順位といった「権威性」につながる要素は、ファーストビューに盛り込んでユーザーの興味を引くようにデザインしましょう。
6. 消費者目線のユーザビリティ
ユーザビリティとは「使いやすさ」や「わかりやすさ」を指しており、ストレスなく商品ページを見るために重要な要素です。ユーザビリティを高め、ユーザーが手間をかけずに商品を購入できる状態にすれば、売上アップやリピートにつながります。
購入までの導線は、サイト内でのユーザーの行動パターンを想定して設計しましょう。
CTAボタンは色・大きさ・エフェクトがわかりやすいデザインにして複数個設置し、入力フォームには補助入力機能をつけるなど、ユーザビリティを意識した商品ページを制作しましょう。
7. 回遊性を高める施策
「回遊性」は、サイトを訪れたユーザーが各ページをどれほど閲覧したかの指標です。サイト内の回遊性を高めることで、複数の商品とのまとめ買いによる売上アップや、自社への興味を育ててリピート率の向上が狙えます。
商品ページを起点にして、自社サイト内の複数のページに誘導する施策を行い、回遊性を高めましょう。
商品ページのデザインを改善する基本ステップ
売上が伸びる商品ページの共通点を理解したら、次はその要素を自社の商品ページにどう取り入れていくかが重要になります。商品ページのデザイン改善は、思いつきで変更するのではなく、手順を踏んで進めることで効果が出やすくなります。商品ページのデザイン改善は、思いつきで変更するのではなく、手順を踏んで進めることで効果が出やすくなります。ここでは、商品ページのデザインを改善する基本的なステップを解説します。
- 現状の商品ページの課題を分析する
- ターゲットを明確にし、デザインの方向性を決める
- 共通点を踏まえて商品ページのデザインを改善する
- 改善後の数値を確認し、検証・改善を繰り返す
1. 現状の課題を分析し、ターゲットを明確にする
商品ページのデザイン改善は、まず現状の課題を把握することから始めます。アクセス解析を使い、商品ページにどれだけのユーザーが訪れ、どこで離脱しているか、CVR(購入率)はどの程度かを確認しましょう。
たとえば、ファーストビューで離脱が多いのか、商品説明まで読まれずに離脱しているのかによって、改善すべき箇所は変わります。
あわせて、商品ページのターゲットを明確にします。年齢・性別・悩みといった属性を整理することで、配色やフォント、デザインのテイストといった方向性が定まります。現状分析とターゲット設定が、効果的なデザイン改善の土台となります。
2. 共通点を踏まえて改善し、検証を繰り返す
課題とターゲットが明確になったら、前章で解説した7つの共通点を踏まえて、商品ページのデザインを改善していきます。すべてを一度に変更するのではなく、離脱が多い箇所など、課題の大きいところから優先的に改善するのが効率的です。
そして、デザインを改善したら必ず効果を検証します。改善後のCVRや離脱率を確認し、効果が出ていない場合はさらに見直しを行いましょう。商品ページのデザインは一度作って終わりではなく、データを見ながら改善を繰り返すことで、売上につながるページに近づいていきます。
| 商品ページのデザイン改善を進めるポイント やみくもに変更せず、現状の課題分析から始める ターゲットを明確にし、デザインの方向性を決める 課題の大きい箇所から優先的に改善する 改善後はCVRや離脱率を検証し、改善を繰り返す |
商品ページをデザインする際の注意点
商品ページをデザインするにあたって、注意すべきルールやポイントを解説します。ルールやポイントを押さえていないと、ユーザーが離脱するだけでなく、ペナルティを受ける場合があるため事前に確認しておきましょう。
1. 出店先のルール
出店先ごとに商品画像のルールが定められているため、規定を守ってデザインしましょう。ルールに違反すると、ランキングの掲載制限や検索表示順位ダウンなどのペナルティを受ける場合があります。
楽天市場・Amazon・Yahoo!ショッピングなどの主要な出店先では、商品画像のサイズ・ファイル容量・ファイル形式・テキスト要素の扱い・背景などについて、それぞれ独自のルールが定められています。
特に1枚目のメイン画像については、出店先ごとにルールが細かく異なります。メイン画像かサブ画像かによって規定が異なる場合もあるため、デザイン前に各出店先の最新のルールを必ず確認しましょう。出店先のガイドラインは変更されることがあるため、公式情報を都度チェックすることが大切です。
2. レスポンシブデザインに対応しているか
PC用のデザインをそのままスマホ画面に表示すると、画像や文字が見づらくユーザーが離脱しやすくなります。どのデバイスからも見やすいように、商品ページは「レスポンシブデザイン」で制作しましょう。
レスポンシブデザインとは、デバイスの画面サイズに応じてレイアウトを最適化するページ設計です。スマホからも見やすく表示させてユーザーの離脱を防ぐだけでなく、デバイスごとのページデザインの管理を一括で行えます。
PC用とスマホ用で別々の商品ページを用意するよりも、商品情報の追加やサイトの修正にかかる工数を減らせます。
関連記事：ECサイトをレスポンシブデザインにする5つのメリット！注意点と実装方法も解説
3. ページの表示速度
ページの表示速度が遅いと、ユーザーが待てずに離脱しやすいため注意が必要です。またページの表示速度はサイトへのアクセス数に影響し、遅い場合は検索順位が落ちる可能性があります。使用する画像のサイズが大きいとページの表示速度が遅くなるため、画像の圧縮やリサイズを行いましょう。
レスポンシブデザインで制作した場合、スマホ版のページの表示速度が遅くなることがあります。レスポンシブデザインでの表示速度が遅い場合は、PC版とスマホ版でサイズが異なる画像を使い分ける、HTMLやCSSの縮小を行うなどの対策を実施しましょう。
関連記事：ECサイトにLPを取り入れる5つのメリット！CV率を高める運用方法も解説
商品ページのデザインが参考になるギャラリーサイト
商品ページのデザインを一覧で見られるギャラリーサイトの中でも、ECサイトを多く扱っている3つのサイトを紹介します。ファーストビューのデザイン案の作成や、制作会社にイメージを伝える際の参考例として、ギャラリーサイトを活用してください。
1. MUUUUU.ORG
掲載サイト数が豊富で、縦長のレイアウトのページがまとめられているギャラリーサイトです。
多数のデザインが掲載されており、さまざまな商品や各ターゲットに向けたページを参考にできます。業種・デザインのテイスト・色味・カテゴリーといった条件で絞り込んで閲覧でき、クオリティが高いデザインのサイトが多いため、自社のトップページやファーストビューの参考にしてください。
2. SANKOU!
ECサイトのファーストビューが一覧になっており、見やすいデザインのギャラリーサイトです。
多数のデザインがそろっており、カテゴリー検索だけでなくアニメーションでの絞り込みも可能です。LPやコーポレートサイト、スマホに特化したページが閲覧でき、さまざまなデザインの参考として活用できます。
3. ikesai
掲載サイトのサムネイルが小さく、大量のデザインを素早く閲覧できるギャラリーサイトです。業種や色味だけでなく、レスポンシブデザインでの絞り込みができます。
シンプルで見やすさを重視したサイトが多くあり、回遊性を高めるための参考としても活用できます。
売れる商品ページのデザインを作るならFORCE-R
FORCE-Rは各種モールにおける戦略を熟知しており、売上アップにつながる商品ページのデザインの提案が可能です。化粧品事業のコンサル事例では、ECサイトのデザイン改修や出店先に即した広告戦略により、売上を前年比318%拡大した実績があります。
自社にクリエイティブ事業部があり、商品ページだけでなくECサイト全体のデザイン制作にも対応可能です。商品ページやECサイトのデザイン改修でお悩みの企業の担当者さまは、まずはお気軽にお問い合わせください。
関連記事：初心者向け！ECサイトの始め方：3ステップで始めるネットショップ開業
まとめ：商品ページはユーザー目線でデザインを改善しよう
商品ページをデザインする際は、必要な要素を入れるだけでなく、ユーザーにとってプロダクトの魅力がわかりやすいページにすることが重要です。ユーザーが購入しやすい導線設計や、ECサイトの回遊性を高めるようデザインすることで、売上アップにつながります。
また、商品ページのデザインは、本記事で解説したとおり、現状の課題分析から始めて、ターゲットを明確にし、共通点を踏まえて改善し、効果を検証するという手順を踏むことで、着実に成果につなげられます。7つの共通点を意識しつつ、手順に沿ってデザインを改善していきましょう。
FORCE-Rでは「定量×定性」の分析により、サイト内におけるユーザーの動きを解析し、的確な導線設計や回遊率を高める施策の立案が可能です。実績のあるコンサルタントが入念にヒアリングを行い、商品ページやECサイトのデザイン改修を全力でサポートいたします。
