取引先や社内から「うちのサイト、スマホ対応してる?」と聞かれて、即答できない。あるいは「スマホでも見られるから対応済み」と答えたが本当に合っているのか自信がない。この記事では、スマホ対応の判定基準を専門知識なしで確認する方法と、対応していなかった場合の改修費用の相場、そして優先順位の付け方を解説します。
スマホで表示できることと対応していることは別
まず前提を整理します。「スマホで見られる」と「スマホ対応している」は同じ意味ではありません。
PC用の画面が縮小表示されているだけの状態がある
スマホ対応していないサイトも、スマートフォンで開けば表示されます。ただしそれはPC用の横幅1200ピクセルの画面を、そのまま縮めて押し込んでいるだけです。文字は虫眼鏡がないと読めず、ボタンは指で押せず、ユーザーは指で拡大しながら閲覧することになります。(見られることと、使えることは別問題です)
スマホ対応しているサイトの条件
- 拡大しなくても本文が読めるサイズで表示される
- 横スクロールしなくても画面内に収まる
- ボタンやリンクが指で正確に押せる大きさと間隔になっている
- メニューがスマートフォン用の形式(ハンバーガーメニュー等)になっている
- 電話番号がタップで発信できる
- フォームの入力欄が指で操作できる大きさになっている
Googleはモバイル版のページを基準に評価している
Googleは、検索の評価にモバイル版のページを使う方式を採用しています。スマートフォンで正しく表示されないサイトは、検索評価の面でも不利になります(出典 Google 検索セントラル モバイル ファースト インデックス)。
確認は自分のスマートフォンで開くだけで足りる
判定に専門ツールは不要です。
実機で開いて3つを確認する
自分のスマートフォンで自社サイトを開き、以下を確認してください。1分で判定できます。
| 確認項目 | 対応している状態 | 対応していない状態 |
|---|---|---|
| 本文の文字 | 拡大せずに読める | 拡大しないと読めない |
| 横方向 | 画面内に収まっている | 横スクロールが発生する |
| メニュー | スマホ用の形式になっている | PCと同じ横並びメニューが縮んでいる |
| ボタン | 指で正確に押せる | 小さすぎて隣を押してしまう |
| 電話番号 | タップで発信できる | ただの文字で反応しない |
PCブラウザでも簡易的に確認できる
PCのブラウザでサイトを開き、ウィンドウの幅を狭くしていってください。幅を狭めた際にレイアウトが自動的に切り替われば、レスポンシブ対応(画面幅に応じて表示が変わる方式)がされています。切り替わらずに横スクロールバーが出れば、未対応です。
PageSpeed Insightsでも判定材料が得られる
PageSpeed Insightsのモバイル版で測定すると、スマートフォンでの表示状態のスクリーンショットが表示されます。ここで文字が極端に小さい、要素がはみ出しているといった問題が見つかります。
部分的に崩れている場合は全面改修ではなく個別修正で足りる
「一部だけ崩れている」というケースが実務では最も多く、対応方針もここで分かれます。
表が横にはみ出すのは最も多い症状
料金表や比較表が画面からはみ出し、横スクロールが発生するパターンです。これはCSSの調整で対応でき、表の部分だけ横スクロールさせる、あるいはスマートフォンでは縦並びに切り替える処理を追加します。1箇所あたり数千円から2万円程度の作業です。
画像がはみ出す場合も同様に軽微
記事内の画像が画面幅を超えている場合、画像の最大幅を画面幅に合わせる指定を追加するだけで解決します。サイト全体に一括で適用できるため、費用は低く抑えられます。
崩れている箇所を洗い出してから見積もりを取る
制作会社に相談する前に、崩れている箇所をスクリーンショットで記録しておいてください。「全体的に見づらい」と伝えると全面リニューアルの提案が返ってきますが、「この3ページのこの部分が崩れている」と伝えれば個別修正の見積もりになります。(伝え方ひとつで、見積もりが数十倍変わります)
「スマホ対応していないので全面リニューアルが必要です」という提案を受けた場合、崩れている箇所が具体的に何箇所あるのかを確認してください。数箇所の修正で済む場合と、構造から作り直しが必要な場合では、費用が2桁変わります。
改修費用の相場は対応方法によって大きく異なる
スマホ対応の方法は3つあり、それぞれ費用と適性が異なります。
| 対応方法 | 費用の目安 | 向いているケース | 注意点 |
|---|---|---|---|
| 部分的なCSS修正 | 1万円〜10万円 | 大部分は対応済みで一部だけ崩れている | 根本的な構造問題は解決しない |
| 既存テーマのレスポンシブ化 | 15万円〜50万円 | デザインは維持したい、構造は流用可能 | 古い構造では作業量が読みにくい |
| テーマ変更による作り直し | 30万円〜100万円 | 10年以上前の構造、テーブルレイアウト | デザインは変わる |
| 全面リニューアル | 60万円〜300万円 | 内容も含めて刷新したい | コンテンツ移行の工数が別途必要 |
2015年より前に制作されたサイトは作り直しになることが多い
スマートフォン対応が一般化する以前に作られたサイトは、レイアウトをテーブルタグで組んでいるなど、レスポンシブ化が困難な構造になっている場合があります。この場合、部分修正で対応するより作り直した方が安く、結果も良くなります。
WordPressで市販テーマを使っている場合は安く済む
WordPressで比較的新しい市販テーマを使っている場合、テーマ自体がスマホ対応しているため、崩れているのはカスタマイズ部分だけである可能性が高いです。この場合、数万円の調整で解決することがほとんどです。
優先して直すべき箇所は問い合わせ導線
予算が限られている場合、どこから直すかの判断基準です。
電話番号のタップ発信は最優先で対応する
クリニック・工務店・飲食店のように電話問い合わせが主流の業種では、電話番号をタップして発信できるかどうかが直接売上に影響します。この対応は作業として軽微で、効果が最も分かりやすい改修です。
問い合わせフォームの入力しやすさを確認する
スマートフォンでフォームを実際に入力してみてください。入力欄が小さすぎる、送信ボタンが押しにくい、エラー表示が見えない、といった問題があれば、そこで離脱が発生しています。問い合わせが少ない原因が、フォームが使えないことだったという例は珍しくありません。
アクセス・地図ページの見やすさ
実店舗を持つ事業では、アクセスページがスマートフォンで見られているケースが多くあります。地図が画面からはみ出している、住所がコピーできない、といった問題は来店の障壁になります。
優先順位の考え方
- 電話番号のタップ発信
- 問い合わせフォームの操作性
- トップページの表示崩れ
- アクセス・料金など問い合わせ直前に見るページ
- サービス紹介ページ
- その他の下層ページ
最後に
スマホ対応の確認は、自分のスマートフォンでサイトを開いて、拡大せずに読めるか、横スクロールが出ないか、ボタンが押せるかを見るだけで判定できます。崩れている箇所が数箇所なら数万円の修正で済み、構造から作り直す必要があるのは、かなり古いサイトに限られます。「全面リニューアルが必要」と言われたら、まず崩れている箇所の数を確認してください。
Web管理では、月額1万円からホームページの運用保守を代行しています。スマートフォン表示の診断、部分的な表示崩れの修正、改修範囲の見積もり精査までお手伝いできます。「リニューアルを提案されたが妥当か判断できない」というご相談も歓迎します。お気軽にお問い合わせください。

