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

ホームページのスマホ対応とは、スマートフォンで見たときに文字や写真が適切なサイズで表示され、指で操作しやすいレイアウトになっている状態を指します。Googleは検索順位をスマートフォン版ページの内容で判断するモバイルファーストインデックスを採用しており、対応の有無は検索流入に直結します。この記事では、自社サイトのスマホ対応を確認する具体的な手順と、レスポンシブ・別URL・動的配信という3つの対応方式の選び方、スマホで見やすくする改善ポイントを解説します。

ホームページのスマホ対応とは？なぜ今も重要なのか

スマホ対応とは、パソコン用に作ったページをそのまま縮小表示するのではなく、スマートフォンの画面幅に合わせて文字サイズ・レイアウト・ボタンの配置を最適化することです。実装方法は主に3つあり、詳しくは後述しますが、現在新規に制作するサイトの大半はレスポンシブウェブデザイン（画面幅に応じて1つのHTML・CSSでレイアウトを自動調整する方式）を採用しています。

スマホ対応が重要視される最大の理由は、Googleの検索評価の仕組みにあります。Googleは2023年にモバイルファーストインデックス（MFI）への移行が完了したと発表しており、検索順位はパソコン版ではなくスマートフォン版のページ内容を基準に決まります。スマホ表示が崩れている、または情報が省略されているサイトは、パソコン版がどれだけ整っていても検索評価で不利になります。

スマホ対応が不十分なサイトには、共通して見られる症状があります。次のいずれかに心当たりがある場合は、対応が不十分な可能性が高く、放置すると検索順位だけでなく、実際の問い合わせ機会も日常的に失っていることがあります。このあとの手順で一度確認しておくことをおすすめします。

• 文字が小さく、拡大しないと読めない
• 横スクロールしないとページ全体が見えない
• リンクやボタンが隣同士で押し間違えやすい
• 表示に時間がかかり、途中で離脱してしまう

自社サイトのスマホ対応はどう確認する？3つの手順

かつてはGoogleの「モバイルフレンドリーテスト」にURLを入力するだけで診断できましたが、このツールとSearch Consoleの「モバイルユーザビリティ」レポートは2023年12月1日に提供が終了しています。現在は複数のツールを組み合わせて確認します。

最も確実なのは、実際のスマートフォンで自社サイトを開いて操作することです。文字を拡大せずに読めるか、メニューやボタンを迷わずタップできるか、フォームの入力欄が使いやすいかを、初めて訪れたお客様のつもりで一通り確認します。可能であればiPhoneとAndroidの両方で見ておくと、機種依存の表示崩れにも気づけます。

実機がすぐに用意できない場合は、Google Chromeの検証ツール（右クリックから「検証」を選び、画面上部のスマホ・タブレットのアイコンをクリック）で、画面幅を変えながら表示を確認できます。パソコン1台で複数の画面サイズを素早く試せるため、制作中の動作確認にも向いています。検証ツールを開かなくても、ブラウザのウィンドウ枠を手でつかんで左右に狭めるだけで、表示がスマホ向けに切り替わるかどうかはおおまかに確認できます。

総合的な品質チェックには、PageSpeed InsightsでURLを入力し、モバイルタブのスコアを確認する方法もあります。表示速度の指標が中心ですが、スコアの内訳からタップ領域や文字サイズの問題に気づけることもあります。表示速度そのものを詳しく改善したい場合は、表示速度改善の記事で手順をまとめています。

スマホ対応の3つの方式｜レスポンシブ・別URL・動的配信

スマホ対応の実装方式には、レスポンシブウェブデザイン・スマホ専用サイト（別URL）・動的配信の3種類があります。Googleはどの方式でも評価対象になるとしていますが、運用のしやすさから現在はレスポンシブが標準的な選択肢になっており、迷ったらこの方式を選んでおけば大きな失敗は避けられます。

スマホ専用サイトは、パソコン用とスマホ用でURLもファイルも分けて用意する方式です。ガラケー時代から使われてきた古い方式で、更新のたびに2つのサイトを同じ内容に保つ手間がかかります。新規に選ぶ理由は少なくなっていますが、既存サイトがこの方式の場合は、レスポンシブへの移行タイミングを制作会社と相談する価値があります。

動的配信は、URLは1つのまま、アクセスした端末に応じてサーバー側で表示内容を切り替える方式です。大規模サイトで使われることもありますが、端末判定の設定を誤ると特定の機種だけ表示が崩れる不具合が起きやすく、原因の切り分けにも手間がかかります。中小企業のサイトで新規に選ぶ場面は多くありません。

スマホで見やすく・使いやすくする改善ポイント

確認の結果、表示が崩れている場合によくある原因の1つが、ページのHTMLに「ビューポート」の指定が入っていないことです。この指定がないと、ブラウザはパソコン向けの幅でページを表示した上で画面に収まるよう自動的に縮小するため、文字が全体的に小さく見えてしまいます。WordPressなど主要なCMSの標準テーマでは通常設定済みですが、独自にカスタマイズしたページでは抜けていることがあります。

文字サイズは、本文が12ピクセル以下だと小さすぎて読みにくく、16ピクセル程度を目安に調整します。ボタンやリンクなどのタップ領域は48×48ピクセル以上を確保し、隣接する要素との間隔も空けます。この数値は、GoogleのLighthouseというツールがスマホ対応の目安として使っている基準です。この基準を下回ると、ページ自体は表示できていても、実際の操作ではタップミスや誤クリックが増え、離脱の原因になります。

導線面では、電話番号をタップでそのまま発信できるようにする、問い合わせボタンをスクロール中も画面に固定表示する、フォームの入力項目を絞るといった対応が効果につながりやすい施策です。当社が支援したLP改善では、スマホでの見やすさとボタン配置を整えたことでCV率が1.2%から2.8%に改善した事例があります（事例ページで公開しています）。

実装の実務では、画面幅の切り替え設定（メディアクエリ）を増やしすぎないことも重要です。パソコン・タブレット・スマホの2〜3段階程度に絞って設定した方が、後からの修正や追加ページの制作で管理しやすくなります。切り替えの基準がページごとにばらばらだと、修正のたびに崩れを見落とすリスクが高まります。

制作会社にスマホ対応を依頼するときの注意点

自社での改修が難しい場合は制作会社に依頼することになりますが、見積もり前に確認しておきたいのが対応方式です。レスポンシブでの新規制作・リニューアルなのか、既存サイトへの部分的な追加対応なのかで、作業範囲も費用も変わります。対象がトップページだけなのか、下層ページも含めた全ページなのかも明確にしておくと、見積もり後の認識のズレを防げます。

見積もりの相場感は制作会社や仕様によって幅があるため、複数社を比較する際は費用相場の記事も参考にしてください。あわせて、スマホ対応と表示速度は関連する項目のため、対応時に速度面もチェックしてもらえるか確認しておくと、後から別途依頼する手間を減らせます。修正範囲が数ページ程度の部分対応なのか、サイト全体のリニューアルが必要なのかによっても、見積もりの内容と金額は大きく変わってきます。

当社では、ホームページ制作・改修を個別見積もりで承っており、全国オンライン対応で愛知・名古屋の企業は対面での打ち合わせも可能です。スマホ表示が崩れている箇所の確認だけでもご相談いただけますので、気になる点があれば現状のサイトを見ながらお聞かせください。