2017/5/12

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



「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


https://ecomm.design/

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サイトを追加しています。

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

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

こんな人におすすめ

・国内の豊富なデザイン事例の中から、自分の気に入るデザインを探してみたい方。



webデザインの見本帳


http://www.web-mihon.com/

こちらも国内のポートフォリオサイトを兼ねたギャラリーで、非常に掲載点数が多い、有名なwebデザインギャラリーの一つです。

「ランキング」や、”リッチ”などの「印象」等、ユニークな探し方ができます。

こんな人におすすめ

・ランキング機能で多くの人に支持されているサイトをみたい方。


iPhoneDesignBox


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

こちらはこれまでと少し毛色が変わって、「スマホサイト」の情報が充実したwebデザインギャラリーです。

更新頻度も高く、何よりPC/スマホのデザインが両方同時に見られるという、とてもありがたい機能がついています。

こんな人におすすめ


・PCだけでなく、スマホのデザインも同時に考えたい方。



ズロック


http://www.zzrock.net/

このサイトはサムネイルの表示サイズをワンクリックで変えることができます。
そのため、画像サイズを小さくして沢山の事例を一目でみたり、逆にある程度絞り込んだあとは大きいサイズでまとめてみる。
という使い方も可能です。

こんな人におすすめ


・一目で沢山のサイトを見たい方。
 ※ここまで画像サイズを小さくできるサイトは多くないため



まとめ


ここまででデザインのシンプルな原則を学び、それを2つのサイトで実際に確かめ、最後に参考となるギャラリーサイトを一気にご紹介しました。

デザインの原則はまずは4つで
・近接
・整列
・反復
・コントラスト

でしたね。

この原則を元に、様々なサイトを見たうえでご自身のサイトデザインを見直してみてください。
きっと何か参考になる点があると思います。

※記事中の情報は2017年5月現在のものです。

この記事を書いた人
佐々木 ゴウ

大手Sierや、ECコンサルティング会社での経験を活かし、ファッションや食品などの各種商品ジャンルから、バックオフィス、ITインフラ系まで幅広く執筆が可能。webライティングの講師や、メディアコンサルティング、採用系メディアの編集長なども請け負っている。趣味は盆栽。


PR:デザインも自由にカスタマイズが可能なECサイト構築パッケージ「EC-Orange」




>>お問合せはこちらから


運営者

  • 株式会社エスキュービズム
  • 〒105-0011 東京都港区芝公園2-4-1芝パークビル A館 4階
  • TEL : 03-6430-6730(代表)
  • HP:https://s-cubism.jp/