スマートフォンの解析・改善でマルチデバイス時代を生き残れ！ ｜ SiTest (サイテスト) ブログ

今あなたはこのブログをPCで見ていますか？
それともスマートフォンで見ていますか？
もしかしたらタブレット端末で見ているかもしれませんね。
 
こんな質問ができるくらいにユーザーが使用するデバイスは多岐に渡っています。
では、あなたのウェブサイトはどんなデバイスでよく見られていますか？

 

株式会社博報堂DYホールディングス
「全国スマートフォンユーザー1000人定期調査」(2014年2月調査)
 
 
スマートフォン保有率は年々増加傾向にあり、当然ユーザーがスマートフォンで閲覧するケースも増えています。
2014年2月に行われた「全国スマートフォンユーザー1000人定期調査」では、スマートフォン保有率が58.1％にも及んでいたことが分かります。
 
 

グーグル株式会社
Our Mobile Planet 「モバイルユーザーの実態」
 

2013年に Google が発表したデータでは、実に44％ものユーザーがスマートフォンを利用して商品やサービスを購入した経験がありました。
これは到底見逃せる数字ではありませんよね。
 

スマートフォンユーザーを確保していくためには、ただPCサイトの解析・改善を行うだけでは足りません。
なぜならスマートフォンユーザーはPCユーザーと異なる見方をし、異なるアクションをとるからです。
 
 

 

 
あなたがウェブサイトをお持ちなら、一回は「スマートフォンサイトをPCサイトと同じように考えてはいけない」という話を聞いたことがあるでしょう。

その話は、まったくもってその通りです。
なぜならスマートフォンとPCでは決定的な違いが何個もあるからです。
 
 

スマートフォン対応で気をつけるべきこと

 
スマートフォン対応で最も気をつけなければいけないことは、ブラウザ解像度です。
 

 
PCよりも幅が狭くなりますので、PCサイトのままだと非常に読みにくいです。
また、文字量が多すぎると画面いっぱいに文字しか表示されませんので、ユーザーからすると読む気が失せてしまいます。
 
他にもボタンが小さいとタップしにくい、画像ばかりだと読み込みに時間がかかって表示が遅くなる、といったスマートフォン特有の課題があります。
そもそもスマートフォンサイトを制作するときにはこういった点に注意しておかなければいけません。
 
これはレスポンシブウェブデザインで制作された時も同じです。
スマートフォンで閲覧された時には画像を切り替えたりボタンを切り替えたり、といったことを考慮するべきでしょう。
 
スマートフォンは外出中や移動中、あるいはちょっとした空き時間でも手軽にウェブサイトを閲覧できます。
ちょっとでも「このページ、見にくいな……」と思われてしまえば、PCサイト以上に簡単に離脱されてしまいます。

そのため、スマートフォンサイトではPCサイト以上に「ユーザビリティ」を意識しておく必要があります。
 
 

スマートフォンサイトで考えるべきユーザビリティ

 

 
 
スマートフォンでは、「いかに読みやすいか」「いかに使いやすいか」ということが重要視されます。
この2点について考えていきましょう。
 

スマートフォンサイトでの読みやすさ

 
1番に気をつけるのはやはり「文字」です。
分量が多いとそれだけで読みにくくなってしまうため、改行の位置や空白スペースもうまく使って見やすいようにしましょう。

また、フォントサイズも重要な要素です。
これはPCサイトでも同じですが、最低でも12px以上ないと小さすぎて読めません。
ブラウザの文字サイズを変更する方法がPCよりも知られていないため、そもそも小さくならないように設定しておきましょう。
 

スマートフォンサイトでの使いやすさ

 
読みやすさと並んで考えるべき点が、「使いやすさ」です。
これは言い換えると操作性のことです。
 
PCの場合はマウスを操作してページをスクロールしたりボタンをクリックしたりしますが、スマートフォンの場合はそれらをすべて指で行うことになります。
指というのは人によって大きさも異なりますし、左右どちらを使うかも変わります。
親指を使うこともあれば人差し指で操作する人もいますので、いろんな場合を想定してページを設計しなければいけません。
 
ボタンの場合、基本的に位置と大きさが重要です。
中央に押しやすい大きなボタンがあれば誤タップは生まれにくいですが、横並びに5つも6つも小さいボタンが並んでいると操作性は一気に下がります。
 
また、スマートフォンではスクロールのスピードもPCより速くなりやすいので、読み飛ばされてしまうことも考慮して適所に画像や動画を入れておくことが肝心です。
こういった1つ1つのホスピタリティ精神がスマートフォンでは欠かせません。
 
 
とは言え、理論上の話は分かっていても具体的にどこをどう修正すれば良いかはなかなか判断しにくいものです。
とりあえず直してみようと考えても、無駄に終わってしまうこともあるでしょう。
 
そこでご活用いただきたいのが、 SiTest で2015年1月にリリースした新機能「タッチアクション」です。
 
 

タッチアクションでできること

 
タッチアクションとは、スマートフォンやタブレット端末であなたのウェブサイトに訪れたユーザーの行動を解析する機能です。
ここで計測できるユーザーの行動は合計5種類あります。
 
タップ：画面を軽く叩いた動作

スワイプ：画面を滑らかにこすった動作

フリック：画面を弾くようにこすった動作

ピンチイン：画面を2本の指で閉じるようにこすった動作

ピンチアウト：画面を2本の指で開くようにこすった動作
 
この動作を見ても分かるように、PCと違ってスマートフォンではユーザーのアクションが多種多様です。
まずはその認識を持つところからスタートしましょう。
 
 

タッチアクションを実際に使ってみよう

 
それではタッチアクションの使い方を見ていきましょう。
タッチアクションは SiTest のフリープラン(無料プラン)でもお使いいいただけます。

もしまだご登録されていない方はこちらからどうぞ。

 
SiTest にログイン後、左側のメニューから「ヒートマップ」→「タッチアクション」と選択してください。
 

 
ページ上部のアイコンで「タブレット端末」と「スマートフォン」を切り替えることができます。
また、「微調整」ボタンでは画面サイズを切り替えられますので、見やすいサイズに変更してください。
 

 
後は画面をスクロールして、ユーザーがどういうアクションをとっているか解析し、改善につなげていきましょう。
 
 

タッチアクションでウェブサイトを解析・改善しよう

 
今回はいくつかケースを出して改善方法をご紹介していきます。
 

Case1.スワイプやフリックが多い場合

 

 
スワイプやスクロールが多い場合、その箇所はユーザーが読み飛ばしてしまっている可能性が高いです。
テキストが続いてしまっていて読みにくくなっているなら、画像や動画をアクセントとして使ってみてください。
 
スマートフォンのユーザーはPCで見ているユーザーよりも読み飛ばしやすい傾向にあるため、指を止めさせる工夫ができればユーザーの離脱を防ぐことができます。
 
 

Case2.ボタンの周りでタップが多い場合

 

通常、ボタンの周辺にタップが多くなることはおかしいことではありません。
しかし、若干離れているようなところでもタップが起きているなら、ボタンが小さすぎて誤タップを生んでしまっている可能性があります。
 
スマートフォンでは「タップ」というアクションが成約につながることも多いため、ボタンはできるかぎり大きくして誤タップされないようにしましょう。
 
 

Case3.ピンチイン・ピンチアウトを多用されている場合

 

 
ピンチイン・ピンチアウトが多い場合、ユーザーはその情報を読み取るために拡大・縮小を駆使していることが分かります。
スマートフォンに最適化されていないサイトではこのアクションが生じやすくなりますが、その中でもし特定の箇所でピンチイン・ピンチアウトが多くなっていれば、その箇所はユーザーの注目を集めていると言えます。
 
ユーザーの興味を惹くそのコンテンツをピンチイン・ピンチアウトしなくても見えるようにすることで、より多くのユーザーの注目を集めることができるでしょう。
 
 

タッチアクションでスマートフォンサイトを最適化

 
タッチアクションはスマートフォンサイトの効果を測るための解析機能です。
タップ解析(タップのヒートマップ解析)機能と合わせてご利用いただくことで、スマートフォンサイトをあますところなく解析できる SiTest を利用して、ぜひスマートフォンからのユーザーを顧客化していきましょう。
 
それではまた次回をお楽しみに。