モバイルフレンドリーについて

今回のWEBチームからのお題は、スマホのレスポンシブ対応についてでした。

PC版とは違い、スマホでは画面が小さいため、文字が小さくなってしまったり、画像が大きすぎて見切れてしまったり、
ユーザーが見にくいという問題が発生します。
それに対応する考え方として、「モバイルフレンドリー」、「スマホでのユーザビリティ」に着目しました。

モバイルフレンドリー

モバイルフレンドリーとは、スマートフォン用に表示を最適化することです。
レスポンシブに対応していないWEBサイトだと、PC版の表示がそのまま縮小表示されてしまいます。
そうなると、とても文字が小さくなり見づらくなるため、ピンチアウトをして拡大しなければいけないなど、不便が生じてしまいます。

こういった表示がスマホでされていると、googleのSEOでもとても不利になり、評価が下がる対象になってしまいます。
また、現在の世帯ベースでの普及率89.9%の状況から、スマホ対応は必須となっています。

では、モバイルフレンドリーが正しく設定されているのかどうかをどうやって知ればいいのでしょうか。
業者に依頼するのもいいですが、自分のサイトのURLをgoogleの「PageSpeed Insights」に入力することで調べることができます。

https://pagespeed.web.dev/
上記のURLにアクセスして、自分のサイトのURLを入力すると、サイト内の問題点を教えてくれます。
内容を調べて改善することで、モバイルフレンドリーにも対応可能です！(モバイルフレンドリーの項目が表示されないケースもあります)

こちらのPageSpeed Insightsは拡張機能でも用意されているので、是非取り入れてみるのもおすすめです！
拡張機能名「Lighthouse」

スマホでのユーザビリティ

ではユーザビリティとは何でしょう。
簡単に説明すると、「操作のしやすさ」です。

スマホでは、画面が小さい・指での操作になる、という理由からPC版と同じUI/UXでは、ユーザーにとってとても使いにくくなってしまいます。
それらを回避するため、大きく三つのポイントがあります。

文字の大きさ

14~15pxが操作しやすいとされています。(googleの推奨では16px)
pcよりも読みやすいように、長すぎず、大きく表示することが推奨されています。

リンクの色

一目でわかるようにします。
PC版では、文字にアンダーラインが入っているだけの状態だとしても、
スマホではボタンにするなど、わかりやすくすることが推奨されています。

ページャー

PC版では、1から連番で数字をクリックすると該当のページ数の画面を表示できる見え方でも、
スマホでは大きいボタンで「続きを読む」にするなど、間違えないようにすることが推奨されています。

以上が、スマホでのレスポンシブ対応についてのお話でした。
「モバイルフレンドリー」、「スマホでのユーザビリティ」を意識して、WEBサイトを構築することは、
今では当たり前になっていますが、まだまだ対応していないサイトも多く見られます。
是非この機会にご自身のサイトがどうなっているのかを見直して見るのもいいかもしれませんね！