« ブログのトップページに戻る

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

   投稿者 : 2015年7月2日 By

イメージ画像

今、スマホ経由での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

関連する記事

拡大する越境EC 今後の課題は何? 先日、イーベイ・ジャパン株式会社より、越境ECのに関するアンケート結果が公表された。 これは日本の企業でイーベイ・ジャパンのサービスを活用し越境ECを3年以上行っている111社の担当者111名に対して行ったものである。 アンケートの概要としては、越境ECの手応えを感じたのは、「1年以内」...
中国の「インターネット安全法」は越境ECにどう影響する?... 越境EC事業者ならご承知のことと思うが、中国ではGoogle検索はもちろん、Facebook, YouTube,Twitter,LINEも使えない厳しい情報規制が敷かれている。そして、新たに2017年6月1日より、ネットに関する新しい法律「インターネット安全法」が施行された。 この法律は中...
今、アメリカでトレンドのサブスクリプションボックスとは?... アメリカでは近年、「サブスクリプションビジネス」と呼ばれる定期購入型ビジネスに参入する事業者が増えている。 ギャップなどアパレル系企業やポルシェなど自動車メーカーなど自社の車両を定期レンタルできるサービスを開始したり、新しいビジネスモデルに注目が集まっている。 「サブスクリプションビジネ...
中国ECの巨頭、天猫や京東を超えた越境EC コアラとは?... eMarketer社によると、2017年中国国内 EC売上高は約11,153 億米ドル(約122兆円)(対前年比 35.1%増)であり、中国BtoCの市場は、国内の景気減退とは裏腹に大きな成長を遂げている。 さらに、越境ECも拡大が続いており、中国の昨年の越境EC市場規模は、1,002 億米...
JANコードが海外販売に有利な理由 店舗で売られている商品には必ず、商品パッケージに必ずバーコードがついている。 バーコードと呼ばれている、縞模様と数字で表されいる表記は商品を管理するためのコードである。 これをレジで店員がコードリーダーで読み取ることで、その商品の情報や売れた時間、個数などが記録され、POSシステムをはじめ...
デバイス毎のWebブラウザシェアは? 2017−9月... 前回、2017年2月からブラウザシェアはどのような変化が見られたか、Google Chromeはどこまでシェアを伸ばしたか、MicrosoftのIE11や Edgeのシェアは、どこまで伸びたのか?今回も各ブラウザ毎に日本と世界を比較してみた。 ※掲載に使用したデータは「Stat...
このエントリーをはてなブックマークに追加