押さえておきたい! スマホECユーザビリティ

イメージ画像

今、スマホ経由でのECサイトアクセス率が大幅に高まっていることを、ECサイトの運営をされている方は実感として感じていることだろう。スマホ経由のアクセスは今後、ますます、増加することは明白な事実である。
また、スマホECサイトのコンバージョン率はPCに比べ低くなりがちと言われるが、今後、ユーザビリティの改善しだいでは充分、ユーザーコンバージョン率をアップすることが可能である。
今回は、スマホECサイトユーザビリティの改善に向けて、基本となるポイントまとめてみた。

 

1.世の中、モバイルファーストになってきている

ニールセンの2014年、12月16日、調査結果によると、PCからのアクセスは減少傾向にあり、アクセスの中心はモバイルに移行しつつある。
ニールセンの発表によると各サービスのPCからの利用が前年から10%以上落ち込む一方で、スマートホンからの利用が最大6割増となり、楽天やAmazonなどはスマートフォンユーザーがPCユーザーを超えてきている。

出典:http://www.itmedia.co.jp/news/articles/1412/16/news115.html

 

2.日本、アメリカ、中国のEC利用で主要な機器ついて調べてみた

ユーザーはEC利用サイトにおいてどのような機器(ディバイス:PC、パブレット、スマートホン)で商品を購入しているのか?
日本とアメリカ、中国の3年間(2011~2013年)の機器利用についてまとめたデータが下の表(出典:平成25年度我が国経済社会の情報化・サービス化に係る基盤整備報告書より)である。
日本は、まだまだ、PCに比べるとECサイトにおいては全体の利用率は高くないが、EC先進国アメリカや中国では、スマホではアメリカで41%、中国で61%、タブレットではアメリカ、中国ともに30%を越えてきている。日本でも今後はスマホ経由で商品を購入する割合は増加することは間違いないといえる。

 

3.スマホECサイトデザインのユーザビリティのポイント8つ

今まで、当たり前だったWeb構築の常識がスマホデザインでは少し異なった感覚でデザインする必要がある。ポイントを述べる前に、スマホの特徴を理解することが大切である。
PCとスマホで、大きく違う点は表示速度である。容量の大きい動画や、たくさんの情報、画像は処理に時間を要してしまう点だ。また、操作はマウスではなく指で行われ、文字入力はキーボート入力ほど楽ではない。そして、使う場所は屋外、交通機関での移動中にも行われるということ、使うときは主に片手でタッチして使うなど、PC環境と同じようには使われないという認識を前提としなければならない。
このような前提に立つと、デザインはシンプルであること。情報は最低限にし、文字は大きく見やすくする、タップする場所は明確にするなどが見えてくる。以下に具体的にそのポイント8つをまとめた。

3-1.タップ領域をまず、確保する

PCの場合はマウスクリックであるが、スマホは指によるタップが基本操作になる。このタップ領域はできるだけ横幅いっぱいに広げる。さらに誤動作を防止するために、ボタン領域の周辺はアキをとることが必要である。また、ボタンとボタンの間隔もできる限り、広くとってほしい。ユーザーの誤動作が無くすことが、離脱率を下げるポイントである。
ボタンのサイズはアップルのiOSヒューマンインターフェイスガイドラインでは、最小でも44px×44pxのタップ領域を推奨している。

Apple-IOS設計ガイド:https://developer.apple.com/jp/documentation/UserExperience/Conceptual/
MobileHIG/BasicsPart/BasicsPart.html

3-2.タップできないところは明確に分かるようにする

タップ領域とテキスト情報(タップ不可能)はデザインで明確に分かるようにすることで、テキスト情報(タップ不可能)をユーザーが間違えてタップし、何も起こらないというストレスを無くする。

3-3.マウスオーバーアクションは使わない

オンマウスしたときに下位メニューが現れるような動きは、タッチディバイスでは動作しない。サブメニューなどはボタンをタップした際に出るようにするなど工夫が必要である。
また、ボタンはタップした際に何らかのフィードバックを返すようにすると良い。フィードバックはユーザーに「使いやすい感覚」を与える重要な要素である。

3-4.フォントサイズ、書体は実機で確認

スマホでのフォントサイズは14pxが推奨されているが、さまざまな実機でも確認、検証し設定しよう。さらにフォンの種類も1種類に限定し使用する。AppleはiOS7を極細のヘルベチカとしている。

3-5.色数は極力少なくする

多くの色はユーザーを混乱する原因の一つだ。なぜなら、太陽光での明るい場所や映画館など暗い場所での利用が考えるからだ。色彩は1色で統一するか、または、ベースカラー2色+アクセントカラー1色の基本は3色以下で配色するのが良い。

3-6.カートボタンは見つけられる場所、片手タップでも押しやすい位置にする

カートに入れる、商品をカートに入れるボタンはユーザーが購入したいときにすぐに見つけられる位置、押しやすい場所に設置する。さらにボタンの近くには「送料・手数料確認」「商品に関する問い合わせ」など、ユーザーが求めるコンテンツがあると良い。

3-7.文字入力はできるだけ回避する

スマホユーザーは面倒でストレスが多い文字入力してお問い合わせをするより、電話でお問い合わせをする方が楽で良いと考える。スマホは電話であることが強みなので、お問い合わせは電話マークボタンにし、問い合わせボタンにタップすることで、電話に接続されるようにすると良い。
また、文字入力が必要な入力フォームは、項目数を最小限にする。離脱が多くなる、フォーム内容は配送に必要な情報のみに絞る。

3-8.人はスマホをどう持つのか

Webクリエイターボックスでも「モバイルサイトのナビゲーションメニューは画面下に置くべき」という記事があるように、人がスマホの操作でタップしやすい範囲というのは、画面下の中央にタップするボタンを配置するのが良い。
また、サイトによってはナビゲーションメニューよりタッチしてほしい要素(CTAボタン、特定のページへのリンクボタン等)を配置する。

Webクリエイターボックス:http://www.webcreatorbox.com/tech/mobile-nav/

 

4.まとめ

今回はスマホECサイト構築において考慮すべき基本的なユーザビリティについて整理した。この内容はもちろん、すべてではないし、もっと細かな点に配慮し設計する必要はある。昨年2014年10月29日にgoogleはWebサイトがモバイルユーザに対応しているどうかを診断する、「モバイルユーザビリティ」の提供を開始した。既に日本語にも対応しているので診断してみることをお勧めする。

モバイルフレンドリーテスト:http://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

ユーザビリティとはユーザーの使い勝手を良くし、使いやすくすることで、お店(ECサイト)での買い物ストレスを無くすことである。越境ECサイト、越境モバイルECサイト構築の際はユーザーにストレスを感じさせない使いやすいデザインを心掛けたいものである。
また、モバイルフレンドリーなWebサイト構築はSEO対策にもなる。

検索結果をもっとモバイルフレンドリーに:http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html

関連する記事

驚きや感動、安心をお届けする、おすすめ定期購入サービス5選... その道のプロや生産者が目利きした商品を定期購入できる通販サイト「BoxToYou」が、Yahoo!ショッピングとの連携や資金調達等のニュースで話題を呼んでいます。海外ではすでに注目を集めているオンラインの定期購入ですが、日本でも徐々に増えてきています。 今回は、ミネラルウォーターやお米、トイレット...
数年先のインバウンドが分かる「ジャパンブランド調査・2019」... 先週、5月28日に東京オリンピック2020の観戦チケット購入の抽選申込み受付が終了した。 世界から注目されている2020年東京オリンピック・パラリンピックは、日本が世界にその魅力をアピールする絶好の機会である。 そして、2020年まではインバウンドは着実に増加するだろう。そのことを裏付け...
Instagramを使いこなそう!キャンペーン事例も急増中... スマートフォンやタブレットなどのモバイルで撮った写真や動画を、簡単に加工して発信・共有できるInstagram。 今では、アクティブユーザー数(月に1回でも利用するユーザーの数)は月間約3億人に達している。さらに、そのうちアメリカ合衆国以外からの利用者が70%を占めるなど、世界中の人々にとっ...
海外展開に関する補助金・助成金情報(2016.December)... 今年も師走に入り、慌ただしくなってきた。今年最後の海外展開に関係する補助金・助成金の募集状況を紹介する。 補助金・助成金は国や地方自治体から支援される「返済不要のお金」である。助成金は要件が合えば基本的には受給でき、補助金は予算があるため、要件が合っても受給出来ない可能性がある。 今回は...
オランダ アムステルダムでのE-commerce イベント... 起業ブームであるオランダでは、ビジネス情報雑誌の出版社であるEmerceが、ウェブサイトの経営者や業者のニーズに合わせたテーマ(イノベーション、ネットビジネス、メディア&マーケティング)に関する様々なイベントを主催している。 今年の6月にアムステルダムで開催された、第一回 E-commerc...
説明なしでもわかる? マイクロインタラクションとは... これからのWebサイトデザインの方向性は「内容(コンテンツ)の充実」と「体験の向上」にあると言われている。それらを実現するひとつの解は、「ヒューマンセンタードデザイン(人間中心デザイン)」という思想である。 そして、ヒューマンセンタードデザインのアプローチの方法として、マイクロインタラクシ...
このエントリーをはてなブックマークに追加

コメントをどうぞ