ホームページのスマホ対応とは？確認方法と改善の進め方4手順

ホームページのスマホ対応とは、スマホの画面で表示できることではなく、文字の大きさ・ボタンの押しやすさ・横スクロールの有無まで含めてスマホで問題なく読めて操作できる状態にすることです。長く使われてきたGoogleのモバイルフレンドリーテストは2023年12月に提供を終了しており、現在の確認手段は変わっています。この記事では、確認方法、4つの対応方法の選び方、優先して直す項目、改修か作り直しかの判断基準までを順に整理します。

ホームページのスマホ対応とは？「スマホで見られる」と何が違う？

スマホ対応とは、スマートフォンの画面サイズに合わせてレイアウトと文字サイズが調整され、指で無理なく操作できる状態を指します。PC向けに作られたページはスマホでも一応表示されますが、全体が縮小されて文字が読めず、拡大しないとリンクを押せません。この状態は表示できているだけで、対応済みとは言えません。

判断の分かれ目になるのは、拡大操作が必要かどうかです。ページを開いた直後の状態で本文が読め、電話番号や問い合わせボタンをそのまま押せるなら対応できています。ピンチ操作で拡大しないと読めない、横方向にスクロールしないと右端が見えない場合は未対応と考えて問題ありません。

中小企業のサイトでよくあるのは、トップページだけスマホ向けに整えられていて、会社概要や事例の下層ページがPC用のまま残っているパターンです。検索から入ってくる人は下層ページに着地することが多いため、トップだけ直しても効果が出にくくなります。確認は必ず複数ページで行ってください。

実際の支援現場では、担当者が自分のスマホでトップページを開いて「見えているから問題ない」と判断していた例が何度もありました。使っている端末が大画面だったり、ブックマークから開いていたりすると、検索経由の見え方と違う場合があります。確認は素の状態から行うのが確実です。

• 拡大しなくても本文が読める
• 横スクロールしなくても右端まで収まる
• 電話番号・問い合わせボタンを指でそのまま押せる
• 下層ページまで同じ状態になっている

なぜスマホ対応が必要なのか｜PC用Googlebotのクロールは終了済み

検索面での理由がはっきりしています。Googleは2024年7月5日以降、モバイルファーストインデックスへの移行完了に伴い、パソコン用Googlebotによるクロールを終了しました。現在はスマートフォン用のGooglebotが見た内容が評価の対象になるため、スマホで正しく表示・取得できないページは検索での扱いが不利になります。

閲覧側の事情も同じ方向です。BtoBの会社でも、移動中や商談前に会社名を検索して確認する行動はスマホで起きます。名刺交換のあとに社名で検索して着地したページが読みにくければ、その時点で確認は止まります。取引先の与信確認や採用応募の下調べも、多くがスマホ経由です。

問い合わせ導線でも差が出ます。スマホでは電話番号をタップして発信でき、フォームは入力欄が縦に並んでいるほど離脱が減ります。PC用の横並びレイアウトのままだと、入力途中で拡大とスクロールを繰り返すことになり、途中でやめる人が増えます。当社（UniGain）がLPの導線を改善した事例では、CV率が1.2%から2.8%に改善しました。詳しい内容は事例ページで紹介しています。

• 2024年7月5日以降、PC用Googlebotのクロールは終了（Google公式発表）
• 評価対象はスマホ用Googlebotが取得した内容
• BtoBでも社名検索・下調べはスマホで起きる
• 電話タップとフォーム入力のしやすさが問い合わせ数に直結する

自社サイトがスマホ対応か確認する方法｜モバイルフレンドリーテストは終了

確認手段は数年前から変わっています。長く使われてきたGoogleのモバイルフレンドリーテスト、Search Consoleのモバイルユーザビリティレポート、Mobile-Friendly Test APIは、2023年12月1日にいずれも提供を終了しました。現在も「モバイルフレンドリーテストで確認しましょう」と書かれた解説が残っていますが、そのツールはもう使えません。

代わりに使うのがPageSpeed InsightsとLighthouseです。PageSpeed InsightsにURLを入れて「モバイル」タブを見ると、表示速度に加えてユーザビリティやアクセシビリティの指摘が並びます。文字が小さい、タップ要素が近すぎる、ビューポートの設定が無いといった項目は、ここで拾えます。

レイアウト崩れの確認は、Google Chromeのデベロッパーツールが速いです。ページ上で右クリックして検証を開き、左上のデバイスツールバーを有効にすると、画面幅を切り替えながら見え方を確認できます。幅375ピクセル前後（iPhoneの標準的な幅）で崩れが出ないかを見ておくと、実機での事故が減ります。

最後は実機での確認です。ツールで問題が出なくても、指で押したときの余白の狭さや、固定ヘッダーが本文を隠す挙動は実機でないと分かりません。自分のスマホでシークレットタブから社名を検索し、下層ページまで一通り触る。この5分の確認が、いちばん漏れを見つけます。

スマホ対応にする4つの方法と選び方

対応方法は大きく4つあります。1つのHTMLで画面幅に応じてレイアウトを変えるレスポンシブデザイン、PC用とスマホ用でURLを分ける方式、既存サイトを自動でスマホ向けに変換するツール、WordPressなどCMSのテーマやプラグインを入れ替える方法です。現在の標準はレスポンシブで、Googleもこの方式を推奨してきました。

URLを分ける方式は、PC用とスマホ用で内容がずれたり、正規URLの指定を誤って検索評価が分散したりする管理コストがかかります。既存サイトがこの方式で運用されている場合は、リニューアルのタイミングでレスポンシブに寄せる判断が現実的です。自動変換ツールは短期の応急処置としては使えますが、デザインの自由度と表示速度で制約が出ます。

選び方の基準は、サイトの規模と更新頻度、そして残りの利用予定年数です。ページ数が少なく数年使い続けるなら、レスポンシブで作り直したほうが総額は安く収まります。ページ数が多く数か月後に全面リニューアルを控えているなら、その間だけ自動変換で凌ぐ選択もあります。

優先して直すべきスマホ表示のチェック項目

全部を一度に直す必要はありません。効果が出やすい順に手を付けます。最優先はビューポートの指定です。HTMLのhead内にビューポートの記述が無いと、ブラウザはPC幅で描画してから縮小表示するため、文字が読めない状態になります。ここが抜けているサイトは、まずこの1行から直します。

次が本文の文字サイズと行間です。スマホでの本文は16ピクセル前後を目安にし、行間は文字サイズの1.5倍程度を確保すると読みやすくなります。PC用の14ピクセル以下のまま流用されていると、拡大しないと読めないページになります。見出しと本文のサイズ差も付けておきます。

3つ目がタップ領域です。リンクやボタンは指で押せる大きさ（おおよそ44ピクセル四方以上）を確保し、隣接する要素との間隔を空けます。並んだリンクが密集していると誤タップが増え、戻る操作を繰り返して離脱につながります。電話番号はタップで発信できるリンクにしておきます。

4つ目が横スクロールの解消です。固定幅で指定された表や画像、長いURL文字列が原因で、ページ全体が横に広がることがあります。デベロッパーツールで幅を絞ると、どの要素がはみ出しているかを特定できます。表は横スクロール領域に収める、画像は最大幅を100%にする、といった対処で解消します。

• ビューポートの指定があるか（無ければ最優先で追加）
• 本文の文字サイズは16ピクセル前後、行間は1.5倍程度
• ボタン・リンクは44ピクセル四方以上、間隔を空ける
• 横スクロールを起こす固定幅の表・画像を直す
• 電話番号はタップで発信できるリンクにする
• フォームの入力欄は縦一列、入力タイプを適切に指定する

改修で済むか作り直しか｜進め方と費用の考え方

判断の目安は、ビューポートの追加と文字サイズ・タップ領域の調整で収まるかどうかです。デザインの骨格はそのままで表示だけ整えれば済むなら、CSSの追加改修で対応できます。テーブルでレイアウトが組まれている、固定幅前提で全ページが作られているといった場合は、部分改修を重ねるほど工数がかさみます。

作り直しに寄せる判断材料は3つです。サイトの公開から5年以上経っている、更新のたびに制作会社へ依頼が必要でスピードが出ない、問い合わせ数が想定に届いていない。これらが重なるなら、スマホ対応だけを切り出すよりリニューアルとして設計し直したほうが、結果的に費用対効果が高くなります。

当社（UniGain）ではLP制作をライトプラン49,800円（税別）から、スタンダードプランを98,000円（税別）から提供しており、ホームページ制作は規模に応じた個別見積もりで対応しています。まずスマホからの流入がどのページに着地しているかを確認し、影響の大きいページから直す進め方をおすすめします。詳しい費用の考え方はホームページ制作費用の記事にまとめています。

• 表示の調整で収まるならCSS改修で対応できる
• 固定幅前提の設計・テーブルレイアウトは作り直しの検討対象
• 公開5年以上・更新が遅い・問い合わせ不足が重なればリニューアル
• 着地の多いページから優先して直す