title-feature
Design

グッとくる!デザインの参考になるECサイト特集

こんにちは!新人森田です。
新学期ですねーとか言ってたらあっという間にGW突入ってハヤイヨ!
気がづけばブログの更新さぼっておりましたすみません。

そういえば、無謀と思われていた10kmマラソンは無事に完走出来ました!!
皇居ランも毎週恒例イベントになりつつあり、ハレノヒマラソン部けっこうがんばってます。
ついでにシェイプアップも出来たらいいなと走った後にガッツリ食べながら願ってます。

さて、今回はデザインの勉強ということでECサイトをテーマに見ていきたいと思います。
国内外から気になるものを選りすぐって集めてまいりました!
ではいってみましょう。

豊富な情報がまるで雑貨屋さんのように!

扱う情報量が増えるほど、コンテンツの整理が一苦労。
他サイトとの差別化をはかりつつ、どのように商品を見せるかが腕のみせどころです。

Creema

ec-0

http://www.creema.jp/

こちらはハンドメイド作品の購入・販売が出来るサイトです。
トップバッターにして今回紹介する中でダントツの情報量を誇っています。
でもあまりゴチャゴチャして見えないのはメリハリのきいたグリッドのおかげでしょうか。

ec-0b

トップページの下部です。
スクロールすると[注目の作家]、[RANKING]、[SOLD OUT]、[USER VOICE]、[NEW WORKS]と更にコンテンツが続いています。
商品のジャンルもテイストも違うからか、それぞれに目移りしてどれもクリックしたくなっちゃいます。
( ゚д゚)ハッ!これってまさに、街なかで雰囲気に惹かれてフラッと入った雑貨屋さんの感覚

商品を立たせるために装飾は必要最低限ではありますが、その必要最低限の中にも一工夫を感じます。
ただ情報が多いだけでなく検索機能も豊富でユーザビリティの点でもしっかり作ってあります。
これはウッカリ眺め続けてしまう。。

mon cifaka online store

ec-1

http://mon.cifaka.jp/

岡山市にある雑貨屋さんのオンラインストアです。
オンライン先行であっても不思議じゃないほど充実した内容です。
スクリーンショットでお見せできないのがもどかしい、楽しいスクロール&ホバーアクション!
ロゴや商品周りの◯がぷにぷにふよふよします。

ec-1b

ページを読み込むと新着ニュースが降りてきて、一定時間経つと収納されます。
この新着ニュースと買い物カゴの部分だけ立体的に作ってあって、他と差別化されているなぁと思いきや、ページトップに固定されてスクロールしてもついてくるんです。
なるほど、これならコンテンツに埋もれずに目がいくなあ。
半フラットっていうべきなのか、リッチとフラットをいいとこ取りで使い分けてますね。

プロダクトを魅せるミニマルデザイン!

ECサイトの主役は何と言っても商品です。
実際に触れられないからこそデザインが必要です。
じゃあどんな風に見えたら商品をカゴに入れてもらえるんでしょうか。

sample

ec-2

http://ec-sample.shop-pro.jp/

ちょっとした環境や地域活動をベースに商品を製作販売しているサイトです。
その精神を反映しているみたいに、実直な、整った印象を受けます。
必要以上に文字を出しすぎず、言葉とモノの情報バランスがちょうどいい感じ

ec-2b

商品詳細はこのようなデザインです。
丁寧に撮られた商品写真が、手にとって見るように商品の魅力を物語っています。
そしてテキストが控えめに、けれど的確に情報を提供してくれます。
すごく心地の良い買い物体験が出来そう…これがUXってやつ?!

MAKR

ec-3

http://makr.com/

こちらは先ほどのサイトよりも更にテキスト要素を排除してプロダクト一本で勝負しているサイト。
もちろん必要な箇所にはテキストがありますが、この潔さはすごい。
国内ではこういうサイトはあまりないような気がします。

ec-3b

商品詳細においても徹底されてます。
スクロールすると、それだけで絵になる商品写真がたっぷりとスペースを使って並べられています。
海外のECサイトデザインの◯個のポイントみたいな記事を読んだ時に、「ナビゲーションに言葉を使い過ぎない」的なことが書いてあった気がしますが、それの極みっていうか。
巧みな言い回しじゃなく商品そのものに目がいくし、販売する側も商品そのもので勝負してる所が好感にも繋がりそうです。

canopy

ec-4

http://canopy.co/

はい、出ました。フラットとしか言いようがない完全なるフラットなフラットサイト。
アマゾンの商品をピックアップしてキュレートしているサイトのようです。
この流行突っ走ってます感がたまらなくたまらないです。

ec-4b

カテゴリー別や、商品のテイスト別でソートして商品を見ることも出来ます。
詳細画面もオールフラットでいちいちカッコいいです。
ナビゲーションも洗練されてるし、ばっちりレスポンシブだし、作りたかったものがそこにある感じでなんかくやしい!

まとめ

今やECサイトなんて山ほどありますが、ピックアップしてみた5つのサイトはどこか似た所があるように思います。
そもそもサイトのトーンがホワイト〜グレー基調なのが大きいのかもしれません。
色味は扱っている商品に任せてナビゲーションはミニマルに、ということなのでしょう。
そのような共通したテーマの元でも、表現の仕方は様々でした。

また、紹介した順序はテキスト情報の多さ順だったりもします。
日本のサイトはそういう風潮なのかテキスト要素がかなり多いように感じます。
それは悪いことではありませんが、後半の2サイトから学ぶ部分も大いにあると思います。
リッチデザインとフラットデザイン、テキストとプロダクト、ユーザビリティとミニマルナビゲーション。
バランスが大事だなぁと思いつつ、かっこいいカタカナ並べたかっただけです。

あと、あまり触れませんでしたが、それらが最終的に購入に結びつかなければならないわけで。
うーむ奥が深いです。

若干迷宮入りし始めたので今回はこの辺で。
最近コーディングを頑張ってるので、その中で気づいたことなども書いていけたらなと思ってます!押忍!

標準