よむよむカラーミー
ネットショップ運営を、
もっと楽しく。

売れるECサイトのデザインのコツとは?参考になるおしゃれなネットショップ事例20選

ECサイトのデザインは、商品の売上を左右するといっても過言ではないため「どのようなデザインにすればいいのか」と悩む方も多いと思います。そこでこの記事では、ECサイトのデザインで重要なポイントや、具体的な作り方のコツ、参考になるECサイトのデザインの実例をご紹介します。以下のデザインのコツを活かして、売れるサイトを作りましょう!

ツクルくん
ツクルくん

ECサイトはおしゃれに作ればみんな買ってくれるんじゃないかな?

カラミちゃん
カラミちゃん

いえ!おしゃれさも大切ですが、他にも大切なポイントがあります。
売れるサイトにするコツをお伝えしますね。

ECサイトのデザインで大切な3つのポイントとは?

ECサイトでの買い物は実際に商品に触れたり見たりすることができないため、サイト上のみで「この商品が欲しい」と思わせて「購入」してもらわなければなりません。そのためにはデザインの力が必要であり、ECサイトのデザインにおいては、以下の3つのポイントを押さえることが重要です。

  • ・全体的に見やすい
  • ・商品が買いやすい
  • ・商品のイメージに合っている

どんなにおしゃれなデザインでも、サイトが見づらいと「一体何を売っているのか」伝わりませんし、商品が欲しいと思われても購入ボタンが見つからなければ、購入をあきらめてしまうでしょう。
また、どんなに商品力があっても、コンセプトとずれたデザインにしてしまっては商品の魅力が伝わらず、購入にはいたりません。どれか1つのポイントがすごく良いサイトではなく「3つのポイントをバランス良く押さえている」ことが大切なのです。それでは3つのポイントを押さえるコツをお伝えしていきます。

見やすいECサイトにするデザインのコツ


どこに何の情報があるのかわからない、背景色と文字色が同化して読みづらいなど、見にくいECサイトは、訪問してもらってもすぐに離脱されてしまいます。そのため、パッと見ても情報が入ってくるような見やすいサイトにしましょう。以下はサイトを見やすくするコツです。

情報を整理してシンプルに

商品の良さをアピールするためにさまざまな情報を載せたくなりますが、情報量が多すぎるとサイトがごちゃごちゃしてしまい、見にくさにつながります。まずは、「必要最低限の情報のみ」を載せたシンプルなデザインにすることをおすすめします。

まとめられる情報を1つにしてカテゴリで分けると見やすくなります。下記の図のように、大カテゴリ/中カテゴリ/(小カテゴリ)と、カテゴリでまとめるとさらにわかりやすく、各情報にアクセスしやすくなります。

また、情報はバラバラと表示するのではなく、規則的に並べることも大切です。ページによって商品情報の位置が変わると、見る側は混乱してしまいます。サイト内の情報の配置を規則化すれば、見やすくスッキリとしたデザインになります。

訪問した人が求めている情報をわかりやすく表示することが大切です。

余白や行間を十分取る

商品画像の間隔や、文章の上下の間隔が詰まっていることもサイトを見にくくする要因です。情報が詰まっていると、1つ1つの情報が目に留まりづらくなってしまいます。
商品画像を並べる際は間隔を空けて余白を作る、フォントを調整して文章の行間を広くするなどスペースにゆとりを持たせるようにしましょう。

また長い文章は、2~3文ごとに段落を分けて間隔を空けたり、見出しを付けたりして読みやすくするのもポイントです。

スマートフォンに対応したデザインを

今はPCよりも、スマートフォンからネットショッピングをする人のほうが多いといえるので、スマートフォンでも見やすいデザインにすることが必須です。
PC用のデザインをスマートフォンで表示すると文字や画像が小さく、拡大しないと見られないため、離脱につながってしまいます。

「レスポンシブデザイン」なら、Webサイトのコンテンツを自動で端末に最適なサイズで表示してくれます。同じ内容をスマートフォンでもPCでも見やすく自動変換してくれるのでおすすめのデザインです。

なおカラーミーショップでは、無料でレスポンシブデザインに対応しているテンプレートをご利用いただけます。※詳細はこちら

色の種類や、配色にも気を付ける

赤など、ビビットな色は目立つので使いたくなりますが、色の3原色(赤・青・緑)をメインカラーで使うと、目がチカチカして見づらくなります。
見やすいデザインを目指すなら、白をベースのカラーにして、アクセントカラーとして1〜2色プラスするのがおすすめです。

先ほどの3原色も、特定の場所を目立たせるためのワンポイントや、アクセントとして使う分には効果的でしょう。

また、配色にも注意が必要です。背景色と文字色の組み合わせによって文字が読みづらくなったり、意図しない部分が悪目立ちして見にくさにつながることもあります。
インターネット上にはさまざまな配色ツールがありますので、活用しながら配色を決めてみてください。

商品が買いやすいECサイトにするデザインのコツ

冒頭でもお伝えしましたが、「購入」につなげるためにはサイトでの「買いやすさ」も同じくらい重要です。買いやすさとは、ただスムーズに購入できるというだけでなく、さまざまな商品が提案してもらえる、商品の情報がきちんと伝わってくる、ということも含まれます。

つまり買いやすいサイトとは、サイトを訪れた人が購入を完了するまでのすべての過程(導線)をあらかじめ用意し、できるだけ離脱を減らして他のページ(商品)に遷移してもらい、スムーズに購入までつなげられるサイトといえるでしょう。具体的なコツを以下に紹介します。

ファーストビューには目を引く情報を

Webサイトに訪れたとき、最初に見える画面のことをファーストビューといいます。インターネットで検索したとき、いくつかのサイトを開いてはパッと見て判断して閉じるという経験があると思いますが、それくらいファーストビューは大切です。

ファーストビューでは「何を売っていて、どんなお店なのか」を伝えるとともに、訪問者にサイトを見てもらうため、主に以下の要素を表示しましょう。

  • ・商品の魅力が表せている写真
  • ・メディア掲載や販売実績、セール情報など興味を引く情報
  • ・「どんな商品で、こんなメリットがある」ということが伝わるキャッチコピー

基本的には、購入意欲が低い状態でサイトを訪れる人のほうが多いといえます。そういった人に対して、ファーストビューで商品の効果や魅力、販売実績による信頼感やお得な情報を伝え、興味を持ってもらいます。特に写真は、いつも同じでは飽きられてしまうため、定期的に更新しましょう。

購入ボタンをわかりやすく

商品を購入するまでは、「商品ページ→カート→決済」という流れがあるため、スムーズに進められる導線を意識したデザインにすることが大切です。この流れの中でつまずいてしまうと、途中で購入をあきらめられてしまいます。

特に、購入ボタンをわかりやすくすることは非常に重要です。購入ボタンに関しては以下の点を工夫しましょう。

  • 1.ボタンはできるだけ大きくする
  • 2.サイト内で目立つ色にする
  • 3.押しやすい配置にする

デザインを優先するあまり、ボタンを小さくしてしまうとそのまま押しにくさにつながります。ボタンはできる範囲で大きめにしましょう。また、見つけやすいようにサイト全体の中で目立つ色にします。奇抜な色ではなくてもサイト内で目立つ色なら十分です。ボタンの周辺に余白を取ると、際立たせられます。
さらに、スマートフォンでは特に画面をスクロールしているうちにボタンを見失ってしまう可能性があるので、画面の一番下に購入ボタンを固定するのもおすすめです。

商品画像の下部も活用する

amazonなど大手のサイトなどではよく「この商品もおすすめです」と他の商品が表示されます。これは、閲覧していた商品が希望に合わなかった場合も、他の商品を続けて見てもらうためです。当初の商品が購入されなかったとしても、回遊率(訪問者がサイト内のページをどれだけ見たのかを示す数値)を高めて、最終的に何らかの商品の購入につなげましょう。

商品下部に関連商品を表示する以外に、ホーム画面で「売り上げランキング」や「季節限定の商品」「セール対象の商品」などを表示することも回遊率を高めます。

商品を探しやすくする

商品数が多い場合は特に、目的の商品までいかにたどり着けるかも購入までのカギを握っています。「検索窓」をファーストビューで見える位置に置く、カテゴリ一覧をサイドや上部に表示してそこから商品詳細へ遷移できるようにするなど、初めて訪れた人が商品を探しやすいようにしましょう。

購入に必要な情報をそろえる

「購入までスムーズに進めるようにする」ためには、商品情報が十分にあるということも欠かせません。商品の写真がいくら良くても、情報が少なければ購入を決断できないからです。サイズなどの商品情報だけではなく、お届までの日数や配送方法といった情報も、購入を判断するには必要な情報です。

また、購入を判断するための情報としては販売者の情報や会社概要も購入者は気になるところです。初めての買い物では「この会社はきちんと対応してもらえるのか」と不安になる人もいますので、会社名や連絡先といった情報は目の付くところに表示して、信頼感を与えましょう。

商品イメージに合ったECサイトにするデザインのコツ


ここまでで、「わかりやすいECサイト」「買いやすいECサイト」にするためのコツをご紹介しました。最後に商品の良さを伝える、イメージに合ったECサイトのデザインのコツをお伝えします。いくら良い商品でも、デザインによる見せ方が合っていないと魅力が半減してしまいますので、外せないポイントです。

イメージが伝わる商品画像を使う

いろいろとお伝えしていますが、「商品を欲しい」と思わせるにはやはり写真が一番重要です。実際に触れられない分、人は写真を見て商品をイメージします。
食品であればシズル感、ファッションや日用品、家具などは質感や色味などを写真で表現することが求められます。

さらに、商品単体の写真だけではなく、商品の着用写真や雑貨や家具類を実際に使っている写真も載せることを心がけましょう。「ユーザーが利用しているシーン」を伝えることで、購入後に自分が使っているイメージがわきやすくなります。食品の場合も、食事のシーンの写真を載せれば「どんなシーンにピッタリか」がわかるので、購入の決め手となるでしょう。

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

商品を販売する時点で、ある程度はターゲットとするユーザーの属性(性別・年齢・職業など)を定めて売り出していると思います。であるとすれば、ECサイトのデザインもその属性に合わせたデザインにすると、より訪問者が商品をイメージしやすくなります。

好まれる色遣いや見やすい文字の大きさは性別や年齢などによって変わってきますので、属性に合ったデザインにし、商品のイメージを作っていきましょう。

写真や文章のトーンを統一する

ECサイトではショップ独自の世界観を作ることが商品イメージのために必須です。ですが、文章のトーンが毎回違ったり、写真の色味や雰囲気がバラバラではイメージが統一されません。トーンがそろわないと世界観が崩れるだけでなく、適当な運営をしていると思われ、ECサイトに対する信頼感も持たれにくくなります

そうならないためには、掲載する文章や写真のトーン&マナーをそろえるためのルール(ガイドライン)を作っておきます。独自の世界観ができれば、「きちんとこだわっているお店」という印象を与えられ、結果として購入やリピートにつながると考えられます。

ブランドイメージを傷つける表現はしない

世界観の話にもかかわってきますが、作り上げたイメージを壊すような表現は控えましょう。
シックで落ち着いたトーンのサイトにもかかわらず、情報を目立たせたいために「爆安セール!!!」など、奇抜なデザインのバナーを掲載すると、一気に世界観が崩れてしまいます。

一時は売上を上げたとしても、将来的にリピーターが離れてしまう可能性が高いので、PRする場合もこれまでのイメージに合わせて行いましょう。

カラミちゃん
カラミちゃん

商品イメージにあったサイトのデザインをする上でバナー作成のデザインも大きく関わってくるかと思います。下記の記事では、バナー作りのポイントを解説しているのでこちらも合わせてチェックしてみてくださいね!

参考になるECサイトのデザイン20選

ここからは「カラーミーショップ」のデザインの自由度を生かして作られた、おしゃれなデザインのネットショップを20店舗ご紹介いたします。

フード

1. 森國酒造

香川県・小豆島唯一の酒造「森國酒造」。瀬戸内海のおだやかな自然に育まれたお酒の魅力を、美しい写真とシンプルなデザインで伝えています。

ネットショップはこちら

2. Nova SELECT

最高品質のオーガニックナッツやフルーツをお届けしている埼玉の「Nova SELECT」は、アースカラーのナッツやフルーツが映えるすっきりとしたデザイン。ローディングの画面にはイラストが出てきたりと、どこか親しみやすさとあたたかみを感じます。

ネットショップはこちら

3. AURORA COFFEE

山形県のコーヒーショップ「AURORA COFFEE」。チャートのように並んだ商品一覧から、種類豊富なコーヒー豆を選べるユニークなデザイン。パッケージやお店のイメージそのまま、白黒のロゴをメインにラインマーカーを引いたようなあしらいがおしゃれなショップです。

ネットショップはこちら

4. 琉Q

沖縄県の特産品をおしゃれなデザインパッケージでお届けしている「琉Q」は白と青、黄色を基調にしたさわやかな配色が特徴。イラストと写真を組み合わせた商品紹介ページは、興味がどんどん深まるつくりになっています。

ネットショップはこちら

5. 宮崎上水園

シンプルなパッケージが目新しい宮崎生まれの緑茶ブランド「バイオ茶」。お茶のグリーンがよく映えるような清潔感あふれるデザインになっています。

ネットショップはこちら

6. 大沼養蜂

山形県の養蜂場「大沼養蜂」。純粋な天然蜂蜜にひとつひとつハンコを押した、ぬくもりあるパッケージ。そのていねいなつくりをまるで紙に描いてお届けしているようなデザインのお店です。

ネットショップはこちら

7. 四万十ノ

高知県四万十の豊かな自然を食にしてお届けしているネットショップ「四万十ノ」。レシピやおたよりなど、雑誌を読んでいるような感覚でおいしい四万十の恵みを選べる、シンプルで一覧性の高いデザインです。

ネットショップはこちら

8. tartelette

熊本の城下町にあるタルト専門店「tartelette」は、ブルーとホワイトの組み合わせがなんとも涼しげなネットショップ。味のある店内風景に鮮やかなタルトの写真がよく映えています。

ネットショップはこちら

9. 浜口水産

日本の西端にある五島列島から、新鮮なかまぼこなどの練り物を販売している「浜口水産」。モノトーンを基調としたシックなデザインが、真摯なものづくりと職人の自信をイメージさせてくれます。

ネットショップはこちら

雑貨

10. free stitch

“より豊かな暮らしを愛犬と” を合言葉に良質なペット用品をお届けしている「free stitch」は、カフェのような落ちついた大人っぽい雰囲気のショップ。写真をふんだんに使い、用途やジャンルから商品を検索することができる使い勝手のよいデザインになっています。

ネットショップはこちら

11. CHIN JUKAN POTTERY STORE

沈壽官窯とランドスケーププロダクツが共同で制作する陶器のお店「CHIN JUKAN POTTERY STORE」。鹿児島県のうつわ・薩摩焼をベースに、独自の新しいプロダクトを発信しています。国産でありながらイギリスのティータイムのような優雅さも感じさせるデザイン。

ネットショップはこちら

12. haluta

北欧雑貨・家具などを販売する「haluta」。デザイン性の高い雑貨の魅力を生かす、写真を大々的に使ったデザイン。アイコンなどのあしらいも極力シンプルに、商品の魅力をストレートに伝えています。

ネットショップはこちら

13. PINT

日本全国のさまざまな伝統技能や職人さんとコラボしたオリジナル商品を開発・販売している「PINT」。商品ひとつひとつの「重み」を感じるような、ダイナミックなつくり。1点ずつの解説文・画像もボリューミーで、それぞれのストーリーをじっくり味わうことができます。

ネットショップはこちら

14. EDIT LIFE

編集者やブランディング・ディレクターがキュレーターとなってアイテムを提案する「EDIT LIFE」。商品単体の提案にとどまらず、その先にある生活やスタイルまでも提案しています。世界観やコンテンツを楽しめるデザインはすっきりとして見やすく、何度でも訪れたくなりそう。

ネットショップはこちら

15. sample

“少しいいこと+プロダクト” をコンセプトに、アイデアプロダクトを提案するネットショップ「sample」。廃棄されてしまう素材をアレンジ・製品化したりと、ユニークなプロダクトの魅力をわかりやすく、ぱっと見で伝わる構成でお届けしています。

ネットショップはこちら

ファッション・アクセサリー

16. Lanterna

東京各地の職人さんによるメイド・イン・トーキョーのアクセサリーを販売している「Lanterna(ランテルナ)」。遊び心あるアクセサリーの魅力を、無駄を削ぎ落としたシンプルなデザインで伝えています。

ネットショップはこちら

17. nichinichi

ヴィンテージ・アンティークパーツを使った、大人の女性にぴったりのオリジナルアクセサリーのお店「nichinichi」は、商品の華やかさとショップデザインのミニマルさが絶妙なバランス。ショーケースを見るように、ずっと眺めていたくなりますね。

ネットショップはこちら

18. dansko

アメリカのシューズブランド「dansko」の日本公式ネットショップは、ブラウンをベースにした珍しい配色。アースカラーのやさしいトーンに、艶やかな革靴とコーディネート写真が映えるシンプルなデザインです。

ネットショップはこちら

19. NAOT

イスラエルの靴職人さんが作るシューズブランド「NAOT」。商品がずらりと並んだ一覧ページは比較しやすく、それぞれにスタイリング写真もついているので履いた際のイメージもつきやすくなっています。サイズアドバイスやFAQなども充実しており、シンプルながらコンテンツも充実したショップです。

ネットショップはこちら

20. 静岡日和

静岡県から国産織物のカメラバッグやストラップをお届けしている「静岡日和」。たくさんのスタイリング写真を掲載し、気になる使い勝手や機能性、女性が持ったときのサイズ感などをビジュアルでていねいに訴求しています。

11

ネットショップはこちら

まとめ

ECサイトのデザインは、購入する人にとって魅力的で買いやすく、わかりやすいことが大切です。小さな工夫でも売り上げにつながるので、ぜひ実践してみましょう。
また、ご紹介した20のショップのデザインも参考にしてみてください。

カラミちゃん
カラミちゃん

また、こちらのネットショップ運営や開業方法、売上アップに関連した記事も見られていますので、ぜひ合わせてチェックしてみてくださいね!