KOBITブログ

ヒットするEコマースサイトのUXとは?優れた海外事例3選

この記事は約 6分 で読めます。

e%e3%82%b3%e3%83%9e%e3%83%bc%e3%82%b9%e3%82%b5%e3%82%a4%e3%83%88

UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
前回記事では、UI/UXに優れた海外事例として、コンテンツの見せ方を工夫しUXを向上させた海外企業・メディアの例を紹介しました。

過去3回にわたり紹介してきた海外事例もいよいよ今回で最終回。
最後は、海外の優れたEコマースサイトの事例を紹介していきます。

「UI/UXを知り、優れたWebサイトを構築する」連載一覧

1.UI/UXの基本(全三回)

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

 

2.UXに優れたサイトを構築するために検討するべき事項(全四回)

第四回:優れたUXを設計するための戦略:ペルソナ法とストーリーボード

 

3.UIの要素や方法論の解説(全二回)

第八回:優れたUI設計のためのレイアウト・配色・フォントの原則

 

4.UI/UXに優れた海外事例の紹介

第十回:カラフルなのにシンプル。UI/UXに優れた海外のWebサービスサイト3選

第十一回:“業界を変えた”UberとTinder 2つの優れたUXデザイン

第十二回:コンテンツ表示の工夫でUX向上! 海外企業・メディアのサイトデザイン事例

UI/UXに優れたサイトの海外事例:Eコマース系

Dollar Shave Club:アクセントカラーが購入を招く定期カミソリ配送サービス

dollar-shave-clubhttps://www.dollarshaveclub.com/

Dollar Shave Clubは定額制のカミソリ配送サービスとして大きな話題となりました。男性のカミソリは頻繁に交換が必要なため、衛生状態を保つため頻繁に買い替える必要があります。Dollar Shave Clubに登録すると、月額数百円~1000円程度で毎月数本のカミソリ、替え刃が届くサービスです。

同社の目新しいサービスを説明するために2012年にYouTubeへ投稿した動画は、そのアイデアの面白さと創業者の瀟洒な姿から、多くの共感とソーシャルメディアでのシェアを獲得し、いわゆる「バズる」現象を巻き起こしました。動画を公開してから48時間に1万2000件もの注文を受ける大ヒットです。現在は、カミソリだけでなくその他の化粧品などを取り扱うようになり、既に200万人以上の登録者を加え、男性だけでなく女性からも支持を得ています。

Dollar Shave ClubのWebサイトは無駄な装飾に頼らず、必要な情報を簡潔に掲載しています。特に、アクセントカラーのオレンジ色がボタンなどに繰り返し使われているため、どこをクリックすれば購入できるかが明確です。メニューボタンを押すと、ナビゲーションが現れる仕組みになっているため、画面の余白を無駄なく使い、かつ、メニュー構成が詳細まで見やすくなっています。

Superdry:ボタンを押さずに絞り込み検索

superdryhttps://www.superdry.com/ (現在サイトを閲覧することができません)

スーパードライといっても日本のビールではなく、イギリスのカジュアル・ファッション・ブランドのSuperdryです。日本語を機械翻訳した文言をロゴに使ったブランドで、ヨーロッパでは若者から人気を集めています。2010年にはロンドンで上場、2012年には世界40か国以上へと展開を果たしました。

黒をベースカラーに据えたデザインが洗練された印象を与えるWebサイトですが、商品検索機能でUXへの強いこだわりが窺えます。商品の種類やサイズ、色などで行う絞り込み検索において、選択肢をチェックしただけで該当の商品が表示される仕組みになっています。通常は、「絞り込み」ボタンを押すまで表示が更新されない場合が多く見られますが、一回のクリックでも減らしてユーザーの利便性を高めようという試みです。

トップページにおいても、画面とテキストを互い違いに配置するなど「動き」のあるデザインを多用し、訪問者に飽きさせない仕掛けが見られます。グレーや青の落ち着いた色で参考情報を示す一方で、オレンジのアクセントカラーが強い印象を与えます。ナビゲーションは固定の上部メニューバーを採用し、いつでも自由に商品を閲覧できる構成です。

Staples:ネットとリアルを交えた総合的買い物体験

stapleshttp://www.staples.com/

UXはWebサイトに閉じた体験ではありません。特に、小売業の場合、希望の商品が手に入るか、注文がすぐに届くか、宅配ロッカーなど受け取りの選択肢が用意されているか、といった項目もUXに影響します。実店舗やWebサイトを連携させ、総合的な体験を提供する取り組みはオムニチャネルと呼ばれ、大手小売業で注目されてきました。米国を中心に20か国以上でオフィス用品を取り扱うStaplesは、オムニチャネルのリーダー企業です。

Staplesは文房具などのオフィス用品を取り扱う店舗に、キオスク端末を配置し、店舗に置いていない商品でも購入できるサービスを始めました。店舗では印刷やITサポートなど、多様なサービスを提供し「ついで買い」を促します。Webサイトやモバイルサイトからの注文も可能であり、どこから注文しても自宅配送できるのもメリットです。

StaplesのWebサイトは、Amazonなどの米国企業と同様、シンプルな構成になっています。トップページにはおススメ商品が掲載され、商品カテゴリを辿ると、商品ごとの詳細情報が確認できる仕組みです。ページ下部には関連商品があるためオフィス用品の買い忘れを防止します。一覧形式のページでは無限スクロールが使われているので、掘り出し物を見つけるような買い物の楽しみも残されています。

まとめ

Eコマースサイトは多くの商品を扱うため、1つのページに対し情報量が多くなってしまいがちです。しかし、消費者が求めているのはとにかくわかりやすいサイトでのスムーズな買い物。

そのため、サイト全体の見やすさ、欲しい商品の探しやすさ、時には決済の方法まですべてUXと捉え、それぞれの機能向上を目指していくことが大切です。

ページの情報量が多い場合には、特にDollar Shave Club、Superdryの項で紹介したアクセントカラーをしっかりと意識し、ユーザーを迷わせないデザインを心がけましょう。

 

次の記事サイト運営者のための「UI/UX」解説記事のまとめ+チェックリスト

サイト運営者のための「UI/UX」解説記事のまとめ+チェックリスト


CATEGORY:

さあ、KOBITをスタートしよう。