自社のホームページをスマートフォンで開いたら、文字が画面からはみ出していた。横にスクロールできてしまう。写真が縦に潰れている。パソコンで見ると何ともないのに、スマホだけおかしい――そういう相談を受けることが少なくありません。
厄介なのは、「壊れている」ように見えても、原因によって対処がまったく違うことです。ブラウザを閉じて開き直すだけで直るものもあれば、1行のタグを足すだけのものもあり、逆に作り直さないと直らないものもあります。まず自分で切り分けられれば、制作会社に払う金額も、待つ時間も大きく変わります。
この記事では、スマホでの表示崩れを「閲覧側の一時的な問題」「HTML/CSSの作りの問題」「そもそもスマホ対応していない」の3層に分け、自分で直せるものと外注すべきものを判断できる形で整理します。
結論：崩れの大半は3つのどれか
いきなり答えから書きます。スマホでの表示崩れは、①viewport（ビューポート）の指定が無い・間違っている ②中に固定幅（px）で作られた要素がある ③はみ出している「たった1つの要素」がある、この3つのどれかであることがほとんどです。
①はサイト全体が小さく縮んで表示される、いわゆる「パソコン版がそのまま縮小されている」状態です。②と③は、サイト自体はスマホ向けに作られているのに、特定のページ・特定のブロックだけが画面幅を突き抜けて、横スクロールが発生します。見え方が違うので、まずどちらのタイプかを見分けます。
そして忘れてはいけないのが、ゼロ番目の可能性＝閲覧している側の一時的な問題です。古いキャッシュが残っている、ブラウザの拡張機能が邪魔している、文字サイズを大きく設定している。これらはサイトを直しても直りません。順番としては、この「閲覧側」を先に潰します。
切り分け早見表
スマホでの見え方 | 疑うべき原因 | 対処の層 | 自分で直せるか |
|---|---|---|---|
全体が縮んで、文字が虫めがねサイズ | viewportの指定が無い／固定値になっている | HTMLの作り | △（タグ1行だが要ファイル編集） |
横に少しスクロールでき、右側に余白が出る | はみ出している要素が1つある（画像・表・長いURL） | CSSの作り | ○（場所を特定できれば） |
文字が枠から飛び出している | 長い英数字・URLが折り返されていない | CSSの作り | ○ |
写真が縦長・横長に潰れている | 画像に固定の幅と高さが指定されている | CSSの作り | ○ |
要素が重なる・変な位置に飛んでいる | 絶対配置（position）やfloatの作り込みが残っている | CSSの作り | ×（外注推奨） |
他人のスマホでは正常だった | キャッシュ・拡張機能・文字サイズ設定 | 閲覧側 | ○（サイトは直さなくてよい） |
そもそもメニューがパソコン版のまま | レスポンシブ非対応 | 設計そのもの | ×（改修か作り直し） |
まず1分で切り分ける：サイトの問題か、見ている側の問題か
サイトを触る前に、1分でできる確認を済ませます。ここで崩れが消えるなら、ホームページ本体はおそらく無事です。制作会社に連絡する前に必ずやってください。
手順は4つです。（1）別の人のスマホで同じページを開く。（2）同じ端末の別ブラウザ（iPhoneならSafariとChrome）で開く。（3）シークレット／プライベートウィンドウで開く。（4）ブラウザのキャッシュを削除して開き直す。
(1)で他の端末では正常なら、あなたの端末固有の設定（文字サイズを大きくしている、表示倍率を変えている、拡張機能が入っている）が原因です。(3)のシークレットウィンドウで直る場合は、拡張機能かログイン状態が影響しています。(4)で直る場合は、サイトを更新した直後に古いキャッシュを掴んでいただけで、時間が経てば自然に解消します。
逆に、複数の端末・複数のブラウザ・シークレットウィンドウのすべてで同じように崩れているなら、サイト側の問題で確定です。ここから先の原因7つを順に見ていきます。この確認をせずに「サイトが壊れた」と連絡してしまい、調査費だけかかった、という話は実務でよく聞きます。
原因7つと直し方
ここからは具体的な原因です。それぞれに「技術的な難しさ」「自社でやるか外注か」「費用の目安」を添えます。費用は作業そのものにかかる時間から逆算した目安で、サイトの規模や契約形態によって上下します。
① viewportメタタグが無い／固定幅になっている
これが最も影響が大きく、そして最も直すのが簡単な原因です。スマートフォンのブラウザは、指定が無いページを「幅の広い仮想的な画面」でいったん描画し、それを縮小して表示します。MDNの解説では、たとえば画面幅640pxの端末で、ページが980pxの仮想ビューポートでレンダリングされて640pxに縮小される例が挙げられています。全体が小さく縮んで見えるのはこのためです。
直し方は、HTMLの<head>内に width=device-width, initial-scale=1 を指定したviewportのメタタグを1行入れるだけです。MDNによれば、width=device-widthはビューポートの幅を端末の物理的な幅（CSSピクセル）に合わせ、initial-scale=1はコンテンツを100%の倍率で表示させる指定です。
注意したいのが、タグはあるが中身が固定幅（width=1000 のような書き方）になっているケースです。この場合、どの端末でも1000px幅として描画されるので、やはり縮んで見えます。古いテンプレートを流用したサイトに残っていることがあります。
② 画像に固定幅（px）が指定されている
写真が画面からはみ出す、または縦に潰れて表示される場合、画像に「幅600px・高さ400px」のような固定値が入っているのが典型です。画面幅375pxのスマホに600pxの画像を置けば、当然225px分がはみ出します。
対処はCSS側で、画像の最大幅を親要素に合わせ、高さは自動計算にする指定に変えることです。高さを固定したまま幅だけ可変にすると、今度は写真が潰れます。幅と高さはセットで見直してください。記事本文の画像なら、記事本文全体に一括で効く指定を1つ足すだけで済むことが多く、費用対効果が高い改修です。
③ 長いURLや英数字が折り返されていない
文章の途中に長いURL、メールアドレス、英語の商品型番などがあると、それが1つの「単語」として扱われ、途中で改行されずに枠を突き破ります。日本語の文章はどこでも折り返せるので、この現象は英数字が混ざったときにだけ起きます。
CSSの overflow-wrap で解決します。MDNのoverflow-wrapの解説によれば、初期値の normal は空白などの通常の分割位置でしか改行しないため、分割できない文字列があるとあふれる可能性があります。break-word や anywhere を指定すると、あふれる場合に任意の位置で改行されるようになります。
なお同ページには、word-break とは対照的に、overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ改行を生成する、という注記があります。word-break: break-all は常に文字単位で切るため日本語の読みやすさを損ないます。まず overflow-wrap を試すのが順当です。
④ 表（table）が画面幅を突き破る
料金表・スペック表・比較表は、スマホ崩れの常連です。表は列数分の幅を必要とするため、4列5列の表を375px幅に押し込むと必ずあふれます。しかもページ全体に横スクロールが発生するので、表と無関係な場所まで崩れて見えます。
解決策は2つあります。ひとつは表を横スクロールできる枠に入れて、はみ出しをその枠の中だけに閉じ込める方法。もうひとつはスマホのときだけ表を縦積みのリストに組み替える方法です。前者は実装が軽く、後者は読みやすさが上がる代わりに手間がかかります。料金表のように「比べること」自体が目的の表は、横スクロールを許容したほうが伝わることが多いです。
⑤ positionやfloatの作り込みが残っている
「画面のこの位置に置く」という絶対配置や、古いレイアウト手法であるfloatでの段組みが残っていると、画面幅が変わったときに要素同士が重なったり、想定外の位置に飛んだりします。装飾のリボン、キャンペーンのバッジ、吹き出しなどで起きがちです。
これはページ単位ではなくレイアウトの組み方そのものの問題なので、素人判断で数値をいじると別の場所が崩れます。ここからは制作会社に依頼する領域です。依頼する際は「どのページのどの部分か」を絞って伝えると、調査時間が減って費用も下がります。
⑥ 文字サイズ・Webフォントの指定
見出しの文字が大きすぎて2行に割れ、ボタンからはみ出す。フォントの読み込みに失敗して代替フォントで表示され、文字幅が変わってレイアウトがずれる。こうした「文字起因の崩れ」もあります。パソコンで作って確認したまま、スマホでの見え方を詰めていないと起きます。
対処は、スマホのときだけ文字サイズを小さくする指定を足すか、ボタンや見出しの幅に余裕を持たせることです。装飾的なWebフォントを大量に読み込んでいる場合は、表示速度そのものも悪化しています。崩れと速度をまとめて見直すなら、スマホサイト表示速度を改善する方法もあわせて確認しておくと無駄がありません。
⑦ 古いテーマ・プラグインとブラウザ更新のズレ
「何も触っていないのに、ある日から崩れた」というケースです。WordPressのテーマやプラグインが何年も更新されていないと、ブラウザ側の仕様変更に追従できず、ある時点から表示が壊れることがあります。プラグインの自動更新が走って、その日から崩れた、というパターンもあります。
まず確認すべきは更新履歴です。テーマ・プラグインの最終更新日と、崩れに気づいた日を突き合わせます。数年単位で放置されているなら、個別の修正よりサイト全体の見直しを検討したほうが、結果的に安く済むこともあります。判断材料としてはホームページをリニューアルすべき7つのサインが使えます。
原因別・難易度と費用の目安
原因 | 技術的な難しさ | 自社／外注 | 費用の目安 |
|---|---|---|---|
① viewportの指定 | 低（1行の追加） | ファイルを触れるなら自社 | 1万円前後〜 |
② 画像の固定幅 | 低〜中 | CMSの本文内なら自社も可 | 1〜3万円 |
③ 長いURLの折返し | 低 | 自社でも可 | 1万円前後〜 |
④ 表のはみ出し | 中 | 横スクロール化なら自社も可 | 1〜5万円（表の数次第） |
⑤ position／floatの残骸 | 高 | 外注 | 3〜10万円（範囲次第） |
⑥ 文字サイズ・フォント | 中 | 外注推奨 | 2〜5万円 |
⑦ テーマ・プラグインの老朽化 | 高 | 外注 | 調査だけで数万円／改修は別途 |
金額は作業時間から逆算した目安で、保守契約の中で対応してもらえる範囲なら追加費用ゼロのこともあります。まず契約書を確認してください。誰に頼めばいいか分からなくなっている場合は、ホームページのドメインとサーバーの管理会社がわからない時の調べ方から辿れます。
私たちもホームページ制作をしております。記事の途中で恐縮ですが、原因の切り分けまでご自身でやってみて手が止まったら、その状態のまま相談していただくのがいちばん早いです。
「崩れ」ではなく「そもそもスマホ対応していない」場合の見分け方
ここまでは「スマホ向けに作られているのに一部が壊れている」前提でした。しかし実際には、最初からスマホを想定して作られていないサイトも少なくありません。この場合、個別の修正をいくら重ねても直りません。
見分け方はシンプルです。スマホで開いたときに、（a）パソコン版とまったく同じレイアウトが縮小表示される、（b）指で広げないと文字が読めない、（c）メニューがハンバーガーアイコンにならず横並びのまま、（d）電話番号をタップしても発信できない。このうち3つ以上が当てはまるなら、崩れではなく非対応です。
Googleはモバイルサイトとモバイルファースト インデックスのドキュメントで、モバイル版のページを用意することは検索結果に表示させるための要件ではないものの「非常に強く推奨」しており、構成方法としてはレスポンシブ デザインが最も実装・維持しやすいと案内しています。同ドキュメントでは、Googleがモバイル版のコンテンツを使ってインデックスする「モバイルファースト インデックス」であることも明記されています。
実際の閲覧環境から見ても、後回しにしづらい状況です。総務省の令和7年版 情報通信白書によると、2024年の端末別インターネット利用率（個人）はスマートフォンが74.4%、パソコンが46.8%で、その差は27.6ポイントあります。パソコンでしか確認していないサイトは、多数派の見え方を確認していないことになります。
改修か作り直しかの分岐
判断軸 | 部分的な改修で足りる | 作り直しを検討 |
|---|---|---|
崩れている範囲 | 特定のページ・特定のブロックだけ | 全ページで同じように崩れる |
viewportの指定 | あり（内容が正しい） | 無い、または固定幅 |
メニューの挙動 | スマホで折りたたまれる | パソコン版のまま横並び |
制作年 | 直近数年以内 | 10年近く手を入れていない |
更新のしやすさ | 自社で本文を更新できる | 更新のたびに外注が必要 |
費用感 | 数万円規模で収まる | 改修見積が制作費に近づく |
実務でよく起きるのが、改修の見積もりが積み上がった結果、作り直しの費用とほとんど変わらなくなるという展開です。1か所直すたびに別の場所が崩れるサイトは、土台が今の画面サイズを想定していません。この分岐の考え方はスマホ対応していないサイトの改修費用で費用の内訳ごとに整理しています。
直したあとに必ず確認する場所
修正が終わったら、確認までがセットです。ここで注意点があります。かつて定番だったGoogleの「モバイル フレンドリー テスト」ツールと、Search Consoleの「モバイル ユーザビリティ」レポートは、現在は使えません。本記事の執筆時点で、モバイル フレンドリー テストのURLにアクセスすると、ChromeのLighthouseのドキュメントへ転送されることを実際に確認しました。「Search Consoleでエラーが出ていないから大丈夫」という確認方法は、もう成り立ちません。
現在Googleが案内しているのはLighthouseです。ページ エクスペリエンスについてのドキュメントには、Chrome Lighthouseがモバイルユーザビリティを含むページエクスペリエンス関連の改善点を洗い出せるツールとして挙げられています。Lighthouseの公式ドキュメントによれば、Chrome DevToolsのタブから追加インストールなしで実行できるほか、PageSpeed Insightsやコマンドラインからも動かせます。
ただし、ツールは「崩れていないこと」を保証しません。Lighthouseが見るのは指標であって、あなたの目に映る崩れではありません。最終確認は実機でやります。確認する順番は次のとおりです。
- 実機のiPhoneとAndroidの両方で、トップページと主要ページを開く
- 横スクロールが発生しないか、指で左右に振って確認する
- 問い合わせフォーム・電話番号・地図など、成果に直結する部分を実際にタップする
- 画面を横向きにして、同じページをもう一度見る
- ブラウザのキャッシュを消したうえで、修正前の画面が残っていないか確かめる
特に見落とされやすいのが横向き表示とフォームの送信ボタンです。縦だけ確認して終わりにすると、横にした瞬間に崩れる箇所を見逃します。
制作会社に依頼するときの伝え方
ここが実は、費用と納期をいちばん左右します。制作会社側から見ると、再現できない不具合は直せません。「スマホで崩れています」だけの連絡では、まず「どの端末ですか」という往復が発生し、その分だけ時間と費用が積まれます。
最初の一通に次の5点を入れておくと、往復がほぼ消えます。
- スクリーンショット：崩れている箇所が画面のどこかまで分かる状態で。URLバーが写っているとなお良い
- ページのURL：トップページなのか、特定の記事なのかを明記する
- 端末名とOSのバージョン：「iPhone 15、iOS 18.x」のように。設定画面から確認できる
- ブラウザ名とバージョン：SafariかChromeか。同じ端末でも挙動が違う
- 再現手順といつから起きているか：「トップから会社概要を開いて下にスクロールすると」「先週の更新以降」など
あわせて、切り分けの結果も添えます。「別の端末でも崩れました」「シークレットウィンドウでも同じでした」の2行があるだけで、閲覧側の調査工程がまるごと省けます。調査時間が減れば、見積もりは下がります。これは値切りではなく、こちらが情報を出した分だけ作業が減るという単純な話です。
なお、こうした報告や更新依頼が毎月のように発生するなら、都度発注より運用の枠を持ったほうが安定します。分担の考え方はホームページ運用・更新代行｜自社と外注の分担と費用相場にまとめています。
まとめ
スマホでの表示崩れは、闇雲に直そうとすると費用も時間も膨らみます。順番は「閲覧側の確認 → viewportの確認 → はみ出している1要素の特定 → 非対応かどうかの判定」です。この順で見れば、多くのケースは最初の2ステップで正体が分かります。
自分で直せるのは、画像の固定幅、長いURLの折り返し、表のはみ出し、キャッシュ。制作会社に頼むべきなのは、viewportを含むHTMLの構造、絶対配置やfloatの作り込み、そして古いテーマの老朽化です。そして全ページで同じように崩れているなら、それは崩れではなく「スマホ非対応」であり、改修より作り直しのほうが安く済む可能性があります。
最後にもうひとつ。直したあとの確認は、Search Consoleではなく実機で行ってください。かつての確認ツールは廃止されており、今のGoogleが案内しているのはLighthouseです。ツールで指標を見て、目で崩れを見る。この二段構えが、いちばん確実です。
原因の切り分けまでやってみて手が止まった、あるいは改修と作り直しのどちらが得か判断がつかない、という段階でご相談いただければ、現状を見たうえで必要な範囲だけをお伝えします。
よくある質問
スマホだけホームページが崩れます。まず何を確認すればいいですか。
サイトを触る前に、別の人のスマホ、別のブラウザ、シークレットウィンドウ、キャッシュ削除の4つを試してください。どれかで正常に見えるなら閲覧側の一時的な問題で、サイトを直す必要はありません。すべてで同じように崩れる場合はサイト側の問題です。
ホームページ全体が小さく縮んで表示されるのはなぜですか。
viewportというメタタグが指定されていないか、固定の幅で指定されている可能性が高いです。指定が無い場合、モバイルブラウザは画面より広い仮想のビューポートでページを描画し、それを縮小して表示します。width=device-width と initial-scale=1 を指定したタグを追加することで直ります。
文字や長いURLが枠からはみ出します。自分で直せますか。
CSSの overflow-wrap を break-word または anywhere に指定すれば直ります。初期値の normal では空白などの通常の位置でしか改行されないため、長いURLや英数字があふれます。CSSを編集できる環境があれば自社対応も可能です。
Search Consoleのモバイルユーザビリティで確認すればいいですか。
現在は使えません。Search Consoleのモバイルユーザビリティレポートとモバイルフレンドリーテストは提供が終了しており、モバイルフレンドリーテストのURLはChromeのLighthouseのドキュメントへ転送されます。Googleはページエクスペリエンスの改善点を洗い出すツールとしてChrome Lighthouseを案内しています。
部分的に直すのと作り直すのは、どちらが得ですか。
崩れが特定のページだけならば部分改修で足ります。全ページで同じように崩れる、viewportの指定が無い、メニューがパソコン版のまま横並び、10年近く手を入れていない、といった条件が重なる場合は非対応の可能性が高く、改修の見積もりが積み上がって制作費に近づくため作り直しの検討をおすすめします。