2015.04.01
スマホサイトを制作・活用する際に知っておきたいユーザビリティ11つのポイント
あなたはスマートフォン等のモバイル端末からの閲覧に最適化されたサイト(通称：スマホサイト)を最大限に活かしていますか？グーグルは2015年4月21日以降、スマートフォン等での検索結果において、モバイル端末に最適化されたスマホサイトを、最適化されていないパソコンサイトより優遇的に表示することが決定しました。
そのような変更に至った経緯はやはり、スマートフォン等のモバイル端末からのアクセス流入は大幅な増加傾向にあり、とても無視出来ないほど大きなものとなっているためです。つまりスマホサイトを持っていないと、より多くのアクセスを見込むのが難しくなっている状況です。しかしせっかくスマホサイトを持っていても、それが使いにくかったらユーザーはすぐに離れてしまいます。
では一体、どのようにすればユーザーにストレスをかけることなく閲覧してもらえ、より多くのコンバージョン(※問い合わせや購入・成約などのこと)を獲得出来るようになるのでしょうか？それは、ウェブサイトのユーザビリティ(使い勝手)を向上させることです。そこで今回は、「スマホサイトを制作・活用する際に知っておきたいユーザビリティ11つのポイント」をご紹介します！
そもそもスマホサイトとは？
本題の前に、そもそもスマホサイトとはどのようなサイトを指すのでしょうか？スマホサイトとは、スマートフォンやタブレット等のモバイル端末での閲覧に最適化されたサイトのことです。通常のサイトはパソコンでの閲覧を想定していますので、そのままスマートフォンで閲覧すると文字が非常に小さくなったり、それに伴ってズームやスクロールを多用しなければなりません。
そしてこれは意外と致命的なことで、スマートフォンでサイトを閲覧する状況は電車での移動中であったり、ちょっとした空き時間に閲覧することが想定されるので、パパっとスムーズに閲覧出来ることが重要だからです。コンテンツを開く度に縮小・拡大を繰り返すのは使いづらいですよね。
それを防ぐために、スマートフォン等に最適化されたスマホサイトを作ることで、余計なズームやスクロールを最小限に抑えることができ、コンテンツをストレスなく快適に閲覧することが出来ます。そしてここ数年でスマートフォンの利用は急増し、当ブログでもスマートフォンでの閲覧率は50%近くあります。
スマホサイトを最大限に活かす方法とは？
では一体、どのようにすれば「ちょっとした空き時間」にコンテンツをストレスをかけることなく閲覧してもらえ、より多くのコンバージョンを獲得出来るようになるのでしょうか？それは、スマートフォンの操作性や機能性を理解したUI(ユーザーインターフェース)を導入することです。次にその具体的な方法をご紹介します！
表示速度を高速化して多くのメリットを得よう！
スマホサイトに限らずパソコンサイトも同様ですが、サイトの表示速度は徹底して意識しましょう！あなたもご経験があると思いますが、ページがなかなか表示されないとストレスになりますよね。特にスマートフォンはパソコンとは違い、電車での移動中など常に高速で通信が行えるわけではないためです。
事実、Amazonによると「反応が1秒遅くなると1%の売り上げが下がる」という検証結果が出ています。たった1秒ですが、ウェブサイトを閲覧しているユーザーは普段よりせっかちになると言われており、他にはスマホ向けホームページの表示速度を改善したら申込み数が即日２倍になった事例という記事にあるように、大きくコンバージョンに影響するのです。
スマホサイトを制作・リニューアルする際は、パソコンサイトのコンテンツをそのまま持ってくるのではなく、スマホサイト用に改めてコンテンツ設計をしましょう！また軽量化のためにCSS3などで実装出来るデザインは、出来るだけ画像を使わないようにしましょう。
あなたのウェブサイトは表示速度が遅く、ユーザーにストレスを与えてしまっていませんか？ユーザーのストレス軽減のためにも、コンバージョンのためにもまず第一に表示速度を意識したコンテンツ設計やデザインを行いましょう！
タップ領域は最低でも44px以上にしよう！
スマホサイトでは、ボタン等のタップを促す要素は最低でも44px以上の大きさにしましょう！パソコンでは、マウスを利用して細かい操作が可能なので、押しやすいに越したことはないですが比較的小さいボタンでもクリックすることができますよね。しかしスマートフォンでは指でタップして操作をするので、比較的大きめのボタンでないとクリックしづらかったり、押し間違えが発生してしまうことがあるからです。
それを防ぐために、ボタンなどは最低でも44px以上に設定することが望ましいと「iOSヒューマンインタフェースガイドライン」で決められています。絶対に44px以上にしてください！というわけではなく、あくまで目安の1つとなりますが「タップしやすい」ボタンを意識することで、ストレスなくクリック出来るようにしましょう！
ボタンの配置は右手親指を意識しよう！
ボタンの配置は右手親指を意識して配置しましょう！スマートフォンでサイトを閲覧する際は右手の親指でスクロールするユーザーが多いためです。海外サイトのUX mattersによると、片手で操作している人の67%は右手親指で操作をしているそうです。
例えば、クリックしてもらいたいボタンを左上に配置した場合、右手親指ではタップしづらいですよね。それがコンバージョンに影響する重要な要素であった場合、コンバージョンにも影響が出てしまいます。特に手の小さい女性であればわざわざ左手を使わなければなりません。右手親指でストレスなくタップ出来る位置にボタンを配置することを心がけましょう！
押したことが分かるようにしよう！
ボタンをタップした際、それが反応していることが分かるようにデザインしましょう！パソコンサイトでは、ボタンにカーソルを合わせるとボタンの色が変化することで、クリック出来ることが明確になっていますよね。これをマウスオーバー効果といいます。
しかしスマホサイトではカーソルを使うことはないので、マウスオーバー効果を実装することはありません。が、タップした際に色を変えるなど「押したことが分かるような効果」を付けることで、「ん？ボタンは反応してくれたのかな？」と迷うことを防げます。あなたのサイトはボタンをタップした際に、それが反応していることが分かるようにデザインされていますか？ぜひ実装しましょう！
文字サイズは最低でも12px以上にしよう！
スマホサイトもパソコンサイトも同様ですが、文字は最低でも12px以上に設定しましょう！文字はコンテンツそのもので、あなたのサイトのコンテンツを的確に伝えるものです。それが見づらいとそもそもウェブサイトを最大限に活かすのは難しいからです。
以前はデザイン重視のために小さめの文字サイズ(8～10px)が設定されることもありましたが、現在はアクセシビリティの観点から少し大きめの文字サイズ(14px～)が増えてきています。文字サイズを大きめに設定し、コンテンツを読みやすくしましょう！
リンクだと分かるようにしよう！
スマホサイトではボタンに矢印などのアイコンを付けて、リンクがリンクと分かるようにしましょう！パソコンでサイトを閲覧している際は、リンクにマウスを合わせるとマウスオーバー効果(色などの変化)がありますが、スマートフォンは指での操作になるのでマウスオーバー効果がなく、それがリンクなのかどうか非常に分かりづらいためです。
見てほしいコンテンツがそこにはあるのに、ユーザーがそれをリンクと分からずにスルーしてしまったら意味がありません。ボタンに矢印を付けるなどの工夫をして、リンクと分かるようにしましょう！
電話機能をフル活用しよう！
スマートフォンには電話機能が付いているのでそれをフル活用しましょう！電話であれば、わざわざフォームで入力することなく迅速に問い合わせや予約が出来るのは非常に便利で、スマホサイトの場合は電話によるコンバージョン数の増加に繋がる可能性が大きくあるためです。
特に飲食店や緊急性の高いものは電話によるコンバージョンが大きく増加すると言われています。パソコンサイトをそのままスマホサイトに最適化していると意外と見落としてしまいがちですが、電話機能に限らず居場所を検索するGPS機能など、スマートフォン特有の機能をフル活用できるウェブサイトにして、より多くのコンバージョンを獲得しましょう！
PCサイト版も閲覧出来るようにしよう！
スマホサイトからパソコンサイトに誘導するリンクを設置しましょう！「ん？なんでわざわざ誘導する必要が？」と思うかもしれませんが、スマートフォンはその表示領域の狭さからコンテンツを削減して表示している場合があるためです。より多くの情報を見たいと思ってくれているユーザーに、良質なコンテンツを届けるためにもぜひ設置しましょう！
急にPCサイト版に切り替わるのはやめよう！
スマートフォンサイトを閲覧している際に、リンクをクリックするとパソコンサイトに飛ぶのはやめましょう！例えば、トップページはスマホサイトなのに、会社概要ページはスマートフォンに最適化されておらず、仕方なくパソコン版に飛んでしまうような状況です。
ユーザーが想定している動作を裏切ってしまうのは、ユーザビリティに大きく影響します。とはいえ、事情によってはすべてをスマートフォンに最適化するのが困難な場合もあります。その場合は、リンク先がパソコン版だということをアイコンなどを使用して予め明確にしておきましょう！
項目が多いものはアコーディオンにしよう！
項目が多いものはアコーディオンを導入しましょう！アコーディオンとは、ある項目名をクリックするとその詳細メニューがすらすらと下に表示される手法のことです。スマートフォンでは表示領域が狭いため、多くの項目を羅列すると見づらく、必要なコンテンツにスムーズにアクセス出来なくなってしまうためです。
アコーディオンを実装することで多くのコンテンツをコンパクトに収納し、ユーザーに分かりやすいメニューを提供しましょう！
フォームは出来るだけ入力させないようにしよう！
フォームは出来るだけ入力させないようにしましょう！パソコンサイトも同様ですが、入力項目が多いとフォームからの離脱率は大幅に上がり、コンバージョン率の低下に繋がるためです。またパソコンはキーボードで文字入力をすることができますが、スマートフォンではタップして入力をするのでパソコンに比べると入力作業がストレスに感じやすいのも事実です。
また、テキストボックスではなく出来るだけチェックボックスやラジオボタンなど、選択して選ぶことが出来るものはそれで実装し、入力の手間を最低限にしましょう！
まとめ
いかがでしたか？パソコンサイトと同様の観点でUI(ユーザーインターフェース)を実装する場面もありますが、スマホサイトならではの工夫も多くあるのが難しいところですよね。スマートフォンはパソコンとは違い、指でタップやスクロールなどの操作をするため、比較的大きめにボタンを作ったり、余白を大きめに取ることが重要です。また表示領域が狭いため、アコーディオンなどコンテンツをコンパクトに収納する手法が多く使われるのも1つの特徴ですね。
スマートフォンの操作性や機能性を理解したUIを導入することで、コンテンツをストレスをかけることなく閲覧してもらえ、より多くのコンバージョンを獲得出来るようなウェブサイトを作りましょう！
