ECサイトデザイン20選！【2021年のEコマースデザイントレンドも紹介】
ECサイトは、ファーストビューでブランドイメージを伝えて、商品ページに誘導しなくてはいけません。
そのため、自社のブランドイメージを反映させたデザイン設計が必須となります。
しかし、自社でECサイトのデザインを考える上で、
『どんなECサイトのデザインにすれば良いかわからない』
『売れているECサイトのデザインを参考にしたい』
『ECサイトデザインのトレンドについても知りたい』
上記のような課題が生じるかと思います。
今回は、企業のECサイト担当者様へ向けて「参考になるECサイトデザイン」「最新のECサイトデザインのトレンド」「売れるECサイトデザインに共通するポイント」を紹介しています。
※今回のコラム記事で掲載している情報は、記事公開日（2021年11月22日）時点になります
参考になるECサイトデザイン【シンプル編】
参考になるECサイトのデザインを紹介します。
シンプルなECサイトデザインを検討している方は、下記内容を参考にしてください。
1.SCHMECK
出典：SCHMECK
SCHMECKは、スウェーデンにある子供服を専門に扱うECサイトです。
白を基調としたシンプルなデザインですが、掲載画像に「シャツの色が自動で切り替わる」などのアニメーションを導入することで、ユーザーにインパクトを与えています。
アニメーションは、まとまりのないイメージになるケースが多いですが、元がシンプルなデザインなので、導線の邪魔にならずにインパクトを残すことに成功しています。
2. MoMA Design Store
MoMA Design Storeは、ニューヨーク近代美術館の学芸員がセレクトしたアイテムを販売する、日本国内唯一のECサイトです。
各コンテンツがきれいにまとめられており、シンプルなデザインになっています。
MoMA Design Storeでは「ホーム」「ファッション」「オフィス」など取り扱う商品がとにかく多いですが、シンプルなデザインのおかげで商品が探しやすいのが特徴です。
扱う商品数が多いECサイトには参考になるでしょう。
3.amadana
出典：amadana
amadanaは「ホーム」「ファッション」などのアイテムを扱うECサイトです。
amadanaが販売する商品の多くが、デザイン性に特化したものが多いため、背景を「白」にすることで各商品のデザインがより目立つようにしています。
扱う商品のデザインを全面に押し出したいECサイトは、ぜひ参考にしてみましょう。
4. The Garden
出典：The Garden
The Gardenは、消臭スプレーや除菌スプレーなどを販売するECサイトです。
白を基調とすることで、自社の扱う商品に関連した清潔感を表現しています。
また、ナビゲーションバーをあえて表示させないようにすることで、商品画像に目が行きやすくするデザインも特徴です。
自社の商品イメージを上手く反映したECサイトデザインといえるでしょう。
5.MARIE BELLE
出典：MARIE BELLE
MARIE BELLEは、京都と大阪に店舗を構える高級チョコレートのホームページです。
公式ホームページ内にECサイト機能が搭載されています。
商品を縦方向に掲載するシンプルなデザインながら、企業のメインカラーである「ブルー」をヘッダーに採用することで、まとまりのあるデザインになっています。
シンプルで基本に忠実なECサイトを作成したい方は参考にしてみましょう。
参考になるECサイトデザイン【おしゃれ編】
参考になるECサイトデザインを紹介します。
おしゃれなECサイトデザインを検討している方は、下記内容を参考にしてください。
6. BOTCHAN
出典：BOTCHAN
BOTCHANは、メンズコスメを扱うECサイトです。
デザインに使われている色が多いにも関わらず、おしゃれに見えるのが最大の特徴です。
また、商品ページでは、すべての商品にアニメーションが導入されており、おしゃれなだけではなく、ユーザーにインパクトも与えるデザインとなっています。
7.Dick Moby
出典：Dick Moby
Dick Mobyは、眼鏡やサングラスを扱うヨーロッパのECサイトです。
ファーストビューのインパクトが強いイラストが特徴的です。
Dick Mobyは、エコ活動に力を入れており、取り扱う商品ではリサイクル素材を使用しています。
このようなメッセージを、テキストで伝えるのではなく、イラストで表現することでユーザーに伝わりやすくする狙いがあります。
8.Grovemade
出典：Grovemade
Grovemadeは、iPhoneケースなどのハンドクラフト製品を販売するECサイトです。
全体の魅せ方が上手で、シンプルながらもおしゃれなイメージをユーザーに与えています。
メインコンテンツ動画も手を込んで作られており、スタッフ紹介では、カーソルを合わせると写真が切り替わるなどの遊び心もあるおしゃれなデザインといえます。
9. Di Bruno Bros.
Di Bruno Bros.は、チーズや肉、ワインなどの商品をECサイトで販売しています。
Di Bruno Bros.が優れている点は、写真を多用してもスッキリとしたデザインで導線に迷わない点です。
さらに掲載する写真は、クオリティが高く、おしゃれな印象を与えます。
トップページや商品一覧ページでは、なるべくテキストを少なくして、詳細ページにテキストを集中させているのがポイントです。
10. JOURNAL STANDARD
JOURNAL STANDARDは、国内外から集められたアパレル商品を販売するECサイトです。
ファーストビューでは「MEN」「WOMAN」いずれかを選択すると、それぞれのWebページに移動する仕組みになっています。
このような選択肢があると、思わずクリックしてしまうため、自然な形で商品ページに誘導できるデザインといえます。
自社ECサイトの直帰率を改善したい方は、ぜひ取り入れてみましょう。
参考になるECサイトデザイン【かわいい編】
参考になるECサイトデザインを紹介します。
かわいいECサイトデザインを検討している方は、下記内容を参考にしてください。
11.kate spade
出典：kate spade
kate spadeは「バック」「アパレル」などを扱うニューヨーク発のECサイトです。
ECサイトのデザインは「ピンク」をアクセントカラーとしたポップで、かわいらしいデザインになっています。
kate spadeのECサイトでは「会員登録獲得」に力を入れており、ところどころに会員登録を促すバナーが掲載されている点も特徴です。
12.Francfranc
出典：Francfranc
Francfrancは、インテリアや雑貨などを販売するECサイトです。
「グレー」「白」「青」をうまく取り入れたかわいらしいデザインとなっています。
商品検索に関しては、カテゴリ検索ではなく「人気のハッシュタグ」から検索できる機能も搭載しているため、ターゲットである若年層を意識したECサイトといえます。
13.Jackie Smith
出典：Jackie Smith
Jackie Smithは、アパレル商品を扱うスペインのECサイトです。
「赤」「ピンク」など、カラフルな色が使われているポップなデザインとなっています。
カラフルな色を多用すると、重たい印象を与えてしまいますが、Jackie Smithでは「白背景のコンテンツ」と「カラフルなコンテンツ」を交互に掲載することで、まとまりのあるデザインになっています。
14.Bon Bon Bon
出典：Bon Bon Bon
Bon Bon Bonは、チョコレートやアパレルを販売するECサイトです。
ファーストビューのチョコレートの断面図をアニメーションで表示するなど、デザイン性の優れたECサイトになっています。
それぞれのコンテンツの個性が強いですが、カラフルな色を使用することで、全体的にかわいい印象をあたえてくれます。
15.Ban.do
出典：Ban.do
Ban.doは、アパレルやインテリア雑貨を扱うECサイトです。
あざやかな色のタッチで遊び心のあるテーマを備えたデザインとなっています。
なかでもアパレル商品ページの画像が特徴的で、モデル写真はすべて違う背景とポーズの写真が採用されています。
SNSで商品をみているかのようなデザインになっており、ユーザーは飽きることなく商品を探せます。
参考になるECサイトデザイン【ギャラリーサイト編】
参考になるECサイトデザインが豊富に掲載されている「ギャラリーサイト」を紹介します。
16.EComm.design
出典：EComm.design
EComm.designは「Shopify」や「WordPress」などで作成されたECサイトが閲覧できるギャラリーサイトです。
海外のECサイトがメインとなっています。
ただ、ECサイトのデザインを参考にするだけではなく、どのプラットフォームで作成したかも確認できるのが最大の特徴です。
17. CartFrenzy
出典：CartFrenzy
CartFrenzyは、６００以上のECサイトデザインを閲覧できるギャラリーサイトです。
他のギャラリーサイトよりも掲載数が多いのと、シンプルな検索機能により、簡単にデザインを探せるのが特徴です。
検索は、ECサイトのジャンルやフリーワード検索に対応しています。
18.Responsive Web Design JP
Responsive Web Design JPは、日本国内のレスポンシブ対応デザインを集めたギャラリーサイトです。
各デザインを「スマートフォン」「タブレット」「パソコン」のデバイス別に閲覧できるのが特徴となっています。
レスポンシブ対応のデザインに悩まれている方は参考にしてみましょう。
19.I/O 3000
出典：I/O 3000
I/O 3000は、ECサイト関連のデザインを集めたギャラリーサイトです。
国内・海外を含めたECサイトが掲載されており、デザインの登録数は３００件以上になります。
操作性が非常にシンプルなため、簡単にデザインを探せるのが特徴です。
20.URAGAWA
出典：URAGAWA
URAGAWAは、制作会社別にECサイトの制作実績が閲覧できるギャラリーサイトです。
デザインを参考にするギャラリーサイトとしても利用でき、制作会社を選定するときにも役立つWebサイトといえます。
また、制作会社によっては、制作の裏側記事の掲載もあるので、読み物としても楽しむことができます。
ECサイトデザインのトレンド【2021年最新版】
ECサイト市場は今後さらなる成長が期待されています。
Webサイト「GuruFocus」の記事によると、2040年までには、約95％のユーザーが店舗ではなくECサイトで商品を購入すると予測されています。
ただし、古いデザインのECサイトでは、売り上げは期待できないので、最新のECサイトデザインのトレンドを理解する必要があります。
最新のトレンドデザインには、ユーザーを引き付ける役割があるので、下記トレンドを参考にしてみましょう。
多方向/非対称レイアウト
多方向/非対称レイアウトは、ECサイトデザインのトレンドの１つです。
正しく行わないと、乱雑にみえる可能性がありますが、適切に行われると、モダンなイメージをユーザーに与えることができます。
多方向/非対称レイアウトは「要素を重ねて、大きな画像と小さな画像を対比する」「空白スペースを十分に使用する」の２点が重要です。
多方向/非対称レイアウトを設計するためのスキルがない場合は、ブランドイメージを損なうリスクもあるので、制作会社への依頼をおすすめします。
ナビゲーションをメインしたレイアウト
ナビゲーションメニューは「ヘッダー」「サイドバー」に含むのが基本ですが、2021年では、ナビゲーションメニューをコンテンツの中心に配置するデザインがトレンドになっています。
また「アニメーション」を追加することで、コンテンツの中心に配置したナビゲーションメニューに視覚的魅力を与え、ユーザーに対してインパクトを残すことができます。
ダークモード
ダークモードを使用すると、ECサイトを競合他社よりもモダンでスタイリッシュにみせることができます。
また、ダークモードは、画面全体の輝度が下がるので、目の負担が減るメリットもあり、近年注目されています。
出典：Google
GoogleもGoogle検索やGoogleマップなど、2021年にはじめてダークモード機能を導入したことから、これからますます人気のあるデザインになることは間違いないでしょう。
楕円形のデザイン
円を使ったグラフィックデザインは定番ですが、2021年のECサイトデザインでは、楕円形のデザインがトレンドになっています。
楕円形を活用すると、少しエッジの効いたモダンに見えるようなデザインになります。
角が丸いボックスや、上部が丸く底が四角い「ステンドグラス」の形など、楕円形と長方形の組み合わせを使用するのが一般的です。
新しいフィルター機能
ECサイトのフィルター機能は、ECサイトでもっとも重要なコンテンツです。
ユーザーが商品を素早くみつけるためのものですが、このフィルターに新しい機能を搭載するのがトレンドとなっています。
たとえば、従来のドロップダウンではなく、スライダーを使用して、ユーザーが「価格」「重量」「色」などの特定の指標を検索するなどの機能です。
ユーザーが楽しく商品をみつけることができるような、フィルターを追加するのが2021年のトレンドになっています。
売れるECサイトデザインに共通する3つのポイント
最後に、売れるECサイトデザインに共通する3つのポイントを紹介します。
下記ポイントを参考に自社ECサイトのデザインを設計してみましょう。
- 信頼性
- ビジュアルの訴求力
- ナビゲーションのわかりやすさ
信頼性
売れるECサイトデザインに共通するポイント１つ目は、信頼性です。
売れているECサイトには、必ず信頼性を獲得するためのコンテンツが記載されています。
たとえば「店舗の連絡先」「返品の条件」「セキュリティについての要件」などが上げられます。
ユーザーが初めて利用するECサイトで商品を購入するときは『返品はできるのか』『個人情報はちゃんと守られるのか』と不安に思う方も多いです。
このような不安を解消するためにも、外見だけのデザインではなく、信頼を獲得するためのデザイン設計が必要になるということです。
ビジュアルの訴求力
売れるECサイトデザインに共通するポイント２つ目は、ビジュアルの訴求力です。
ECサイトは店舗とは違い、ユーザーが商品を実際に手に取ることはできません。
そのため、ECサイトに掲載する商品画像のビジュアルの訴求力で購入がきまります。
ECサイトの商品画像は、白い背景を利用するのが基本です。
白い背景は商品のビジュアル訴求力を最大限高めてくれる役割があるため、Amazonでも全ての商品に白い背景が採用されています。
商品画像を撮影するときには、商品の魅力が最大限伝わるように時間をかけるようにしましょう。
ナビゲーションのわかりやすさ
売れるECサイトデザインに共通するポイント３つ目は、ナビゲーションのわかりやすさです。
ナビゲーションは、ユーザーが商品を簡単にみつけやすくするものです。
そのため、ナビゲーションはシンプルに作成する必要があります。
たとえば、ナビゲーションに「シャツ」「ズボン」「スニーカー」とカテゴリを作成するのではなく「商品一覧」「商品ランキング」「問い合わせ」のような大カテゴリのみでナビゲーションを構成します。
「商品一覧」の中に「シャツ」「ズボン」「スニーカー」の中カテゴリを作成すれば、ナビゲーションがシンプルになり、ECサイト全体もすっきりとしたデザインになります。
まとめ
ECサイトのデザイン20選を紹介しました。
2021年最新版のECサイトデザインのトレンドは下記の通りです。
- 多方向/非対称レイアウト
- ナビゲーションをメインしたレイアウト
- ダークモード
- 楕円形のデザイン
- 新しいフィルター機能
売れるECサイトのデザインに共通するポイントは下記の通りです。
- 信頼性
- ビジュアルの訴求力
- ナビゲーションのわかりやすさ
ある程度デザインの方針が決まったら、自社でECサイトの構築準備、あるいは制作会社にECサイトの制作依頼をしましょう。
ちなみに、当サイト「ビズサイ」ではECサイト制作サービス（サブスクリプション）を提供しています。
ビズサイでは、豊富なオプションサービスからご希望の機能を備えたECサイトを制作することも可能です。
ランニングコストを抑えてECサイトを持ちたい方は、ビズサイのECサイト制作サービスがピッタリです（くわしいサービスはこちら）。
まずは無料でご相談ください。
お問い合わせ・ご相談や、公開後の修正依頼などに関しては、いずれかの方法にてお問い合わせください。
※年末年始・土日祝は定休日となります
※受付時間 9：00～17：30
