ホームページのスマホ対応を自分で確認する方法｜無料でできる5つのチェックと直し方

自分のお店のホームページを、最後にスマホで開いたのはいつでしょうか。更新や確認はいつも事務所のパソコンで、スマホでは開いたことがない。そういう方は少なくありません。パソコンではきれいに見えていても、スマホで開くと文字が豆粒のように小さい、メニューのボタンが押せない、画面が横にずれる、といったことが起きている場合があります。

困るのは、崩れていても誰も教えてくれないことです。読みにくいと感じたお客様は、何も言わずに別のお店のページへ移っていきます。

この記事では、ホームページがスマホにきちんと対応しているかを、費用をかけずに自分で確かめる方法をまとめます。実機での見方、5つのチェック（文字の大きさ・ボタンの押しやすさ・横スクロール・画像の欠け・電話リンク）、パソコンでの簡易確認、見つかった問題の直し方、自分で直すか頼むかの判断の順に進めます。作り直しの段取りではなく、いまのサイトを確認する方法に絞っています。Googleやブラウザの公式の説明に触れる部分は、2026年10月時点で確認できた内容にもとづいています。

まず「どれくらいスマホで見られているか」を確かめる

確認の前に、自分のお店のホームページが、どれくらいスマホで見られているのかを知っておくと、力の入れどころが分かります。

割合はお店ごとに違う

「いまはほとんどの人がスマホで見ている」とよく言われますが、実際の割合は業種や客層、どこから見に来るかで変わります。世間の数字を当てはめるより、自店のアクセス解析で確かめるのが確実です。

• Googleサーチコンソール：Googleの公式ヘルプによると、検索パフォーマンスのレポートでは、検索に使われたデバイスの種類（パソコン、タブレット、モバイル）ごとにデータを分けて見られます。Google検索から来た人のうち、スマホの人がどれくらいかが分かります
• Googleアナリティクス（GA4）：公式ヘルプでは、「ユーザーの環境の詳細」レポートに「デバイス カテゴリ」（パソコン、モバイル、タブレットなど）という項目があると説明しています。検索以外から来た人も含めた見え方が分かります

どちらも入っていない場合は、無理に入れなくても構いません。この記事の確認は、データがなくても今日からできます。

Googleはスマホ版のページを見ている

スマホ対応は、お客様の読みやすさだけの話ではありません。Google検索セントラルの公式ドキュメントでは、Googleのインデックス登録とランキングには、スマートフォン用のクローラーで読み取ったモバイル版のページの内容を使うと説明しています（モバイルファーストインデックスと呼ばれます）。同じ文書は、モバイル版のページを用意することは検索結果に出るための要件ではないものの、非常に強く推奨されているとしています。

ただし、誤解のないように書き添えておきます。Googleのページエクスペリエンスに関するドキュメントでは、自己評価の質問の一つに「コンテンツはモバイル デバイス上で適切に表示されていますか」を挙げる一方で、ランキングに使われるのはCore Web Vitals（表示の速さや安定性の指標）であり、それ以外のページエクスペリエンスの要素が順位を直接押し上げるわけではない、とも説明しています。そのうえで、そうした要素は訪問者の満足につながり、それは通常Googleのランキングシステムでも評価される、という趣旨です。

つまり、「スマホ対応にすれば順位が上がる」と単純に考えるより、スマホで来たお客様が迷わず電話や予約にたどり着けるかを確かめる、と考えるほうが実態に合っています。

「モバイルフレンドリーテスト」は終わっている

以前は、Googleの「モバイルフレンドリーテスト」というページにアドレスを入れるだけで、スマホ対応かどうかを判定してもらえました。Google検索セントラルのブログ（2023年4月19日）では、このツールとサーチコンソールの「モバイル ユーザビリティ」レポートの提供を2023年12月1日以降に終了すると告知しています。同じ記事では、モバイルでの使いやすさが重要でなくなったからではなく、ChromeのLighthouseなど評価のための手段が他にも増えたため、と理由を説明しています。

2026年10月時点で、以前のモバイルフレンドリーテストのアドレスを開くと、Lighthouseの説明ページに転送されます。古い解説記事で「このツールで確認しましょう」と書かれていても、いまは使えないので注意してください。代わりにできる確認を、この後の章で紹介します。

実機で見る：いちばん確かな確認方法

パソコンでスマホの表示を再現する方法は後で紹介しますが、最初にやってほしいのは、自分のスマホで実際に開いてみることです。Chromeの公式ドキュメントでも、パソコン上のスマホ表示の再現は、スマホでどう見えるかの「一次近似」にすぎず、判断に迷うときは実際のスマホで開いてみるのが最善だと説明しています。

お客様と同じ入り口から開く

アドレスを手で打ち込むより、お客様が実際に通る道から開くのがおすすめです。

• Googleで店名を検索し、検索結果から開く
• Googleマップでお店を表示し、お店の情報にあるホームページへのリンクから開く
• SNSのプロフィールや、チラシのQRコードから開く

入り口によっては、トップページではなく途中のページに着くこともあります。お客様が最初に見るページから確かめるのが、確認の近道です。

何台かで見る

自分のスマホ1台だけで「大丈夫」と決めないようにします。画面の大きさや機種が違うと、崩れ方も変わるからです。

• 家族やスタッフのスマホ（できれば機種の違うもの）でも開いてもらう
• 縦向きと横向きの両方で見る
• 文字の表示サイズを大きめに設定している人のスマホでも見てもらう

特に最後の点は見落とされがちです。年配のお客様が多いお店では、スマホの文字設定を大きくしている方もいます。その状態で文字がはみ出していないかも見ておくと安心です。

全ページを、指で操作しながら見る

トップページだけ見て終わりにせず、メニュー、料金、アクセス、お問い合わせなど、すべてのページを上から下まで見ます。眺めるだけでなく、実際にボタンを押し、メニューを開き、地図や電話のリンクをタップしてみてください。

気になった箇所は、その場でスクリーンショットを撮っておきます。後で自分で直すときにも、誰かに頼むときにも、「どのページの、どこが、どうなっているか」がひと目で伝わります。

スマホ対応の5つのチェック

実機で見るときに、どこを見ればよいのか。小さなお店のホームページで特に確かめたい5つの点をまとめます。

1. 文字の大きさ

スマホで開いたとき、指で広げなくても本文が読めるかを確かめます。ページ全体がパソコンの画面をそのまま縮めたように小さく表示される場合は、スマホに対応していない作りの可能性が高いです。

Googleが運営するウェブ制作者向けの解説（web.dev）では、スマホ向けの設定（viewportと呼ばれる指定）がないページは、スマホのブラウザがパソコン画面の幅（通常はおよそ980px、機種によって異なる）で表示してから縮めるため、文字が読みにくくなり、拡大が必要になることがあると説明しています。

文字の大きさには、以前はLighthouseという診断ツールに「12px未満の文字が多すぎないか」を調べる項目がありました。ただ、Chromeの公式ブログによると、2025年10月に公開されたLighthouse 13でこの項目は削除されています。ツールで自動的に指摘されなくなった分、自分の目で読めるかどうかがいちばんの判断材料です。

あわせて、指で広げて拡大できるかも試します。web.devでは、拡大を禁止する設定はアクセシビリティ（誰でも使えること）の問題につながるため使わないことをすすめています。文字が小さいうえに拡大もできないページは、目の疲れやすい方にとって読む手段がありません。

2. ボタンの押しやすさ

メニューの項目、電話や予約のボタン、ページ下の小さなリンクなどを、親指で一つずつ押してみます。狙ったものと違うものが開いてしまう、何度か押し直さないと反応しない、といった場合は、ボタンが小さいか、間が詰まりすぎています。

web.devの解説では、スマホ向けの設定がされたサイトで推奨される押す場所の最小の大きさは約48ピクセル四方で、実際の画面では一辺9ミリ程度、指の腹と同じくらいの面積だとしています。また、隣り合う押す場所どうしは、縦横に8ピクセル程度の間隔をあけるよう勧めています。

目安は「指の腹で押して、隣のものに触れないか」です。とくに次の場所は念入りに確かめます。

• 画面上部のメニュー（三本線のボタンを含む）
• 電話、予約、LINE、地図などの行動につながるボタン
• 文章の中に並んだ小さなリンク

3. 横スクロール

ページを見ながら、画面を左右にスワイプしてみてください。本来、スマホのページは縦にだけ動くのが自然です。横にずれて右側に余白が出たり、文字や表が画面の外にはみ出していたりすれば、どこかに画面の幅より広いものがあります。

web.devでは、利用者は縦のスクロールには慣れているが横のスクロールには慣れておらず、ページ全体を見るために横スクロールや縮小が必要になると使いにくくなると説明しています。原因の例として挙げているのが、画面の幅より大きい画像です。

小さなお店のページでよくあるのは、次のようなものです。

• 料金表や営業時間の表が、横に長いまま入っている
• 大きな写真やバナー画像の幅が固定されている
• 地図や動画の埋め込みの幅が固定されている
• 長い英数字（アドレスやメールアドレス）が折り返されない

4. 画像の欠け

写真や図が、スマホでも最後まで見えているかを確かめます。パソコンでは横長に見えていた写真が、スマホでは左右が切れて、肝心の料理や人物が写っていないことがあります。

特に注意したいのが、文字を画像にしているものです。営業時間やメニュー、キャンペーンの案内を1枚の画像にしていると、スマホでは画像ごと縮むため、文字が小さすぎて読めなくなります。

Googleのモバイルファーストインデックスの文書では、スマホ向けのページに、サイズが小さすぎる画像や解像度の低い画像を使わないことを勧めています。また、パソコン版にある重要な画像や内容がスマホ版で欠けていると、Googleが受け取れる情報も減るとしています。web.devも、画面に収まらないという理由だけで内容を隠さないよう注意を促しています。「スマホでは表示しない」設定になっている写真や文章がないかも、パソコンの表示と見比べて確かめておきましょう。

5. 電話リンク

小さなお店にとって、スマホのホームページでいちばん大事なボタンかもしれません。電話番号をタップして、そのまま発信画面になるかを確かめます。

ブラウザの技術情報をまとめたMDN（Mozillaの開発者向け資料）では、電話番号へのリンクは「tel:」という書き方で作ると説明しています。また、tel:リンクの動作は端末によって異なり、スマホではその番号に発信するほか、連絡先に保存するなどの動作もあると書かれています。

確かめる点は次のとおりです。

• タップすると発信の画面になるか（実際にかける前の画面で止めて構いません）
• 表示されている番号と、発信画面の番号が一致しているか
• 番号が画像になっていないか（画像の中の文字はリンクになりません）
• 営業時間や定休日が、電話番号の近くに書かれているか

同じように、地図のボタンから地図アプリが開くか、予約やLINEのボタンが正しい先につながるかも、ついでに押して確かめておきましょう。

あわせて見ておきたいこと

開いた途端に画面いっぱいのお知らせが出て、閉じるボタンが小さくて押せない、というのも困りものです。Googleのドキュメントでは、主に宣伝目的で閲覧を妨げる画面全体の表示（インタースティシャル）は利用者の不満を招き、サイトへの信頼を損ないかねないとして、画面の一部だけを使うバナーにすることを勧めています。

パソコンでスマホ表示を確かめる方法

実機での確認が基本ですが、パソコンでもスマホの表示をおおまかに再現できます。いろいろな画面の幅で一度に確かめたいときに便利で、ブラウザに最初から入っている機能なので費用もかかりません。

Google Chromeの場合

Chromeの公式ドキュメントによると、開発者向けの機能（デベロッパーツール）の中に、スマホの画面を再現する「デバイスモード」があります。手順は次のとおりです。

1. 確かめたいページをChromeで開く
2. ページの上で右クリックして［検証］を選ぶか、キーボードで F12 または Ctrl + Shift + I（Macは Cmd + Option + I）を押す。アドレスバーの右にあるメニューから［その他のツール］→［デベロッパー ツール］でも開けます
3. 開いた画面の上部にある［デバイス ツールバーの切り替え］のボタンを押す。キーボードでは Ctrl + Shift + M（Macは Cmd + Shift + M）です

これで、ページがスマホくらいの幅で表示されます。公式ドキュメントでは、次のような使い方が紹介されています。

• 上部のバーで、モバイル（S）320px、モバイル（M）375px、モバイル（L）425pxなどの幅をワンクリックで切り替えられる
• 幅と高さの欄に数字を入れたり、端をつかんで動かしたりして、好きな大きさにできる
• 一覧から機種を選ぶと、その機種の画面の大きさを再現できる
• 回転のボタンで横向きにできる
• メニューから「フルサイズのスクリーンショット」を選ぶと、画面の外にある部分も含めてページ全体の画像を保存できる

幅を切り替えながら、5つのチェックのうち文字の大きさ、横スクロール、画像の欠けを見ていきます。スクリーンショットは、直してほしい箇所を伝えるときにも役立ちます。

Microsoft Edge・Firefoxの場合

Windowsに最初から入っているMicrosoft Edgeにも、同じ機能があります。Microsoftの公式ドキュメントでは、ページを右クリックして［検査］を選び、開いた画面の「デバイス エミュレーションの切り替え」のボタンを押す手順が案内されています。

Firefoxでは「レスポンシブデザインモード」という名前で、Mozillaの公式ドキュメントによると Ctrl + Shift + M（Macは Cmd + Opt + M）で切り替えられます。

パソコンでの確認の限界

この方法は手軽ですが、万能ではありません。Chromeの公式ドキュメントは、デバイスモードはパソコンの上でスマホの体験をまねているもので、スマホの中で実際にページを動かしているわけではないと説明しています。Microsoftのドキュメントも同じ趣旨で、もっとも確かな確認はスマホで開くことだとしています。

特に、指で押したときの押しやすさや、電話リンクの発信は、パソコンでは確かめられません。パソコンでの確認は「下見」と考え、最後は必ず実機で確かめてください。

診断ツールを使う場合

もう少し機械的に調べたい場合は、Googleの「PageSpeed Insights」というページにアドレスを入れると、モバイルとパソコンのそれぞれでページの表示の速さなどのレポートが無料で出ます。公式の説明では、Lighthouseという診断の仕組みを使っています。

Lighthouseには、スマホ向けの表示の設定（viewport）がページに入っているかを確かめる項目もあります。ただし、こうしたツールのスコアは主に速さなどを測るもので、「スマホで見やすいか」「押しやすいか」を総合的に判定してくれるわけではありません。点数に一喜一憂するより、5つのチェックを自分の目と指で確かめるほうが、お客様の実感に近い結果が得られます。

見つかった問題の直し方

確認して問題が見つかったら、次は直し方です。どう直すかは、ホームページがどんな仕組みで作られているかで大きく変わります。

まず「どう作られているか」を確かめる

Googleのモバイルファーストインデックスの文書では、スマホに対応したサイトの作り方として、レスポンシブデザイン、動的な配信、別々のアドレスの3つを挙げ、このうちレスポンシブデザインを、実装と維持がもっとも簡単な方法としておすすめしています。レスポンシブデザインとは、パソコンでもスマホでも同じアドレス・同じ中身を使い、画面の大きさに応じて見え方だけを変える作り方です。

同じ文書では、ホームページ作成サービスやCMSを使っている場合、いまのデザインをスマホに対応させられないなら、スマホに対応した新しいテーマを探す必要がある、としています。

管理画面で直せること

ホームページ作成サービスやCMSで作ったサイトなら、管理画面の中で直せることもあります。

• 文字を画像にしている営業時間やメニューを、普通の文章に書き直す
• 大きすぎる画像や、端が切れる画像を差し替える
• 横に長い表を、項目ごとの箇条書きに書き直す
• 電話番号を、電話のリンクとして入れ直す（多くの管理画面に、リンクを付ける機能があります）
• スマホでのプレビュー表示がある場合は、それで確かめながら直す

テーマを変えたり、デザインの設定を大きく触ったりする前には、必ずいまの状態を保存しておきます。うまくいかなかったときに戻せるようにするためです。考え方はバックアップは「取っただけ」では戻せないにまとめています。

HTMLで作られたサイトの代表的な直し方

HTMLとCSSを自分で触れる方のために、公式の説明で紹介されている代表的な直し方を挙げておきます。触ったことがない場合は、無理をせず次の章の「頼む」を選んでください。

スマホ向けの表示の設定（viewport）がない場合は、各ページの head の中に次の1行を入れます。web.devとChromeの公式ドキュメントで示されている書き方です。

<meta name="viewport" content="width=device-width, initial-scale=1">

ただし、この1行を入れるだけで全部が直るとは限りません。もともとパソコンの幅に合わせて作られたページでは、入れた後にかえって配置が崩れることもあります。入れたら必ずスマホで全ページを見直します。

画像が画面からはみ出す場合は、web.devでは、すべての画像に最大幅100%を指定して、使える幅に合わせて縮むようにすることを勧めています。

img {
  max-width: 100%;
  display: block;
}

ボタンが小さい場合は、見た目の大きさを変えずに押せる範囲を広げるため、内側の余白（padding）を増やす方法がChromeの公式ドキュメントで紹介されています。隣との間隔が近すぎる場合は、外側の余白（margin）で間をあけます。

電話番号をタップできない場合は、番号を tel: のリンクにします。MDNで紹介されている書き方は次の形です（「電話番号」の部分に、お店の番号を入れます）。

<a href="tel:電話番号">電話番号の表示</a>

直す順番

一度に全部を直そうとすると、手が止まりがちです。お客様が困る順に、次のように優先順位を付けるのがおすすめです。

1. 電話、地図、営業時間など、来店や問い合わせに直結するもの
2. 読めない文字、押せないボタン
3. 横スクロールや画像の欠けなど、見た目の崩れ
4. 細かな余白や配置の整え

問い合わせフォームがある場合は、スマホから入力して送信できるかも確かめておきます。入力のしやすさの考え方は問い合わせフォームで離脱を減らすで整理しています。

自分で直すか、頼むかの判断

確認までは自分でできても、直すところで迷う方は多いと思います。判断の目安を表にまとめます。

自分で直す場合の線引きは、「直した後に、元に戻せるか」です。文章の手直しや画像の差し替えなら、失敗しても元に戻すのは難しくありません。一方で、テーマの変更やCSSの書き換えは、一か所を直したつもりが別のページを崩すこともあります。戻し方が分からない作業には手を出さない、と決めておくと安全です。

頼むときに伝えること

頼む場合は、確認した結果をそのまま渡すと、話が早く進みます。

• 崩れているページのアドレス
• 確かめたスマホの機種と、縦向きか横向きか
• どこが、どうなっているか（スクリーンショットに印を付けたもの）
• 優先して直してほしい順番

あわせて、依頼先に次の点を尋ねておくと安心です。

• 直した後、どの画面の幅で確認するのか。実機でも確かめるのか
• 指摘した箇所だけでなく、同じ原因で崩れている他のページも直るのか
• 費用がかかる場合は、事前に金額を知らせてもらえるか

保守の契約がある場合は、その範囲で頼めるかを先に確かめます。保守で頼めることの考え方はホームページ保守は何を頼めるのかにまとめています。

部分的な手直しで済まないとき

どのページもパソコンの画面を縮めたような表示で、文字も画像も全体的に小さい場合は、作りそのものが古く、部分的な手直しでは追いつかないことがあります。手直しを重ねるより、作り直したほうが結果的に早く、費用も読みやすいこともあります。スマホで読みやすいことは、お客様からの信頼にもつながります。考え方はホームページはやっぱり重要｜中小企業の信頼性を上げるコツも参考にしてください。

確認を続けるためのチェック表

スマホ対応は、一度確かめたら終わりではありません。ページを更新したとき、写真を差し替えたとき、表を足したときに、新しく崩れることがあります。最後に、繰り返し使えるチェック表をまとめます。

確認のときは、気になった点をスクリーンショットとともに一か所にためておくと、まとめて直したり、まとめて頼んだりできます。

パソコンで「きれい」は、スマホで「使える」とは限らない。自分の指で押して、初めて分かることがある。

まとめ

ホームページのスマホ対応は、特別な道具がなくても、自分のスマホで確かめられます。お客様と同じ入り口から開き、全ページを指で操作しながら、文字の大きさ、ボタンの押しやすさ、横スクロール、画像の欠け、電話リンクの5点を見ていきます。パソコンのブラウザに入っているデバイスモードを使えば、いろいろな画面の幅をまとめて下見できますが、押しやすさや発信は実機でしか確かめられません。どれくらいスマホで見られているかは、世間の数字ではなく、サーチコンソールやアナリティクスで自店のデータを確かめるのが確実です。直すときは、来店や問い合わせに直結するところから手を付け、元に戻せない作業は無理をせず頼む、と線を引いておけば安全です。

当スタジオの維持費のベーシックには、月1回の「ページの修正」（管理画面以外のページ1ページ分。写真の差し替えや文章の手直しなど）が含まれています。保守の内容は格安パッケージに載せていますので、スマホで気になる箇所が見つかったときは、どこまで対応できるかも含めてお問い合わせからご相談ください。