成功するレスポンシブデザインとは?ウォルマート・カナダの改善に学ぶ

レスポンシブデザインとは、デスクトップのみならずスマートフォンやタブレットなどのモバイル端末でも適正なレイアウトで表示されるウェブデザインのことです。モバイルからの流入が増え続けるなか、企業にとっては対応しておくべき課題でしょう。

そこで今回は、ウォルマート・カナダが、レスポンシブデザインへの変更を、どのようにして進めたのか、どのような問題点があったのか、A/Bテストやユーザーからどのようなことを学んだのかなど、その成功のコツを探ってみたいと思います。

タブレット・ファースト

モバイル対応というと、スマホをベースにしたデザイン変更を勧められることが多く、この場合、ウェブサイトはシンプルかつ読み込みも早いものに仕上がります。ただし、コンバージョン率や売上単価についてはタブレットの方が高い場合もあります。

ウォルマート・カナダの場合、主要な購買層が「母親」であり、スマホより見やすいタブレットを自宅で使用する例が多く、タブレットからのトラフィックが非常に多くありました。ウォルマートはこの事実を重視し、デザインを「タブレット・ファースト」なものに変更することとしました。つまり、基本のデザインをタブレットの大きさに適したサイズにしたのです。

【タブレット画面】

高いパフォーマンスを実現する

レスポンシブデザインを採用すると、その長所である「単一のドメインで対応できる」という利点を享受できる一方、読み込み速度などのパフォーマンスは落ちる傾向にあります。
しかしながら、ウェブページの読み込み速度は、顧客満足度やコンバージョン率を左右する重要な要素です。ウォルマートは読み込み速度を高く維持できるよう努力を重ね、さまざまな読み込みのメカニズムを試し、35%も速度を上げることに成功しました。

また、ウォルマートは最新の情報を正確に顧客に伝えるため、Caching(キャッシング:使用頻度の高いデータを高速な記憶装置に蓄えることにより、低速な装置から読み出す無駄を省いて高速化すること)にも力を注ぎます。顧客の位置に基づく在庫状況、価格、配送までの日数といった刻々と変わる情報に対応できるようなシステムも合わせて構築しました。

さらに、サイト上の表示に、画像ではなくアイコンを使用することで読み込み時間を短く、見た目もすっきりさせるよう工夫しました。

メンバー全員でのデザインチェック

デザインを構築するプロセスでは、部門横断的に行う「アプリ開発協同会議」をはじめとして、迅速にプロジェクトを進める方法が採られたため、1年足らずで仕上げられました。

Eコマースサイトでレスポンシブデザインを採用している会社は希少で、あっても小規模な会社が多く、参考事例がほとんどなかったため、悩んだ点も多かったそうです。デザイン上、最も難しかった要素はナビゲーションバーでした。簡単にレベルの上げ下げができるデザインを追求し、修正を加えてはメンバー全員で同時に確認して改善を重ねました。

また、スムーズな会計プロセスを実現するために、パソコンの位置情報から顧客の住所を割り出し、その近辺の店舗に商品を配送し、グーグルマップでその店舗の位置を表示し、顧客の方から受け取りに行くという方式を採用しました。

改善結果やいかに?

このようにして作成した新しいレスポンシブデザインによるサイトと旧サイトとをA/Bテストで比較した結果、コンバージョン率は約1.2倍に、モバイルからの注文は約2倍になるという、レスポンシブデザインに極めて好意的なものでした。

そのほかにも多くのユーザーテストを行った結果、
・モバイルでも60のアイテムを一気に見られるようなデザインが好評(一般的に、モバイルではPCに比べて少数の商品しか閲覧できないことが多い)
・お客さまは今入手可能かどうかの情報を知りたがっている(「カートに入れる」と「詳細」ボタンを併設していると、在庫状況の情報を探して「詳細」ボタンを押す人が絶えなかった。そこで、「詳細」ボタンは削除し、在庫がない商品には「カートに入れる」ボタンを表示しないようにした)

など、興味深い消費者動向がわかり、デザインの更新に反映されています。「タブレット・ファースト」「サイトの読み込み速度を高く維持する」「求められるデザインを追求する」など、顧客満足を考慮した目標を設定して、実現に向けて取り組んだその姿勢は業界や会社の規模などは違っても、大いに参考になります。

参考:
・How Walmart.ca’s Responsive Redesign Boost Conversion by 20%
http://www.getelastic.com/how-walmart-cas-responsive-redesign-boost-conversion-by-20/

関連する記事

2014年、Eコマースサイトのデザイントレンドとは?... モバイルからウェブサイトへの流入が増え続けるなか、Eコマースサイトのデザインについても、モバイル対応を施す必要性が大きくなっています。こうした最新の流れを踏まえて、デザイン変更の参考にしてはいかがでしょうか。 トレンド1 レスポンシブデザイン PCでもスマホでも、端末に適したデザインで対応...

タグ:

このエントリーをはてなブックマークに追加

コメントをどうぞ