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