スマートフォンが普及しつつある。Eコマースサイトをスマートフォンで利用する人も多くなっている。

Webデザインの最新動向を紹介するサイト『Designmodo』では、Google の専門家の話を元に、eコマースサイトをモバイル向けに最適化するための10の法則を、具体的なサイト事例とともに紹介している。

以下、その10の法則を紹介する。

グーグルに学ぶモバイルECサイトの10の成功法則

Webデザインの最新動向を紹介するサイト『Designmodo』では、Google の専門家の話を元に、eコマースサイトをモバイル向けに最適化するための10の法則を、具体的なサイト事例とともに紹介している。

以下、その10の法則を紹介する。

1.とにかくシンプルに

PC向けWebサイトにどんなにたくさんのコンテンツが掲載されていようと、ユーザーはモバイルの小さな画面上でそこまでの膨大な情報を見たいと思っていない。

ユーザーの見やすさを考え、コンテンツはある程度スペースに余裕がある大きさにデザインすべきだ。コンテンツを大きくしすぎて、ユーザーのアクションを損なってもいけない。外出中のモバイルユーザーは、移動中で片手しか使えないときなど特に、画面をスクロールしたり、拡大したり、目を細めてデータを見たりしたくないと思っているからである。

eコマースサイトは商品画像や決済画面があるため、表示しなくてはいけないコンテンツが多い。そうした重要なコンテンツ要素を目立たせながら、ページをシンプルにするのは難しいかもしれない。そうした場合には、モバイルページ上部に検索機能を追加するのがおすすめだ。それにより、ユーザーは膨大な選択肢に圧倒されることなく、すぐに商品を検索できるからだ。またその検索機能には、簡単なクリックで飛べるカテゴリリンクをおいたほうがいい。

2.親指で使うことを意識したデザインを

モバイルサイトでは、マウスではなく親指がボタンをクリックしていることを忘れないようにしよう。

ページがモバイル用にデザインされていないせいで、ユーザーが意図と違うボタンやリンクをクリックしてしまった瞬間、モバイルユーザーエクスペリエンスは著しく損なわれる。

事例:WebMD

WebMDのモバイルサイトでは、サイト上の人気コンテンツを表示するためのトピックボックスを、見やすいサイズで画面に設置している。各ボックスにはドロップダウンメニューがあり、さらに情報が見たい人はそこをクリックできるようになっている。また、画面をスクロールすれば、さらに多くのトピックカテゴリが見られるようにもなっている。

ドロップダウンメニューを使用すると、コンテンツが増えてもボタンのサイズを変えなくてすむため、モバイル画面に適切なボタンサイズを維持できる。また、画面上のリンクボタンの数を減らせるため、ユーザーのミスクリックが無くなり、いらいらして離脱するユーザーの数を減らすことができる。このアイディアはeコマースサイトにおいては、商品ページのカテゴリ設計・デザインに使えるだろう。?

3.ユーザーを素早くキャッチする

モバイルユーザーはモバイルデバイスを使っているため、より早くスムーズにサイトを使いたいと思っていることが多い。一部のタブレットユーザーを除くと、ほとんどのモバイルユーザーは外出先にいて、手っ取り早く課題を解決したいと思っているからだ。

そこでまずは、あなたのサイトの一番の売りとそれに最も関連性の高いコンテンツが何か考えてみよう。あなたの顧客ユーザーは、モバイル経由であなたのサイトにアクセスするとき、何を探しにきていることが多いだろうか？

事例：1-800-Flowers

1-800 Flowersは「贈り物を素早く見つける」というラベルのついたドロップダウンメニューを使って、そうしたモバイルユーザーのニーズにうまく応えている。この機能を使うと、ユーザーは配達日と贈り先の人の郵便番号を簡単に入力でき、外出先からすぐに花を贈ることができる。同社はモバイルユーザーが、情報を素早く簡単に見つけたいと思っていることを知っているため、シンプルな画像と魅力的なインタフェースでそのニーズに応えているのだ。?

1-800_Flowers_IMAGE_2

4.アクションにフォーカスをあてた設計をする

コンバージョン最適化のためには、コンテンツを見てもらうだけでなく、アクションしてもらうことを意識した設計にすべきである。

事例：Hairclub

Google のモバイル専門家によると、Hairclub.com（注：アメリカの薄毛・抜け毛の悩み向けサービスのサイト）は、モバイルサイト画面上部に電話番号を掲載することでトランザクション向上を実現している。 この会社はもともと携帯電話経由の売り上げが高く、かつ、顧客は知識豊富な専門家からのアドバイスを求めている。このモバイルサイトはそうした顧客ニーズを熟知した上で設計されているため、うまく顧客ニーズに応えられているのだ。 Hairclub.comのモバイルサイトはさらに、お店に電話をするか決める前に情報を得たいユーザーや、「Hail Clubの何がよいのか？」を知りたくて初めてサイトを訪れた人々のニーズも満たしている。?

モバイルユーザーはその場ですぐに満足したいと思っている。そのため、モバイル顧客に特有のニーズと、そのニーズに応えるのに何が重要なのかをしっかり考えよう。顧客ニーズに応える情報を画面に追加することにより、売上げ向上につながるアクションを生むようにしよう。

5.画面の読み込み時間を短縮する

画面の読み込みに時間がかかると、ユーザーの離脱に繋がるし、コンバージョンレートも著しく悪化する。 画面読み込み時間は、Google がサイトランクを決める要素の一つとして使用するほど重要なのだ。

モバイルユーザーのニーズの優先順位付けをすると、不用なコンテンツが削除でき、サイト表示をスピードアップさせることができる。

事例:Pacsun

PacsunのPCサイトには、商品、広告、および動画コンテンツが数多く掲載されている。しかし、モバイルサイト側ではユーザーをナビゲートするのに必要なコンテンツ以外を全てカットし、サイトを軽くすることを可能にした。またそれだけでなく、便利な検索窓とサイト内で統一されたカテゴリメニューも設置している。?

ヒント：定期的に異なるデバイス上で読み込み時間をテストしよう。また、アクセス解析ツールを使って、モバイルデバイス毎のアクセス数を調べ、対応事項の優先順位づけをすることも大事だ。

6.リアル店舗を訪れる人のことも考えた設計をする

モバイル検索の3分の1は各エリアにある実際の店舗を探すものだ。

もし実店舗を経営しているなら、モバイルサイト上で地図と行き方が見られるようにしておく必要がある。また、割引サービスなどを宣伝したいなら、サイトは割引やクーポン画面に簡単にアクセスできるようになっているべきだ。そうすれば顧客はお店で手間をかけずにクーポンを使うことができる。

7.決済を簡単にする

Eコマースサイトで、モバイル経由の売上を上げたければ、コンバージョンまでのプロセスを短縮したほうがよい。

以下に、モバイルでの支払いプロセスを短縮するためのヒントを挙げる。 ・不要な入力項目を減らす。 ・文は簡潔で読みやすくし、もしログインが必要であれば、クイックログイン機能を使用する。 ・ユーザー登録をしなくても、ゲストユーザーとして支払いできるようにする ・ユーザーの入力負荷を減らすため、郵便番号での検索入力機能を使えるようにする ・アクション完了までのステップを明示する。現在の入力ステップを明示することで、顧客は買い物完了まであといくつの手順が残されているのかわかるし、何か変更したいときも簡単に前の画面に戻れる。 ・顧客の疑問にすぐ答えられるよう電話番号を表示し、ユーザーの離脱を防ぐ。

8.分析データを活用する

ユーザーはモバイルサイト上でどう行動しているだろうか？ どのページからの離脱が高いか？ 離脱率はどのくらいか？ 一回のサイト滞在での閲覧ページ数はどのくらいか？

サイト分析データは、モバイルユーザーによりよい購買体験を提供するために非常に重要だ。

例えば、ユーザーが支払いページで離脱しているなら、ページのデザインを変えてみてコンバージョンが上がるかを試したほうがよい。また、サイトのトップページへのアクセスが多いのに他のページへと飛んでいないなら、トップページがあまりにも雑然としているか、分かりにくいのかもしれない。

9.重要な要素を目立たせる

モバイルインタフェース上では、重要な要素はシングルクリックボタン、または横長のバーで簡単にクリックできるようにデザインした方がよい。画像はシンプルにし、ナビゲーションはわかりやすくセクションごとに色を変える。割引やクーポンも目立つ色にする。

事例:Macy’s

?アメリカの百貨店であるMacy’sのモバイルサイトは、カテゴリページでもトップページのデザインフォーマットを引き継いでいる。そして、ページ下部にはアクションを促すボタンとともに、検索ボックスも設置している。?

商品ページでは、商品に興味をもってクリックしてもらうのに十分な情報を掲載した方がよい。 Macy’sの場合には、簡単な商品説明、割引情報、販売価格や商品のサムネイル画像が表示されている。また、絞り込み機能の提供により、ユーザーが簡単に商品を見つけられるようにした方がよい。

10.とにかくテストを繰り返す

いかにモバイルインタフェースをうまくデザインできたとしても、色々なバリエーションでテストするまで、実際にうまく機能するかわからない。モバイル画面のような小さな世界では、ひとつひとつの要素の影響度が極めて高いので、たった1個の要素の追加や削除がコンバージョンに大きな違いをもたらすからだ。

テストをきちんと行うことにより、どのデザインとコンテンツの組み合わせが、ユーザーをアクションまで導くことができるか、適切に判断できるようになる。

まとめ

どうだろうか？参考になっただろうか？ どのEコマースサイトでも、スマートフォン対応を進める事が大きな課題になっていると思う。上記を参考に、Eコマースサイトをモバイルに対応させる事で売上アップに繋げて欲しい。また、これからEコマースを検討している人は、モバイルを中心にサービスを考える事が必要になる。参考にして欲しい。 Photo Credit:.curt.