WD Online

ECサイト業界研究 Web Designing 2015年10月号

モバイルコマース~モバイルEC対応の最大の敵「かご落ち」を防ぐには

スマートフォン利用率が時とともにうなぎ上り。それにあわせて、スマートフォンやタブレットでネットショッピングをする人も増えてきました。ショップサイドとしてはその需要に応えるため、ネットショップのモバイルコマース(モバイルEC)対応が必要になってきています。では、モバイルコマース対応は、どのようなポイントを意識して行えばいいのでしょうか?

ECのモバイル対応に欠かせない2つのポイント

モバイルコマース(モバイルEC)、つまりスマートフォンやタブレットでのECがいよいよ成長してきました。ニールセンの発表によると、スマートフォンからのインターネット利用者数が2014年から2015年にかけて19%増加し、PC利用者数に肉薄してきています。また、1日あたりのインターネット利用時間は、スマートフォンからのアクセスがPCの2倍にまでなっており、モバイルコマースの成長の大きさもうなずけます(01、02)。 

この状況を鑑みると、モバイル向けECサイトへのなんらかの対応が急務と考えるのは自然な流れでしょう。しかし、これからモバイル向けECサイトをつくる場合、もしくは今あるECサイトのモバイルコマース対応を考える時に、気にしなくてはならないことが2つあります。それは、「スマートフォンのアクセスと購入最終確定の比率が違う」ことと、カート内の画面遷移の段階(ステップ)で「カゴ落ち(いったん商品をカートに入れたにもかかわらず、 結局買わないこと)の比率が大きい」ことです。

56601c9767515a12f0dec5c0a7c47933.jpg
01 PCとスマートフォンの利用者数 ニールセン(株)の2015年6月30日での発表では、スマートフォンからのインターネット利用者数は2015年4月時点で4,832万人2014年度からの増加率は19%のアップとなっています。今冬にはPCを超える可能性が出てきていると伝えています

 

20d8356c746235b62c955f37170ffc99.jpg
02 1日あたりのインターネット利用時間(2015年4月) 左ページと同じくニールセン(株)の発表によると、PCは1日54分、スマートフォンは1時間48分で、スマートフォンはPCと比べて2倍の時間を使っていることになります。使用台数と使用時間を考えれば、明らかにモバイルを重視してWebをつくらなければならない時代になっています

 

それを裏付ける数字をご紹介します。まずは各デバイス(PC、スマートフォン、タブレット)のアクセス比率と購入最終確定比率を見てみましょう。03は米国の中規模ECサイト20社のデータです。サイトを訪れたデバイスの割合が54%、スマートフォンが33%、タブレットが12%になっています。購入の最終確定したデバイスの種類はPCが74%、スマートフォンが15%、タブレットが12%。つまり、タブレットはアクセスしてそのまま購入まで至ることが多いのに対し、スマートフォンだけで見ればアクセスした約半分がスマートフォンで購入していないことがわかります。これは、まだまだスマートフォンだけでは意思決定ができないということです。これは、楽天市場や国内のECサイトでも同じ傾向にあります。

この対策について現状できることは、まずはECサイトがスマートフォンやタブレットに「完全」対応することが必須です。レスポンシブでもアダプティブ(ある特定の画面サイズでのみレイアウトの切り替える)でもどちらでも構いません。

「完全」と書いたのは、よくトップページや商品ページだけモバイルに対応するのではなく、マイページやカート内も当然対応しておく必要があるからです。商品をカートに入れたらPC用の画面が出てきて、文字が小さくて何が書いてあるかわからないのでは困ります。また、PC画面に慣れているユーザーにとっては、PCとスマートフォンの画面が選択できるとありがたいでしょう。

そして、自分のECサイトでPCとモバイルがシームレスにカート内情報を受け渡せるシステムかどうかを確認しましょう。これはスマートフォンで購入決定までいかなかった場合でも、PCを開いた時にその情報が共有されていれば、買い物を続けられるからです。スマートフォンだけで購入の決定ができない現状であれば、せめてその流れをアシストできるようにしておくべきでしょう。

99cfeb8495af4b132847c2acfb40d124.jpg
03 米国の中規模ECサイト20社のデバイス別アクセス状況 PCで訪れた割合が54%であるのに対して、購入決定段階では74%に増え、逆にスマートフォンで訪れた割合が33%から、購入決定まで進んだのは15%まで落ち込んでいます。まずはスマートフォンでアクセスしたものの、注文の確定ボタンはPCで押したという人がいることがわかります

 

ステップカートとカゴ落ち

そして、もう一つ気にしなくてはならない点が「カゴ落ち」。通常、PCでもモバイルでもカート内のステップは5ステップになっています。これを「ステップカート」と言い、現状ECサイトのカートシステムはほぼこのステップカートで構成されています。カート内のステップはシステムによって若干違いますが、ステップ1は商品ページのカートボタン、ステップ2がカート内の最初の画面、ステップ3で金額の確認や配送方法を選択し、ステップ4で決済方法選択、ステップ5で最終確定となります。これをデバイスごと、ステップごとにマトリックスにしたのが、図04です。

PCでは、ステップ2で15%のところがステップ3から5.3%、4.2%となり、最終確定で4%となっています。カゴ落ち率はステップ2とステップ5の割り算で計算しますので、この場合のカゴ落ち率は73%となります。一方タブレットは、ステップ2で14%、ステップ3から4.2%、3.2%となり最終確定が3%で、カゴ落ち率は79%。そしてスマートフォンは、ステップ2で10%になりステップ3が2.5%、ステップ4が1.6%、最終確定が1%、カゴ落ち率は90%です。スマートフォンは最初からカゴ落ちが大きいですが、時にステップ3とステップ4のカゴ落ちが大きくなっています。日本のステップカートでもほぼ同じ傾向になっています。

Amazonの1-Click決済や日本でよく見るようになった2クリック決済であればステップが短いため、カゴ落ち率は低くなりますが、この短いステップで購入するにはあらかじめ会員登録や配送設定、決済方法設定をしなくてはなりません。

34a096b2d0e18af0e01fa7fbc7d24f39.jpg
04 デバイス別にみたステップごとの「離脱率」とカートステップごとによる「カゴ落ち率」 Eコマースに関わるカンファレンス&展示会の世界最大規模のイベントIRCE(Internet Retailer Conference & Exhibition)2015カンファレンスでのConversion on Demand社が公開したマトリクスに追記したもの

 

カゴ落ちを防ぐ5つの心得

スマートフォンにおけるカゴ落ちの理由はいくつかあります。主に5つの理由が考えられます(05)。

まず、そもそもモバイル対応していない場合にはかなり致命的です。早急に変更しましょう。カートのステップは当然ながら、カート内からリンクしているページもすべてモバイル対応しましょう。規約や個人情報保護方針のページがPCページヘリンクしている場合もありますので忘れずに。

そして、これはデザイナーが陥りやすい罠だと思いますが、デザインを優先すると文字は小さくなる傾向にあります。いろんなカートシステムを見てもテンプレートでは文字が小さい場合が多いですが、スタイルシートでお客様にあった文字の大きさにしましょう。その時、情報量が少なすぎても多すぎてもよくありません。特にスマートフォンの場合、画面が小さいため一覧性が悪くてスクロールしなければ情報を見ることができなくなりがちですが、例えば送料情報や返品情報、会社情報をカート内で確認したいユーザーも多くいます。リンクで飛ばすよりも折りたたみ式の方がよいでしょう。リンクで飛ばす場合には戻るボタンでしっかり戻れるように。また、SSLのサイトシールを貼るという方法も安心感につながりますが、位置には注意したいところ。できる限り上部に貼り、決済も上部だけでできるようにしたほうがよいでしょう。

ステップ位置が不明、要するに現時点で購入操作のどの段階なのかがわかりにくい場合もお客さまを不安にさせます。クーポンコード入力などがあるとさらにステップが増えるため、上部にステップ位置を明記しましょう。ちなみに、他の決済システムへ遷移したら明らかにそれまでのデザインと違うことがよくありますが、これは不信感につながります。カート内のデザインのまま、遷移して決済できるように変更しましょう。そして、カートの中はSSLで守られていますが、環境によっては通常ページより遅くなることがあります。このため、一瞬カートのページが真っ白になってしまう場合があります。この時、ユーザーの頭の中も真っ白になってしまうことがあり、今何をやっていたかわからなくなってしまう状態に陥りやすいです。少しでもこのようなことがないようにつくらなければなりません。

入力フォームでエラーがわかりにくい問題は、PCでも同じですがスマートフォンではなおさら気をつけたいところです。スマートフォンではエラーがあった時には次のステップへのボタンを押さないとわからないことも多いので、エラーメッセージの位置やエラー情報にも注意しましょう。

そして最後に、ボタンやバナーの大きさ。手の大きな人ならなおさら、スマートフォンでボタンをタッチすることが大変なのはおわかりだと思います。画像、バナーなどもスマートフォンに対応していないことがあり、PCのシミュレーターで画像やバナーの大きさをチェックするのではなく、必ず実際のスマートフォンやタブレットで確認しましょう。画像の大きさもモバイル用に変更していくことも大切です。

05 考えられるカゴ落ちの理由

620d91bec92218bdc5093007d062dac7.jpg
カゴ落ちの原因を解消していない例。左はスマートフォンでPC用のカート画面が表示されており、視認性が非常に悪くなっています。同様に文字が小さすぎても(写真中央)読む気がなくなります。右のような入力フォームでは、入力不備があったときにこの画面でエラーメッセージが表示されるのが理想です

 1. そもそもモバイルコマースに対応していない。PCのカート画面が表示される。
 2. 文字が小さすぎて読めない。情報量が多すぎるか少なすぎる。
 3. ステップ位置が不明。決済遷移が複雑だったり、他の決済システムへ遷移する。
 4. 入力フォームでエラーがわかりにくい。
 5. 選択ボタンや画像やバナーがモバイルに最適化されていない。

 

モバイルコマースは始まったばかり

これら5つの理由を考えると、機能よりもユーザーインターフェイスやユーザーエクスペリエンスが大事だということがわかります。

スマートフォンやタブレットでアクセスするユーザーが増えていますが、購入最終確定の低さやカゴ落ち率の高さを見るとモバイルコマースはまだ発展途上にあります。まだまだ課題解決していく事項が多いのが現実です。逆を言えば、このようなポイントを実践しモバイルコマースに最適化することで、いまだ対応しきれていない他ショップよりもモバイルにおいてアドバンテージを持つことができるとも言えます。

常に考えておく要素は、PCよりもさらに安心・信頼感を出していくこと、スマートフォンやタブレットといった実機を使って、自分の目で確認するということです。そしてユーザーのカスタマージャニーのアクセス分析から高速改善していくことが重要です。

 

0c8eea43a9adc8de8f1b2b0f18ab1224.jpg
Text:川連一豊
JECCICA(社)ジャパンE コマースコンサルタント協会代表理事。フォースター(株)代表取締役。楽天市場での店長時代、楽天より「低反発枕の神様」と称されるほどの実績を残し、2003 年に楽天SOY受賞。2004年にSAVAWAYを設立、ECコンサルティングを開始する。現在はリテールE コマース、オムニチャネルコンサルタントとして活躍。http://jeccica.jp/

掲載号

Web Designing 2015年10月号

Web Designing 2015年10月号

2015年9月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

ビジネスをスマホに最適化する/インスタグラム マーケティング

サンプルデータはこちらから

■ 特集:マーケティングから考える「スマホ最適化」
 ネットはスマートフォンを中心に回りはじめた!

■ 集中企画:Instagramをビジネスに活用する
 フィード広告開始で本格化するビジュアル・マーケティングの現在

■ WD SELECTION
 □WDが選ぶ注目のデジタルコンテンツ
  NHKスペシャル「70 年目の戦争と平和」/Rock'n Roll Panty/Dream Car Collection | Toyota Dream Car Art Contest/Leap Second/恋愛のスペシャリスト“ はあちゅう” が断言する 「2015年下半期に絶対モテる」人とは……!?/ITOEN × INGRESS/The Art of Hearing/水と土の芸術祭2015/大阪経済法科大学「Hello,World! 21カ国・地域53大学がキミのキャンパスになる」/FANTASTIC ANIME MACHINE/静岡県観光奉行募集

 □ナビゲーターが選ぶ注目のデジタルコンテンツ
  眞鍋海里  [バズ施策]大義なくして破茶滅茶すべからず:#MayhemSale
  築地 Roy 良  [デジタルプロモーション]「ゴロ寝」ウェアラブル:JOE BOXER INACTIVITY TRACKER
  仲暁子  [Webサービス]「家庭」を制するのは誰?:Amazon Bash Button
  神谷憲司  [IoT]妖怪とIoT:mononome

■マーケティング・プロモーション
 □ サイト改善基礎講座
  Webサイトを改善するための4つのステップ

 □ ハギハラ総研
  アジアでのネットビジネスに必要なこと

 □ デジタルプロモーションの舞台裏
  時流にあわせてデジタルを活用し、新ブランドの確立に成功

 □ 行動デザイン塾
  人の動きを左右する「情報コスト」と「行動ブレーキ」

 □ 課題解決のためのU実装講座
  「視線導線」を踏まえたメガメニューの構造設計

 □ 解析ツールの読み方・活かし方
  メールからIoT まで、非JavaScript環境のデータを解析する手法

■ビジネス・EC
 □ ECサイト業界研究
  モバイルコマース:モバイルEC対応の最大の敵「カゴ落ち」を防ぐには

 □ 月刊店舗設計 NEW
  ファン5,000人以上を獲得するInstagramの写真演出&接客術

 □ 知的財産権にまつわるエトセトラ
  「盗作」を疑われた‥‥その時どうする?

 □ Bay Area Startup News
  クチコミサービスYelp:米国で生活の一部にまで浸透した「最上級の使いやすさ」

■クリエイティブ
 □ モノを生むカイシャ
  eredie2:リア充プロモーションの達人たち

 □ 清水幹太の「Question the World」
  John Maeda:実はアンパンマンだった伝説の「先輩」

 □ ツクルヒト
  流麻二果(美術家):「他人のいろいろ」から始まる色彩空間

 □ 最果タヒの「詩句ハック」
  第16回 カ詩ラモジ

 □ デザインにできることMonologue
  Vol.141 社会デザイン

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています