新規出店ご相談窓口 10:00〜12:00/13:00〜18:00(土日祝日を除く)
03-5728-6236

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

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

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

あわせて確認したい

「ネットショップ・ECサイトを作りたい」
と考えている方向けの資料ダウンロード

  • MakeShop(メイクショップ)は使いやすいから売れやすい。
  • 初めてでも誰でもカンタンに。だから継続率98%。
  • 販売手数料がかからないので圧倒的に安い。
  • EC業界の市場規模・トレンドについての解説付き。
  • 継続率98%:2020年1月〜2020年9月までの期間において毎月契約更新したショップ様の割合(長期契約のショップ様も含みます)
  • No.1:流通額=受注金額。ネットショップ・ECサイト構築サービス運営企業各社の発表数値より、ASPサービス単体の数値を算出し比較(自社調べ 2021年3月時点)

目次

売れるデザインの基本と押さえておきたい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サイトのデザインまとめ

トレンド感を掴むためにも、WEBデザイナーならセンスのよい他社サイトをチェックしておきたいところ。
実際に運営されているECサイトの中から、デザイナー職へおすすめしたいデザインの参考になるおしゃれなECサイトを業種別に紹介いたします。

EC業界の市場規模・トレンド解説付き

【ファッション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サイト】ASUR

ASUR

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

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

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

ASUR

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

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

ECサイトのデザインは制作会社に依頼すべき?スクールでスキルをつけるべき?

センスよく、かつユーザビリティに優れたサイトを制作するためには、やはりそれなりのデザインスキルが必須となります。理想的なのは、経験値のあるデザイナーが自社にいること。
では、デザイナー経験がない初心者がサイト制作をする場合はどうでしょう?考えられる選択肢としてはふたつ、ひとつはEC制作会社にデザインを依頼すること、もうひとつは自分のスキルを磨くことです。
どちらの方法が最適か、メリット・デメリットを踏まえつつ考えてみましょう。

EC制作会社に依頼するのは確実だけど費用がかかる

あくまでもサイトの質にこだわりたいのであれば、ECサイト制作会社に依頼するのがよいでしょう。
制作会社には経験豊富なプロフェッショナルがいますので、きっと希望通りのサイトを作ってくれるはずです。
ただし、当然ながら費用が発生します。デザインの自由度や機能面の充実度を求めるほど、基本的にはより多額のコストがかかると考えてください。
なお、ECサイト制作会社の費用感を知りたい方は、こちらの記事もぜひチェックをしてみてください。構築手法ごとに目安の相場をご紹介しています。

Webデザイナーとしての必要スキルとスクールの必要性

制作会社に依頼するのが費用面で厳しい場合には、残る道はひとつ。社内のスタッフ、もしくは自らのデザインスキルを磨くしかありません。
ちなみに、Webデザイナーとして最低限必要なスキルには次のようなものがあります。

デザインの基礎知識

色の配色や画像制作、レイアウトの制作など、デザインについての基本的な知識は必須です。
通常、見やすく使いやすいデザインにはある一定のパターンが存在します。まずはその方程式を知るところからです。
とくに初心者が陥りやすいのが、アートとデザインを混同してしまうこと。
単純に言ってしまうとアートは見栄え(おしゃれ・かわいい・かっこいいなど)を意識する一方、デザインはわかりやすさを意識します。
繰り返しになりますが、必ずしもおしゃれなサイト=売れるサイトではありません。

コーディング・プログラミングの知識

構築したデザインをサイト上に反映させるためには、コーディングやプログラミングが必要です。
実装作業自体は専門のコーダーやプログラマーが行う場合でも、そもそもWEB上で実現可能なデザインでなければなりません。よって、デザイナーにもある程度の知識は求められます。
HTML・CSS・JavaScript・jQueryなど。このあたりの言語は、自分で完璧に書くことができなかったとしても、検索してサンプルコードを元に書けるレベルの知識は持っておいたほうがよいです。

デザインソフトが使いこなせるか

デザインに使用するソフトはしっかりと使いこなせるようになりましょう。
有名なソフトだとAdobeのPhotoshopやIllustratorなどで、Photoshopは写真や画像の加工編集ソフトとして広く使われています。Illustratorはロゴやイラストが作れるほか、ページ全体のデザイニングにも使用します。

これらのスキルですが、もちろんスクールに通えば丁寧な指導の下で学べます。
もし自分でデザインスキルを磨くゴールがプロのデザイナーとして収益を上げることなのであれば、スクールに通うのがおすすめです。
しかし、スクールを受講するのも当然費用がかかります。また、カリキュラムの組み方によっては十分にスキルを磨くまでに時間がかかってしまうというデメリットも。
デザインについて学ぶ目的はあくまでもECの売上を伸ばすことなので、必ずしも最適とは言えません。
そこで、まずはデザインについての書籍を読むことからおすすめします。大きめの本屋さんの、WEB関連書籍コーナーを見てみてください。
デザインについての本がたくさんあるはずです。実際に目を通し、その中で自分が「わかりやすそうだな」と思うもの、興味を持って読み進められそうなものを探してみましょう。

まずはテンプレートを利用してのデザイン制作がおすすめ

制作会社に依頼するにはお金がかかります。スクールに通えばもう少し安く済む可能性が高いですが、いずれにせよ無料ではありませんし、何より時間がかかってしまいます。
となれば、独学で伸ばしたスキルで実践あるのみ。でも、それでイチからデザインだなんて無茶だと感じてしまいますよね。

そんな方のために、世の中にはWEBサイトのテンプレートが豊富に存在しています。
自分で制作をはじめるのがおすすめなのは、決して費用面だけが理由ではありません。実際に手を動かすことでよりサイトに対する知識が深まり、今後運営をしていく上でも活用できる知識が身に付きます。

たとえば、今後サイト規模が大きくなって制作会社へ外注をするようになった場合でも、スムーズに打ち合わせを進めることや、サイトの更新業務なども理解できるようになります。
自分に知識とスキルがあれば、スタッフ教育にも役立ちます。
もし自分で制作を進めてみる中で、どうしてもわからない点があるのであれば、そのときはじめてスクールや制作会社といったプロの手を借りることを検討してもよいでしょう。

ネットショップのデザインでおすすめHTMLテンプレートまとめ

それではここからは、ECサイトを制作する方へおすすめのHTMLテンプレートをご紹介していきます。




ESSENSE

ESSENSE

URL:https://colorlib.com/wp/template/essence/
無料で使えるレスポンシブ対応のテンプレートです。Apple製品の高画質ディスプレイ、Retinaディスプレイにも対応しています。ブログ機能なども搭載されていますので、コンテンツマーケティングにもうってつけです。

Downy Shoes

Downy Shoes

URL:https://w3layouts.com/downy-shoes-ecommerce-category-bootstrap-responsive-Web-template/
靴のECサイト向けとして作られたテンプレートです。どのページもシンプルかつエレガントなデザインで作られており、靴以外にもファッションやアクセサリーなどのアパレル系ECサイトにおすすめ。スライドバナーやナビゲーションオーバーレイなども使えます。

Loja

Loja

URL:https://elements.envato.com/loja-responsive-html-template-W5W5PZ
商品画像を魅力的に見せたいならLojaがおすすめ。ファッション系のECサイトのほか、店舗がオンライン上のルックブックとしてサイトを作成したいときにも適したテンプレートです。

schon.

schon.

URL:https://elements.envato.com/schon-ecommerce-html-template-SW4SPP
シンプルで操作性のよいテンプレートです。ミニマルなデザインながら、ECサイトに必要な機能は十分に搭載されています。

car shop

car shop

URL:https://elements.envato.com/car-shop-ecommerce-html-template-K8FUQK
自動車部品、自動車整備サービス、洗車サービスなど自動車関連のECに特化しています。目的にあわせ、カスタマイズや編集をかんたんにおこなえます。

株式会社ビリオンプラン・ジャパンのスタッフブログ

株式会社ビリオンプラン・ジャパンのスタッフブログ

URL:http://www.billionplan.com/blog/ec/rakuten-free-template12.html
こちらのサイトでは、楽天市場に出店する際に使えるヘッダーやサイドナビのテンプレートが公開されています。
日本最大級のECモールである楽天市場ですが、そこで使える無料テンプレートは実はあまり数が存在しません。このサイトでは、他にも楽天で使えるテンプレートやフリー画像サイトが紹介されています。

Listashop

Listashop

URL:https://colorlib.com/wp/template/listashop/
初心者でもかんたんにページ作成ができる無料テンプレートです。機能面も十分で、フルサイズのバナーや、セール予告のためのカウントダウンタイマーなども搭載されています。

aStar

aStar

URL:https://colorlib.com/wp/template/astar/
モダンで斬新なデザインが個性的なテンプレートです。商品をカテゴリーから探しやすい左サイドバナーやブログ機能などが用意されています。

Wish

Wish

URL:https://colorlib.com/wp/template/wish/
フルサイズのスライドバナーはインパクト抜群。印象的なファーストビューを実現します。アパレルやコスメブランドなど、商品画像に注力しているサイトにおすすめのテンプレートです。

E-Store

E-Store

URL:https://elements.envato.com/e-store-responsive-html-template-LX3TF7
レスポンシブデザインのテンプレート。新商品や特価商品、関連商品などを効果的に見せる機能を搭載しています。

Divisima

Divisima

URL:https://colorlib.com/wp/template/divisima/
ファッションECサイトにおすすめのテンプレートです。

Karma

Karma

URL:https://colorlib.com/wp/template/karma/
スニーカー販売のECサイト用としてデザインされたテンプレートです。Googleマップ機能も搭載しているので、実店舗も運営している方へおすすめです。

Surfhouse

Surfhouse

URL:https://w3layouts.com/surfhouse-flat-ecommerce-bootstrap-responsive-Web-template/
このテンプレートはAmazonでも使うことができます。

Mattress

Mattress

URL:https://p.w3layouts.com/demos/mattress/web/
インテリアEC向けにデザインされたテンプレートです。

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サイト情報は2021年1月時点でのデータです。

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

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