よろしければこちらもご覧ください

ECサイト(ネットショップ)の売り上げを伸ばすために、デザインの力は不可欠です。とはいえ、「商品ページのデザインってどうすればいいの?」「売れるデザインのポイントを知りたい!」という方も多いと思います。

今回は「売れる商品ページを作るデザインのコツ」を厳選して5つ紹介します。これらのコツを実践すれば、ユーザーの離脱を防ぎ売り上げアップが期待できるかもしれません。本記事を読んで、ユーザーにとってより良いデザインをめざしましょう!

優れた顧客体験には「デザイン」の力が必須

ECサイトの売り上げを伸ばすには、多くの人に購入してもらうだけでなく、ファンになって商品をリピートしてもらうことが大切です。そのためには、ユーザーに対して以下のような価値提供が欠かせません。

  • 商品の魅力を分かりやすく伝える
  • スムーズに商品を購入しやすくする
  • ショップ独自の世界観を作り上げる

デザインはこれらすべてに深く関係しており、売り上げを左右する大きな要因の1つといえます。もちろん商品の画像や説明文なども大切ですが、「優れた顧客体験にはデザインの力が必須」であることを覚えておきましょう。

「オシャレなデザイン=売れるデザイン」ではない

デザインと聞くと「センスや芸術性がない自分には難しいのでは……」と思う方がいるかもしれません。しかし、ECサイトに必要なのはオシャレなデザインではなく「売れるデザイン」です。

具体的には「ユーザーにとってわかりやすい・使いやすいデザイン」を指します。

「商品画像を大きくしてインパクトを与えようとしたけれど、データ量が大きくて読み込みが遅く、ユーザーが離脱してしまった……。」

これは少し極端な例ですが、似たような失敗は少なくありません。独りよがりのデザインではなく、あくまでユーザー目線に立った「わかりやすい・使いやすいデザイン」をめざしましょう。

ECサイトで売れる商品ページをつくるデザインのコツ5つ

売れる商品ページをつくるコツは数多くありますが、その中から厳選して5つお伝えします。

  1. ユーザーの属性に合わせてデザインする
  2. ファーストビューに命を懸ける
  3. 購入ボタンのデザインにこだわる
  4. 回遊性を意識したデザインを施す
  5. 表示スピードが速いデザインにする

1.ユーザーの属性に合わせてデザインする

ユーザーの属性(性別・年齢・職業・年収・趣味など)に合ったデザインを提供できれば、それだけユーザーの心に刺さりやすくなります。たとえば、以下のような感じです。

  • 【 シニア向け 】 文字サイズを大きくして読みやすくする
  • 【 男性向け 】 シンプルかつスタイリッシュなデザインにする
  • 【 女性向け 】 やわらかくて淡い色調のデザインにする

とはいえ、このような細かいデザインを一から考える必要はなく、基本的には近しい他サイトを参考に作るのがおすすめです。

いきなりオリジナリティあふれるデザインにしようとすると、時間がかかる上に素人っぽくなりがちだからです。

まずは他サイトで基本を押さえつつ、その後に独自性やこだわりを加えてより魅力的なデザインに仕上げていきましょう。

参考にしたいECサイトを探すには、数多くのWebサイトを集めたギャラリーサイト(「MUUUUU.ORG」や「RWDJP」など)を使うと便利です。

2.ファーストビューに命を懸ける

ファーストビュー(FV)とは、ユーザーがスクロールせず最初に見る画面のことです。

futureshop フューチャーショップ ファーストビュー 売り上げアップ
ファーストビュー(FV)の範囲

ユーザーはファーストビューを見て、読み進めるか・離脱するかを瞬時に判断しています(一般的には8割のユーザーが離れ、2割のユーザーだけが残るといわれてます)。

つまり、いかにファーストビューでユーザーを離さないかが、売り上げを伸ばす上でとても重要になります。

ユーザーの興味を引きつけられるよう、以下のようなセールスに関わる要素はファーストビューに積極的に配置しておきましょう。

ファーストビューに置くべき要素

  • 商品の魅力を最大限に表現したメイン画像
  • ユーザーのベネフィットが直感的にわかるキャッチコピー
  • メディア掲載実績・販売数実績・キャンペーン情報

ちなみに、よくあるメイン画像の失敗として、商品単体をそのまま載せてしまうケースがありますが、それではユーザーは強い反応を示しません。

服ならモデルが着ている様子、食品なら食べている様子など、実際に商品を使っているシーンを演出してアピールしましょう。

3.購入ボタンのデザインにこだわる

購入ボタンの色やサイズ、テキスト、配置場所を変えるなど、小さな工夫で成約率が大きく変わることがあります。

1.ボタンの色

注意を引く赤色や、安心感を与える緑色だと成約しやすいとも言われていますが、高級ブランドの場合は黒を使うケースもあります。サイトの配色に合わせながらも、周囲の色に埋もれてしまわない色で目立たせましょう。

2.ボタンのサイズ

ボタンのサイズが大きく、ユーザー(サイトの場合はマウスのポインターと考えます)との距離が近いほど、ユーザーはよりボタンを押しやすくなります(フィッツの法則)。特にスマホで買い物をする人が増えているため、サイトの雰囲気を壊さない程度にタップしやすくすることが重要です。

3.ボタンのテキスト

「カートに入れる」などのボタン周りに、ユーザーの背中を押す一言を加えると売り上げアップが期待できます。たとえば「今なら2点目半額!」「◯円以上なら送料無料」「◯時までのご注文で当日発送予定」などです。

4.ボタンの配置場所

スマホは一画面あたりの情報量が少なく、買いたいタイミングで購入ボタンが見当たらないことも。「画面下部に購入ボタンを固定する」「購入ボタンまでジャンプできる案内ボタンを置く」など、ユーザーを迷わせず買いやすくする工夫が必要になります。

購入ボタンはECサイトの売り上げに大きく直結する部分なので、細かくABテスト(反応が良いパターンの検証)をするのがおすすめです。

もしABテストの実施が難しい場合は、同ジャンルのなかで有名な店舗のデザインを参考にしてみてください。

なぜなら、多くのユーザーが使い慣れているデザインは、より優れたユーザー体験をもたらしやすいからです。

4.ECサイト内での回遊性を意識したデザインにする

「ユーザーが商品ページを下まで見たものの、購入には至らなかった」というケースは少なくありません。

しかし、他の商品を見て回れるデザインをページ下に施せば、続けて商品を見てもらえる可能性が高くなります。サイトの回遊率を上げて、ユーザーの離脱防止や売り上げアップをめざしましょう。

  • 新着、再入荷、カテゴリ別の商品案内
  • 人気ランキング、おすすめ商品、季節の限定商品
  • お得なクーポン、セール、キャンペーン
  • 関連商品、閲覧履歴(最近チェックした商品)
  • サイト内検索、よく検索される人気キーワード

ユーザーにとってベストな案内ができるよう、これらの要素をぜひ組み合わせてみてください。

また、ユーザーの目を引くバナーを用意して、思わずタップしたくなる工夫をするとより効果的です。

5.表示スピードが速いデザインにする

スマホだと通信環境や端末のスペックなどが原因で、ページの読み込みや遷移が遅くなりがちです。

実際に「ECサイトのページ表示に3秒以上かかる場合、40%のユーザーが離脱する」というデータも出ています。

せっかくの見込み客を逃さないためにも、以下のようにページ容量を軽くして表示速度を意識したデザインにしましょう。

  • 画像圧縮ツールで、画像のデータ量を減らす
  • 実際にサイトで使う大きさに、画像の大きさをリサイズし各デバイスにあった大きさにする
  • 画像の遅延読み込みをする(先頭から優先的に表示させる)
  • データ量の大きいスライダーを、スマホでは静止画に切り替える

特にECサイトは写真を多く使うので、写真まわりのデータ量の改善は必須です。

また、意外と自社のECサイトで購入完了までを実際にやっている人は少ないです。ユーザーの立場になったつもりで、自分でスマホから商品を選んだり購入したりすると、改善点を見つけやすいのでぜひ試してみましょう。

まとめ

改めて「売れる商品ページをつくるデザインのコツ」をまとめます。

  • ユーザーの属性に合わせてデザインする
  • ファーストビューは特に力を入れる
  • 購入ボタンのデザインにこだわる
  • 回遊性を意識したデザインを施す
  • 表示スピードが速いデザインにする

ECサイトの売り上げを伸ばすには、ユーザーの離脱防止や購入率・客単価のアップが欠かせません。

そのためには「商品の魅力を分かりやすく伝える」「スムーズに買い物をしやすくする」など、優れた顧客体験が大切です。

デザインはそれらに深く関わっており、売り上げを左右する大きな要因の1つといえます。

ぜひこの記事を参考に、ECサイトのデザインを見直してみてくださいね。

また、カートの選び方も重要になります。細かなところまでデザインできないカートもありますので、細部まで確認してみましょう。

この記事はフューチャーショップのオウンドメディア『E-Commerce Magazine』の記事を、ネットショップ担当者フォーラム用に再編集したものです。

この記事が役に立ったらシェア!
よろしければこちらもご覧ください

E-Commerce Magazine

フューチャーショップ

SaaS型ECサイト構築プラットフォーム「futureshop」が運営する

EC担当者のために役立つ情報をご提供する、EC特化型情報マガジンです。

記事カテゴリー: 
記事種別: 

ネットショップ担当者フォーラムを応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

[ゴールドスポンサー]
楽天株式会社 eBay(イーベイ) ecbeing. Qoo10 Nint
[スポンサー]
株式会社アイル auWowma! クリームチームマーケティング合同会社 ユーザグラム