ECサイト（ネットショップ）の売り上げを伸ばすために、デザインの力は不可欠です。とはいえ、「商品ページのデザインってどうすればいいの？」「売れるデザインのポイントを知りたい！」という方も多いと思います。
今回は「売れる商品ページを作るデザインのコツ」を厳選して5つ紹介します。これらのコツを実践すれば、ユーザーの離脱を防ぎ売り上げアップが期待できるかもしれません。本記事を読んで、ユーザーにとってより良いデザインをめざしましょう！
優れた顧客体験には「デザイン」の力が必須
ECサイトの売り上げを伸ばすには、多くの人に購入してもらうだけでなく、ファンになって商品をリピートしてもらうことが大切です。そのためには、ユーザーに対して以下のような価値提供が欠かせません。
商品の魅力を分かりやすく 伝える
スムーズに 商品を購入しやすくする
ショップ独自の世界観 を作り上げる
デザインはこれらすべてに深く関係しており、売り上げを左右する大きな要因の1つといえます。もちろん商品の画像や説明文なども大切ですが、「優れた顧客体験にはデザインの力が必須 」であることを覚えておきましょう。
「オシャレなデザイン＝売れるデザイン」ではない
デザインと聞くと「センスや芸術性がない自分には難しいのでは……」と思う方がいるかもしれません。しかし、ECサイトに必要なのはオシャレなデザインではなく「売れるデザイン」です。
具体的には「ユーザーにとってわかりやすい・使いやすいデザイン 」を指します。
「商品画像を大きくしてインパクトを与えようとしたけれど、データ量が大きくて読み込みが遅く、ユーザーが離脱してしまった……。」
これは少し極端な例ですが、似たような失敗は少なくありません。独りよがりのデザインではなく、あくまでユーザー目線に立った「わかりやすい・使いやすいデザイン」 をめざしましょう。
ECサイトで売れる商品ページをつくるデザインのコツ5つ
売れる商品ページをつくるコツは数多くありますが、その中から厳選して5つお伝えします。
ユーザーの属性に合わせてデザインする
ファーストビュー に命を懸ける
購入ボタンのデザイン にこだわる
回遊性 を意識したデザインを施す
表示スピードが速い デザインにする
1.ユーザーの属性に合わせてデザインする
ユーザーの属性（性別・年齢・職業・年収・趣味など）に合ったデザインを提供できれば、それだけユーザーの心に刺さりやすくなります。たとえば、以下のような感じです。
【 シニア向け 】 文字サイズを大きく して読みやすくする
【 男性向け 】 シンプルかつスタイリッシュ なデザインにする
【 女性向け 】 やわらかくて淡い色調 のデザインにする
とはいえ、このような細かいデザインを一から考える必要はなく、基本的には近しい他サイトを参考に作るのがおすすめです。
いきなりオリジナリティあふれるデザインにしようとすると、時間がかかる上に素人っぽくなりがちだからです。
まずは他サイトで基本を押さえつつ 、その後に独自性やこだわりを加えてより魅力的なデザイン に仕上げていきましょう。
参考にしたいECサイトを探すには、数多くのWebサイトを集めたギャラリーサイト（「MUUUUU.ORG」や「RWDJP」など）を使うと便利です。
2.ファーストビューに命を懸ける
ファーストビュー（FV）とは、ユーザーがスクロールせず最初に見る画面のことです。
ファーストビュー（FV）の範囲
ユーザーはファーストビューを見て、読み進めるか・離脱するかを瞬時に判断しています（一般的には8割のユーザーが離れ、2割のユーザーだけが残る といわれてます）。
つまり、いかにファーストビューでユーザーを離さないか が、売り上げを伸ばす上でとても重要になります。
ユーザーの興味を引きつけられるよう、以下のようなセールスに関わる要素はファーストビューに積極的に配置しておきましょう。
ファーストビューに置くべき要素
商品の魅力を最大限に表現したメイン画像
ユーザーのベネフィットが直感的にわかるキャッチコピー
メディア掲載実績・販売数実績・キャンペーン情報
ちなみに、よくあるメイン画像の失敗として、商品単体をそのまま載せてしまうケースがありますが、それではユーザーは強い反応を示しません。
服ならモデルが着ている様子、食品なら食べている様子など、実際に商品を使っているシーンを演出してアピール しましょう。
3.購入ボタンのデザインにこだわる
購入ボタンの色やサイズ、テキスト、配置場所を変えるなど、小さな工夫で成約率が大きく変わることがあります。
1.ボタンの色
注意を引く赤色や、安心感を与える緑色だと成約しやすいとも言われていますが、高級ブランドの場合は黒を使うケースもあります。サイトの配色に合わせながらも、周囲の色に埋もれてしまわない色 で目立たせましょう。
2.ボタンのサイズ
ボタンのサイズが大きく、ユーザー（サイトの場合はマウスのポインターと考えます）との距離が近いほど、ユーザーはよりボタンを押しやすくなります（フィッツの法則）。特にスマホで買い物をする人が増えているため、サイトの雰囲気を壊さない程度にタップしやすくする ことが重要です。
3.ボタンのテキスト
「カートに入れる」などのボタン周りに、ユーザーの背中を押す一言を加える と売り上げアップが期待できます。たとえば「今なら2点目半額！」「◯円以上なら送料無料」「◯時までのご注文で当日発送予定」などです。
4.ボタンの配置場所
スマホは一画面あたりの情報量が少なく、買いたいタイミングで購入ボタンが見当たらないことも。「画面下部に購入ボタンを固定する」「購入ボタンまでジャンプできる案内ボタンを置く」など、ユーザーを迷わせず買いやすくする 工夫が必要になります。
購入ボタンはECサイトの売り上げに大きく直結する部分なので、細かくABテスト（反応が良いパターンの検証）をするのがおすすめ です。
もしABテストの実施が難しい場合は、同ジャンルのなかで有名な店舗のデザインを参考にしてみてください。
なぜなら、多くのユーザーが使い慣れているデザインは、より優れたユーザー体験をもたらしやすい からです。
4.ECサイト内での回遊性を意識したデザインにする
「ユーザーが商品ページを下まで見たものの、購入には至らなかった」というケースは少なくありません。
しかし、他の商品を見て回れるデザインをページ下に施せば、続けて商品を見てもらえる可能性が高くなります。サイトの回遊率を上げて、ユーザーの離脱防止や売り上げアップ をめざしましょう。
新着、再入荷、カテゴリ別の商品案内
人気ランキング、おすすめ商品、季節の限定商品 お得なクーポン、セール、キャンペーン
関連商品、閲覧履歴 （最近チェックした商品）
サイト内検索、よく検索される人気キーワード
ユーザーにとってベストな案内ができるよう、これらの要素をぜひ組み合わせてみてください。
また、ユーザーの目を引くバナーを用意して、思わずタップしたくなる工夫をするとより効果的です。
5.表示スピードが速いデザインにする
スマホだと通信環境や端末のスペックなどが原因で、ページの読み込みや遷移が遅くなりがちです。
実際に「ECサイトのページ表示に3秒以上かかる場合、40%のユーザーが離脱する 」というデータも出ています。
せっかくの見込み客を逃さないためにも、以下のようにページ容量を軽くして表示速度を意識したデザインにしましょう。
画像圧縮ツールで、画像のデータ量を減らす
実際にサイトで使う大きさに、画像の大きさをリサイズし各デバイスにあった大きさにする
画像の遅延読み込み をする（先頭から優先的に表示させる）
データ量の大きいスライダーを、スマホでは静止画に切り替える
特にECサイトは写真を多く使うので、写真まわりのデータ量の改善は必須 です。
また、意外と自社のECサイトで購入完了までを実際にやっている人は少ない です。ユーザーの立場になったつもり で、自分でスマホから商品を選んだり購入したりすると、改善点を見つけやすい のでぜひ試してみましょう。
まとめ
改めて「売れる商品ページをつくるデザインのコツ」をまとめます。
ユーザーの属性に合わせてデザインする
ファーストビュー は特に力を入れる
購入ボタンのデザイン にこだわる
回遊性 を意識したデザインを施す
表示スピードが速い デザインにする
ECサイトの売り上げを伸ばすには、ユーザーの離脱防止や購入率・客単価のアップ が欠かせません。
そのためには「商品の魅力を分かりやすく伝える 」「スムーズに買い物をしやすくする 」など、優れた顧客体験が大切です。
デザインはそれらに深く関わっており、売り上げを左右する大きな要因の1つといえます。
ぜひこの記事を参考に、ECサイトのデザインを見直してみてくださいね。
また、カートの選び方も重要になります。細かなところまでデザインできないカートもありますので、細部まで確認してみましょう。
※このコンテンツはWebサイト「ネットショップ担当者フォーラム」 で公開されている記事のフィードに含まれているものです。ECサイトの売上UPを実現するデザインのコツ。商品購入につながる「わかりやすい・買いやすい」デザインとは？ | E-Commerce Magazine Powered by futureshop
