HOME > BLOG > デザイン > 参考にしたい海外のショッピングサイト

参考にしたい海外のショッピングサイト

海外のECサイトは機能デザインの宝庫

商品をどのように考え、実際にお店ではどのように展示し、どうお客様にアプローチをしているのか。またはお客様にリーチするためにどのような表現方法があるのかを考えるときに、様々にインプットを行うことはとても大切だと考えています。

海外のショッピングサイトではどのようなデザインやテーマをもってお客様にアプローチを行っているのか、私のお気に入りをアウトプットします。

ビジュアルデザインについてもそうですが、ディテールにまだこだわったECサイトとしてのデザインがとても勉強になります。

THE ROW

the row

黒(#000)と白(#FFF)のシンプルな組み合わせは、恐ろしいくらい大胆です。

ブランディングだけでなくECサイトとしての機能がとても優れており、いまその瞬間にユーザが欲しい情報は何かということがよく考えられています。

縦の画像がとても上手く使われており、是非とも参考にしたいサイトです。

BELSTAFF

belstaff

このサイトも基本的に黒(#000)か白(#FFF)。商品以外の情報の色数を抑える事で、こんなにも商品が映えるんだなあと再認識させてもらいました。

カテゴリごとにデザインを変える事で、どちらかというと似た商品の多いブランドなのに、違うページを開くたびに楽しさがある感じがします。

Paul Smith

paul smith

当ブランドらしい文字詰めやたまにあるカラフルなパーツに目を奪われてしまいますが、チャットや説明の細かさなど、お店に行って実際に商品を手に取って見ているような体験ができます。アイテム単体ではなく実際にモデルさんが着用した写真をショーケースとして並べているところに、デイリーユーズできる気楽さも感じられます。

DANNER

danner

日本のサイトでは商品それぞれのページにLP的な要素を持たせることが多いですが、こちらのサイトはカテゴリで商品のストーリーを紹介し、商品の詳細ページでの説明は必要事項に抑えられています。

カテゴリをLPのように見せ、商品の方の説明を必要最小限にする見せ方は、幾つか自分も取り入れています。
カテゴリに思想が産まれ、高価な商品だけでなく廉価版の量産品であったとしてもしっかりとした商品として見せる事ができます。

KORUA SHAPES

korua

ドイツのスノーボードブランドKORUA SHAPES。こちらもモノクロを基調とし、製品にも利用されている朱色(#cc071e)が鮮やかです。

このサイトで抑えておきたいポイントはメガメニューとストアロケーターです。

オンラインショップでは、どんなに長文や写真、動画などをもってしても、それはあくまで仮想の体験であり、実際にユーザが手に触れる実体験とは異なります。そこでこのストアロケーターを使うことで、実際に店舗へ誘導する仕組みを作っているわけです。こちらは是非何かの機会に試してみたいアクションです。

Bliss

bliss

写真を選んでしまいそうな色使いのキュートなサイトですが、効果的なグラデーションやフォントなど楽しさも溢れています。

ビジュアル面では商品の宣材写真加工のアイデアも素晴らしく、機能面ではおそらくメインデバイスであろうスマホでの閲覧時の買い物かごから実際に購入するまでの流れのデザインが非常に洗練されており、めんどくささを感じさせない余白の取り方はとても勉強になります。

OLIVER BONAS

oliva

本来ならば縦に撮るべきであろう写真を横に撮ることによって生まれる余白をデザインに活かす、素晴らしいアイデア。ビジュアル的なインパクトだけでなくCMSを利用しているのに毎回違うものを見させてもらっている感覚にもなります。

OLIVER BONAS

またFAQやsolutionのページではしっかりユーザに寄り添い、疑問を解決する仕組みが用意されており、真似したくなるアイデアも豊富です。

まとめ

特にECにおいて、ビジュアルデザインと同等、もしくはそれ以上にUIやUXなどの機能美が高く求められる傾向にあります。折角訪問していただいたユーザにどのような体験を与える事ができるか。ユーザが道に迷うことは無いか、ゴールに向かってしっかりと進めているかなど、改めて勉強になるデザインばかりです。

また日本でもそうですが、ポイントポイントにgifアニメーションの利用を行うのもとても効果的だということが分かりました。
ポールスミスでは子供服のページを楽しく彩るためにとても効果的に利用されています。(https://www.paulsmith.com/eu/junior)
OLIVA BONASではスプラッシュ(ヒーロー)部分の背景にgif動画を置き、SALEという文字を目立たせています。
これまで文字が動けば視線も動くので、その文字が印象に残りやすい事は理解していたものの、今回のSALEに動く背景が加わるったことで、思わず私はクリックしてしまいました。とても興味深いアクションだと思います。

また良いサイトが見つかったら、どんどん紹介してゆきます。次回もお楽しみに。

%d人のブロガーが「いいね」をつけました。