ECサイトのデザイン4つのコツと参考事例まとめ

2017年05月12日
2018年07月24日
#ECサイト
#デザイン
#構築

「ECサイトのデザイン」

デザイナーに頼むにはお金がかかりますよね。
でも、デザインの知識なしに自分でやると、素人臭いデザインになってしまいがちです。

そんなネットショップ、結構多いですが、あなたのお店は大丈夫ですか？

素人臭いデザインだと、実はこんなデメリットがあります。

情報がごちゃつく
伝えたい部分が伝わらない
結果、売れない

しかし、この記事でご紹介する4つの簡単なコツを抑えれば、格段に見やすいショップにすることが可能です。
デザインのシンプルな原則を学び、それを2つのサイトで実際に確かめ、最後に参考実例を、ドバっとご紹介しますので、以下お付き合いください。

ECサイトのデザイン4つの基本原則

ECサイトにかぎらず、デザインには実は「きまり」があります。
それを身に着けるだけでも、見違えるようにデザインが良くなるんです。

そこで、最低限のテクニックだけまずは身につけましょう。
（参考：ノンデザイナーズ・デザインブック）

ポイントは4つです。

1：近接
2：整列
3：反復
4：コントラスト

以下、それぞれ詳しくご説明します。

1：近接

近接とは、関連する項目をまとめてグループ化することを指します。
ひとつのグループとして見やすくすることが目的です。

　●　□□　●
□　●　　　□●

よりも、

●●　□□
●●　□□

の方が、認識しやすいですよね。

同じ、もしくは似た情報は近くにまとめることで、人間の脳は「これは類似の情報だ」と処理しやすくなるのです。

2：整列

整列とは、ページ上の情報の配置を整理して並べることです。これも人間の脳が認識しやすくすることが目的です。

たとえば、

　　●●●

□□□
　　　●●●●
　　　　　□□

よりも、

●●●
●●●●

□□□
□□

の方が見やすいですよね。
人間の脳は「見えない線」を無意識に引いて、認識をしやすくする機能があります。

その「見えない線」を、デザインでも余白などを使って意識的にひいてあげることで、格段に認識しやすくなるわけです。

3：反復

反復とは、文字通り「繰り返し」です。
少し言い換えると、デザインの特徴を同じように繰り返すことで、人間の脳が「ひとつのパターン」として認識しやすくすることが目的です。

これも百聞は一見に如かず。

例えば

　●●●
　□□□
　▲▲▲
　◇◇◇

　●●●
　▲▲▲
　◇◇◇
　□□□

上記よりも、以下の方が見やすいですよね。
（並べている文字は全く同じものです）

　●●●
　▲▲▲
　□□□
　◇◇◇

　●●●
　▲▲▲
　□□□
　◇◇◇

4：コントラスト

コントラストとは、色であきらかな違いを出すことです。目的は、脳が情報のグループを認識しやすくすること。

例えば

■■■■■（←見出し）
●●●●●●（←本文）
●●●●
上記よりも、以下の方が「（見出し）と（本文）は別の情報」だということが一目で伝わりやすいですよね。

■■■■■（←見出し）
●●●●●●（←本文）
●●●●

デザインが参考になるECサイト

amazon

AmazonはECサイトのデザインとして、とても参考になります。

どのページをみても、
*************************************
〇見出し〇
　項目　項目　項目　項目　項目　項目
*************************************
〇見出し〇
　項目　項目　項目　項目　項目　項目
*************************************

という形で、情報がまとめられているので、どの情報が似ている情報なのかが一目瞭然です。
上記で紹介した、近接・整列・反復がうまく使われていますね。

また、コントラストもうまく使われています。

例えば、ヘッダーにある買い物かごの情報やFAQなど、何かの機能的な役割を持つナビゲーション部分は「黒地に白系の文字」になっています。
一方、商品の紹介部分については「白地に黒系の文字」と、対照的な色使いになっているので、直感的に探しやすくなっていますね。
以上のように基本がしっかりと抑えられているため、AmazonはECサイトのデザインとして、とても参考になります。

UNIQLO

ECサイトのデザインとして、とても参考になる2店舗目はユニクロです。

特徴はヘッダーのナビのデザインです。

左の方は白背景で商品カテゴリを配置し、右の方は黒背景でカートやFAQの機能的なナビを配置。
真ん中は灰色で問い合わせや会社情報を配置。

結果的に
白色→灰色→黒色
と、グラデーションになっています。

また、それぞれは「白：商品カテゴリ群」「灰色：会社情報群」「黒：機能ナビ群」と、近接の法則にもきちんとのっとっています。
一見特殊ですが目的によってコントラストがわかれているため、違いが分かりやすいヘッダーになっています。
整列もされており、デザインの基本原則にきちんとのっとっていますね。

それではこれ以下は、たくさんの事例に触れてみましょう。

以下、ECサイトのデザインをまとめたギャラリーサイトを15個ご紹介します。
上手なサイトは概ね上記のデザインの基本を押さえていますので、確認してみてください。

ECサイトデザインのギャラリーサイトまとめ

MUUUUU.ORG

http://muuuuu.org/
カテゴリが様々な種類別に分かれているので、探しやすいです。
また、画像が横3つ並ぶようなサイズなので、一目でたくさんのサイトを確認することができます。

こんな人におすすめ

自分にあったカテゴリのサイトの中から、一目でたくさんのサイトを確認し、ぱっと探したい方。

straightline bookmark

http://bm.straightline.jp/
意外と他のサイトではあまりないのですが、ここの特徴は「ユーザー登録」です。
登録後、自分のお気に入りを保存しておくことができるようになるので、いちいち自分のPCなどに保存しておく手間と、容量が不要になります。

また、更新頻度が高く、登録数が2017年半ばの時点で7500サイトと、参考になるサイト数がとても多いです。

こんな人におすすめ

とにかくたくさんのサイトを見たい人。
手軽に気に入ったサイトを保存しておきたい人。

wonderbookmarks

http://bm.wonderboxstudio.com/
CATEGORY/COLOR/TECHNOLOGYと、それぞれの中でもかなり細かく分類されているので、探しやすさは随一です。
気に入ったサイトに出会うのに時間があまりかかりません。

また、登録点数も1600超えと多いのですが、最終更新が2013年としばらく更新が止まってしまっているのが難点です。

一度、自分の分類で気に入ったサイトをさっと見て探すくらいがおすすめです。

こんな人におすすめ

・あまり時間をかけずに、さっと自分に合ったデザインを見てみたい方。

goooodstore.com

http://goooodstore.com/
ECサイトのデザインのキュレーションサイトです。
まだ掲載サイトの数は多くはないのですが、シンプルでつかいやすいサイトの事例が中心で、今後の更新に期待です。

こんな人におすすめ

・シンプルで新しいデザインを見たい方。

ネットショップギャラリー

http://ec.ysig.jp/
ネットショップギャラリーは、国内のECサイトだけを集めたデザインまとめです。

その特徴は豊富な「探し方」

業種
構築方法
雰囲気
色
地域
レイアウト

と、様々な探し方ができるので、探す時間を短縮することができます。
（上述のwonderbookmarksに似ていますね。）

ただ、このサイトも最終更新がしばらく更新が止まってしまっている様子。

一度、自分の該当する分類で気に入ったサイトをさっと見て探すくらいが、やはりおすすめです。

こんな人におすすめ

・あまり時間をかけずに、さっと自分に合ったデザインを見てみたい方。

cartcraze

https://cartcraze.com/
cartcrazeは海外のECサイトデザインギャラリーであるため、特徴は「海外のECサイトのみ」を探せるということ。
また、ノウハウや有料/無料素材、テンプレートなど、様々なものが手に入るサイトです。

すべて英語であるのが難点ですが、英語さえできれば、有益な情報がたくさん詰まっています。

こんな人におすすめ

・最新の海外のECサイトのデザインを見たい方。
・海外のECサイトのノウハウ記事を読みたい方。（英語必須）

ecomm.design

Home

ecomm.designも海外のECサイトデザインギャラリーです。
ここの特徴は圧倒的なサイト数。
2017年半ばの時点で、1000を超えています。

実は多くのwebデザインギャラリーではECサイトに絞ると、数十～せいぜい数百くらいの点数が通常です。

さらに、1000を超える点数から探しやすいように4種類の「フィルター」が「同時に」かけられます。

他ではカテゴリ分けされていれば、探しやすいと思われる中、4種類同時にかけられるのは本当に珍しいですが、その分使いやすいです。

こんな人におすすめ

・最新の海外のECサイトのデザインを沢山見たい方。
・海外のECサイトのデザインを探す際に、あまり時間をかけたくないかた。

cart frenzy

http://cartfrenzy.com/
cart frenzyは海外ECを集めたサイトで、上記のecomm.design以上に掲載点数が多いです。
なんとその数、1300ほど。

ただし、ecomm.designほど探すための機能が充実していないのが難点で、数が多い分、時間をかけずにさっと探すには不向きです。

こんな人におすすめ

・最新の海外のECサイトのデザインを沢山見たい方。
・様々なサイトをざっと見て、最近のデザインの傾向を確認したい方。

beautiful stores

https://beautifulstores.com/
beautiful storesはサイト名にもあるように、「美しいサイト」に特化したwebギャラリーです。
機能的なサイトからは少し離れてしまうのですが、商品点数が少ない高額なファッションブランドの場合など、参考になる場合は結構多そうです。

こんな人におすすめ

・機能的というよりも、とにかく美しいサイトを探したい方。

rakuu

こちらは国内のECサイト、それも「楽天店舗専門」のデザインギャラリー

商品ジャンルごとに探せるのはもちろん、楽天GOLD（楽天の仕様にとらわれず、かなり自由にデザインができる機能）のページだけに特化して検索することも可能です。

こんな人におすすめ

・既に楽天に出店をしている方、今後楽天への出店を検討している方。

　※個人的には楽天の「SHOP OF THE YEAR」受賞店を見回る方が効率的に「売れる」デザインに出会える気がします。
　　「SHOP OF THE YEAR」受賞店はどれも実際に売れた店舗ですので。

WebDesign Bookmrk S5-Style

http://bm.s5-style.com/
こちらは国内、海外を問わずに優れたデザインをあつめたwebデザインギャラリーサイト。
その中でも、ECのデザインが充実しています。

また、デザインごとにタグが充実しており、自分が気に入ったサイトに類似したサイトを探しやすくなっています。

こんな人におすすめ

・国内外問わずに優れたデザインを一つのサイトで探したい方。

イケサイ

https://www.ikesai.com/
webデザイナーのポートフォリオサイトも兼ねているこのギャラリーは、ほぼ毎日2～4サイトを追加しています。

その結果、現時点では数えきれないほど膨大なサイトデザインが登録されています。

カテゴリの分類や、検索も充実しているので、まずは国内のサイトを見てみたいというかた、一度ご覧ください。