スマホ対応は、画面が小さく表示されることだけでは終わりません。お客様が必要な情報を見つけ、内容を読み、電話や問い合わせまで進めるかを、自社のスマホで一つの用件に沿って確かめます。順位や売上への効果を先に決めつけず、使えない箇所を特定するところから始めましょう。
この記事では、会社のホームページを管理する方が確認できる順番を示します。画像の圧縮やフォームの定期的な送受信確認は、それぞれ別の記事へつなぎます。
まず一つの用件を、スマホで最後まで試す
たとえば「サービスの対象を知って相談する」と決め、検索やトップページから目的の説明を探します。そこで対応内容と条件を読めるか、相談先が分かるか、入力や電話の操作まで進めるかを確かめます。担当者が知っている近道を使わず、初めて来た人の順番で見てください。
確認するページは、まず閲覧の多いページや相談につながる主要ページから選びます。アクセス数だけで決めず、料金や提供範囲など、お客様が判断に使うページも含めます。
画面幅と文字は、実際に読めるかで判断する
スマホで開き、本文を読むために画面全体を左右へ動かす必要がないか見ます。長い表や画像だけが内部で横に動く場合と、ページ全体がはみ出す場合は分けて記録します。次に文字を拡大し、見出しや本文、ボタンの文字が重なったり消えたりしないか確かめます。
一律に「何ピクセル以上なら合格」と決めるより、実画面と拡大表示で読めるかが大切です。W3Cの表示の折り返しに関する説明も、狭い表示領域で情報や機能を失わず読めることを扱っています。文字を画像に埋め込んだ図版は拡大時も読めるか確認してください。
メニューとリンクは、指で迷わず押せるか
メニューを開き、目的のページを選び、元の画面へ戻ってみます。閉じる操作が分かるか、開いたメニューが本文や相談ボタンを隠さないかを確認します。隣り合うリンクを押し間違える場合は、見た目の文字だけでなく、押せる範囲と間隔を見直します。
W3Cの操作対象の大きさに関する説明では、対象の大きさと隣との間隔を組み合わせて考えます。本文中のリンクと、並んだ小さなアイコンは同じ扱いにせず、実際の操作で確かめます。
相談先とフォームは、途中で止まらないか
サービスの説明を読み終えた場所から、電話番号や問い合わせ先へ進めるか見ます。フォームでは入力欄の名前、必須項目、エラーの場所、送信後の案内がスマホで分かるかを確認します。電話ボタンは誤発信を誘う配置になっていないかも見ます。
実際の送信と受信、自動返信の確認は運用担当者と手順を合わせて行います。画面が表示できたことと、問い合わせが届くことは別の確認です。定期点検の方法はフォームの送受信を確かめる記事にまとめています。
表示の待ち時間は、問題のあるページから測る
開くのを待つページが見つかったら、まずそのURLを記録します。GoogleのPageSpeed Insightsの説明では、スマホとパソコンの測定、実利用データと検査用データの違いが示されています。一度の点数だけで「このページは常に遅い」と決めず、対象URLと測定条件を残します。
画像が大きすぎる場合は、掲載幅に合うサイズや形式を検討します。web.devの画像の表示性能の説明も、端末に合う大きさの画像を送ることを勧めています。画像を一枚ずつ調べる方法は画像圧縮の記事をご覧ください。原因を見ないままプラグインやキャッシュの設定を変える必要はありません。
レスポンシブ対応と別URLの違いも確認する
レスポンシブ対応は、同じURLと内容を使い、画面幅に応じて表示を変える方法です。Googleのモバイルサイトの案内は、実装と維持のしやすさからこの方法を勧めています。スマホ専用の別URLも可能ですが、内容や検索向け情報を両方でそろえる運用が必要です。
既存サイトにどちらを使っているか分からない場合も、先に今のスマホ表示で用件が終わるか確かめます。制作方法の名称や使うフレームワークを選ぶこと自体は、読みづらさや操作の問題を直した証拠にはなりません。
直す順番は、止まった用件から決める
見つけた問題をページごとに並べ、「お客様の用件を終えられない」「内容は読めるが操作しづらい」「待ち時間が気になる」に分けます。最初の二つは、情報や相談先に到達できるかを優先して修正します。表示速度も測定結果を見て対象を決めます。
| 見つけたこと | 先に確かめること | 次の対応 |
|---|---|---|
| 内容が画面外に隠れる | ページ全体か、表だけか | はみ出す箇所を特定して表示を直す |
| 目的のリンクを押せない | メニューの開閉と押せる範囲 | 配置、間隔、リンク先を見直す |
| フォームで止まる | 入力、エラー、送信後の案内 | 原因を直し、受信まで再確認する |
| 表示を待つ | 対象URL、画像、測定条件 | 測定結果に沿って重い要素を直す |
修正後は同じスマホと同じ用件で再確認します。公開後の閲覧や問い合わせの変化を見る際は、対象期間、端末、ページをそろえて比べます。数字が少なく見えるときの確認順はアクセス数の点検記事を参照してください。
サイト全体を直す前に、対象ページを絞る
まず主要な一ページで問題と修正結果を確認し、同じ部品を使うページへ広げると、変更点を追いやすくなります。相談に必要なページ構成から検討したい場合は、Bämの会社ホームページ制作の内容を確認できます。今のスマホ画面で困っている箇所があれば、対象URLを添えてご相談ください。
参考資料
- Google検索セントラル「モバイルサイトとモバイルファースト インデックス」（2026年9月25日確認）
- W3C WAI「Reflow」（2026年9月25日確認）
- W3C WAI「Target Size (Minimum)」（2026年9月25日確認）
- Google「About PageSpeed Insights」（2026年9月25日確認）
- web.dev「Image performance」（2026年9月25日確認）
