トレンドキャッチ！参考になる海外ファッション系サイトのUX・UI

ECサイトはその企業の売り上げで重要となる部門ですが、ブランディングにおいてもサイトの在り方は大変重要です。特にファッションの最先端を進む欧米では、サイトのデザインなどは常に改善が行われてきており、新しい技術をどんどん取り入れています。日本にはないような作りのサイトもあり、AIを導入するECサイトまであります。デザイン性やユーザビリティに優れたサイトを実例として、海外ファッション系サイトのUX・UIについて、紹介していきます。

やはり気になる最前線のUX・UI

ECサイトに限らず、最新のUX・UIは、クリエイティブにとって必要な情報を示してくれます。最新のデザインに沿って、その技術のいくつかをご紹介します。

・フローリンググリッドレイアウト

通常サイトデザインは、上下左右とグリッドに沿って、整えて画像やメニューを構成するのが普通です。しかしあえてグリッドレイアウトを崩すことで、オリジナリティあるサイトにしています。要素を綺麗にならべると美しいですが、単調な印象も受けるようになり、要素をずらす、重ねるなどしています。

・フラットデザイン2.0

最近流行しているフラットなデザインのサイトのことです。トップバナーやメニューバーなど画像を極力排除し、CSSでタイルのようなサイトデザインにしています。読み込みが速い、レスポンスが速いなどのメリットを生みます。

・タイポグラフィ

テキストデザインのことであり、デザイン性を見せるタイポグラフィ、読みやすくするためのタイポグラフィの2つあります。最近では、デザイン性を高めることにより、インパクトを持たせるサイトが注目されています。

・ローディングアニメーション

サイトの読み込みは時間がかかるほど、ユーザーは離れてしまいます。そこでローディング画面で、アニメーションを使うことで、ユーザーを飽きさせず、離脱率を抑える方法です。

シンプル イズ ベスト～『ZARA』の考えつくされたサイト

日本でもアパレルブランドとして有名なZARAは、ECサイトの作りはシンプルです。そのＵＩ・UXはシンプルながらも工夫が施されています。余分な配色やカテゴリーはなく、全体に見やすく使いやすくなっており、同時に購買意欲をそそる工夫がされています。一言で言えば、シンプルに作られているということです。

まずは全体の配色ですが、サイトに色を使いすぎると、統一感がなくなり、見にくくなります。ZARAでは極力使う色を減らして統一感を出し、なおかつ衣類を配置し目立たせることで、商品を見やすくしています。さらに、トップページを見ると、モデルの画像が一面に表示され、インパクトを持たせています。これによって、サイトを訪れたユーザーは、一気に引き込まれ、興味をそそられます。

商品ページに飛ぶと、モデルの動画が表示され、商品全体が立体的にわかるようになっています。日本人からすると、このような商品の表示方法は、少し違和感を覚えるかもしれません。ZARAのECサイトは、全体的に視覚的に見せる工夫がされているのです。

『STITCH FIX』のAIはベテランスタイリスト

STITCH FIXとは、通常のECサイトや実店舗とは違い、サイズや好みのアンケートに答えると、AIとスタイリストが、自分に合った商品を提案してくれます。スタートアップという会社のサイトであり、同社の3,500人のスタイリスト、80人以上のサイエンティストチームが、独自アンケートと、SNSの分析で、好みを判別します。

実際に利用する人は、まずはサイトを訪れて、独自アンケートに答えます。サイズや好み、ライフスタイルなどの質問があります。その後到着日を指定すると、洋服や小物が5点自宅に届きます。この時点でスタイリング料として20ドルかかります。自宅に届いた品は、気に入った物は購入し、気に入らない物は返品します。返品は同封の袋に入れて郵送するだけです。すべて購入すると、25%OFFになります。なぜ返品したかなど、最後にアンケートに答えます。

商品が届くまでワクワクする、細かいアンケートにより商品の質が良い、毎回最後にアンケートによりフィードバックされるなどにより、アメリカでは利用者の85%がリピーターとなっています。

続々と現れる秀逸なデザインと画面構成～海外のUX・UI

・画像を上手く使用したデザイン

海外ではプレゼンで画像を沢山使うように、サイトも視覚的に構成していることが多いです。たとえば「NATIVE UNION」では、スマートフォンなどの電子機器類を販売するECサイトですが、画像をふんだんに使用し、一目でどのような商品があるかわかるようになっています。

・SNSとECサイト

SNSを取り入れるサイトも増えていますが、SNSの画像を上手く使うサイトも出てきました。たとえばアウトドアブランドの「kelty」のトップページは、大きな画像を配置し、ユーザーの目が引くようになっています。Instagramと連動しており、アップされた画像が、そのままサイトに掲載されるようになっています。SNSでアクセスの幅を広げて、購買につなげます。

・画面遷移を減らす

いくら秀逸なデザインのサイトでも、購買までに画面遷移が多いと、途中で離れてしまう可能性があります。画面遷移を減らすことで、購買までの手間を減らし、高倍率アップにつなげます。たとえば、スキンケアブランドの「Aesop」では、検索から商品ページまでの1画面に配置しており、またオーダーシャツの「PROPER CLOTH」では、商品ページの色違い商品を1ページですべて表示しています。

まとめ

海外のECサイトをメインに、UIやUXについて紹介しました。海外のECサイトは、日本と商品販売戦略が違い、これによりサイトデザインも違っています。よりユーザーがアクセスしやすく、商品を探しやすく、購買しやすいという基本に基づいて、デザインされます。大きく日本と考え方や、ユーザーのデザインの好みが違うので、そのまま取り入れるのは難しいかもしれません。しかしトレンドキャッチして工夫し応用すると、自社のECサイトにも使えるようなデザインがあります。