ホームページのスマホ対応、無料で確かめる方法と進め方
自分のホームページがスマホでちゃんと見えているのか、スマホ対応しているのかを確かめたい。
対応していなければ、どう直して、いくらかかるのかも知りたい。
そんな小さなお店や個人事業主の方に向けた記事です。
スマホでの見え方は、自分のスマホで今日のうちに確かめられます。
Google の無料の道具を使えば、直した方がよい点の手がかりも得られます。
この記事では、確かめる手順と、対応していなかったときの進め方(直す・作り直す)、費用が何で変わるかをまとめます。
確かめた結果、スマホで問題なく読めていれば、大きな対応を急がなくてよい場合もあります。
その線引きも後半に書きました。
この記事の要点
- スマホ対応しているかは、まず自分のスマホで開いて確かめられます。PageSpeed Insights や Chrome の Lighthouse といった Google の無料の道具では、直した方がよい点の手がかりが得られます。
- 対応していなかったときは、今のサイトの作りによって、手直しで済む場合と作り直した方が早い場合があります。
- 費用はページ数や今の作り方で変わるため、見積もりでは「直すか作り直すか」「何ページ分か」「スマホでの確認をどこまでするか」をそろえて比べます。
先に結論:スマホ対応しているかは、まず自分のスマホで確かめられます
スマホ対応とは、スマホで開いたときに、拡大や横へのスクロールをしなくても読めて、電話番号やボタンを指で押せる状態のことです。
確かめるのにお金はかかりません。
①自分のスマホで開く、②PageSpeed Insights に URL を入れる、③パソコンの Chrome で Lighthouse を使う、の順に進められます。
見え方は①で、直した方がよい点の手がかりは②③で分かります。
確かめておくと、たとえば地図やSNSのリンクから来た人が、そのまま営業時間を見て電話できるかが分かります。
サイトを作った人や管理を頼んでいる先に相談するときも、「どのページの、どこが、どう崩れるか」を伝えられるので、話が早くなります。
対応していなかった場合の進め方は、大きく「手直し」と「作り直し」の2つです。
費用は、そのどちらにするか、ページ数、今の作り方で変わります。
スマホ対応が大事な理由は、お客様と検索の2つ
スマホで見やすいことは、お客様にとっても、Google の検索にとっても前提になっています。
お客様にとって:スマホは身近な機器になっている
スマートフォンを持っている世帯は 91.8%です(出典:総務省「令和7年通信利用動向調査の結果」2026年5月29日公表、2025年8月時点)。
また、インターネットを使う機器としてスマートフォンを使う人の割合は 74.4%です(出典:総務省「情報通信白書 令和7年版」、2024年の数字)。
スマートフォンは、2017年にパソコンを上回りました(同じ出典)。
※この2つの数字は、スマホを持っている世帯の割合と、インターネットを使う機器としてスマホを使う人の割合です。
ホームページをスマホで見る人の割合ではありません。
スマホが身近になっているからこそ、営業時間・場所・連絡先がスマホですぐ分かると、問い合わせや来店の手前で役に立ちます。
検索にとって:Google はスマホで見た内容を使っている
Google は、検索への登録と評価に、スマホで見たときのページの内容を使っています(出典:Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」)。
2024年7月5日以降は、スマートフォン用のロボット(Googlebot)だけでサイトを読み取り、検索に登録しています。
コンテンツをスマホでまったく閲覧できないサイトは、登録の対象外とされています(出典:Google 検索セントラル ブログ、2024年6月3日)。
対象外とされているのは、「まったく閲覧できない」場合の話です。
検索に載るかどうかより、お客様が迷わないかどうかの方が、確かめる理由として身近です。
Google がすすめる作り方:レスポンシブ
Google は、1つのページが画面の幅に合わせて形を変える作り方(レスポンシブ ウェブ デザイン)を、「実装と維持が最も簡単なデザイン パターン」としておすすめしています(出典:Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」)。
パソコン用とスマホ用を別々に作る方法もありますが、Google がおすすめしているのは、1つのページが幅に合わせて変わるこの作り方です。
のちほど「直すか、作り直すか」を考えるときの前提になるので、覚えておいてください。
無料で確かめる3つの手順(スマホ・PageSpeed Insights・Chrome)
Google の「モバイル フレンドリー テスト」と、Search Console の「モバイル ユーザビリティ」レポートは、2023年12月1日で提供が終わっています(出典:Google 検索セントラル ブログ、2023年4月19日・2023年12月1日更新の注記)。
インターネット上には今もこのテストを案内する記事があるため、次の手順で確かめます。
Google は、ページを見直すときの質問に「コンテンツはモバイル デバイス上で適切に表示されていますか」を挙げ、確かめる道具として Chrome の Lighthouse を案内しています(出典:Google 検索セントラル「ページ エクスペリエンス」)。
手軽なものから、順に進めましょう。
手順1:自分のスマホで、お客様と同じ道順で開く
検索や地図、SNSのプロフィールのリンクから、お客様と同じ道順で自分のサイトを開きます。
トップページだけでなく、メニュー・料金・アクセス・問い合わせのページも開いてください。
家族のスマホなど、機種の違うスマホでも開けるとなおよいです。
実際のスマホで開くのは、手軽で、見え方がそのまま分かる方法です。
Chrome の公式ドキュメントも、パソコンでの確認はおおよその目安で、判断に迷うときは実際のスマホでページを開くのがよいと説明しています(出典:Chrome for Developers「Device Mode でモバイル デバイスをシミュレートする」)。
見るところは、次の5つです。

- 横にはみ出さず、横にスクロールしなくても読める
- 指で拡大しなくても文字が読める
- 電話番号・ボタン・リンクを指で押しやすい(押したい所の隣を押してしまわない)
- メニューが開いて、ほかのページへ移れる
- 写真・地図・予約や問い合わせのフォームが表示され、使える
崩れていた画面は、スマホの画面の写し(スクリーンショット)を撮っておくと、あとで相談するときに伝えやすくなります。
見るところに加えて、開いてすぐの画面(ファーストビュー)も確かめておきましょう。
スマホでは、最初に目に入るキャッチコピーや写真で、何のお店で、どんな商品やサービスがあるのかが伝わり、印象よく見えるかどうかで、下まで読み進めてもらえるかが変わりやすいためです。
手順2:PageSpeed Insights に URL を入れる
PageSpeed Insights のページで、自分のサイトの URL を入れて分析します。
アプリを入れる必要はなく、パソコンでもスマホでもできます。
PageSpeed Insights は、スマホとパソコンそれぞれの結果を見られる Google の道具で、中では Lighthouse が使われています(出典:Google for Developers「PageSpeed Insights について」、Chrome for Developers「Lighthouse の概要」)。
結果の画面には、直した方がよい点が一覧で出ます。
見るのは、スマホ(モバイル)の側の結果です。
指摘の中身が分からなくても大丈夫です。
結果の画面を保存しておくと、相談するときの材料になります。
※PageSpeed Insights の点数は、主に表示の速さなどの評価です。
点数だけでスマホ対応しているかは決まりません。
手順3:パソコンの Chrome で Lighthouse とデバイスモードを使う
パソコン版の Chrome で自分のサイトを開き、デベロッパー ツールの「Lighthouse」から実行すると、30〜60秒ほどでページのレポートが作られます(出典:Chrome for Developers「Lighthouse の概要」)。
手順2の中で使われている Lighthouse を、自分のパソコンで実行できます。
デベロッパー ツールは、パソコン版の Chrome のメニューから開けます。
同じデベロッパー ツールの「デバイス ツールバーの切り替え」を使うと、スマホでの見え方を、パソコンの画面でおおまかに確かめられます。
手順1で崩れていたページを、画面の幅を変えながら見るときに便利です。
※Search Console にサイトを登録している方は、URL 検査ツールのライブテストでもページの画面の写しを見られ、その内容はスマホ版のページから取られます(出典:Search Console ヘルプ「URL 検査ツール」)。
登録していなければ、手順1〜3で足ります。
WordPress で作っていて、自分で編集している場合
WordPress の編集画面には、プレビューの機能があり、パソコン・タブレット・スマホの幅に切り替えて見え方を確かめられます。
実際の見た目は、新しいタブで開いて確かめられます(出典:WordPress.org「How to use the View feature」)。
文章や写真を差し替えたあとに、スマホの幅で見え方を確かめる習慣にしておくと、崩れに早く気づけます。
スマホ対応していなかったときの進め方:直すか、作り直すか
確かめて崩れていた場合も、すぐに作り直しと決める必要はありません。
今のサイトの作りによって、手直しで済む場合と、作り直した方が早い場合があります。
まず、今のサイトの作り方を確かめる
どちらの進め方になるかは、今のサイトの作り方で見当がつきます。
- ホームページの作成サービスで作った場合は、サービスの説明や設定で、スマホ表示に対応しているかを確かめる
- WordPress などで作った場合は、使っているテーマの説明で、スマホ表示に対応しているかを確かめる
- 1ページずつ手作りで作った場合(作り方が分からない場合も含む)は、作った人や管理を頼んでいる先に聞く
作り方が分からないときは、作った人や管理を頼んでいる先に「何で作ったか」を聞くのが早いです。
手直しで済みやすい場合と、作り直した方が早い場合
手直しで済みやすいのは、一部のページや部分(表、大きな画像、ボタンなど)だけが崩れる場合です。
作りがスマホ表示に対応していて、設定や部分の修正で直せるときがこれにあたります。
作り直した方が早いのは、パソコン用の幅で全ページが作られていて、スマホ表示に対応した作りに替えるとほぼ全部に手が入る場合です。
ほかにも、情報が古い、自分で更新できないなど、見直したい点が重なっているなら、まとめて考えた方が手間が少なくなります。
見直しの時期や進め方は、リニューアルの時期と進め方で整理しています。
作り直す場合の選択肢として、制作費を月額料金に含めて払う月額制(サブスク)もあります。
仕組みや確かめるポイントは、制作費を月額料金に含めて作り直す方法(月額制)で紹介しています。
相談するときに伝えると話が早いこと
手順1〜3で確かめた結果は、そのまま相談の材料になります。
- 崩れていたページの URL と、どこがどう崩れたか(手順1の画面の写し)
- 確かめたスマホの種類(iPhone か Android か程度)
- PageSpeed Insights(または Lighthouse)の結果の画面
- 直したいのはスマホ表示だけか、ほかにも見直したい点があるか
これがそろっていると、「手直しか作り直しか」の見立てと見積もりを出してもらいやすくなります。
スマホ対応の費用は何で変わる?見積もりで確かめる3つのこと
スマホ対応の費用について、調べた時期や対象が分かる調査は、確認した範囲では見当たりませんでした。
そこでこの記事では金額を並べず、費用が何で変わるかと、見積もりを比べるときにそろえることを書きます。
| 費用が変わるもの | 見積もりで確かめること |
|---|---|
| 直すか、作り直すか | どちらの前提の金額か |
| ページ数 | 何ページ分の対応か(問い合わせのフォームや地図のページを含むか) |
| スマホでの表示の確認 | どのページを、どんなスマホで確かめてくれるか |
費用はページ数や、今のサイトの作り方によって変わります。
見積もりでは、何ページ分か、スマホでの表示の確認をどこまでしてくれるかを確かめましょう。
今の作り方(作成サービス、WordPress、手作り)によっても手間が変わるので、手順の前に確かめた作り方も伝えておくと話が進みます。
インターネット上の相場の記事には、調べた時期や対象が書かれていないものもあります。
数字だけで判断せず、自分のサイトで見積もりを取って比べるのが確かです。
直す・作り直す費用が、お店にとって元を取れるかどうかの考え方は、見直しの費用が元を取れるかの考え方でまとめています。
スマホ対応を急がなくてよいケース
確かめた結果によっては、大きな対応を急がなくてよい場合もあります。
- 手順1の5つのところに問題がなく、PageSpeed Insights で指摘が出ていても、スマホで読めて電話や地図までたどり着ける。この場合は、指摘のうち、作った人に聞いて直せるものから進めれば十分です
- 近いうちに作り直しやサイトの見直しを考えている。スマホ対応だけを先に直すより、見直しとまとめて進めた方が手間が少なくなります
- ホームページをほとんど使っておらず、お客様が地図やSNSのプロフィールでお店の情報を得ている。まずは地図やSNSの情報を今に合わせる方が先、という考え方もあります
まとめ
- スマホでの見え方も、直した方がよい点の手がかりも、無料で確かめられます。
- 確かめる順は、自分のスマホ(見え方)、PageSpeed Insights と Chrome の Lighthouse(直した方がよい点の手がかり)、デバイスモード(パソコンでのおおまかな確認)です。
- 対応していなければ、今の作りによって「手直し」か「作り直し」かが決まります。
- 見積もりは、「どちらの前提か」「何ページか」「どこまで確かめるか」をそろえて比べます。
まずは今日、自分のスマホで、お客様と同じ道順でサイトを開いてみてください。
ホームページをほとんど使っていない方も、地図やSNSのプロフィールを今の情報にしておけば、お客様はお店の情報にたどり着けます。
参考にした資料
- モバイルサイトとモバイルファースト インデックスに関するおすすめの方法(Google 検索セントラル、最終更新 2026-02-20、確認日:2026-11-02)
- Google 検索セントラル ブログ(2024年6月3日、モバイル インデックスの最終段階について)(Google、2024年6月3日、確認日:2026-11-02)
- ヘルプフル コンテンツの作成におけるページ エクスペリエンスの影響(Google 検索セントラル ブログ、2023年4月19日、確認日:2026-11-02)
- Search Console のモバイル フレンドリー テストツール(提供終了)(Google 検索セントラル ブログ、2023年12月1日更新の注記、確認日:2026-11-02)
- ページ エクスペリエンス(Google 検索セントラル、最終更新 2026-09-25、確認日:2026-11-02)
- Lighthouse の概要(Chrome for Developers、最終更新 2025-06-02、確認日:2026-11-02)
- Device Mode でモバイル デバイスをシミュレートする(Chrome for Developers、最終更新 2024-02-20、確認日:2026-11-02)
- PageSpeed Insights について(Google for Developers、最終更新 2025-07-25、確認日:2026-11-02)
- URL 検査ツール(Search Console ヘルプ、確認日:2026-11-02)
- 令和7年通信利用動向調査の結果(総務省、2026年5月29日公表、確認日:2026-11-02)
- 情報通信白書 令和7年版(総務省、令和7年版、確認日:2026-11-02)
- How to use the View feature(英語)(WordPress.org、最終更新 2026-08-19、確認日:2026-11-02)


