売れるECサイトのデザイン3つのポイントからおしゃれな参考事例まで一挙解説!

  • このエントリーをはてなブックマークに追加

ECサイトをどのようなデザインにすればいいかお悩みではありませんか?
今回は2020年最新版!売れるECサイトのデザインを解説し、デザイナー以外の方にもわかるよう解説します。事例も参考にしながら、ご自身のECサイトのデザインを決めるのに役立ててください。

ネットショップを成功させたい方必見!
8年連続No.1のネットショップ・ECサイト構築サービスMakeShopは、あらゆる業態・商材のECビジネスをサポートしています。

モールよりも低コスト・高自由度で、顧客データを保持してリピーター促進に活用できるほか、Instagram連携や送料無料ラインの自由設定も可能です。

まずは15日間無料でお試しいただけます!(無料体験期間中は一切費用は発生しません)

ご不明な点はお気軽にお問い合わせください。専門スタッフが詳しくご説明いたします!

まずは15日間の無料体験から
1分で完了します
無料体験をはじめる

目次

売れるデザインの基本と押さえておきたい3つのポイント

ECサイトの売上アップをしたいと考えているなら、「売れるためのデザイン」を心がける必要があります。
基本的なデザインに関するポイントはいくつかありますが、大前提として「自分(または上司)が満足するデザイン」なのか、「ユーザーが満足するデザイン」なのかを常に意識することです。
とてもおしゃれでトレンド性の高いデザインに仕上がり、自分自身が「おしゃれなデザインになった!」と思っても、ユーザー側からすると「おしゃれなんだけどわかりにくい…」「何だか使いにくい…」と思われてしまっては、どれだけ運営を頑張っても売上にはつながりません。

Point1.全体がわかりやすくシンプルに見えるよう情報整理する

ECサイトに訪れた人の滞在時間や回遊率を上げるための方法の1つは、シンプルなデザインにすることです。

シンプルなデザインとは、かんたんにいえば一目でわかりやすく、無駄な情報をできるだけ省きながらも、訪問者に必要な情報を伝えることができているかどうかです。
シンプルなデザインを作るにあたって以下の点を注意しましょう。

関連する項目をまとめる

関連する項目を整理し、各情報にアクセスしやすいようにまとめましょう。
例えばファッションECの場合は、商品のカテゴリ分けをするとわかりやすいです。

大カテゴリ Aブランド/Bブランド/Cブランド/……
中カテゴリ アウター/ワンピース/トップス/ボトムス/……
小カテゴリ カットソー/ブラウス/パーカー/……
(トップスを選んだ場合の例)

カテゴリ分けをすることで、情報をまとめることができるので結果的に最小限の情報でまとめることができます。

情報の配置が規則的である

ページ上での情報の配置が段階ごとにバラバラになってしまうと、整列性がなくページ内が複雑化して非常にわかりづらくなります。
最初は真ん中に情報があったのにスクロールしたら右端だったり左端だったりまとまりがない、では訪問者にとってユーザビリティが悪くすぐにページを離れてしまう要因となります。
Amazonや楽天、Yahoo!ショッピングといった大手のモール型ECサイトを見ると、項目が規則的に並べられているためわかりやすく、訪問者の回遊率がアップしやすいデザインになっているといえるでしょう。

Point2.購入までの動線を意識して作る

デザインをシンプルにするだけでは売れるデザインになったとはいえません。
デザインをシンプルにすることはあくまでも訪問者へわかりやすく情報を提供し、離脱率の低下や滞在時間を増やす意味合いが大きいです。

売上を上げることが最大の目的のため、次に取り掛かりたいのは、滞在時間を増やした後、必要なことは「いかに購入率(CVR)を高めるか?」という点です。
購入率(CVR)を高めるのに重要なことは「ユーザーがECサイトにアクセスしてから購入するまでの動線をどう用意するか」です。

基本的には、
TOPページ > 商品ページ > カートページ > 決済ページ > 購入完了
上記のフローになりますが、ここで意識することは大きく2点、
・いかに離脱率を下げるか(≒いかにスクロールしてもらうか)
・いかに次のページに遷移してもらうか
であり、訪問者が商品を気になった時にスムーズに購入まで導けるかが購入率アップの鍵となります。

具体的には以下のチェックポイントを参考にしてください。

ファーストビューを意識する

ファーストビューとは、ECサイトを開いた時にスクロールをしないで最初に見える部分のことを表します。

訪問者はサイトにアクセスしてからたった「3秒」で離脱するか留まるかを判断するといわれており、ページの第一印象となるファーストビュー次第で良し悪しが決まるといっても過言ではありません。
そのため、特に伝えたい情報やユーザーの興味を引くキャッチーな情報をファーストビューで見せることを意識しましょう。

PCとスマートフォンでファーストビュー内の情報量に大きな差が出るため、各デバイスに合わせた情報の整理が必要です。
また、2020年にはスマホの利用率は約7割ともいわれており、PCよりもスマホのファーストビューをより一層意識して構築することが重要になっていきます。

例としてファッションECサイトの場合は、おしゃれなバナーや魅力的なバナーを上部に配置するなどがあげられます。おすすめ商品やセール・クーポン施策など、少しでも訪問者の目を引くコンテンツを入れることを意識しましょう。

ファーストビューは常に変化をつける

3のファーストビューにつながりますが、ファーストビューが常に同じままでは飽きられ、離脱率が高まります。
常に変化をつけるためにも、ファーストビューで表示する場所は定期的に新しく更新することが重要です。

ファーストビューでバナーが映る場合は、定期的にバナー内容を変化させることで訪問者に変化を見せて滞在率・回遊率アップを図ることができます。

直感的に理解できる操作性にする

商品を購入してもらうためには、訪問者を「商品ページ>カート>決済画面」へと誘導する必要がありますが、その過程における操作性は非常に重要で、いかに遷移してもらえるかの明暗が分かれます。

特に購入ボタンの大きさ・色は目立つデザインにします。
ボタンは立体的にしたり影をつけたりすることで目立たせ、色は緑や青色を利用すると良いでしょう。
Web業界では「クリックされやすいボタンは緑色」という定説があるのですが、これは2009年にFirefox(ブラウザ)がおこなったABテストの実験結果が根拠になっているようです。

スマホの場合は、画面が小さくボタンが少し小さいだけでも見えづらくなるので、できる限り画面横幅いっぱいになるよう表示させるなどの工夫をしましょう。次のページへとスムーズに遷移してもらい、結果的に購入率アップにつながります。

またボタンだけでなく、伝えたいことには色で変化をつけます。
URLなどのテキストリンクは基本的にCSSを触らなければ自動的に青色になりますが、大事なところは赤やオレンジなどの目立つカラーで差別化して視覚的にわかりやすくすることが重要です。

イメージしやすい商品画像にする

ファッションECサイトなら着用画像、雑貨や家具類などは実際に利用した時の画像など「ユーザーが利用するシーン」をイメージしやすい商品画像にすることを意識しましょう。

オンラインショップのデメリットは、商品を実際に手に取ることや直接見ることができないため、利用したときのイメージがしづらいことです。
特にファッション系だと試着ができないので、着用画像や商品詳細でサイズなどを記載してイメージを与えることが重要となります。

そのため商品画像には、商品単体の画像を利用するのではなく、買い手がイメージしやすい画像を使うことで購入率アップにつながります。

Point3.PC・スマホどちらのデバイスでもわかりやすいデザインにする

PCよりもスマホユーザーが圧倒的に多い時代になり、特にスマホのデザインに関しては年々重要視されており、「レスポンシブデザイン」にて構築することで、PC・スマホどちらのデバイスでもわかりやすく使いやすいサイトデザインに仕上げることができます。

レスポンシブデザインとは、デバイスごとのウィンドウ幅に反応し自動的に見やすい表示に切り替える仕組みを持ったデザインのことです。
PCで表示されるページをスマホでそのまま見ようとすると、文字や画像が小さ過ぎて見づらく、訪問者はすぐに離脱してしまいます。
そのため、PCはPC用のデザイン、スマホはスマホ用のデザインを制作し、対応するデバイスごとにデザインを切り替える必要があるということです。

より多くのECサイトを見てデザインを学ぶ!ギャラリーサイトのまとめ

さまざまなECサイトを見てデザインを学びたい・参考にしたいという方には「ギャラリーサイト」がおすすめです。

ギャラリーサイトには、デザインの参考になる様々なECサイトがまとめられています。
クオリティや探しやすさの観点からおすすめのギャラリーサイトをピックアップします。

デザインギャラリーサイト1:MUUUUU.ORG

MUUUUU.ORG

URL:https://muuuuu.org/
MUUUUU.ORGはクオリティが高く、縦に長いサイトを集めているギャラリーサイトです。
業種別やデザイン、色などでカテゴライズされており、参考にしたいECサイトが非常に探しやすく、また、全体的にクオリティが高いサイトが多いので、特にトップページのイメージを作る際の参考にとてもおすすめです。

デザインギャラリーサイト 2:I/O 3000

I/O 3000

URL:https://io3000.com/
I/0 3000は日本だけなく海外のサイトも掲載されている、WEBデザインに関わる人のためのWEBデザインギャラリーサイトです。
ECサイト以外の分野のサイトも扱っており、カテゴリやタグ、色で分野別に表示できます。

海外サイトも扱っていることから、グローバルに展開したい方や世界の流行りを参考にしたい方におすすめです。

デザインギャラリーサイト 3:SANKOU!

SANKOU!

URL:https://sankoudesign.com/category/ec-onlineshop/
SANKOU!はWEBデザイン制作の参考になるECサイトを集めたギャラリーサイトです。
ECサイトだけでなく、ランディングページやコンテンツページもあり、これからECサイトを制作する方にはとても参考になるサイトです。
フィルターをかけて見たい分野に絞って探すことができるので非常に便利です。

デザインギャラリーサイト 4:ikesai.com

ikesai.com

URL:https://www.ikesai.com/
Ikesai.comは日本人が制作しているオシャレなかっこいいサイトを集めたギャラリーサイトです。
Ikesai.comの素晴らしいところはカテゴリ分けがわかりやすく、またレスポンシブデザインでも調べることができる点です。レスポンシブデザインを参考にしたい方におすすめです。

ECサイトのデザインにもトレンドがある!最新デザインの傾向とは?

WEBデザインのトレンドは技術が頻繁に進化していくこともあり、常に変化しています。
最新のトレンドを理解することでECサイトのデザインの幅が広がり、ユーザーに興味を持ってもらうことができます。
もちろんトレンド要素を取り入れなければ売上が上がらない、といったことはありませんが、参考までに知っておくことで今後のアイディアに活かすことができるかもしれません。

1.3Dデザイン

3Dデザイン

URL:http://24hourace.gucci.com/
これまでは平面なデザイン(フラットデザイン)や動画を背景に使うデザインが多く採用されてきました。
しかし3Dで表現する手法が多くなったおかげでデザインに採用するサイトが増えてきています。

スマホでも同様に表示され、動きのある表現は訪問者を引き込み、離脱率や回遊率の上昇へとつなげることができるといえるでしょう。

2.ミニマルデザイン

ミニマルデザイン

URL:https://www.apple.com/jp/
ミニマルデザインとは、必要最小限の情報で作られたデザインで、ここ数年はミニマルデザインがトレンドとなっています。
シンプルなデザインとも言えますが、訪問者へ意図をはっきり伝えなければならないため、意外と難易度が高いデザインでもあります

ポイントとしては、伝えたいことをはっきりさせ、無駄な情報やコンテンツは極力少なくし、余白や色、フォントを効果的に使うことです。
シンプルすぎて内容が伝わらないとユーザーの離脱率が高まる恐れがありますので、情報にメリハリをつけながら、伝えたいことを、シンプルなデザインの中にはっきりと組み込むことが大事です。

3.スプリットスクリーンレイアウト

スプリットスクリーンレイアウト

URL:http://otanijun.com/
スプリットスクリーンレイアウトとは、画面を分割してそれぞれのコンテンツを目立たせるデザインです。
分割することで、コンテンツの対比や半分は画像で半分は文章など様々な見せ方が可能で、表現手法が増えることがメリットです。

またレスポンシブデザインとの相性が良く、PCでは分割して表示していたところからスマホで表示する時は分割画面を縦並びにすることで上手く組み込むことができます。

例で挙げたサイトはポートフォリオサイトですが、PCサイトではアート作品が分割して表示されており、スマホで見ると縦表示で上手くレスポンシブ対応がされています。

業界別!おしゃれなECサイトのデザインまとめ

実際に運営されているECサイトの中から、デザインの参考になるおしゃれなECサイトを業種別に紹介いたします。

まずは15日間の無料体験から

【ファッションECサイト】TOMMY HILFIGER

TOMMY HILFIGER

URL:https://japan.tommy.com/
TOMMY HILFIGER はアメリカ発のアパレルブランドです。
トップページでは、シンプルに必要な情報だけが掲載され、また現在おこなっている施策がファーストビューに組み込まれ、訪問者を引き込むデザインになっています。

またスプリットスクリーンレイアウトになっており、動画と画像で現在おこなっているコラボやブランドイメージを伝えることができています。

TOMMY HILFIGER

スマホサイトでも同様に、ファーストビューに施策が組み込まれており、表示内容もシンプルかつレスポンシブに対応できています。
PC・スマホユーザーともに引き込める、お手本のようなデザインです。

【ファッションECサイト】Goldwin

Goldwin

URL:https://www.goldwin.co.jp/goldwin/
Goldwinは主にアウトドア用品を取り扱う、THE NORTH FACEで有名なアパレルブランドです。

このECサイトの特徴としては、ファーストビューにカルーセル(スライダー)を設置している点です。
カルーセルをつけることで、ファーストビューに複数の情報を置けるため、訪問者に複数の情報を見てもらい、離脱率を大きく下げることができます。 PCサイトでは画像をあえてずらしていることで、オリジナリティを出しています。

また白と黒を基調としたシンプルでスタイリッシュなデザインになっており、黒背景の中に目立つ白色を用いることでメリハリを付け、訪問者への印象付けが上手くおこなわれています。

Goldwin

スマホサイトでもファーストビューにカルーセルを表示させており、訪問者に多数の情報を提供できています。
またカルーセルの初めにはセール施策を持ってくることで離脱率を防ぎ、回遊率を高めていることがわかります。

【食品ECサイト】Mr.CHEESECAKE

Mr.CHEESECAKE

URL:https://mr-cheesecake.com/
Mr.CHEESECAKEは30分で完売してしまうという人気のチーズケーキを販売しており、ECサイトは画像で大きく印象付けています。

まずファーストビューが画面いっぱいの美味しそうなチーズケーキが並べられているスタイリッシュな画像ではじまり、訪問者に上手く興味を引くようなイメージを与えています。

シンプルなデザインでありながらも、商品説明も短く上手くまとめられています。
また訪問者はトップページで目的の商品を、商品説明と共に購入まで進むことができるので、ページ構成にぜひ参考にしたいデザインです。

Mr.CHEESECAKE

PCサイトでは横長の画像が用いられているので、スマホサイトでは縦長の画像にする必要があり、通常であれば2種類の画像を用意することが多いのですが、このサイトでは同じ画像の縦幅・横幅を変えて表示させています。

PC・スマホ共に違和感なくデザインできており、無駄のないシンプルで魅力あふれるECサイトです。

【食品ECサイト】BOTTLEBREW

BOTTLEBREW

URL:https://bottlebrew.jp/
BOTTLEBREWはキッコーマンによる“醤油を作る体験”を提供するECサイトです。

まずファーストビューは醤油を使うシーンを盛り込んだ動画からはじまっています。
そして醤油の作り方・使い方・醤油を使ったレシピなどが紹介されています。

醤油の使い方やレシピを載せることで、商品を買ってもらうための付加価値になっており、訪問者にイメージさせやすく、購入までの動線作りが上手くできています。

BOTTLEBREW

またスマホサイトの場合は、動画だと重くなってしまうことが多いため、ファーストビューは画像で表示されるようになっています。

読み込みに時間がかかってしまうだけでも離脱率を大きくする原因になるため、このサイトはユーザーにとって優しいデザイン構成だといえるでしょう。

また動画を使用しない代わりにスライドショーのように切り替わるようになっています。ページ内が複雑にならず、シンプルなまま与える情報は多くなり、離脱率を下げる効果が期待できます。

【インテリアECサイト】EZA animal

EZA animal

URL:https://www.eza-animal.com/
EZA animalはアクセサリーを中心に販売するインテリア・雑貨系のECサイトです。
アニメーションを用いた可愛らしいイラストからはじまり、スクロールするごとにアニメーションが用いられているため、訪問者の興味を惹きつけます。

白を基調としたシンプルなデザインながらも、アニメーションを駆使し他のECサイトとの差別化を図っています。

カテゴリが画像で分けられているというのも、訪問者にとってイメージが湧きやすく参考にしたいポイントです。

EZA animal

スマホサイトでも同様にアニメーションが用いられ、シンプルさの中にアニメーションという独自性を維持できています。
内容ごとにページの区画が分かれており、ほとんどがスマホサイズ画面内で情報をまとめられ、見やすくわかりやすいデザインになっています。

【美容・コスメECサイト】ASUR

ASUR

URL:https://asur.online/
ASURはリップ・練り香水を販売するコスメECサイトです。
ファーストビューにアニメーションが使われおり、モザイクのような画像からまるで水で流したかのように画像がスタイリッシュに切り替わります。

コスメECサイトであるので、内容に関連する良い表現です。
また商品をカートに入れる際、ほとんどのECサイトがカートページに遷移するところを、当ページではページ内にカートを表示させています。

カートページへの遷移は訪問者の意図とは違う動きの可能性があり、離脱率増加につながりかねないので、ページ内で表示するようにすることがおすすめです。

ASUR

スマホサイトでは、ファーストビューに同じようにアニメーションが使われており、商品イメージをスマホでもイメージ付けできるようになっています。
また売りたい商品が最初に表示されているため、訪問者にクリックしてもらいやすい配置にしています。

クリックすることで商品詳細の場所へと遷移させており、
ファーストビュー>商品クリック>商品詳細>ページ内カートページ
という動線が作られています。

ECサイトのデザインのコツ・体験談

ここからはECサイトご担当者様の生の声をご紹介します。ECサイトのデザイン制作でどのようなことに気を付けているか伺いました。

【日用品ECサイト】レンズバーゲン

レンズバーゲン

URL:https://lens-bargain.com/
『テキスト数は控えめにして読んでもらいやすくすることを意識しています。 余白は大きめにとって、瞬間的に「読みたくない」と思われないように意識しています』

【ブランドECサイト】ABEMA Shopping アベマショッピング

【ブランドECサイト】ABEMA Shopping アベマショッピング

URL:https://www.abemashopping.jp/
『デザインで留意していること(は)ユーザーのほとんどがスマホからのアクセスのため、スマホで見やすいか、操作しやすいか、スマホのファーストビューで魅力的に表現できているかを気をつけています。ファーストビュー内にカート追加ボタンを入れるなど』

【ファッションECサイト】CHOCOA(チョコア)

CHOCOA
CHOCOA

URL:https://chocoa.me/
『特にデザインで気を付けていることは商品ページです。商品本来の魅力を見せるために写真の明るさ、色合い修正に時間をかけています。 文字のバランスやフォントカラーにもスッキリ読みやすい印象を与えるよう工夫しています。商品ページ画像を制作する前に、実際に商品を手に取りどんな特徴があるのか、質感や、着やすさ、動きやすさをしっかり確認しています。マタニティ服ですから、商品のデザイン性のほか、機能性も重要な購入ポイントになりますので、 商品のすばらしさをいかにわかりやすく伝えるかに一番重点を置いています』

【食品ECサイト】日本ケアミール株式会社

日本ケアミール株式会社

URL:http://www.care-meal.co.jp/
『弊社介護食の美味しさと便利さが伝わるように字体と余白にこだわったサイトデザインです』

※各社のギャラリー・ECサイト情報は2020年4月時点でのデータです。

大切なのは売れるためのデザインを意識すること

ここまでお読みいただきありがとうございました。
ECサイトの売上をアップしたいなら、売れるためのデザインが不可欠です。
まず自分自身や、上司が満足するデザインなのか、ユーザーの利便性を考えたデザインなのかを意識することからはじめましょう。
その上で、実際に成功しているECサイトのデザインを見ることで、今までと違ったアイディアがひらめくかもしれません。

まずは15日間の無料体験から

業界No.1のネットショップ・ECサイト構築サービスMakeShopには、売上改善に役立つ豊富な機能と、運営上の不安を払しょくするためのサポート体制が揃っています。

ネットショップ・ECサイト開業に少しでも興味がある方は、ぜひご利用ください。
毎日たくさんの方にお申し込みいただいております。

まずは15日間の無料体験から
1分で完了します
無料体験をはじめる