ECサイト制作で参考にしたいWebサイト10選。訪問→購入までの導線は分かりやすいか？

Web制作でECサイトをつくる際、ユーザーのニーズを掴むために既存のECサイトを参考にしますよね。

本記事では、Web制作で参考になるECサイトやギャラリーサイトを10個ピックアップし、それぞれの特徴や参考になるポイントなどに触れていきます。

ECサイトとは

ECサイトとは、「Electronic Commerce （電子商取引）」の略であり、一言で説明するとネットショップ、オンラインショップのことです。Amazonや楽天、Yahoo!ショッピングなどの大手通販サイトはもちろん、個人店が運営する小さな通販サイトもECサイトです。

既存のECサイトのデザインを参考にする理由

ECサイトを最初に制作するとき、「オリジナリティにあふれたサイトを作りたい！」と考えますよね。しかし、まずは既存の有名ECサイトのデザインを参考にすることをおすすめします。

既存の有名ECサイトは、デザインや利便性などのユーザビリティが丁寧に検証されているものが多く、またユーザーは既存の有名ECサイトのUIに慣れています。

そのためゼロから独自性の高いECサイトを制作しても、既存ECサイトとシステムが異なりすぎると、ユーザーに受け入れられにくい可能性があります。

まずは独自性よりも、既存ECサイトを参考に扱いやすいUI/UXを考えることが大切です。

ECサイト制作に大切なポイント

ECサイト制作で大切なポイントは、訪問から購入までの導線を意識して制作すること。つまり商品に興味を持つ訪問者を、いかにスムーズに購入まで導けるかが大切になります。

とくに力をいれたいのが、訪問者が一番最初に見るページ（ファーストビュー）です。ページの第一印象であるファーストビューによって、購入の是非が決まるといってもよいほど。

そのため、伝えたい情報やユーザーの興味を引くキャッチーな情報をファーストビューに上手く掲載しましょう。また、パソコンとスマートフォンでは画面に映る情報量に差があるため、デバイスに合わせた情報の整理も必要です。

ECサイト制作で参考にしたいWebサイト10選

ここからは、ECサイト制作において参考にしたい10個のECサイト、ギャラリーサイトを紹介していきます。

1. Amazon

▲出典：Amazon

『Amazon』の優れている点は、シンプルでコンテンツの量が最小限なこと。ECサイトに法律やマーケティングの面で外せないコンテンツを入れると、外観やレイアウトのバランスは崩れがちです。また、どんなサイトでも「ヘルプ」に載せるコンテンツ量は多くなり、複雑化します。

しかしAmazonは、ボタンやハイパーリンクを上手く活用し、ユーザーが次にとるべき行動を簡単にわかりやすく示しています。提供される情報は同じでも、問題解決への行動がしやすいか否かで、ユーザビリティに雲泥の差が出るでしょう。

さらに注目したいのが、Amazonのビジュアルデザインです。一般的なWebデザインでは、色だけで意味を区別する必要があるデザインを避ける傾向があり、Amazonもこのようなアイコンはほぼ使っていません。

世界で最大規模の通販サイトだけあって、サイトデザインはシンプルでユーザーファーストな仕様になっています。

https://www.amazon.co.jp/

2. Uber Eats

▲出典：Uber Eats

『Uber Eats』の公式サイトは全画面を通してスタイリッシュなイメージで統一されています。よくサイトを観察すると、太字が使われていないことにも気づくでしょう。

また、1万以上の加盟レストランが提供する膨大な写真のほぼすべてにこだわっているのがポイント。写真のクオリティだけでなく向きも揃えてあり、どのデバイスで閲覧しても綺麗に表示されるようになっています。

さらに、注文するまでに邪魔な広告が一切ないのも使いやすさに繋がっています。ホーム画面に関しても、利用頻度の高いカテゴリー順に上から配置されており、無駄なスクロールを必要としません。

サイトには過剰な装飾や可視性を損なう広告がなく、店の選択から注文までの導線が非常にスムーズです。

https://www.ubereats.com/jp

3. MoMA STORE

▲出典：MoMA STORE

『MoMA STORE』は、おしゃれで独創的なデザインのインテリアが揃っているニューヨーク近代美術館の公式オンラインショップ。インテリアだけでなくサイト自体のデザイン性も高く、雑貨系のECサイトの制作を考える場合は必ず参考にしたいサイトです。

MoMA STOREの特徴は、検索カテゴリーが多様なこと。一般的なECサイトなら、価格帯やジャンルでカテゴリー分けするのが普通です。しかしMoMA STOREでは「商品のデザイナー」など、ユーザーの求める幅広いカテゴリーから検索できます。

ホームは白を基調としており、とても明るい雰囲気です。背景が白だと商品の色や形がわかりやすいため、ECサイトと白い背景は相性がよいといえます。

https://www.momastore.jp/shop/default.aspx

4. scope

▲出典：scope

『scope』は、北欧デザインの家具や食器などを世界中から集めて販売するセレクトショップです。

商品のデザインもユニークですが、特筆すべき点はサイト下部にある商品の紹介記事。コラムのような形式で商品を紹介しており、商品のストーリーが説明されています。記事からカートまでの導線がスムーズなのもポイントです。

▲出典：scope

また、実際に家で使っているような写真を掲載しており、「自分の部屋でもこんな風に使ってみたいな」とユーザーに想像させる効果があります。

商品を掲載するだけではなく、記事によって商品のストーリーを作り出しユーザーの購入意欲をかき立てるECサイトです。

https://www.scope.ne.jp/

5. BOTANIST

▲出典：BOTANIST

ヘアケアやボディケアアイテムを取り扱うブランドとして有名な『BOTANIST』のECサイトも興味深いデザインをしています。

サイト自体のデザインはとてもシンプル。商品の説明に関しても長々と解説するのではなく、ナチュラルで透明感のある世界観を大切にしています。

しかし、BOTANISTは世界観だけを大切にしているわけではありません。商品ラインナップの増加に伴い、目的の商品を迷うことなく見つけられる情報設計がしっかりされています。実際にホームからスクロールをすればすぐに目に入るのが、目玉商品であるシャンプー・トリートメントなどのヘアケア商品です。

また、パッと見ただけで商品の値段が目に入りそこからワンクリックで商品をカートに追加できるため、購入までの経路が短く余計な手間がかかりません。

サイトの世界観を大事にしつつも購入までの導線をしっかり描いていくことは、ECサイトを制作するうえで重要といえます。

https://botanistofficial.com/shop/default.aspx

6. ネコノテパン

▲出典：ネコノテパン

『ネコノテパン』は広島県のパン製造工場の公式サイトで、サイトの色や雰囲気から温かみを感じられます。

ホームに配置されているパンがなんとも可愛らしく、アットホームな雰囲気を醸し出しています。サイトの訪問者は、実際にお店に訪れたような気持ちになるでしょう。

ページ数が少なく、余計な情報がほとんどありません。カートから購入までの導線もすっきりしています。見ていて疲れないWebデザインだといえます。

トレンドのサイトとは一線を画しますが、デザインの工夫次第で魅力的なECサイトになる好例です。

http://pan.catnote.co.jp/

7. 京都 うね乃

▲出典：京都 うね乃

京都のだし専門店『京都 うね乃』。ホームのスライドアニメーションのクオリティが高く、ECサイトというより、まるでCMのような雰囲気です。

白い背景で掲載商品が見やすく、サイトの作りにも無駄がないため、興味のあるコンテンツを見つけやすいでしょう。購入画面での商品削除や変更もスムーズで、ストレスを感じさせません。サイトの上部をパッと見れば購入手続きの進み具合も確認でき、ユーザービリティの高さが伺えます。

また、美しく繊細なフォントからは雅な雰囲気が。「和」を感じさせるECサイトを作りたい方は必見のサイトです。

https://odashi.com/

8. MUUUUU.ORG

▲出典：MUUUUU.ORG

ここからは、ギャラリーサイトの紹介になります。

『MUUUUU.ORG』は、デザインのクオリティやユーザービリティの高いサイトを集めているギャラリーサイトです。とくに、縦に長いサイトが厳選されています。

カテゴリ分けが非常に細かく、自分の求めるWebデザインの特徴にあったサイトを簡単に探せます。そのため、参考にしたいサイトを探すときは、まず『MUUUUU.ORG』を利用するのがおすすめです。

海外のサイトも取り扱っており、日本にはないようなデザインを閲覧したい場合にも便利です。

https://muuuuu.org/

9：iPhoneデザインボックス

▲出典：iPhoneデザインボックス

『iPhoneデザインボックス』は、iPhoneから見たときに魅力的なデザインのサイトを集めたサイトです。カテゴリも豊富で、海外のサイトも掲載されています。

スマホ画面のキャプチャだけでなく、PC画面で表示した場合のキャプチャも掲載されているため、簡単に見比べられて便利です。

昨今は、iPhoneをはじめとするさまざまなデバイスがサイトにアクセスする時代。したがって、どんなデバイスからでもレイアウトが崩れないように対処する必要があります。

http://design.web-hon.com/

10. I/O 3000

▲出典：I/O 3000

『 I/O 3000』は、スタイリッシュでかっこいいサイトが揃っているギャラリーサイト。日本だけでなく、海外のサイトも豊富です。

海外のサイトは日本のサイトと雰囲気が違うため、アイデアをそのまま使うことは難しいかもしれません。しかし、サイトのデザインにちょっとひねりを加えたいときに役立ちます。デザインは毎月20件ほど追加されるため、トレンドにも強いです。

カテゴリやタグ、色などで検索できるほか、ランダム表示機能も搭載しています。イメージが固まっていないときに使うと思わぬ収穫があるかもしれません。

https://io3000.com/

おわりに

ECサイトには、販売する商品に合わせたレイアウトやボタンの配置など、ユーザビリティを追求したサイト設計が必要です。

扱う商品が決まっている場合は、既にその分野で成功を収めているECサイトの特徴を掴み、自社の強みと掛け合わせたうえでWeb制作を行いましょう。

（執筆：ちとせはるか　編集：齊藤颯人）