今、スマホ経由でのECサイトアクセス率が大幅に高まっていることを、ECサイトの運営をされている方は実感として感じていることだろう。スマホ経由のアクセスは今後、ますます、増加することは明白な事実である。
また、スマホECサイトのコンバージョン率はPCに比べ低くなりがちと言われるが、今後、ユーザビリティの改善しだいでは充分、ユーザーコンバージョン率をアップすることが可能である。
今回は、スマホECサイトユーザビリティの改善に向けて、基本となるポイントまとめてみた。
ニールセンの2014年、12月16日、調査結果によると、PCからのアクセスは減少傾向にあり、アクセスの中心はモバイルに移行しつつある。
ニールセンの発表によると各サービスのPCからの利用が前年から10％以上落ち込む一方で、スマートホンからの利用が最大6割増となり、楽天やAmazonなどはスマートフォンユーザーがPCユーザーを超えてきている。
出典：http://www.itmedia.co.jp/news/articles/1412/16/news115.html
ユーザーはEC利用サイトにおいてどのような機器（ディバイス：PC、パブレット、スマートホン）で商品を購入しているのか？
日本とアメリカ、中国の3年間（2011～2013年）の機器利用についてまとめたデータが下の表（出典：平成25年度我が国経済社会の情報化・サービス化に係る基盤整備報告書より）である。
日本は、まだまだ、PCに比べるとECサイトにおいては全体の利用率は高くないが、EC先進国アメリカや中国では、スマホではアメリカで41％、中国で61％、タブレットではアメリカ、中国ともに30％を越えてきている。日本でも今後はスマホ経由で商品を購入する割合は増加することは間違いないといえる。
今まで、当たり前だったWeb構築の常識がスマホデザインでは少し異なった感覚でデザインする必要がある。ポイントを述べる前に、スマホの特徴を理解することが大切である。
PCとスマホで、大きく違う点は表示速度である。容量の大きい動画や、たくさんの情報、画像は処理に時間を要してしまう点だ。また、操作はマウスではなく指で行われ、文字入力はキーボート入力ほど楽ではない。そして、使う場所は屋外、交通機関での移動中にも行われるということ、使うときは主に片手でタッチして使うなど、PC環境と同じようには使われないという認識を前提としなければならない。
このような前提に立つと、デザインはシンプルであること。情報は最低限にし、文字は大きく見やすくする、タップする場所は明確にするなどが見えてくる。以下に具体的にそのポイント8つをまとめた。
PCの場合はマウスクリックであるが、スマホは指によるタップが基本操作になる。このタップ領域はできるだけ横幅いっぱいに広げる。さらに誤動作を防止するために、ボタン領域の周辺はアキをとることが必要である。また、ボタンとボタンの間隔もできる限り、広くとってほしい。ユーザーの誤動作が無くすことが、離脱率を下げるポイントである。
ボタンのサイズはアップルのiOSヒューマンインターフェイスガイドラインでは、最小でも44px×44pxのタップ領域を推奨している。
Apple-IOS設計ガイド：https://developer.apple.com/jp/documentation/UserExperience/Conceptual/
MobileHIG/BasicsPart/BasicsPart.html
タップ領域とテキスト情報（タップ不可能）はデザインで明確に分かるようにすることで、テキスト情報（タップ不可能）をユーザーが間違えてタップし、何も起こらないというストレスを無くする。
オンマウスしたときに下位メニューが現れるような動きは、タッチディバイスでは動作しない。サブメニューなどはボタンをタップした際に出るようにするなど工夫が必要である。
また、ボタンはタップした際に何らかのフィードバックを返すようにすると良い。フィードバックはユーザーに「使いやすい感覚」を与える重要な要素である。
スマホでのフォントサイズは14pxが推奨されているが、さまざまな実機でも確認、検証し設定しよう。さらにフォンの種類も1種類に限定し使用する。AppleはiOS7を極細のヘルベチカとしている。
多くの色はユーザーを混乱する原因の一つだ。なぜなら、太陽光での明るい場所や映画館など暗い場所での利用が考えるからだ。色彩は1色で統一するか、または、ベースカラー2色+アクセントカラー1色の基本は3色以下で配色するのが良い。
カートに入れる、商品をカートに入れるボタンはユーザーが購入したいときにすぐに見つけられる位置、押しやすい場所に設置する。さらにボタンの近くには「送料・手数料確認」「商品に関する問い合わせ」など、ユーザーが求めるコンテンツがあると良い。
スマホユーザーは面倒でストレスが多い文字入力してお問い合わせをするより、電話でお問い合わせをする方が楽で良いと考える。スマホは電話であることが強みなので、お問い合わせは電話マークボタンにし、問い合わせボタンにタップすることで、電話に接続されるようにすると良い。
また、文字入力が必要な入力フォームは、項目数を最小限にする。離脱が多くなる、フォーム内容は配送に必要な情報のみに絞る。
Webクリエイターボックスでも「モバイルサイトのナビゲーションメニューは画面下に置くべき」という記事があるように、人がスマホの操作でタップしやすい範囲というのは、画面下の中央にタップするボタンを配置するのが良い。
また、サイトによってはナビゲーションメニューよりタッチしてほしい要素（CTAボタン、特定のページへのリンクボタン等）を配置する。
Webクリエイターボックス：http://www.webcreatorbox.com/tech/mobile-nav/
今回はスマホ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
