売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

ネットショップを作りたいと思った時に、「どんなデザインにしようか」と悩んだことはありませんか?

ネットショップのデザインは、初めて訪れるお客様をお迎えするいわば「顔」のようなものです。

今回は、売れるECサイトのデザインのポイントと、売れないECサイトとはどんなパターンがあるのかを説明いたします。

既にネットショップを開設されている方は、デザインのアップデートの参考にしていただければ幸いです。

売れないネットショップのデザインとは?

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

いきなりですが、「売れないECサイトのデザイン」とはどんなデザインだと思いますか?

私が考える「売れないECサイトのデザイン」として以下のようなパターンがあります。

  • デザインやレイアウトが古い
  • カテゴリやナビゲーションがわかりにくい
  • 商品画像がスマホで撮影しただけ
  • スマホ対応していない

デザインやレイアウトが古い

ファッションにトレンドがあるように、ECサイトのデザインにも流行があります。

ショップデザインが古臭かったり、レイアウトが崩れているようなショップからお客様が商品を買いたいと思うでしょうか?

ファッションジャンルであれば、ブランドイメージを高めるデザインを採用すると売れやすくなります。

カテゴリやナビゲーションがわかりにくい

ネットショップで沢山の商品を販売する場合、カテゴリーを細分化することでお客様が商品を探しやすくなります。

カテゴリー分けができていなかったり、ナビゲーションメニューがわかりにくいと、お客様は商品を探すのを諦めてしまい、ページから離脱してしまいます。

カテゴリーやナビゲーションはお客様を案内する「フロアマップ」の役割を果たします。

商品画像がスマホで撮影しただけ

フリマアプリのメルカリやオークションサイトのヤフオク!などは、個人が不用品を自分で撮影して販売しています。

ECサイトでもメルカリと同じような撮影方法で商品画像を掲載しているショップを目にします。

ECサイトにおける商品画像は人間で言うなら「顔」と同じです。

デコレーション的な加工は必要ありませんが、商品の魅力が最大限に伝わるよう、ライトアップや補正、トリミングなどの加工は行う方が売れやすくなります。

スマホ対応していない

2007年6月に国内で最初のiPhoneが発売されました。

iPhoneなどのスマホが登場して以来、ユーザーがネットショッピングを行うデバイスがパソコンからスマホに移り変わりました。

それこそジャンルによっては9割以上がスマホからネットショッピングを行っている時代です。

15年前、スマホが普及していなかった頃はネットショップといえばパソコンが中心でした。

現在は全く逆で、スマホに最適化しているデザインでなければ売れないショップになってしまいます。

売れるネットショップのデザインのポイント

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

売れるネットショップのデザインにはどのようなものがあるのでしょうか。

私が考える「売れるネットショップのデザイン」には以下のようなパターンがあります。

  • お客様が安心できる雰囲気のデザイン
  • 商品が探しやすく買いやすい
  • パソコンだけでなくモバイルへも対応

お客様が安心できる雰囲気のデザイン

Amazonのようなマーケットプレイスであれば、ショップデザインは統一されているため、独自にデザインを考える必要はありません。

また、Amazonでは沢山の出店者がいるにもかかわらず、ユーザーの持つイメージは「Amazonで商品を探している」と感じています。

自社ECサイトの場合、ユーザーはまず「このショップは大丈夫か?」という疑いから入るケースも増えています。

昨今のフィッシング詐欺などの影響もあり、どこの誰が運営しているかわからないECサイトから物を買うのを控える傾向にあるからです。

お客様が安心して商品を注文できるデザイン、レイアウトを用意するのは最低限で、特定商取引法に関する表記など販売者の情報も正確に公開するようにしましょう。

商品が探しやすく買いやすい

売れないネットショップデザインの例で「カテゴリやナビゲーションがわかりにくい」というケースを説明しましたが、その逆のデザインであれば売れるというわけです。

初めて来店したお客様は、「何を売っているお店なのか」を知りたいと考えます。

例えば「金沢の新鮮な魚介類を販売するネットショップ」であるとネットショップの「ヘッダー」に記載があれば、「このショップで魚介類を探そう」という「目的」が明確になります。

カテゴリーは「カニ」「魚」「貝類」「エビ」「海藻」などに分かれていれば、すぐさま自分の好みのカテゴリーの商品ページに移動するはずです。

こうしたユーザーの「導線」がしっかりできているネットショップはお客様の滞在時間も長くなり、回遊率もアップする傾向にあります。

パソコンだけでなくモバイルへも対応

売れないネットショップデザインの例で「スマホ対応していない」というケースを紹介しましたが、スマホやタブレットなどのモバイル端末に対応したデザインに「レスポンシブデザイン」があります。

レスポンシブデザインとは、ユーザーがアクセスするデバイスによって、最適な表示を行えるデザインのことです。

仕組としてはCSSというウェブ技術を使い、ユーザーがスマホから閲覧しているのであればスマホ用に最適化されたレイアウトを表示し、タブレットであればタブレット用、パソコンならパソコン用のレイアウトを切り替えて表示させる仕組みです。

レスポンシブデザインを実現するには、HTMLとCSSの知識とスキルが必要ですが、多くのECカートサービスでは、レスポンシブデザインに対応したデザインテンプレートを選択することで実現できます。

ネットショップのデザインはプロに依頼するべき?

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

EC-CUBEなどのECサイト構築システムを使う場合は、デザインを別途作成する必要があります。

最近は、ネットショップを開設する専門のサービスが増えてきたこともあり、EC-CUBEなどのシステムを使うネットショップ構築は減少傾向にあります。

BASEやSTORESなどのECカートサービスを利用する場合は、あらかじめ商品ジャンルに合わせて使えるデザインのひな型、テンプレートが用意されています。

今回は、国内だけでなく海外、越境ECにも無料で対応できるCafe24というサービスを元に、現在のネットショップのデザインの流行や選び方などを説明いたします。

Cafe24のデザインの特徴

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

Cafe24は、初期費用、月額料金、販売手数料などすべて無料で利用できるECプラットフォームです。

BASESTORESも無料でショップ開設できますが、Cafe24は国内だけでなく海外販売に特に強いECサイトを無料で作ることができます。

Cafe24ではネットショップのデザインはデザインテンプレートを選択することで自分の好みのネットショップデザインを実現できます。

デザインテンプレートには無料のテンプレートと有料のテンプレートが用意されていますが、無料だからといってクオリティが低い訳ではありません。

では次にCafe24で人気のデザインテンプレートについて説明いたします。

Cafe24で人気のデザインテンプレートTOP10

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

実際にCafe24でネットショップを運営するユーザーが利用している人気のデザインテンプレートをご紹介いたします。

2022年11月時点の情報です。

テンプレート名 PC・モバイル対応 料金
Basic Shop Set PC+Mobile 無料
[EN]Ibase レスポンシブ型 無料
Second Box Set PC+Mobile 無料
Organic Basket Set PC+Mobile 無料
Modernity PC 無料
JJW0103 PC 無料
Simple Life Mobile モバイル 無料
On9 Free Design PC 無料
MadeleineSet PC+Mobile 10,000円
opening photo review PC+Mobile 10,000円

Basic Shop Set

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

誰もが簡単にショッピングできるデザインで特に家具やインテリア系のネットショップに向いています。

  • モバイル・パソコンの両方のデザイン
  • バナーを少な目にしており、商品を引き立たせるデザイン
  • 管理も簡単

[EN]Ibase

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

ファッションサイトに適したシンプルな無料レスポンシブ型デザインです。

  • 英語版無料レスポンシブデザイン
  • ファッションサイト向けシンプルかつモダンなデザイン
  • メインページ商品の入替え・商品情報表示設定など、管理者画面連動で簡単に切り替えが可能

Second Box Set

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

16年以上経歴のデザイナーが作る完成度の高いデザインです。

  • 完成度の高いカスタマイジング
  • PC用デザインとの統一感を追求したモバイル用デザイン
  • 常にアップデート、ソリューションの機能を活用

Organic Basket Set

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

「Organic Basket Set」は、新鮮さまで感じられるピュアな雰囲気のデザインです。

  • パソコン用、スマホ用の両方
  • カテゴリの自動表示
  • 飽きのこないモダンスタイル

Modernity

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

「Modernity」は、HTMLを修正しなくても、管理画面にて簡単に変更することができます。

  • 商品バナー、商品情報、販売者情報などを素早く、簡単に変更可能
  • マルチポップアップを無料で提供
  • デザインエラーが発生時、復元機能で素早く復元

JJW0103

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

各分野で10年以上の経歴を持つ人材が集まり、培ってきた経験や技術を活かして制作したデザインです。

  • PC用デザイン購入時、モバイル用デザインをセットで提供
  • 積極的なSNS活用が可能
  • 運営しやすいシンプルなレイアウト

Simple Life Mobile

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

Simple Lifeは、商品を中心にシンプルに仕上げたモバイル用デザインです。

  • スワイプ機能付き
  • 手書きのアイコン
  • リスト型のオプション表示

On9 Free Design

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

3,000件以上のネットショップ制作経験を持つ会社のデザインです。

  • 可読性の良いデザイン
  • 18年にわたって3,000件以上のネットショップ制作経験を持つ専門家たちが作った実用性の高いデザインです。
  • PC+モバイルデザインを一度に!

MadeleineSet

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

「MadeleineSet」は、ショップ運営に必要な各種機能を適用、活用・管理が容易なデザインで販売価格は10,000円(税込)です。

  • 15年経歴の専門デザイナー&開発者による共同制作
  • PC用デザイン購入時、モバイル用デザインをセットで提供
  • マルチポップアップ5種 + 例示ポップアップ46種を提供

opening photo review

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

「opening photo review」は、ショップ運営に必要な各種機能を適用、活用・管理が容易なデザインで販売価格は10,000円(税込)です。

  • 15年経歴の専門デザイナー&開発者による共同制作
  • PC用デザイン購入時、モバイル用デザインをセットで提供
  • 簡単で便利な使用

以上がCafe24のネットショップで選ばれているデザインテンプレートです。

商品ジャンル別のネットショップデザイン事例

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

商品ジャンル別のショップデザインについて、Cafe24におけるトレンド傾向を調べてみました。

以下の商品カテゴリ別にデザインテンプレートを分析してみたいと思います。

  • ファッション
  • ベビー・キッズ
  • 雑貨・コスメ
  • 家具・日用品
  • 食品・ドリンク
  • 家電

ファッション

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

ファッション関連商品に最適なデザインは、商品イメージが大きく表示されたデザインが多いですね。

オリジナルブランドを扱うアパレル企業などは、ブランディングも重要な要素です。

レイアウトがダイナミックでイメージ優先なデザインが多いので、ブランディング強化にも役立ちそうです。

ベビー・キッズ

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

ベビー・キッズ関連商品のデザインの傾向は、メインイメージを全面に押し出したデザインと、商品を沢山見せることのできるレイアウトデザインが用意されていました。

色合いはペールなピンクが中心で、やさしい印象を与えるショップデザインが多い印象です。

雑貨・コスメ

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

雑貨・コスメ関連商品のデザインの傾向は、商品イメージを大きく見せるレイアウトデザインが多い印象です。

美容、化粧品系の商品は直接肌に触れる商品も多いため、商品の信頼性も重要となります。

信頼感のあるデザインで、ブランドイメージも高いデザインが売れやすいショップデザインなのかもしれませんね。

家具・日用品

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

家具・日用品関連のデザインの傾向は、商品を多く表示できるレイアウトデザインが多いと感じました。

家具や日用品を扱うネットショップは商品数が多い傾向にあるため、より多くの商品をトップページで表示できることが望ましいです。

商品数が多くなるとカタログ的なデザインになりがちですが、メインイメージ部分でしっかりとブラドイメージも強化できるデザインが用意されていました。

食品・ドリンク

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

食品やドリンクを扱うネットショップのデザインは、清潔感のあるデザインが多い印象です。

食品は口に入るものですから、安全性や安心感があるショップデザインが好まれる傾向にあります。

基本的には白い背景色を中心に多数の商品を表示できるレイアウトが多く用意されていました。

家電

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

家電関連商品を扱うネットショップのデザインは、メインイメージで大きく商品を表示させつつ、カテゴリメニューを配置して回遊率を上げるデザインが用意されていました。

ヨドバシ・ドット・コムAmazonにも似たレイアウトデザインが多い印象です。

その他

売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介

その他のカテゴリのデザインの傾向は、非常に見た目が良いデザインが用意されていました。

レスポンシブデザインで無料で使えるデザインもあり、予算の少ない個人のEC事業者の方にはおすすめのテンプレートです。

まとめ

今回は売れるECサイトに必要なデザインと、売れないショップデザインについて説明いたしました。

現在のEC業界では、ショップデザインの考え方が昔と大きく変わっていると感じます。

オシャレであったり、カッコイイデザインであることより、商品を探しやすく、買いやすいレイアウトデザインが好まれるように思います。

デザインはシンプルだけど、商品の魅力は最大限に伝える事ができるデザインが売れるショップデザインなのではないでしょうか。

また、Cafe24(カフェ24)のように海外販売にも強いECプラットフォームであれば、海外でのトレンドを意識することも大切です。

Cafe24では、越境ECを実現させるために以下のようなサービスが提供されています。

関連記事

越境ECプラットフォームのCafe24が提供する「越境ECショップバナー制作代行サービス」のメリットとは? 越境ECに挑戦する際、進出国の現地でどのような文言やイメージが有効であるかがわからないという方は少なく[…]

越境ECプラットフォームのCafe24が提供する「越境ECショップバナー制作代行サービス」のメリットとは?
関連記事

越境ECプラットフォーム「Cafe24」のSEOアプリ「越境ECショップSEOセッティングサービス」とは? 初期費用、月額利用料、販売手数料が無料であり、国内だけでなく海外販売にも対応したネット[…]

越境ECプラットフォーム「Cafe24」のSEOアプリ「越境ECショップSEOセッティングサービス」とは?

これはBASE (ベイス)STORESなどの国内ECサイトでは対応していないサービスですので、海外進出を考えている事業者の方にはおすすめです。

Cafe24のサービスの詳細については以下のページに詳しく解説しておりますので参考にしてください。

今回の記事がネットショップのデザインで悩まれている方の参考になれば幸いです。

最後までお読みいただきありがとうございました!




売れるECサイトのデザインのポイントは?商品ジャンル別のデザイン事例を紹介
最新情報をチェックしよう!