ホームページのスマホ対応とは？スマホで崩れる原因と確かめ方・直し方

スマホ対応とは？

スマホ対応とは、ホームページをスマホで開いたときに、文字や画像、ボタンが画面の幅に合わせて表示され、拡大や横スクロールをしなくても読めて使える状態にすることです。「モバイル対応」「モバイルフレンドリー」とも呼ばれます。

スマホ対応の作り方には、画面の幅に合わせて同じページの組み方が変わる「レスポンシブ」と、スマホ用に別のページを用意する方法などがあります。Google は、実装と維持が最も簡単な作り方として、レスポンシブを勧めています。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-16 スマホ対応」にあたります。77's Check!! の「No.44 モバイル操作不能要素なし（スマホで押せない・重なる要素がないか）」も、近い内容を確かめる項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

スマホ対応で確かめる4つの観点

スマホ対応は「崩れていないか」だけで決まるものではありません。次の4つの観点がそろって、はじめてスマホで使えるホームページになります。

4つ目の「中身がそろう」は、見落とされやすい観点です。スマホで見やすくするために説明を減らすと、スマホで見る人に必要な情報が届かなくなるうえ、後で説明するように検索での扱いにも関わります。

スマホ対応ができていないと、何が起きるか

スマホ対応ができていないと、スマホで開いた人は、読む前に拡大や横スクロールの手間を求められ、内容を確かめる前にページを閉じてしまうことがあります。会社名で検索した取引先や、紹介を受けて調べたお客様が、最初に見る画面が崩れていれば、それがそのまま会社の印象になります。

スマホで見る人は少数派ではありません。総務省の「令和7年版 情報通信白書」によると、2024年の通信利用動向調査で、インターネットの利用に使う端末（個人）はスマホが74.4％で、パソコンの46.8％を27.6ポイント上回っています。

検索の面でも、スマホでの表示は大切です。Google は、スマホ向けのクローラーで取得したスマホ版の内容を、検索の登録と順位付けに使っています（モバイルファースト インデックス）。そのうえで、パソコン版とスマホ版で主要な内容、見出し、構造化データ、タイトルと説明文、画像の代替テキストをそろえるよう案内しています。Google 検索セントラルのページ エクスペリエンスの説明でも、「コンテンツはモバイル デバイス上で適切に表示されていますか」が自己評価の質問の1つに挙げられています。

この項目は、社内のパソコンで更新作業をしていると気づきにくいのが特徴です。更新した担当者がパソコンでしか確かめていない、スマホで見るのは社長だけ、ということもよくあります。取引先やお客様と同じように、スマホで見ることが確かめるときの出発点になります。

自社のホームページで確かめる方法

スマホ対応は、自分のスマホで主なページを開いて見ることで、まず確かめられます。そのうえで、無料の道具を使うと、見ただけでは分かりにくい点も確かめられます。

1. 自分のスマホで、主なページを順に開く
   トップ、サービス、料金、会社概要、問い合わせの5ページほどを、取引先やお客様が見そうな順に開いてください。横にはみ出す部分がないか、拡大しないと読めない文字がないか、押しにくいボタンがないかを見ます。
2. スマホを横向きにし、別の機種でも見る
   スマホを横向きにしても崩れないかを確かめます。社内に画面の大きさが違う機種や、iPhone と Android の両方があれば、それぞれで開いてみます。
3. パソコンとスマホで、中身を見比べる
   同じページをパソコンとスマホで開き、見出しや説明、画像がスマホで省かれていないかを見ます。スマホではメニューの中に入っているだけ、という場合は、メニューを開いてたどり着けるかも確かめます。
4. PageSpeed Insights で調べる
   Google が無料で公開している PageSpeed Insights にページの URL を入れると、Chrome の Lighthouse という道具でスマホでの表示を調べた結果が見られます。タップする場所が小さすぎないか、といった点も確かめられるので便利です。なお、文字の大きさの監査は Lighthouse 13 で外されたため、文字が読みやすいかは自分のスマホで確かめます（文字が小さすぎないの記事で詳しく説明しています）。以前 Google が公開していた「モバイル フレンドリー テスト」は、現在は提供が終わっています。
5. パソコンの Chrome で、スマホの画面を再現する
   パソコンの Chrome で、右クリックの「検証」から開く開発者ツールには、スマホの画面の大きさを再現する機能があります。手元にない機種の大きさで、表示を確かめられます。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。スマホ対応のほかに、ファーストビューや会社名明記など、ホームページの基本となる項目をあわせて確かめられます。

ホームページがスマホで崩れる、よくある原因

ホームページがスマホで崩れる原因は、大きく分けて4つあります。多くは、作った時期の作り方や、あとから足したページ・部品によるもので、作り方の良し悪しというより、スマホで確かめる手順がなかったことから起きます。

スマホで見ることを前提にしない作りのまま

スマホが広まる前に作られたホームページは、パソコンの画面の幅を前提に組まれていることがあります。ページに画面の幅を伝える指定（viewport のメタタグ）がないと、スマホのブラウザはページをパソコンの幅（約980px）で組み立てて縮めて表示するため、文字が小さくなり、拡大しないと読めなくなります。

表・画像・地図などが、固定の幅で入っている

ページの大部分はスマホに合っていても、料金表や比較表、大きな画像、埋め込んだ地図や動画などが、パソコン向けの決まった幅のまま入っていると、その部分だけ画面からはみ出します。あとから管理画面で足したページや、ほかの道具から貼り付けた表で起きやすい崩れです。

ボタンやリンクが小さく、近すぎる

パソコンではマウスで押せる小さなボタンやリンクも、スマホでは指で押しにくくなります。Chrome の Lighthouse では、押す場所の大きさが48×48ピクセルあれば指摘されず、押す場所どうしの間隔は8ピクセルから始めるとよい、というのが目安です。メニューやフッターのリンクが詰まって並んでいると、押し間違いが起きやすくなります。

スマホでは内容を省いている

スマホの画面を見やすくするために、説明文や画像、表をスマホでは表示しない作りにしていることがあります。Google はスマホ版の内容を検索の登録と順位付けに使うと説明しており、web.dev でも、画面の幅だけを理由に内容を隠すと必要な情報が届かなくなるおそれがあるとしています。

スマホ対応の直し方（対策は3つ）

スマホ対応は、主なページの今の状態を書き出し、作りを直し、更新のたびにスマホで確かめる手順を持つことで改善できます。必ずしも作り直しが要るとは限らず、崩れている部分だけを直せば済む場合もあります。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：主なページのスマホでの状態を、表にまとめる

最初にすることは、確かめ方の手順1〜3で見たことを、表にまとめることです。表の形は「ページ／はみ出す部分／読みにくい文字／押しにくいボタン／スマホで省かれている内容／画面の写し」がおすすめです。気づいたところは、スマホの画面を写して残しておくと、制作会社に一度で伝わります。

対象は、トップ、サービス、料金、会社概要、問い合わせから始め、問い合わせにつながりやすいページを優先します。PageSpeed Insights の結果も、ページごとに控えておくと、直す前と後を比べられます。

目安として、主なページ5〜10枚分の表づくりは、担当者1人で1〜2時間ほどです。自社で行えば費用はかかりません。

対策2：崩れている部分を、制作会社に直してもらう

作りを直すのは、制作会社に頼みます。対策1の表を渡せば、どのページのどこを直したいかが一度で伝わります。

頼むことは主に4つあります。1つ目は、全ページに画面の幅を伝える指定（viewport のメタタグ）が入っているかを確かめ、なければ入れてもらうことです。2つ目に、表や画像、地図、動画が画面の幅に収まるようにしてもらいます。表は、スマホでは表の枠の中だけを横にずらして読める形にする方法もあります。3つ目は、ボタンやリンクを指で押しやすい大きさと間隔にすることです。電話番号は、押すと電話がかけられる形にしてもらうと、スマホからの問い合わせの手間が減ります。4つ目に、スマホで省いている内容があれば、表示の工夫はしたまま、パソコンと同じ内容が載るようにしてもらいます。

費用と手間は、ホームページの作りによって変わります。レスポンシブで作られたホームページなら、崩れている部分の修正で済むことが少なくありません。スマホで見ることを前提にしない作りの場合は、主なページから順にレスポンシブにするか、作り直すかを判断することになります。まず今の作りを確かめてもらい、作業の範囲と費用を相談するのが確実です。

対策3：ページを足したり変えたりするときに、スマホで確かめる

一度直しても、新しいページや表、画像、バナーを足すたびに、スマホで崩れる部分が出ることがあります。崩れを防ぐポイントは3つです。

1つ目は、ページを公開する前に、必ずスマホで開いて確かめることを、社内の手順に入れることです。制作会社に更新を頼むときの依頼文にも、スマホでの確認を入れておくと確実です。2つ目に、表や画像を管理画面から入れるときは、スマホで横にはみ出していないかを公開前に見ます。3つ目は、四半期に1回など決まった時期に、対策1の表の主なページをスマホで開き直し、PageSpeed Insights の結果も見直すことです。

制作会社に頼むときの伝え方

制作会社に頼むときは、対策1の表とスマホの画面の写しを添えて、「どのページの、どの部分が、スマホでどう見えているか」を伝えると、確認が一度で済みます。スマホでの崩れは、作った時期の作り方や、あとから足したページによって起きやすいだけなので、頼めば直せる部分です。誰が悪いかではなく、これからスマホで確かめる手順を一緒に決めることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• ホームページがレスポンシブで作られているか、全ページに viewport のメタタグが入っているか
• 表・画像・地図・動画など、画面の幅からはみ出す部分の一覧
• ボタンやリンク、メニューを、指で押しやすい大きさと間隔にできるか
• スマホで表示していない説明や画像があるか
• 直す前と後の PageSpeed Insights の結果

スマホ対応とあわせて確かめたい項目

スマホ対応は、ホームページを安定して見てもらうための土台を整える項目（サイト基礎力）の1つです。スマホでの見やすさや使いやすさに関わる、次の項目もあわせて確かめておくと、改善の効果を確かめやすくなります。

• ファーストビュー：スマホで開いて最初に見える画面に、何のページかが分かる見出しが入っているか。
• スマホで押せない・重なる要素：スマホでボタンが押せない、要素が重なって隠れている、といったことがないか。
• 文字が小さすぎない：スマホでも拡大せずに読める文字の大きさになっているか。
• Core Web Vitals：表示の速さや、読み込み中の画面のずれなど、ページの使い心地の指標が良好か。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• スマホ対応とは、スマホで開いたときに、拡大や横スクロールをしなくても読めて使える状態にすることです。
• 総務省の2024年の調査では、インターネットの利用に使う端末はスマホが74.4％で、パソコンの46.8％を上回っています。
• Google は主にスマホ版の内容を検索の登録と順位付けに使い、パソコン版と内容をそろえるよう案内しています。
• 自分のスマホで主なページを開き、PageSpeed Insights やパソコンの Chrome の開発者ツールで仕上げに確かめます。
• 状態は自社で表にまとめ、崩れている部分は制作会社に直してもらい、公開前にスマホで確かめる手順で保ちます。

スマホ対応は、パソコンで更新作業をしていると気づきにくい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、スマホ対応を含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。