【決定版】売れる商品ページのデザインを作りたい！ECサイトデザインのポイントや事例もご紹介

どんなに良い商品でも、商品ページのデザインによって売上は大きく変わってきます。
ユーザーの購買意欲を高めるために商品ページのデザインはとても重要です。

「思ったように売上が伸びない」
「リニューアルしたら売上が大幅に落ちた」
「これからECサイトを立ち上げたい」方は是非参考にしてみて下さい。

売れる商品ページを制作するにはSEO・SEM・デザイン・心理・導線・UI・UXなど複数の要素が必要となります。

今回はマーケティング要素で重要な「商品ページのデザイン」の重要性にスポットを当てつつ、売れるECサイトデザインのポイントや商品ページ制作時に気をつけるべきポイントをご紹介します。

商品ページのデザインが重要な理由

ECサイトの目的は「商品を販売して売上を上げること」です。
ですが、どんなに良い商品を販売していたとしても商品ページのデザインがいまいちだと売り上げは伸びません。

商品ページのデザインが重要な理由を３つ解説します。

集客から売上に結びつける

SEO対策・リスティング広告・SNSなどを駆使して、見込み客をECサイトへ集めたとしても、商品ページのデザインが悪いと、商品を購入してもらえる確率が下がります。

売上は《お客様の数×購入率》となります。

例えば、集客した100人のうち1人のお客様が購入してくれた場合、【100人×購入率1％＝売れた数１個】となります。

商品ページのデザインを最適化することで購入率を5％に改善できたらどうでしょうか。

【お客様100人×購入率5％＝売れた数５個】

売上が５倍になります。逆算すると集客が20人しかできなくても１個売れるようになります。

この購入率を上げる事が商品ページのデザインの重要性です。

商品の魅力が伝わる

商品を購入してもらう為には、商品自体の魅力をユーザーに伝えることが重要です。

商品の魅力とは購入することによってお客様が得られる対価です。

妥当と思えば購入してもらえますし、お得と感じれば大量に売れる可能性があります。しかし商品の魅力が伝わらなければ、せっかくの見込み客も逃してしまいます。

見込み顧客が獲得できる

ECサイトへ訪問してくれた時点では、お客様によって購買意欲が違います。

「この商品を買う」と元々決めているユーザーは購入に至りますが、「商品が気になる」「購入を迷っている」方は商品ページのデザイン次第で商品を購入するかが変わります。

この見込み客を購入に繋げられるかが、商品ページのデザインに左右されます。

ECサイトデザインのポイント

売れるECサイトを制作する際に、気を付けるべき点を４つ紹介します。

この４点を改善するだけでも大きく変わってきます。

商品や情報が整然とされている

ユーザーによって商品に対するこだわりポイントが違います。

商品の情報を網羅して記載するのは当然ですが、見にくいテキストの羅列などは問題です。ただ記載しておけばよいのではなく「情報がキレイにまとめられている」事が重要です。

商品情報は、行間や文字サイズを意識して見やすく整然とされたデザインにしましょう。

ファーストビューで完結させる

ECサイトではファーストビューが特に重要で、10人中８人はファーストビューの時点で離脱すると言われています。

ファーストビューで「魅力的な商品画像」「キャッチコピー」「ベネフィットリスト」を配置することで、購買意欲を高めることができます。

ファーストビューからCV（コンバージョン）へ繋がるように、CTA（コールトゥアクション）ボタンも配置しましょう。また商品画像は１枚だけではなく、複数の画像を用意することで、より商品の魅力を伝えられます。

【ファーストビューとは】
ファーストビューとは、ホームページを閲覧する際にデバイスに初めに表示される部分です。

目につくところに購入ボタンがある

CTAボタンがいつでもクリックできるように、わかりやすい場所に常に表示しておきましょう。

CTAボタンとは「購入する」「カートに入れる」「申し込み」などコンバージョンへ繋がるボタンの事です。「買ってもいいかな」といった気持ちが生まれた際にCTAボタンがあることで購入率が変わります。

CTAボタンのテキスト内容やデザインも重要です。

ターゲットの属性に合わせてデザインする

ECサイト全体のイメージを、ターゲット層に受け入れられやすいデザインにすることも重要です。
例えばコスメアイテムの販売をしているのであれば「女性向け」のデザインにしていきましょう。

間違った例としては、「幼児向けの玩具を販売しているのに、スタイリッシュでかっこ良すぎるデザインにしてしまう」などです。幼児向けの玩具の販売であれば、柔らかいカジュアルな雰囲気のデザインがターゲットには合います。

商品ページ制作時に気を付けるポイント

商品ページのデザインで、必ず押さえておくべきポイントが４つあります。購入率を上げるために改善していきましょう。

CTAを意識してカートを配置する

売れる商品ページのデザインで一番重要なのは、購入ボタンやカートボタンの位置です。

「買ってもいいかな」と思ってもらえたらすぐに購入できるように、CTAボタンを目立つ所に配置しましょう。

いつでもCTAボタンを見つけられるのが理想です。

商品の情報を網羅する

商品の詳細は必ず網羅して記載しましょう。

ユーザーによってこだわるポイントが違うため、人によって必要な情報が違うからです。

• 原材料にこだわりがある
• 賞味期限が知りたい
• 安全性を知りたい
• お届け日を知りたい
• 返品できるか知りたい

などが考えられます。

上記以外にも考えられることは全て商品情報として記載しましょう。

導線を意識する

売れる商品ページを作るためには、どのような流れで購入に至るのかを意識しましょう。いわゆるストーリー性です。

例えば【良さそうな商品画像を見る→ベネフィットと価格を見る→詳細情報を見る→買ってみよう】といった流れです。

商品ジャンルによって多少違いはありますが、【興味→対価→後押し→購入】といった導線を意識して商品ページをデザインしましょう。

デバイスが違ってもわかりやすいデザインにする

近年ではスマホからネットショッピングをするのがスタンダードになっています。

その為、売れる商品ページを制作するにはスマホ対応が必須となります。デバイスによって画面サイズが変わるので、ファーストビューも変わってきます。

スマホ対応ができていない場合はWeb制作会社に相談しましょう。

デザイン性の高いECサイト例

売れる商品ページのデザインが重要なことを解説してきました。ここでは実際にデザイン性の優れたECサイトを２つご紹介します。

BEAUTEX株式会社

公式サイトはこちら

商材はカラーコンタクトレンズです。

ターゲット層が明確なデザイン

ファーストビューで「女性向け」のサイトであることがわかります。

淡い色使いで女性の写真を使用しており、10代〜30代の女性をターゲットにしているのが読み取れます。ターゲット層に当てはまる方に刺さるデザインです。

情報がシンプルで見やすい

カラーコンタクトの販売ページですが、「デザイン」「色合い」「価格」「数量」などユーザーが気にするポイントをシンプルにまとめられています。誰もが気にするポイントがシンプルにまとめられていて非常に見やすいです。商品ページも詳細情報が網羅されていて、見やすくデザインされています。

WALPA

公式サイトはこちら

壁紙の販売サイトです。

白黒基調で制作し見やすい

サイト自体が白色と黒色で構成されていて統一感があります。壁紙がカラフルなため商品が目立つようにデザインされています。

重要部分のみ赤や太字で強調している

白黒ベースのシンプルな色使いでありながら、テキストが非常に目立つ工夫がされています。ユーザーに伝えたいテキストは太字にして、ユーザーに注意を促す部分のみ赤色になっています。ユーザーが勘違いしないようにという気遣いが感じられます。

ユーザーが気になる部分が解決されている

商品ページを見ていただくとわかると思いますが、「壁紙の貼り方」「必要な道具」「張り替え後のイメージ」などユーザーが購入後に直面する問題を解決しています。

商品を売るだけではなく、購入した後の悩みを事前に解決しています。

デザイン性の高い商品ページ制作を得意とするWeb制作会社15選

ここからは、商品ページ制作におすすめのWeb制作会社をご紹介します。各社の特徴もまとめているので、比較しながらご覧ください。

最後に

売れる商品ページデザインでは、「マーケティング要素×デザイン」が重要です。

本記事では

• 商品ページデザインのポイント
• 商品ページ制作時に気をつけるポイント
• デザイン性の高いECサイト例
• 商品ページ制作を得意とするおすすめのWeb制作会社

をご紹介しました。

同じ商品でも「見せ方」によって必ず変わってきますので、改善できる部分から見直していくのもおすすめです。

PITTALAB（ピッタラボ）ではおすすめのホームページ制作会社をまとめて比較することができます。
激選してご紹介していますが、ホームページ制作でお困りの際はお気軽にお問い合わせください。

Web制作会社をお探しの方におすすめ

• ECサイト制作会社をお探しの方はこちら
• 全国でおすすめのWeb制作会社はこちら
• 東京でおすすめのWeb制作会社をお探しの方はこちら
• 大阪でおすすめのWeb制作会社をお探しの方はこちら
• 格安なWeb制作会社をお探しの方はこちら
• LP制作会社をお探しの方はこちら
• Webデザインに強い制作会社をお探しの方はこちら
• オウンドメディア制作会社をお探しの方はこちら
• 採用サイト制作会社をお探しの方はこちら
• SEOに強いホームページ制作会社をお探しの方はこちら
• WebマーケティングでおすすめなWeb制作会社はこちら
• 中小企業向けのWeb制作会社はこちら

Web制作関連の知識を身につけよう

• Web制作の費用相場を詳しく知りたい方はこちら
• ホームページ作成の管理費内訳を知りたい方はこちら
• Web制作の依頼方法について知りたい方はこちら
• ホームページ制作会社の選び方はこちら
• ホームページ制作の見積もり依頼時に注意すべきポイントはこちら
• ホームページ制作の流れを知りたい方はこちら
• 見やすいホームページを知りたい方はこちら
• ホームページを作る際に使える助成金はこちら
• サイトリニューアルの手順はこちら