参考になる！ECサイトのデザイン事例【25選】とECデザインギャラリー【10選】

ECサイトを制作するとなった場合、「こんな感じのサイトにしたい！」という目標にするサイトをもっておくことはとても大切です。
今回は3つの観点から参考になる厳選したECサイトを25本挙げていきます！
是非これからECサイトを作りたいと思っている方の参考になるサイトが見つかれば幸いです。
参考サイトをチェックする際のポイントや、多くのECサイトをチェックできるギャラリーサイトも紹介しているので最後までご覧ください。

それではどうぞ！

他ECサイトのデザインで参考にすべきポイント

皆さんは参考サイトを見る時にどのようなことを考えていますか？
「このデザイン素敵だな」
「このボタン押しやすいな」
などでしょうか。

プロのWebデザイナーが参考デザインを見る際のチェックポイントについてご説明します。
以下、ポイントをまとめましたので参考にしてみてくださいね！

• 制作者目線で見ることと、ユーザー目線で見てみる
• カテゴリをどのように分けているのか
• どのようなオリジナルのコンテンツを用意しているのか
• 自分がそのサイトで購入しようとする際にどのようなところで詰まったり、違和感を持つのか
• 商品への導線をどのように設置しているのか

制作者目線で見ることと、ユーザー目線で見てみる

コンテンツやボタンなど1つ1つに制作者の意図が詰まっています。
さらにその意図を考えた上で、自分がユーザーとして使ってみてどのように感じるか、改善すべき点があるかどうかを考えてみるとこれから作るECサイトの参考になります。

カテゴリをどのように分けているのか

カテゴリ分けはECサイトの重要ポイントです。
どのように分けているのか、どのくらいの数があるのか、カテゴリはどのようなデザインにしているのかをチェックしてみましょう！

どのようなオリジナルのコンテンツを用意しているのか

オリジナリティのあるコンテンツはGoogleにも評価されます。そして固定のユーザーも増やしやすいです。
サイトの商品に合わせて様々なオリジナルコンテンツがあるので色々なサイトを見てみましょう。

自分がそのサイトで購入しようとする際にどのようなところで詰まったり、違和感を持つのか

実際に商品を購入するつもりで検索・購入の手前まで操作してみましょう。
どこかで詰まったりしたら制作するサイトではその部分で詰まらないように対策することが出来ます。
特に競合他社のECサイトでチェックしてみると良いでしょう。

商品への導線をどのように設置しているのか

商品への導線設置は特にトップページで行われています。
トップページで離脱がないように、他のECサイトを見てどのような導線があるのかチェックしてみましょう。
よくみる導線は特集、ランキング、ピックアップ（おすすめ）、○○から探す、などです。

参考になるECデザイン事例

参考サイトでチェックすべきポイントが分かったら次は実際に色々なサイトを見てみましょう！
3つの観点でサイトを分けているので気になるところから見てみて下さい。

ベーシックな使いやすいデザイン特徴的なイラストや、色づかい、世界観充実したコンテンツ・導線

ベーシックな使いやすいデザイン

まずは一番ベーシックでシンプルな構成、デザインのサイトをご紹介します。
基本的なところがしっかりしているサイトはとても使いやすく、固定のユーザーもついていきます。
是非参考にしてみてください。

01LOWYA

LOWYAは、トレンド感のあるおしゃれな家具を低価格で、をコンセプトにしている家具・雑貨のオンラインストアです。
LOWYAはサイト内のバナーがとてもおしゃれで目を引きます。サイト全体がシンプルな色構成なので、注目してほしいところに色を持ってくるとそこが際立っていますね。
また、写真がとても綺麗で、商品写真の重要さがとてもよく分かりますね。
LOWYA

02三越伊勢丹オンラインストア

三越伊勢丹は日本の百貨店で、オンラインストアでは様々な人気アイテムや、限定商品を取り扱っています。
トップページが見やすい構成になっているのでユーザーが迷うことなく商品を探しにいくことが出来ます。
スタッフのおすすめの商品が掲載されていたりと、実際にそのショップに行かなくても買い物がしやすくなるようなコンテンツがあるのも魅力的ですね。
三越伊勢丹オンラインストア

03ビックカメラ.com

ビックカメラは日本の家電量販チェーンです。オンラインでは、家電だけでなく幅広い商品を取り扱っています。
商品数やカテゴリが多いため、情報量が多いECサイトになっています。このようなサイトはカテゴリ分けや情報の整理の仕方がとても重要です。
是非どのようにカテゴリを分けているのか、どんな情報が表示されているのかチェックしてみてください。
ビックカメラ.com

04Bollina（ボリーナ）

Bollinaは、水栓メーカー田中金属のシャワーヘッドでマイクロナノバブルを水道水圧から生成できる製品です。
商品の使用イメージが湧きやすいECサイトで、全体的に雰囲気が統一されています。所々水滴が散りばめられていて、写真にも躍動感が伝わります。
専門家から頂いたコメントを掲載しているので信頼感も感じられますね。
Bollina（ボリーナ）

05Rinnai Style（リンナイスタイル）

リンナイスタイルは、リンナイが運営する公式オンラインストアです。
ECサイト内の画像付きのアイテムカテゴリがとても分かりやすく探しやすいです。オリジナルコンテンツのコラムや、商品詳細ページの情報も充実しており、とても参考になるECサイトです。
サイトの上部ではなく、右側にログインやマイページへ遷移できるサイドバーが追従しているので画面内で縦にコンテンツを見る幅を狭めることなく、商品を選んでいくことが出来ます。
Rinnai Style（リンナイスタイル）

06ロジクール

ロジクールは、コンピューター周辺機器やソフトウェアなど扱うスイス・Logitech社の日本法人です。
全体的にテキストが少なく、画像が多く掲載されているECサイトです。色々な使用シーンや製品画像が掲載されていることでテキストが少なくても十分魅力が伝わるサイトですね。
また、商品詳細ページでは、「在庫あり、すぐに発送」というような文言を出すことによって、ユーザーへ購入の後押しをしています。
ロジクール

07カインズ

カインズは、関東地方を中心（28都道府県228店舗）にホームセンターを展開する大手小売企業です。
シンプルな構成で今人気の商品や、話題の商品をすぐに見つけることができるような構造のECサイトになっています。
季節に合わせた特集も充実しており、当初購入しようとしていたもの＋特集の商品が欲しくなってしまいます。
商品の詳細ページがとても充実しております。例えば、アンバサダーレビュー、イラストや画像付きの商品の使い方説明。そしてなんと在庫数が細かく出ているので、残り数が少ないとつい購入してしまいそうですね。
カインズ

08バーミキュラ

バーミキュラは、世界中に手料理のある暮らしの素晴らしさをお届けする事をブランドの使命として掲げています。
ECサイトは商品画像が、実際に料理に使っている画像であったり、キッチンに置かれている画像だったりと使用しているイメージが湧きます。（ホバーすると、商品単体の画像も出てきます。）
ページの後半では、バーミキュラのサポートについて紹介されており、商品の魅力だけでなく、メーカーの信頼感も伝わるECサイトになっています。
バーミキュラ

09レザーブランド『REVEL』公式通販ストア

使う人が身軽に過ごせるようにと考え抜かれたデザイン性と実用性を兼ね備えた革小物のブランドです。そのコンパクトさから、ミニマリストの方に人気のようです。
商品のイメージに合ったシンプルなECサイトです。デザイナーの方が書いているオリジナルコンテンツのブログがあり、ブランドのファンには喜ばれているようです。
商品詳細ページでは画像がとても充実しており、色々な角度から商品を見ることができます。
レザーブランド『REVEL』公式通販ストア

10イソップ

イソップはオーストラリアで創業したスキンケアブランドです。
商品の画像が大きく掲載されていて余白が大きくとられているシンプルな構成のECサイトです。
安っぽさを感じず、商品の載せ方やテキストからブランドのこだわりを感じられます。
また、オリジナルのブログコンテンツでは、スキンケアに関する情報などを発信しており、1つの記事がどのくらいの時間で読めるものなのかメニューに記載しています。
あまり興味がなくても「1分の内容であればちょっと見てみようかな…」という気持ちに成りますね。
イソップ

11Tiffany & Co. JP

ティファニーは、アメリカで創業した世界的に有名な宝飾品および銀製品のブランドです。
ECサイト内では、とても写真が綺麗で大きく掲載されています。逆にテキストは小さめなので画像が引き立っています。
特徴的なブランドカラーなので、ECサイト自体にはあまり色が使われておらず商品自体の色や箱の色がポイントになっていますね。
ハイブランドのECサイトはシンプルなつくりのところが多いです。
ハイブランドは既にそのブランドの価値を知っている人が訪れる事を想定されているため、ブランドの宣伝や広告はあまり必要なく、基本的な機能のみあれば成り立つためだと考えています。
Tiffany & Co. JP

特徴的なイラストや、色づかい、世界観

次にオリジナルのイラストを使用したECサイトや、素敵な色使い、統一したブランドの世界観を表現しているECサイトを紹介します。

12神戸元町辰屋

神戸元町辰屋は、明治創業の神戸牛(神戸ビーフ)の専門店です。
店主のイラストが案内してくれるのがとてもユニークでかわいいECサイトです。線のデザインもイラストと同じ、ザラザラした質感で統一されています。
商品画像をホバーすると実際の料理した画像が出てくるので、「食べてみたい！」という気持ちになります。
神戸元町辰屋

13よかよか市場 熊モットー

熊モットーは、九州、熊本の美味しい野菜、果物を販売している会社です。
太いフォントに、黒・赤・緑と色使いがはっきりしていて見やすいサイトです。実際の生産者さんのお顔を使用したデザインなのでどこか温かみを感じます。

訳アリ商品やまとめ買いをできたりと、スーパーで買うのとは違った特別なコンテンツがあるのも魅力的ですね。
よかよか市場 熊モットー

14YOAN（ユアン）ONLINE SHOP

YOANは、角質ケアと保湿ケアが同時に叶う新発想のスキンケアブランドです。
製品にあったサイトの色味でブランドの世界観で統一されています。
実際の使用ステップに合わせた製品の紹介もあり、ライン使いしたい方が購入しやすくなっています。

商品画像も、サイト全体に合わせた小物と合わせて撮影されており、とても魅力的なECサイトになっています。
YOAN（ユアン）ONLINE SHOP

15養老ミートオンラインストア

養老ミートは、岐阜県の食肉メーカーで卸業、生産、小売、輸出まで多角的に事業を展開しています。
商品画像ではなく、大きくイラストが載ったメインビジュアルが印象的なこちらのECサイト。
イラストをはじめフォントから色づかいまですべて統一された世界観を持っており、こだわりが細部まで感じられます。
養老ミートオンラインストア

おすすめブログ記事

以下の記事ではオシャレなECサイトを厳選していますので、さらにデザイン面を強化したい方はチェックしてみてください！
参考になるおしゃれなECサイト20選とデザイントレンド

充実したコンテンツ・導線

最後に充実したコンテンツと、トップページから商品ページへの導線が参考になるサイトをご紹介します！

16日清食品グループ オンラインストア

日清食品グループは、日本の食品ホールディングスです。
ECサイト内では掲載しているバナーが大きく、詳細度が高いため、つい気になって目を引きます。
見出しの上にあるマイクロコピーもとても効果的な文言になっていますね。
また、新商品エリアとセールエリアでは、背景に文字が入っていて目立つような工夫がされています。
日清食品グループ オンラインストア

17GODIVA（ゴディバ）

ゴディバは、ベルギー王室御用達、ベルギーに本社を置く国際的なチョコレートブランドです。
ECサイトは、情報量が少し多めですが、ユーザーに商品を見てもらうための導線がトップページに多く設置されています。
ゴディバはよく贈り物などで買われていることから、ECサイトでもギフトシーンで探す、という検索方法があったり、のし対応している商品をトップページに掲載していたりとユーザーの需要をしっかり理解してECサイトに反映されています。
GODIVA（ゴディバ）

18サンリオオンラインショップ

サンリオは、オリジナルのキャラクターグッズの販売や、テーマパークの運営を行っている日本の会社です。
トップページから商品ページへの誘導が特集などで丁寧にされており、サイト内の回遊がしやすい構造になっています。
デザイン自体は、ピンクを基調としたシンプルなデザインでごちゃごちゃしておらず使いやすいですね。
アイコンなどもオリジナルのようでキャラクターのモチーフが隠れているようです。
サンリオオンラインショップ

19My Nintendo Store（マイニンテンドーストア）

任天堂は玩具やコンピュータゲームの開発・製造・販売を行っている会社でMy Nintendo Storeはそのオンラインストアです。
全体的にデザインが分かりやすく、特集からサイト内の回遊がしやすい構造です。
バナーがカラフルなので、サイト自体は主にグレーや白などの無彩色が使用されています。
カスタマイズできるSwitchのページでは、選んだカラーが商品に反映されたりとイメージが湧きやすい工夫がされています。
My Nintendo Store（マイニンテンドーストア）

20「SHISEIDO」公式オンラインストア

資生堂は、1872年に東京銀座で創業した化粧品ブランドです。
ECサイトでオリジナルコンテンツが多く、競合との差別化がされています。
例えば美容に関する疑問に答えるブログや、肌測定、Webカウンセリングなどなど、かつては店舗でしかできなかったような体験がECサイトでできるようになっています。
診断などでおすすめの商品を出すことによってよりユーザーに満足度の高い体験を与える事ができます。
「SHISEIDO」公式オンラインストア

21ファッション通販ZOZOTOWN

ZOZOTOWNは日本最大級のファッション通販サイトで他にもファッションに関する様々なサービスを展開しています。
ECサイト内は整理されていて、迷うことなく商品の検索から商品購入まで進むことが出来ます。
新品だけでなく、プライスダウンした古着もタブ切り替えで見ることが出来ます。
さらにZOZOTOWNが運営しているWEARというコーデを載せるサービスも連動しており、ユーザーがコーデを見ながら商品を探すこともできます。
ファッション通販ZOZOTOWNファッションコーディネート WEAR

22ワールド オンラインストア

WORLDは、アパレルに留まらず、ジュエリー、家具等の多様な事業を展開している会社です。
カテゴリやコンテンツが充実していることはもちろん、オリジナルコンテンツがとても便利でした。
簡単サイズチェックというコンテンツがあり、試着ができず合うサイズがわからないというアパレルECでの課題を解決しています。
体のサイズを入力すると、ピッタリのサイズを教えてくれて、他の比較アイテムを追加することもできました！

他にも、STYLE SNAPというコンテンツでは、コーディネートが見れたり、動画で実際に着用したイメージを見ることができます。
画像ではなく動画で見ることで生地感も伝わりやすくなりますね。
ワールド オンラインストア

23アーバンリサーチ公式ファッション通販

アーバンリサーチは衣類・小物類等を販売するセレクトショップを運営するアパレル会社です。
右下にメニューや探すなどのボタンが集まっているのが特徴的です。
基本的に画面の下のほうを操作することが多いので、メニューなども下の方にあることでPCサイズの場合はマウスをたくさん動かすことがなく便利です。
WORLDとは別サービスですが、アーバンリサーチにもサイズを確認できるコンテンツがありました。
丈感などを実際の自分の身長に当てはめて確認できるコンテンツは洋服選びの際にとても参考できますね。
アーバンリサーチ公式ファッション通販

24ワークマン公式オンラインストア

ワークマンはワーキングウエア（作業服）・安全靴・長靴などの専門店チェーンで、ECサイトは商品カテゴリが細かく、充実しているので自分が欲しい商品にすぐにたどり着くことができる構造になっています。
また、訪れるユーザー層に刺さりそうな特集を出していることもポイントです。
例えば「アウトドア特集」や、「おすすめ作業着・安全靴・手袋」など、ユーザーがどんなシーンでワークマンの商品を必要としているのかしっかり把握しているためですね。
ワークマン公式オンラインストア

25OUTDOOR GUILD MURACO

埼玉県狭山市を拠点とするアウトドアブランドのMURACOでは、サイト全体をモノトーンにしており、細い線と太いゴシックのバランスが綺麗に取れたECサイトになっています。
商品のアイコンも細い線で統一されており、細部までこだわりを感じます。
オリジナルコンテンツであるブログでは、実際の商品を使ってみた記事もあり、商品の魅力、そしてブランドの魅力が伝わる内容になっています。
OUTDOOR GUILD MURACO

おすすめブログ記事

充実したコンテンツと、適切な導線はUI・UX向上につながります！
以下の記事ではECサイトのUI・UXに着目して解説しているので是非チェックしてみてください。
参考になるおしゃれなECサイト20選とデザイントレンド

ECデザインの参考例を探せるギャラリーサイト

ギャラリーサイトでは幅広く、数多くのECサイトが掲載されています。
業種別で検索できたり、サイト内の色で検索することもできるのでこれから制作するECサイトにピッタリの参考が見つけられます！

01I/O 3000

I/O 3000I/O 3000は、カテゴリ・タグ・サイトに使用している色で検索することができます。掲載しているサイトも多く、幅広いジャンルのECサイトをチェックすることができます！

02SANKOU!

SANKOU!SANKOU!は、幅広いジャンルのWebサイトが掲載されているのでとても探しやすく、よくチェックされているサイト集です。お気に入り機能があるので、気になったサイトはお気に入りしておくとよいです。

03Web Design Clip

Web Design ClipWeb Design Clipは日本のサイトだけでなく世界中のサイトも掲載しているので世界のデザイントレンドもチェックすることができます。
海外のギャラリーサイトだと英語で書いてあったりするので日本語のサイトでどちらもチェックできるのはありがたいですね。

04MUUUUU.ORG

MUUUUU.ORG
MUUUUU.ORGでは、クオリティが高く、縦に長いサイトが掲載されています。一番下までいったらまた読み込まれてコンテンツが表示されるので下にスクロールする動きだけで多くのサイトをチェックすることができます。

05Choicely

ChoicelyChoicelyは、通常のサイト種類ごとのカテゴリ分けだけではなく、色ごとにもまとめられています。またこちらも海外のサイトが掲載されているのがポイントです。

06S5-Style

S5-StyleS5-Styleも掲載数が多く、お気に入り機能もあります。ページの横のところに、ページの一番上、一番下に移動できるボタンがあり、真ん中はページネーションのようです。
こちらのサイトも下にスクロールする動きだけで多くのサイトをチェックすることができます。

07Web Design Garden

Web Design GardenWeb Design Gardenは、検索のナビゲーションが他よりも充実している印象をうけます。業界や、サイトの印象別に探すことができ、とても検索しやすいです。ただ、あまりECサイトの掲載数は多くないので、他と合わせてチェックしてみるのがよさそうです。

0881-web.com

81-web.com81-web.comは、SPレイアウトとPCレイアウトを簡単にチェックすることができます。使用しているフォントなども知ることができるのでもしデザインで使おうとしているフォントがあればどのようなところで使用しているのかチェックしてみましょう。

09ちょうどいいWebデザインギャラリー

ちょうどいいWebデザインギャラリーちょうどいいWebデザインギャラリーは、そのサイトのちょうどよい部分がコメントで表示されており、つい全部のコメントをチェックしてみたくなるようなギャラリーサイトです。サイトのトーンからも検索することができ、お気に入り機能もあるためECサイトの参考を探す際には是非一度見て頂きたいです！

10Pinterest

PinterestPinterestはギャラリーサイトかというと少し違うかもしれませんが、自由度の高い検索ができ、色々なデザインをチェックできるのでおすすめします。
フォルダに分けて保存もできるので参考サイトの整理もカンタンにできます。

まとめ

いかがだったでしょうか。
素敵な参考サイトは見つかりましたか？
今回紹介したサイトに限らず、色々なECサイトを見てよいところを参考にしましょう。

BRISKではECサイトに関するブログがたくさんあり、制作の際に必ず役立つ知識がのっております。
ぜひご覧下さい！