ECコンサル アラタナはeコマースを中心とした「新たな○○を創造する」会社です!

ネットショップをシンプルなデザインにするうえで大切なこと

こんにちは★☆★

カゴラボデザインチームの賑やか担当、櫻木です。

 

今回は「こういう時にはこういうデザインをする!(仮)」第1回目です。

【CASE1】と称して、まずは掲題の通り、

「シンプルなデザインでお願いします」と言われた場合を検証していきますメガネ

シンプルなデザインの要望が多い理由

 

特にアパレルショップのオーナーさまから

オーダーされることが多いのですが、

商品がカラフルで、それだけでもとても目立つから

デザインは極力シンプルでいきたい★☆★

というご要望を頂くことが多々あります。

 

「シンプルなデザイン」って、

皆さんはどんな想像をされますか?

・背景がとにかく薄い

・空白が目立つ

・文字が小さい(もしくは薄い)

とまぁ、挙げればまだまだありますが

代表的なところでいえば、こういったところでしょうか。

シンプルなデザインのネットショップとは

 

実はこの「シンプルなデザイン」って、

デザイナーにとっては一番苦労する要素なんです。

それは何故か。

写真がモノをいうからです。

 

シンプルなデザインのネットショップ事例

例えば。

こちらのサイトをご覧ください。

【禄様】

http://www.roku-shop.com/

 

禄

カッコイイですねー★☆★ジャパニーズでシブいです。

伝統工芸品を販売しているお店なのですが、

ビシィッ!!!とキマった商品画像が何とも素敵です。

 

この画面から、商品画像とバナーを全て、削除します。

するとこうなります。

禄 WHITE VERSION

 

お解り頂けますでしょうか。

なんにもないですよね。

のっぺらぼう、とでもいいましょうか。

殺風景で、無機的で、何だか冷たい印象です。

本来「シンプルなデザイン」とはこういうことを指します。

画像がカッコイイから、成立する。

素敵なバナー画像だから、雰囲気が伝わる。

 

つまり、こういうデザインって、

画像がカッコよくなかったら成立しないんです。

 

他の事例も見てみましょう。

全て画像がなかったら骨抜きになっちゃいます。

逆を言えば、これらは全て「画像が生きている」デザインですので、

それぞれしっかりと「世界観」が伝わってきます。

 

【TIE STATION様】

http://www.tiestation.jp/

TIE STATION

都会的でシックです。

整頓された商品画像が何とも素敵です。

サイズも統一されていますし、緻密に計算されている感が伝わってきます。

これぞ「商品写真がモノをいう」デザインです。

 

【CANNA様】

http://www.canna-shop.com/

CANNA

ふんわりやわらか、あったかい雰囲気が感じられます。

何といってもロゴが特徴的です。

 

【あらたな村様】

http://www.aratanamura.com/

あらたな村

線画でシンプルな構成にも関わらず、

賑わいあるバナーが活気を生み出しています。

カラフルな写真が多用されているので、一見すると

サイト全体のシンプルさもそう感じられないかもしれません。

 

【コレクトストア様】

http://store.50910.jp/

コレクトストア

キービジュアルなどを用いず、ひたすら商品のみを陳列しています。

左ナビには取扱いブランドが一覧として表示、

また、商品一覧の上部には細かな検索軸が表示されているので

スタイリッシュかつ機能的に感じます。

 

こんな感じ。

あくまでも個人の主観ですので

いやそれ、ちょっと違うんじゃない?

って思われる方も勿論いらっしゃるかと思われますが

それは、今は我慢して頂いて。

 

この場合、既にショップを運用された(されている)経験をお持ちで

ノウハウをご存知であれば、特に問題にはなりませんが

「初めてオンラインショップ立ち上げるんです★☆★

という方に対しては

「商品画像のクオリティが本当に大事になりますよ」

ということをしっかりと(時には口を酸っぱくして!)お伝えするようにしています。

 

「はいはい、シンプルなデザインですね。解りました。」

と言ってデザインしてしまったあとで、画像のクオリティが担保できず

残念なことになってしまった・・・という事態にならないためにも、

・画像調達方法は自社撮りか、メーカー(ブランド)提供か

・撮影環境が整っているか(スタジオなどがあるかどうか)

・Photoshopなどの画像編集ソフトがあるかどうか

・またそのソフトを扱えるかどうか

などをヒアリングさせて頂くこともあります。

 

その内容如何によっては

「逆に、こういうデザインってどうですか?」

と、別のご提案をさせて頂くことだってあります。

それくらいに、本当に本当に!大切なんです。画像って。

デザイナーの技術1割、オーナーさまの頑張り9割、といったところでしょうか。

そういう意味ではとても、難易度が高いと言えます。

ネットショップがシンプルなデザインの参考になるおまとめサイト一覧

◼︎ 優れたWebデザイン:オンラインショップ|ウェブデザインサーチ
http://www.webdesign-s.com/webdesign/04_15.html

◼︎ Vita オンラインショップ|シンプル&ナチュラルな雑貨店ウィータのネット …
http://vita-store.net/

◼︎ シンプルなWebデザインを作る3つのポイント
http://soho-college.com/design/inspiration/simple-design-point/

◼︎ スポーツ用品のシンプルでかっこいいオンラインショップ25個まとめ
http://photoshopvip.net/archives/9162

◼︎ シンプルネットショップリンク集 – nifty
http://homepage1.nifty.com/t-gonta/adsl/shop.html

ネットショップがシンプルなデザインの参考になるサイト

◼︎ COCONES  http://www.cocones.com/

オンラインショップ/iPhone,iPad,Macbookなどのケースを販売しています。商品の見せ方がシンプルでかっこ良いです。マウスオーバーすると商品が裏返ったりし、遊びがあります。

COCONES

◼︎ 小菅 http://www.rakuten.ne.jp/gold/kohchosai/
オンラインショップ/老舗創作竹芸品メーカー。シンプルに商品のこわだりを伝えています。真っ白な背景に商品を置くことで、商品のみに意識がフォーカスされグッときます。また、縦書きのロゴが綺麗にデザインされています。

公長齋小菅 ONLINE SHOP   こうちょうさい こすが

◼︎  HOKUO DESIGN http://www.hokuo-design.net/
オンラインショップ/北欧デザイン・家具などのオンラインショップ。洗練されたレイアウトに綺麗な写真がデザインされています。シンプルにまとめられているので心地よく商品を閲覧できます。

北欧デザイン・家具・インテリア・雑貨などの通販ショップ   HOKUO DESIGN.NET

◼︎ A.P.C http://www.apcjp.com/
オンラインショップ/洋服や靴などファッション関連のショップ。全体的に大きな写真で見せるのが特徴です。商品の見せ方がとても良く、拡大すると素材の質感までも確認することが出来ます。特にファッション関連は素材や質感が確認できるのはとても良いデザインです。

A.P.C. STORE

■ baycrews http://www.baycrews.co.jp/

ファッション/色を上手く使用し、まるで雑誌を見ているような感覚のWEBサイトです。情報量が多いとごちゃごちゃとなってしまうことが多いですが綺麗に整頓されています。

ベイクルーズ グループ : BAYCREW S GROUP HOME

■ Francfranc http://www.francfranc.com/

おしゃれ雑貨/白をベースとした透明感ある洗練されたデザイン。ポイントで使用するカラーテイストも見ている人を明るい気分にさせて心地よいです。おしゃれ雑貨のコンセプトにあった素敵なサイトです。

Francfranc(フランフラン)公式サイト|家具・インテリア雑貨

■ スタイルクルーズ http://style-cruise.jp/

オンラインショップ/Webページで沢山の商品をならべるとごちゃごちゃ見づらくなる場合が多いが、このサイトではとてもみやすく逆にわくわくする印象を与える。ひとつひとつの商品も沢山の写真を使用しイメージしやすい。

ベイクルーズのファッション通販サイト|スタイルクルーズ Style Cruise

■ 10yearsintype http://www.10yearsintype.com/

ダイナミックな動きとバランスのよさがここちいいサイト。思わず何ページもみてしまいます。

Fontsmith   10 Years in type

■ puregrips http://www.puregrips.com/

ゴルフのグリップをメインに紹介しているユニークなサイト。
サイドバーなどをすべて省き、シングルページに大きく情報をレイアウトしています。
雑誌的感覚で、読むことができユーザーにはいいかもしれません。

PURE Grips   Makers of Superior All Weather Golf Grips   Exceptional Durability   Easy Installation   Pure Grips

■ rapha http://www.rapha.cc/

自転車はメインとしたサイトで、シンプルなデザインが好印象。
このピンクのアクセントカラーはとても参考になります。
グリッドをオンラインショップで使うのは当たり前の時代なのでしょうか。

Rapha

■ Nike http://store.nike.com/jp/ja_jp/?country=US&lang_locale=en_US

スポーツ用品の王道Nikeのホームページもトップページはピックアップ商品を大きく紹介しています。
グリッドを使ったレイアウトはもちろん、マウスのカーソルを合わせたときの動きなど、かなりこだわりを感じます。

Nikeストア 日本

まとめ

つまりは、こういうことです。

 

シンプルなデザインは

運用者(素材提供者)の腕に掛かっています。

運営だって維持だって、大変なんです。

かっこいいデザインが出来た★☆★からといって

油断は禁物!!!ということですネ。

そのことをお互いに理解した上でデザインを進めていくってことが、

とっても大切なことになります。

 

あ、ちなみにアラタナでは、プロカメラマンによる

「ECサイトに適した素敵な商品撮影」も承っております。

(ちなみに、ちなみに、弊社にお電話にてご相談頂いたお客様には

5000円分の無料撮影も承っている…とかお得です。)

そちらもぜひ宜しくお願い致します !笑。

 

次回は「活気のあるイメージでお願いします」と言われた場合について、

検証していきます。

 

To Be Continued...

この記事を書いた人

アラタナニュース

イベント・セミナー情報