ぴったり、を選ぼう。PITTALAB
売れる商品ページのデザインを作りたい!.png

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

twitterでシェア
facebookでシェア
はてぶ
公開日: 2022.05.11
更新日: 2022.10.05

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

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

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

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

目次
目次

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

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

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

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

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

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

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

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

【お客様100人×購入率5%=売れた数5個】

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

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

商品の魅力が伝わる

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

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

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

見込み顧客が獲得できる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

商品の情報を網羅する

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

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

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

などが考えられます。

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

導線を意識する

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

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

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

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

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

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

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

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

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

BEAUTEX株式会社

公式サイトはこちら

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

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

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

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

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

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

WALPA

公式サイトはこちら

壁紙の販売サイトです。

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

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

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

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

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

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

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

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

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

1

ウェブモ株式会社

ウェブモ株式会社.jpg

引用:公式サイトより

【ポイント】

ECサイト制作に強い

返金保証制度がある

SNS運用が得意

ウェブモ株式会社は、ECサイトの制作+SNSを利用した運用を得意としています。またシステム開発も可能なためバックエンド領域の作業も可能で、ECサイトの高速化設定も行っています。

対応サイト制作の種類ECサイト サービスサイト LP
料金ECサイト:50万円~
実績株式会社ダスキン東横
得意業界ECサイト
設立年2008年
SEO対策
対応開発言語PHP JavaScript C Access
対応CMSWordPress EC-CUBE
対応エリア全国
制作後のサポート
2

株式会社アプリコットデザイン

株式会社アプリコットデザイン.jpg

引用:公式サイトより

【ポイント】

広告全般を取り扱っている

女性デザイナーが多く在籍していて柔らかいデザインが得意

デザイナーを指名して制作を依頼できる

株式会社アプリコットデザインは女性が活躍しているWeb制作会社で、ホームページの制作だけではなく、名刺・POP・ポスター・パンフレットも取り扱っています。また開業プランを用意しているので、これからショップ運営を始めたい方にはおすすめのWeb制作会社です。

対応サイト制作の種類ECサイト サービスサイト
料金サービスサイト:38万円~
実績京都しまうま堂株式会社
得意業界ECサイト
設立年2013年
SEO対策
対応開発言語PHP JavaScript C# java Access
対応CMSWordPress EC-CUBE
対応エリア全国
制作後のサポート
3

株式会社アイ・ティ・エー

株式会社アイ・ティ・エー.jpg

引用:公式サイトより

【ポイント】

店舗の取材や撮影してくれる

SNSの運用代行が可能

予算から最適解を提案してくれる

株式会社アイ・ティ・エーはWebコンサルティングを主軸としてサイト制作から保守・運用までトータルサポートしてくれます。Webの経験が少ない方にはヒアリングから始めて、予算と合わせたプランを提案してくれます。

対応サイト制作の種類ECサイト サービスサイト
料金ECサイト:60万円~
実績株式会社コアワークス
得意業界Webコンサルティング
設立年2000年
SEO対策
対応開発言語PHP JavaScript
対応CMSWordPress
対応エリア全国
制作後のサポート
4

株式会社イーツー・インフォ

株式会社イーツー・インフォ.jpg

引用:公式サイトより

【ポイント】

システム開発が強くオリジナルのECサイト制作ができる

アプリケーションの開発も可能

既存サイトのリニューアルや機能の追加ができる

株式会社イーツー・インフォはシステム開発がメインの制作会社ですが、ECサイトと採用サイトの制作は得意としていて、デザイン面でも優秀です。アプリケーションの制作も可能なため、アイデア次第で売れるECサイトの大きな武器になります。

対応サイト制作の種類ECサイト 採用サイト
料金ECサイト:70万円~
実績レイコップジャパン株式会社
得意業界システム開発
設立年2005年
SEO対策
対応開発言語PHP
対応CMSEC-CUBE CS-cart MakeShop
対応エリア東京都
制作後のサポート
5

株式会社GT-works

株式会社GT-works.jpg

引用:公式サイトより

【ポイント】

新しく若い制作会社

小規模でもデザインは優秀

価格が安い

株式会社GT-worksは2021年の設立と、ご紹介しているWeb制作会社の中で一番若い会社です。小規模ながら自社メディアも運営していてSEO対策も施してくれます。デザイン面も印象的なものが多く、低価格ながら品質は良いです。これからが期待できる制作会社です。

対応サイト制作の種類LP ECサイト コーポレートサイト
料金・コーポレートサイト:30万円~ ・ECサイト:20万円~ ・LP:20万円~
実績株式会社Lime、SEIMEI株式会社
得意業界コーポレートサイト制作
設立年2021年
SEO対策
対応開発言語PHP
対応CMSWordPress Shopify
対応エリア東京都
制作後のサポート
6

株式会社monomode

image0 (56).jpeg

引用:https://monomode.co.jp/

【ポイント】

デジタルマーケティング領域を網羅している

映像制作も可能

制作だけでなく運営代行が可能

株式会社モノモードはデザイン面が優れていて、さらにマーケティング全般で頼れる制作会社です。対応CMSも多く、コーポレートサイトからECサイトまで幅広く制作してくれます。

対応サイト制作の種類LP ECサイト コーポレートサイト
料金ECサイト:70万円~
実績札幌学院大学、株式会社あいプラン
得意業界Webサイト制作 システム構築 映像制作
設立年2013年
SEO対策
対応開発言語PHP JavaScript C++ perl
対応CMSWordPress EC-CUBE Shopify MakeShop WebRelease PowerCMS COLORME
対応エリア全国
制作後のサポート
7

株式会社ニュートラルワークス

株式会社ニュートラルワークス.jpg

引用:公式サイトより

【ポイント】

自社のオウンドメディアで実績多数

SEOに強い記事やホワイトペーパーの制作

成果を出すためサイト改善のコンサルティングを徹底

株式会社ニュートラルワークスはサイト制作からコンテンツ作成、運用開始後の改善施策に至るまでオウンドメディア制作をワンストップで支援してくれる会社です。

同社の強みは自社運用メディアの成功事例に基づくノウハウが蓄積されていること。

同社が運営するオウンドメディア「WEB制作相談室」は公開から1年でサイト全体の検索流入数が47倍にまで成長しています。

対応サイト制作の種類ECサイト/コーポレートサイト/採用サイト/LP
料金ECサイト:39万8,000円~ コーポレートサイト:100万円~
実績ゴリラクリニック/株式会社マンダム
得意業界Webサイト制作/システム構築
設立年2016年
SEO対策
対応開発言語PHP/JavaScript
対応CMSWordPress/EC-CUBE/Shopify/MakeShop
対応エリア全国
制作後のサポート
8

株式会社クラスアクト

株式会社クラスアクト.jpg

引用:公式サイトより

【ポイント】

オリジナルのシステム構築が得意

戦略立案・サイト制作・運用・市場調査まで行ってくれる

紙媒体での資料作成も可能

株式会社クラスアクトは、Web関連の制作全般とマーケティングまで行ってくれる頼れる制作会社です。ECサイトの構築実績も豊富で多くのCMSに対応しています。

対応サイト制作の種類ECサイト 採用サイト LP
料金・ECサイト:100万~ ・採用サイト:50万~ ・LP:20万~
実績株式会社レックス、株式会社ウズ
得意業界ECサイト システム構築
設立年2017年
SEO対策
対応開発言語PHP JavaScript perl Python
対応CMSWordPress EC-CUBE Shopify ecbeing
対応エリア全国
制作後のサポート
9

株式会社IKITA企画

株式会社IKITA企画.jpg

引用:公式サイトより

【ポイント】

制作スタッフと直接打ち合わせができる

モール型ECサイトに強い

価格が比較的安い

株式会社IKITA企画はモール型ECサイトの制作に強みを持つ制作会社です。通常のホームページの制作も行っています。一番の魅力は低価格です。オリジナルデザインで11万弱で制作してもらえます。

対応サイト制作の種類ECサイト コーポレートサイト LP
料金ECサイト(モール型):10万9780円~
実績株式会社アーヴェルシュシュ
得意業界ECサイト(モール型)
設立年2008年
SEO対策
対応開発言語PHP
対応CMSWordPress
対応エリア全国
制作後のサポート
10

株式会社ビエナセレクション

スクリーンショット 2022-01-25 153554.png

引用:公式サイトより

【ポイント】

採用ページ・ランディングページ・スマホサイト等多様なWebサイトの制作に対応できる

ECサイト制作では、Amazon・楽天・Yahoo!ショッピングなどの大手オンラインショッピングモールに対応したサイト制作が可能

WordPressについて導入から運用、バージョンアップまで一貫して行うサービスを実施している

株式会社ビエナセレクションは様々なWebサイト制作に対応している会社です。したがって、様々なクライアントのニーズ・目的を実現することが可能。新しいメンバーを募集したい場合は採用ページ、広告と連携して販促効果を高めるランディングページ、スマホ専用ページと、クライアントによって制作したいWebサイトは多岐に渡ります。同社はそれらの全てのWebサイト制作に対応することが可能です。

ECサイトの制作に強みを持つのも同社の特徴。近年ECではオンラインショッピングモールと連携できることも、売上を高める上で重要な要素となります。同社では、Amazon・楽天・Yahoo!ショッピングなど主要の大手オンラインショッピングモールに対応しているので、クライアントが希望する大手モールでオンラインショップビジネスを展開することが可能です。

同社ではWebサイトの制作をWordPressを使用して実施しています。WordPressはWebサイトの導入後の更新・カスタマイズが容易であるという特徴を持っておりますので、Webサイトを公開した後は柔軟に更新し、最適化することが可能です。自力で更新を行うこともでき、同社に依頼することでセキュリティ対策プラグイン・SEO対策プラグインなど各種WordPressのプラグインを適切に、リーズナブルな価格で導入できます

対応サイト制作の種類ECサイト コーポレートサイト LP
料金・ECサイト:55万円~ ・コーポレートサイト:33万円~ ・LP:11万円~
実績ファッションネット株式会社、株式会社横浜物産、ゴルフギアサポート
得意業界ECサイト
設立年数2007年
SEO対策
対応開発言語PHP JavaScript
対応CMSWordPress
対応エリア全国
制作後のサポート
11

株式会社スタジオカレン

株式会社スタジオカレン.jpg

引用:公式サイトより

【ポイント】

ジャンルを問わずWebサイト制作ができる

3000件以上のECサイト制作実績

売上UPの為のプロモーションが得意

株式会社スタジオカレンは設立時から楽天ビジネスAWARD「ECショップページデザイン賞」を連続して獲得していてECサイトのデザインに定評のある制作会社です。ECサイトだけではなくWebサイト制作全般を行っていますので、コーポレートサイトと連動した運用や、プロモーションを得意としています。

対応サイト制作の種類ECサイト コーポレートサイト プロモーションサイト
料金ECサイト:30万円~
実績Jリーグ公式オンラインストア、海遊館、ヤーマン株式会社
得意業界ECサイト
設立年2005年
SEO対策
対応開発言語PHP JavaScript
対応CMSWordPress Movable Type
対応エリア全国
制作後のサポート
13

株式会社arounds

株式会社arounds.jpg

引用:公式サイトより

【ポイント】

ブランディングを行ってくれる

サイト制作後も運営をサポートしてくれる

売上にコミットした戦略を立ててくれる

株式会社aroundsはECH株式会社が子会社として設立した制作会社です。設立が2020年とごく最近ですが、親会社のECH株式会社は2006年の設立で実績も豊富です。ECサイトの運用に特化した部署を子会社として設立している為、おすすめです。

対応サイト制作の種類ECサイト LP
料金ECサイト:100万円~
実績プルチャーム株式会社
得意業界ECサイト
設立年2020年
SEO対策
対応開発言語PHP JavaScript
対応CMSWordPress EC-CUBE
対応エリア全国
制作後のサポート
14

コマースメディア株式会社

コマースメディア株式会社.png

引用:公式サイトより

【ポイント】

Shopify Expertを取得してる

サイト制作だけでなく、運用、物流まで依頼できる

広告診断を行っている

コマースメディア株式会社はECサイトに特化した制作会社です。主にShopifyでの運用を得意としていて「Shopify Experts」を国内3社目に取得しました。プロのデザイナーがデザインを制作してくれるためShopifyを使った売れるECサイトを制作したい場合におすすめです。

対応サイト制作の種類ECサイト
料金ECサイト:250万円~
実績・ANA ギフトショップ ・ブラックサンダー 特設サイト ・田舎庵
得意業界ECサイト
設立年2016年
SEO対策
対応開発言語PHP
対応CMSShopify
対応エリア全国
制作後のサポート
15

株式会社ティファナ・ドットコム

株式会社ティファナ・ドットコム.jpg

引用:公式サイトより

【ポイント】

Webにも導入できるAIの提供が可能

集客、多言語対応、音声認識、画像認識など、これからのホームページにふさわしいサービスの提供

充実したWebコンサルティング、動画や映像制作、SEO対策・SEMサービス

「株式会社ティファナ・ドットコム」は東京都目黒区のWebサイト制作会社。この会社の大きな特色は、Webにも導入出来るAIを提供していることです。ビッグデータ解析やPLSAを利用した意味解析、業務の効率化と利益拡大、人手不足の解消にはティファナ・ドットコムがおすすめです。上場企業の実績でもトップクラスを誇る同社は、国際規格 ISO認証の品質管理にも重点を置いています。

対応サイト制作の種類コーポレートサイト ポータルサイト ECサイト CMS LP
料金・コーポレートサイト:400万円~ ・ポータルサイト:600万円~ ・ECサイト:400万円~ ・LP:100万円~
実績ジャパネットたかた、ホテルオークラ東京、ファーストリテイリング、株式会社KISS JAPAN、エンジャパン、ピーチ・ジョン、NTT東日本
得意業界デザイン システム開発 コーポレート AI
設立年2000年
SEO対策
対応開発言語PHP JavaScript Ruby
対応CMSWordPress Movable Type
対応エリア全国
制作後のサポート

最後に

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

本記事では

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

をご紹介しました。

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

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


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

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

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

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

無料のご相談窓口はこちら!あなたに最適な業社選定致します
\最短1分!/今すぐ相談
ぴったり、を選ぼう。PITTALAB
BtoBに特化した情報比較サイト難しい情報をもっと分かりやすく徹底比較。
データをグラフで表示するので一目で情報の整理が可能に!