スマホサイトを制作する際に知っておきたいユーザビリティのポイント

lgf01b201408122000

そもそもスマホサイトとは?

本題の前に、そもそもスマホサイトとはどのようなサイトを指すのでしょうか?スマホサイトとは、スマートフォンやタブレット等のモバイル端末での閲覧に最適化されたサイトのことです。通常のサイトはパソコンでの閲覧を想定していますので、そのままスマートフォンで閲覧すると文字が非常に小さくなったり、それに伴ってズームやスクロールを多用しなければなりません。

そしてこれは意外と致命的なことで、スマートフォンでサイトを閲覧する状況は電車での移動中であったり、ちょっとした空き時間に閲覧することが想定されるので、パパっとスムーズに閲覧出来ることが重要だからです。コンテンツを開く度に縮小・拡大を繰り返すのは使いづらいですよね。

それを防ぐために、スマートフォン等に最適化されたスマホサイトを作ることで、余計なズームやスクロールを最小限に抑えることができ、コンテンツをストレスなく快適に閲覧することが出来ます。そしてここ数年でスマートフォンの利用は急増し、当ブログでもスマートフォンでの閲覧率は50%近くあります。

ボタンの配置は右手親指を意識しよう!

ボタンの配置は右手親指を意識して配置しましょう!スマートフォンでサイトを閲覧する際は右手の親指でスクロールするユーザーが多いためです。海外サイトのUX mattersによると、片手で操作している人の67%は右手親指で操作をしているそうです。

例えば、クリックしてもらいたいボタンを左上に配置した場合、右手親指ではタップしづらいですよね。それがコンバージョンに影響する重要な要素であった場合、コンバージョンにも影響が出てしまいます。特に手の小さい女性であればわざわざ左手を使わなければなりません。右手親指でストレスなくタップ出来る位置にボタンを配置することを心がけましょう!

 

押したことが分かるようにしよう!

ボタンをタップした際、それが反応していることが分かるようにデザインしましょう!パソコンサイトでは、ボタンにカーソルを合わせるとボタンの色が変化することで、クリック出来ることが明確になっていますよね。これをマウスオーバー効果といいます。

しかしスマホサイトではカーソルを使うことはないので、マウスオーバー効果を実装することはありません。が、タップした際に色を変えるなど「押したことが分かるような効果」を付けることで、「ん?ボタンは反応してくれたのかな?」と迷うことを防げます。あなたのサイトはボタンをタップした際に、それが反応していることが分かるようにデザインされていますか?ぜひ実装しましょう!

 

リンクだと分かるようにしよう!

スマホサイトではボタンに矢印などのアイコンを付けて、リンクがリンクと分かるようにしましょう!パソコンでサイトを閲覧している際は、リンクにマウスを合わせるとマウスオーバー効果(色などの変化)がありますが、スマートフォンは指での操作になるのでマウスオーバー効果がなく、それがリンクなのかどうか非常に分かりづらいためです。

見てほしいコンテンツがそこにはあるのに、ユーザーがそれをリンクと分からずにスルーしてしまったら意味がありません。ボタンに矢印を付けるなどの工夫をして、リンクと分かるようにしましょう!

 

項目が多いものはアコーディオンにしよう!

項目が多いものはアコーディオンを導入しましょう!アコーディオンとは、ある項目名をクリックするとその詳細メニューがすらすらと下に表示される手法のことです。スマートフォンでは表示領域が狭いため、多くの項目を羅列すると見づらく、必要なコンテンツにスムーズにアクセス出来なくなってしまうためです。

アコーディオンを実装することで多くのコンテンツをコンパクトに収納し、ユーザーに分かりやすいメニューを提供しましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です