意外と見落としがちなスマホ表示の際の注意すべき7つのチェックポイント

レシポンシブデザインに対応しているホームページでも、業種によっては今でもPCからのアクセスが約85%に達するものもありますが、多くのホームページはスマホやタブレットからのアクセスが年を追うごとに増えています。スマホやタブレットからのアクセスが約半分程度、当社がお世話させていただいているクライアント（B to C向け事業）では約80%がスマホやタブレットからのアクセスというサイトも実際にあり、世間一般で言われている特にスマホが重要だということはその通りだと思います。

しかし、スマホがこれだけ重要と言われながら、実際の制作の現場では見落とされがちな点があることを日々感じています。それはお付き合いさせていただくクライアントさんとのやり取りでもそうですし、過去にチームメンバーが関わったものとは全く関係がないホームページを見ている時にも感じることです。つまりWeb制作会社でさえ、見落としていることでもあると言えます。

具体的には新規でホームページを作成、もしくはリニューアルする際、工程の終盤になってWeb制作会社からチェックの確認の依頼を受ける時、PCでしかチェックをせずスマホでのチェックが漏れることです。

スマホが出てくる前は、当たり前ですがスマホのチェックはなくチェックはPCのみだったので、この流れを引きずっているのかもしれないですが、とにかくスマホでのチェックがPCに比べると甘い、もしくはそもそも見ていないという傾向があることを強く感じます。

今回は、具体的に細かく見落とされがちなスマホでのチェックポイントをお伝えすることで、少なくともこのブログを読んでいただいた方のホームページでは、訪れてくれたユーザに意図通りに表示し見やすく使いやすいホームページとなるための参考になればと思っています。

1. テキストリンクやボタンなどの周りはしっかり余白が取られているか

一番感じるのがこれです。PCと同じ感覚でスマホレイアウトでも配置してしまったことが原因だと思うのですが、特にテキストリンクの場合は、PCではマウス操作なので全く問題なくても、スマホでは指でタップするためにテキストリンクの周りのスペースに気を配ってあげないとタップしづらい、時には別のテキストリンクを過ってタップしてしまうなど、ユーザにとって非常にストレスがかかるものとなります。これは画像で作成したボタンでも同じことが言えますが、ボタンが複数ある場合はボタンとボタンの要素が近すぎてタップしづらいということがないよう、しっかりと調整する必要があります。

2. PCとスマホで同じ画像を使用する際、スマホで見た時に小さすぎないか

PCとスマホで同じ画像を使うことについては、基本的な作りとしては問題がないですが特に文字が入った画像の場合、スマホで見た時に小さすぎて読めないといったことがしばしば起こります。ここは実際にスマホで確認し文字が判読可能かどうかをしっかりチェックする必要があります。また、トップページや下層ページのメイン画像を少し横長の画像で作成した場合、PCでは良いバランスに見えてもスマホでは縮小されるために、画像が思いの外、小さくなり特にメイン画像として配置している時に、メインの画像としては相応しくない小さなサイズになり、非常にバランスが悪く感じる場合もあります。このような時は、ひと手間かかりますがスマホ用の画像を別途作成し、PCとスマホで画像を切り替えるといった対応が必要です。

3. 電話番号はタップして直接電話できるようになっているか

テキストで電話番号を配置しているが、スマホで見た時はそれをタップして直接電話をかけられる方がユーザにとってはありがたいですよね。この電話番号にリンク設定していないことも良く見かけます。非常にもったいないとので、もし設定漏れがある場合はリンク設定をすべきですが、設定に際して注意点があります。PCではクリックしても電話出来ないため、PC表示の際はリンクされないように設定する必要がありますのでご注意ください。

4. 画像が画面の枠から飛び出していないか

PCでは問題なく表示されている画像でも、スマホでは適切な設定を行わないと画像が縮小されずに、画面からはみだしたようになってしまうケースがあります。もし、このような状況になっている場合でも、cssで適切な設定をするだけで簡単に修正できます。

5. 画像がぼやけていないか

Retinaディスプレイなど最近は高解像度のディスプレイが普及していますが、その高解像度のディスプレイにあった画像サイズではないためにおこる現象です。簡単にいうと小さいサイズの画像を、無理やり大きく引き伸ばしているようないイメージです。一概にいえないですが750〜800ピクセルくらいを目安にして作成するときれいに見えるようになります。

6. ページ内スクロールは意図通りの位置に止まっているか

ヘッダーを固定しているホームページで良く起こることですが、長いページなどにおいて、見せたいコンテンツへの誘導ボタンを設置しページ内スクロールを設定した際、本来は該当コンテンツの見出しが見える位置でストップさせたいのに、固定したヘッダーが見出しなどにかかってしまうことがあります（場合によっては完全に隠れてしまうことも）。これは固定したヘッダーの高さを考慮していないことが原因になりますが、cssやjs等で適切に設定することで意図通りの位置に止めることが可能となります。

7. フォントサイズは適正か

そもそも論ですが、フォントが小さく文章が読みづらいということもあります。Googleが推奨するフォントサイズは16pxとなっています。もちろんそれ以下で運用している情報サイトなどもありますが、実際にスマホで確認し、あまりにも小さく読みづらいということがないようにチェックすることが大切です。

いかがでしたでしょうか。他にもありますが、実際に現場で感じる見落としがちなことについてまとめてみました。既存のホームページの見直し、もしくはリニューアル時のチェックポイントとして少しでも参考になれば嬉しい限りです。

「日々の仕事」ブログでは、ホームページ制作の現場において実際の出来事や気づきなどのお役立ち情報を発信していますので、ぜひ他の「日々の仕事」も合わせてご覧ください。
他の「日々の仕事」はこちら