「うちのホームページ、スマホ対応してますよね？」
制作会社にそう確認して「対応済みです」と返ってきた。それで安心してしまう方が多いのですが、当社が実際に拝見すると、スマホで使える状態になっていないことがあります。
嘘をつかれているわけではありません。「スマホ対応」という言葉の定義が、会社によって違うためです。「スマホで表示が崩れない」ことを指す場合もあれば、「スマホで快適に読めて操作できる」ことまで含む場合もあります。前者だけでは、訪問者は読む前に離れていきます。
この記事では、専門知識なしで自分のホームページを判定する方法を、順番に説明します。所要時間は5分です。スマートフォンを手元に用意してから読み進めてください。
まず結論：確認するのは3つだけ
- 実機で開いたときのストレス
- 表示にかかる時間
- Googleからどう見えているか
順に説明します。1つ目だけでも、いま5分で終わります。
診断1：スマートフォンで実際に開く
パソコンの画面を縮めて確認する方法がありますが、これは当てになりません。指で操作したときの感覚が分からないからです。必ず実機で開いてください。
自分のホームページを開いて、次の5つを確認します。
- 文字を指で拡大しないと読めない
- 横方向にスクロールしてしまう箇所がある
- ボタンやメニューが小さくて押しにくい
- 電話番号をタップしても電話がかからない
- 画像が画面からはみ出している
ひとつでも当てはまれば、改善の対象です。
1つ目と5つ目は、パソコン向けに作った画面をそのまま縮めているサインです。2つ目の横スクロールは、画面幅を超える表や画像が入っているときに起こります。訪問者は「読みにくいサイト」ではなく「壊れているサイト」と受け取ります。
とくに見落とされがちなのが4つ目です。ホームページに電話番号が書かれていても、それがただの文字であれば、スマートフォンでタップしても何も起きません。訪問者は番号を暗記するか、コピーして電話アプリに貼り付けることになります。ここで諦める人がいます。
タップして発信できる状態になっているかどうかは、実機で押してみないと分かりません。
判断の目安：文字は指で拡大せずに読める大きさか、ボタンは指の腹で正確に押せる大きさか。Googleは押しやすいボタンの目安を48ピクセル程度としていますが、数字を測る必要はありません。押し間違えずに操作できるかどうかで判断してください。
診断2：表示にかかる時間を測る
Googleが無料で公開している「PageSpeed Insights」というツールで測れます。専門知識は不要で、URLを入れるだけです。
手順は3つです。
- PageSpeed Insights のページを開く
- 自分のホームページのURLを入力して実行する
- 「モバイル」のタブを見る（初期表示がモバイルになっています）
結果には点数が出ますが、点数そのものを追いかける必要はありません。見るべきは次の3つの指標です。
LCP（一番大きい要素が表示されるまでの時間）
目安は2.5秒以内です。ここが遅い場合、ほとんどは画像が重すぎることが原因です。
当社の自社サイトも、この記事を書いている時点で診断し直しました。ある1ページに1.8メガバイトの画像が1枚入っており、それだけで表示を大きく遅らせていました。圧縮して48キロバイトに、37分の1にしています。見た目は変わっていません。サイト全体では4ページ合計で3.5メガバイトを削減しました。
自社のサイトでもこうした状態は起こります。定期的に測る以外に見つける方法がありません。
なお、PageSpeed Insights の結果は上下2つに分かれています。上が「実際のユーザーのデータ」、下が「その場で測った診断データ」です。訪問者が少ないサイトでは上の欄にデータが出ないことがありますが、故障ではありません。下の診断データだけ見れば十分です。
CLS（表示中に画面がガタつく度合い）
目安は0.1以下です。読もうとした瞬間に文字が動いて、押すつもりのないボタンを押してしまう。あの現象です。画像の表示領域があらかじめ確保されていないと起こります。
INP（操作してから反応するまでの時間）
目安は0.2秒以内です。ボタンを押しても反応しない状態が続くと、訪問者は壊れていると判断します。
画像が重くなる一番の原因は、スマホで撮った写真をそのまま載せていること
表示が遅いサイトを診断すると、原因の大半はここにあります。
いまのスマートフォンで撮影した写真は、横幅が3000から4000ピクセル、容量は1枚あたり3メガバイトから5メガバイトあります。一方、ホームページで実際に表示される幅は、大きい写真でも1600ピクセル程度、一覧に並ぶ小さな写真なら300ピクセル前後です。
つまり必要な大きさの5倍から10倍の写真を読み込ませていることになります。見た目は同じです。違うのは、訪問者の通信量と待ち時間だけです。
当社の自社サイトでも、これが起きていました。ある一覧ページで、実際の表示幅が285ピクセルしかない枠に、1080ピクセルや1512ピクセルの写真がそのまま入っていました。撮影したスマートフォンの実寸のままです。表示サイズに合わせて縮小したところ、そのページだけで1.7メガバイト減りました。
直し方：写真をアップロードする前に、パソコンやスマートフォンの標準機能でリサイズしてください。横幅1600ピクセル程度あれば、ホームページの用途では十分です。手作業が難しい場合は、制作会社に「アップロード時に自動で縮小する設定」を依頼してください。一度入れれば、以後は意識せずに済みます。
診断3：Googleからどう見えているか
Googleは、パソコン版ではなくスマートフォン版のページを基準にサイトを評価しています。「モバイルファーストインデックス」という方式です。
つまり、パソコンでは整っていてもスマートフォンで崩れているサイトは、検索で見つけてもらいにくくなります。逆に言えば、スマホ対応は見た目の問題ではなく、検索に出るかどうかの問題でもあります。
自分のサイトがどう見られているかは、Googleサーチコンソールで確認できます。設置は無料です。ここが未設置であれば、まずそこから始めてください。何人が訪れ、どんな言葉で検索してたどり着いたかが分かります。
なお、設置したからといって順位が上がるわけではありません。現状を知るための道具です。この点は正直にお伝えしています。
よくある誤解：「レスポンシブ対応」＝「スマホ対応」ではない
見積書や提案書に「レスポンシブ対応」と書かれていることがあります。これは画面の幅に合わせてレイアウトが変わる仕組みのことで、それ自体はスマホで快適に使えることを保証しません。
レイアウトが変わっても、文字が小さいままだったり、パソコン向けの重い画像がそのまま読み込まれていたりすれば、体験は改善しません。実際、診断1で挙げた5項目は、レスポンシブ対応済みのサイトでも普通に当てはまります。
用語ではなく、実機で確かめてください。
診断結果の読み方
当てはまるのが1〜2個の場合
部分的な手直しで解決することが多い範囲です。文字サイズの調整、ボタンの拡大、画像の圧縮など、既存のサイトに手を入れる形で対応できます。
当てはまるのが3個以上、または公開から5年以上経っている場合
作り直したほうが結果的に安く済むことがあります。古い作りのサイトは、1ヶ所直すたびに別の場所が崩れることがあり、修正費が積み上がるためです。
どちらが妥当かは実物を見ないと判断できません。費用の考え方は「ホームページ制作の費用相場は？中小企業が損をしない予算の決め方」にまとめています。
まとめ
スマホ対応ができているかどうかは、制作会社の説明ではなく、実機で判断してください。
- 実際にスマートフォンで開き、5項目を確認する
- PageSpeed Insights で表示速度を測る
- サーチコンソールで現状の数字を把握する
この3つは、いずれも自分で、無料でできます。
そして、スマホ対応は問い合わせが増えない原因のひとつにすぎません。診断してみて問題がなかった場合は、別の場所で導線が切れています。全体像は「ホームページはあるのに問い合わせが来ない5つの原因と直し方」で整理しています。
ご相談ください
診断してみたものの、どう判断すればよいか分からない。そういう段階で構いません。
ホームページのURLをお送りいただければ、スマートフォンでの見え方について当社の見解をお伝えします。実機で確認したうえで、どこから直すべきかを優先順位をつけてご返信します。初回のご相談は無料です。
かしこまった相談はまだ早い、という段階であれば、LINEからお気軽にお声がけください。URLを送っていただくだけで構いません。
制作の進め方は「ホームページ制作・改善」のページにまとめています。
株式会社AI導線設計
大阪市北区本庄東1-25-8 アシスト94 1F
フリーダイヤル：0120-597-839（通話無料）／TEL：06-7777-8277
メール：info@aidousen.co.jp
【先着3社限定】ホームページ制作費が無料になるキャンペーン実施中
現在、ホームページ制作費（通常220,000円）が先着3社さままで無料になるキャンペーンを実施しています。
- ホームページ制作の初期費用 220,000円 → 無料
- スマホ最適化・SSL標準対応・予約・問い合わせフォーム標準装備
- 保守・更新サポート込み（保守サポート費として月々16,500円を別途頂戴いたします）
- 先着3社さまに達し次第、受付を終了いたします
この記事の診断で当てはまる項目が多かった場合、新規制作であればまとめて解消できます。業種に合わせて制作したサンプルもご覧いただけますので、「うちは対象になるか」といったご質問だけでもお気軽にどうぞ。