こんにちは。
三重県でホームページ制作をしているMYコンサルティング株式会社、代表の宮本です。
「うちのホームページ、スマホで見ると文字が小さくて読めないんだけど」。
「指で広げないと、どこに何が書いてあるか分からない」。
こういうご相談をいただくことがあります。
結論から言うと、それはサイトが「レスポンシブ対応」になっていないのが原因です。
レスポンシブ対応とは、見る人の画面の幅に合わせて、ページの形が自動的に組み替わる作り方のことです。
パソコンでは横並びだったメニューが、スマホでは縦に並び替わる。
そんなふうに1つのページが画面サイズに応じて姿を変える——これがレスポンシブです。
この記事では、あなたのサイトが対応しているかを10秒で確かめる方法、よく混同される「スマホ対応」との違い、そして気になる費用の考え方まで、依頼する側の目線で解説します。
スマホで文字が小さい・崩れるのは「非対応」のサイン
まず、非対応のサイトをスマホで開くと何が起きるかを見てください。
非対応のサイトは、パソコン用の見た目をそのまま縮めて表示します。
紙のA3のポスターを、そのままハガキサイズに縮小コピーしたようなものです。
内容は全部載っていますが、文字は虫めがねが必要なくらい小さくなります。
すると訪問した人は、こうなります。
- 指で広げて（ピンチアウトして）、拡大しながら読む
- 読んでいるうちに横にずれて、行を見失う
- 電話番号のボタンが小さすぎて、押しても反応しない
- 面倒になって、閉じる
お店にたとえるなら、入口の扉が固くて開けにくい状態です。
商品もサービスも素晴らしいのに、入口で帰られてしまっている。
レスポンシブ非対応というのは、そういう損の仕方をします。
【10秒診断】自分のサイトが対応しているか確かめる方法
専門ツールは必要ありません。
パソコンがあれば、その場で確かめられます。
手順
1. パソコンで自分のサイトを開く
2. ブラウザの窓の右端をマウスでつまんで、左へドラッグする
3. 窓を細長くしていったときの変化を見る
ここでメニューが縦に並び替わったり、横並びの写真が1列になったりと、レイアウトそのものが組み替われば、レスポンシブ対応済みです。
一方、全体がただ小さくなるだけ・右側が見切れて横スクロールが出る場合は、未対応の可能性が高いです。
もちろん、スマホで実際に開いてみるのが一番確実です。
開いた瞬間に文字が読めるサイズなら対応済み、指で広げないと読めないなら未対応、と考えてください。
以前は「モバイルフレンドリーテスト」というGoogleの公式チェックツールがありましたが、2023年12月に提供が終了しています。
Search Consoleの「モバイルユーザビリティ」レポートも同時に廃止されました。
古い解説記事では今でもこのツールが紹介されていることがありますが、現在は使えません。
上に書いた「自分の目で見る」方法が、いちばん手軽で確実です。
レスポンシブの仕組み【伸び縮みする1着の服】
仕組みは、服にたとえると分かりやすいです。
- レスポンシブ：伸び縮みする1着の服。誰が着ても体型に合う
- 別々に作る方式：Sサイズ用とLサイズ用の2着を用意して、着る人によって出し分ける
ホームページの中身では、ページは1つのまま、画面の幅に応じて表示ルールを切り替えるという作りになっています。
「画面の幅が768ピクセルより狭くなったら、横並びをやめて縦に積む」といった条件をあらかじめ書いておくイメージです。
ここで大事なのは、中身（文章や写真）は1つしかないという点です。
だから更新するときも1回で済みますし、パソコンでは直したのにスマホでは古いまま、という食い違いも起きません。
これがレスポンシブが主流になった一番の理由です。
「スマホ対応」と「レスポンシブ」は何が違う？
混同されやすいのですが、この2つは同じ階層の言葉ではありません。
| 言葉 | 意味 |
|---|---|
| スマホ対応 | 「スマホで見やすい状態」全般を指す、目的の言葉 |
| レスポンシブ | それを実現する手段のひとつ。1つのページで画面幅に合わせる方式 |
つまり、「スマホ対応」というゴールに行く道が何本かあって、そのうち今の主流がレスポンシブ、という関係です。
レスポンシブ以外の道としては、パソコン用とスマホ用でページを分けて作り、アクセスしてきた端末によって出し分ける方式があります。
ひと昔前によく使われた方法です。
ただ、この分ける方式は、更新のたびに2か所を直さなければいけません。
片方だけ直して食い違いが起きる事故も起こりがちです。
Google自身もレスポンシブを推奨しており、今から新しく作るサイトであれば、特別な事情がない限りレスポンシブ一択と考えて問題ありません。
対応しないとどうなる？【2024年7月、Googleの前提が変わりました】
ここは、少し新しい話をします。
Googleは長らく、パソコン用のロボットとスマホ用のロボットの両方でサイトを巡回していました。
ところが2024年7月5日をもって、パソコン用ロボットによる巡回を完全に終了しています。
現在はスマホ用のロボットが見た内容だけで、あなたのサイトが評価されているということです。
言い換えると、スマホでちゃんと見られないサイトは、Googleから見ても「ちゃんと見られないサイト」になりました。
スマホからのアクセスを受け付けられないサイトは、検索結果から外れる可能性もあります。
これに加えて、実際の損失は検索順位よりも訪問者の離脱のほうが大きいです。
- 読む前に閉じられる：文字が小さい時点で「後で見よう」と思われ、その「後で」は来ません
- 電話がかからない：タップしにくいボタンは、それだけで問い合わせの機会損失になります
- お店の印象が下がる：見づらいサイトは「古いお店」「やる気がないお店」という印象につながります
今はお店を探す人のほとんどが、スマホで検索してスマホで判断しています。
スマホでの見え方は、もはや「おまけ」ではなく本番です。
レスポンシブ対応にかかる費用の考え方
「うちのサイトをレスポンシブにしたら、いくらかかりますか？」。
これはよくいただく質問ですが、正直にお答えすると今のサイトの作り次第で、金額が大きく変わります。
ケース1：もともとレスポンシブ前提で作られている場合
一部のページだけ崩れている、スマホのときだけボタンが小さい、といった状態です。
この場合は調整で済むので、比較的軽い作業になります。
ケース2：固定幅で作られた古いサイトの場合
10年ほど前のサイトは、「横幅950ピクセル固定」といった前提で作られていることが多くあります。
この場合、レイアウトの土台から組み直す必要があるため、部分改修が意外と高くつきます。
服でいえば、Lサイズ固定で仕立てた1着を伸縮素材に作り替えるようなもので、結局ほぼ縫い直しになるためです。
古いサイトの場合、改修するより新しく作り直したほうが、安く・速く・きれいに仕上がるケースが多くあります。
作り直せばデザインもスマホ前提の新しいものになり、表示速度やSEOの土台もまとめて新しくできるからです。
「改修ありき」で考えず、両方を見積もって比べるのがおすすめです。
ちなみに当社では、制作するホームページはすべてのプランでスマホ対応（レスポンシブ）を標準に含めています。
オプション扱いにして後から追加費用をいただくことはありません。
スマホでの見え方は今や当たり前の要件であって、追加料金を取る部分ではないと考えているためです。
具体的な金額は料金プランのページに載せています。
制作会社に依頼するとき、確認しておきたいこと
見積もりを取るときに、これだけは聞いておくと安心という点をまとめます。
- スマホ対応は標準か、オプションか：見積書の内訳を確認してください。後から追加になるケースがあります
- スマホでの完成イメージを見せてもらえるか：パソコンのデザイン案だけで進むと、スマホで見たときに窮屈になりがちです
- 実機で確認しているか：パソコン上の疑似表示だけでなく、実際のスマホで確認しているかは仕上がりに直結します
- 公開後に崩れたとき直してもらえるか：保守契約の範囲に入っているかを確認しておくと安心です
特に1つ目は要注意です。
「ホームページ制作一式 ○○円」とだけ書かれた見積書だと、スマホ対応が含まれているかどうかが分かりません。
契約前に一言確認しておくだけで、後のトラブルを防げます。
💡 レスポンシブは「土台」です
崩れずに表示されるようになったら、次は「読みやすさ・押しやすさ・速さ」の仕上げです。
続きはスマホ最適化の解説記事でどうぞ。
よくある質問
自分のサイトが対応しているか確認する方法は？
パソコンでブラウザの窓を細くしてみてください。
レイアウトが組み替われば対応済み、ただ小さくなるだけなら未対応です。
なおGoogleのモバイルフレンドリーテストは2023年12月に終了しているため、現在は自分の目で確認するのが基本です。
「スマホ対応」と「レスポンシブ」は同じ意味ですか？
スマホ対応が「目的」、レスポンシブがそれを実現する「手段のひとつ」です。
現在はレスポンシブが主流で、Googleも推奨しています。
対応しないとどうなりますか？
訪問者が読みづらさで離脱します。
さらにGoogleは2024年7月5日にパソコン用ロボットの巡回を終了しており、今はスマホでの見え方がそのまま評価につながります。
費用はいくらかかりますか？
今のサイトの作り次第で大きく変わります。
固定幅で作られた古いサイトは、改修より作り直しのほうが安く済むことが多いです。
なお当社では全プランでスマホ対応を標準に含めています。
タブレットにも対応が必要ですか？
多くの店舗サイトではスマホとパソコンの2段階で十分です。
タブレットにはどちらかのレイアウトが自動的に適用されます。
まとめ
スマホで文字が小さい・崩れるのは、サイトの故障ではなくレスポンシブ非対応のサインです。
- レスポンシブ＝画面幅に合わせてページの形が自動で組み替わる作り方
- 確認はパソコンのブラウザ幅を狭めるだけ。10秒でできる
- 「スマホ対応」は目的、「レスポンシブ」はその手段
- 2024年7月以降、Googleはスマホでの見え方だけでサイトを評価している
- 古いサイトは、部分改修より作り直しのほうが安く済むことが多い
なお、スマホで見たときに「更新したはずの内容が古いまま」という場合は、レスポンシブとは別の原因——キャッシュのことが多いです。
そちらはキャッシュの解説記事にまとめています。
また、アドレスバーに「保護されていない通信」と出ている場合はSSLの解説記事もあわせてご覧ください。
「うちのサイト、スマホでどう見えているか分からない」という方は、お気軽にご相談ください。
現状を無料で確認いたします。