BtoBのビジネスにおいては、パソコンで閲覧されることを想定されて、スマホ版の表示はまったく考慮していないというケースもよく見られますが、Googleの検索順位を決めるアルゴリズムは「モバイルファーストインデックス」という方針で、スマートフォン向けのサイトを基準に評価されるようになっています。
また、企業をターゲットとしていても、働いている人はスマートフォンを持っているし、自宅や移動中に調べている場合も考えられます。採用を目的とするならば、学生はスマートフォンでサイトを見ていることの方が多いかと思います。
こうした背景も踏まえ、スマホ対応時に注意しなければならないポイントを確認し、すでに運用しているサイトでも、動作チェックを行なった方が良いです。
制作時の注意点
iOSは画面が一番小さいiPhone SEに合わせて1行の文字数や画像の大きさを調整したり、Androidであれば画面の解像度や大きさに合わせて調整を行わなければなりません。
また、ブラウザによってCSSやJavascriptの挙動が違うので複雑な処理を控えたり、フォントによって文字の大きさが微妙に変わってくることもあるので、Webフォントを活用したりして、できるだけ多くの機種に対応できるように気をつけなければなりません。
横スクロールが発生していないか
PCで見ていて縦スクロールしかできないマウスを使っていると、気が付きにくい部分ですが、大きすぎる画像があったり、文字の折り返しをCSSで調整していなかったりすると、横スクロールが発生してしまう可能性があります。
ブログで多いのはAdSenseの広告枠が邪魔して1文字分くらいの横スクロールが発生し、文章が読みにくくなるケースが多いです。
段落ちしていないか
スマホは画面が小さいのでPCで見た時は、1行で収まっていた見出しが、スマホでは改行されていたり、CSSで背景画像を設定していると、レイアウトが崩れて文字が読めなくなっているケースもあります。
また見出し下の文章がセンタリングされていて読みにくくなっていることも多いです。
画像の文字サイズ
PCとスマホで同じ画像を使っている場合は、文字が小さくなって読みにくくないかを確認しなければなりません。
また、モバイルの通信環境では画像のファイルサイズにも配慮しておかなければ、全て読み込まれる前にページを見るのをやめてしまうことも考えられます。
フォームのフォントサイズ
iPhoneでフォームを利用する場合、フォントサイズを16px以下にしていると、入力する時やプルダウンメニューを選択するときに拡大されて、操作しにくくなってしまいます。
フォーム周りのフォントサイズを16px以上に設定することでフォーカスされるのを防ぐことができるので、必ずチェックが必要です。
このほかにもフォーム周りのストレスはコンバージョン率に影響するので入念なチェックを心がけましょう。
リンクやボタンの大きさ
指で操作するスマートフォンは、あまり小さすぎるリンクはタップしづらく、ユーザビリティに欠けます。
リストタグで並べられたリンク同士が近いメニューも誤タップの原因になるので、CSSのメディアクエリなどで行間を調整したり、細かい調整が必要です。
ビューポートの設定
最近ではテンプレートが標準でスマホ対応していることもあり、あまり意識することはなくなりましたが、META周りでスマホ向けに必要な設定があります。
スマホの縦横で持ち方の違いによって変化のある横幅を指定して、レイアウトの崩れを防ぐものです。
Flashを使用しない
もはや説明する必要がないくらい化石になった技術でもあるフラッシュですが、スマートフォンでは再生することができません。
テストツールで確認する方法
スマホ対応ができているかを確認するには、Googleが用意しているWebツールを利用すると便利です。URLを入力して、「テストを実行」を押すだけでサイトがスマホ向けに最適化されているか確認することができます。
通信環境が悪いスマートフォンではページの表示速度も重要なので、「PageSpeed Insights」か「Test my site」を利用して改善できる点がないか確認しておくと良いでしょう。
以下に紹介する3つは、すべてGoogleが提供しているものですが、それぞれのツールで共通している部分もあります。（どれかに統一して欲しいですが…）
モバイルフレンドリーテスト
スマホに最適化されているかどうか？だけを確認するためのツールです。ページの読み込みに関する問題があれば詳細を確認して修正しましょう。
Overview | Lighthouse | Chrome for Developers
Test my site
4G回線でのページ読み込みをシミュレーションすることができるツールです。5Gのサービスが始まった今でも、4G回線の通信速度は十分に早いですが、wi-fi環境がないシーンでも、素早く閲覧できるように調整しておきたいものです。
How speeding up your mobile site can improve your bottom line
PageSpeed Insights
ページの表示速度を確認するツールです。PCとスマホに分けて分析結果を見ることができます。点数が低い場合は、テスト結果のページからダウンロードできるCSSやJavaScriptに差し替えたり、該当する箇所を修正しなければなりません。少し複雑なので詳細は下記の記事をご確認ください。
必ず実機でテストする
実機がない場合は、ブラウザの開発者向けツールを使用することで、シュミレーターでチェックすることができます。
レスポンシブ対応している場合でも、PC上で見た時と、スマホで見た時は、表示が微妙に違うことがあります。
サイトを作成している過程ではシュミレーターでの確認でも良いですが、完成後は必ず実機でチェックしましょう。
