見やすさ操作しやすさが大事!スマホサイト制作で最低限守るべき7つのユーザビリティ

見やすさ操作しやすさが大事!スマホサイト制作で最低限守るべき7つのユーザビリティ

スマホサイトはPCサイトとは違うユーザービリティの配慮が必要です。ユーザーがストレスを感じるサイトは離脱率が高くなり、せっかくの良いコンテンツも読まれないまま離脱してしまいます。ユーザビリティを高めるために、最低限でも配慮しておくべきスマホサイト作成のポイントを7つ解説します。

文字を大きめにする

スマホでは画面を拡大することができるので小さい文字でも読めないことはありませんが、わざわざ拡大しないと読めないような文字サイズではユーザーはストレスを感じます。
最低でもフォントサイズは12px以上にし、文字が小さくて読みづらいことがないようにしましょう。

リンクを分かりやすく

パソコンだとオンマウスでアンカーテキスト(リンク付きテキスト)やボタンの色が変わりますし、マウスポインタが変化するのでリンクだと気づきやすいですが、スマホではマウスポインタはないのでリンクだと気づかれないことがあります。
アイコンを使ったり、「>」などでリンクであることを分かりやすく案内する工夫が必要です。

フォーカス機能をオンにする

リンクやボタンを押しても何も反応がないと、実際にはリンク先へ接続中であってもユーザーは押せてないのかな?別の場所をタップしたのかな?と不安になります。
フォーカス機能をオフにするメリットはないので、オンにしておくべきです。

ボタンはタップしやすいサイズに

せっかくユーザーが何かアクションを起こそうとしているのに、ボタンが小さいためにタップしにくいと、タップするのを諦めてしまう可能性が高くなります。
小さいボタンが隣接し合っていると特にタップを躊躇してしまうので、ボタンサイズはタップしやすいサイズにし、他のボタンと押し間違えないような配置やサイズにすることが必要です。

優先度の高いコンテンツや情報を上部に

スマホの画面ではファーストビューで表示されるコンテンツ量が決まっているので、優先度を決める必要があります。
ユーザーが求めているである情報を優先度順に表示し、メニューなどはアコーディオンなどで隠すなどPCサイトとは違うレイアウトを考えなければなりません。

Flashは使わない

iPhoneは元から、Android端末でもかなり前にFlash対応が打ち切られています。スマホ版ではFlashを使わないようにした方が良いですが、どうしてもインタラクティブな表現を行いたい場合は、CSS3 + jQuery、更に複雑なデータを表現していく場合はHTML5のcanvasを利用してください。

表示速度を向上させる

スマホでは通信環境によってサイトの表示速度が変わってきます。
特に3Gでは表示が遅くなるので、ページが重たくなかなか表示されないサイトは途中でユーザーが諦めて離脱してしまう可能性が高くなります。
画像を圧縮したり、1ページの容量をコンパクトにするなど、表示速度を向上させる工夫が必要です。

案件を探す