ホームページのレイアウトが突然崩れた、スマホで見るとぐちゃぐちゃ、お客様から「表示がおかしい」と連絡が来た——表示崩れは、サイトが消えたわけではないぶん軽く見られがちですが、訪問者からは「管理されていない会社」に見えてしまう、実害のあるトラブルです。この記事では、修正対応を日常的に行うWeb制作会社の視点で、原因の見分け方を症状別に整理しました。よくある解説が原因を並べるだけで終わるのに対し、この記事は「誰の画面で崩れているか」の切り分けから始めます。ここを飛ばすと、存在しない原因を延々と探すことになるからです。
- 最初にやる切り分け：全員崩れているのか、特定の環境だけか
- OS別の強制再読み込み手順（Windows/Mac/iPhone/Android）
- 原因8つの見分け方と、「何もしていないのに崩れた」の正体
- スマホだけ崩れる・文字化け・WordPress更新後——症状別の対処
- 業者に頼む場合の費用目安と、伝えると修正が速くなる5つの情報
まず切り分け：誰の画面で崩れているか
表示崩れの原因は、大きく「サイト側にある場合」と「見ている環境側にある場合」に分かれます。最初にどちらかを判定してください。
| 状況 | 原因のありか | 次にやること |
|---|---|---|
| どの端末・どのブラウザで見ても崩れている | サイト側（CSS・HTML・更新起因） | 原因8つの一覧へ |
| 自分の環境だけ崩れている | 閲覧環境側（キャッシュ・拡張機能） | 強制再読み込みへ |
| 特定の人からだけ「崩れている」と言われる | 相手の環境（古いブラウザ・アプリ内ブラウザ） | 相手にスクリーンショットを依頼 |
| スマホだけ崩れている | 設定 | スマホの章へ |
手元に端末が複数あれば、パソコン・スマホ・別ブラウザの3通りで開いてみるだけで判定できます。1台しかない場合は、同じブラウザのシークレットウィンドウで開いてください。それで正常なら、キャッシュか拡張機能の問題です。
最初に試す：強制再読み込みのやり方（OS別）
切り分けの前でも後でも、まず試す価値があるのが強制再読み込み（スーパーリロード）です。ブラウザに残った古いCSSファイルが原因の崩れは、これだけで直ります。サイトを更新した直後の崩れは、たいていこれです。
| 環境 | 操作 |
|---|---|
| Windows（Chrome・Edge） | Ctrl + F5 、または Ctrl + Shift + R |
| Mac（Chrome・Safari） | Cmd + Shift + R（SafariはCmd+Option+Eでキャッシュ削除→再読み込み） |
| iPhone（Safari） | 設定 → Safari → 履歴とWebサイトデータを消去 |
| Android（Chrome） | 設定 → プライバシー → 閲覧履歴データの削除 →「キャッシュされた画像とファイル」 |
「一部のお客様で表示が乱れる場合は、キャッシュの削除をお試しください」という案内を出すとき、この表をそのまま使えます。ただし多数の訪問者で崩れているなら、訪問者に操作させるのではなくサイト側で直すのが筋です。キャッシュの寿命設定で解決できます。
崩れの原因8つと見分け方
サイト側に原因がある場合の内訳です。見た目の「崩れ方」から原因を推定できます。
| 崩れ方の特徴 | 疑う原因 |
|---|---|
| 装飾が全部消えて、文字だけの素のページになった | CSSファイルが読み込めていない（パス切れ・配信停止・アップロード漏れ） |
| ある位置から下が全部ずれている | HTMLタグの閉じ忘れ・構文エラー（更新した箇所の直後を疑う） |
| 要素が枠からはみ出す・横スクロールが出る | 幅の固定指定・大きな画像や表のはみ出し |
| 特定ブラウザだけ崩れる | ブラウザ間の互換性・古いブラウザ |
| 更新した直後から崩れた | ・テーマ・プラグインの更新、キャッシュの不整合 |
| 文字が「縺ｮ」のような記号列になった | 文字コードの不一致（文字化けの章へ） |
| 画像だけ表示されない | 画像のパス・ファイル破損・対応していない形式 |
| 見知らぬ文字列や広告が挿入されている | 改ざんの疑い（表示崩れではなくセキュリティ事故。改ざんの記事へ） |
最後の1つだけは毛色が違います。身に覚えのない内容が「増えている」崩れは、修正ではなく改ざん対応の領域です。その場合はこの記事ではなく、改ざん対処の記事（関連記事からたどれます）を先にお読みください。
「何もしていないのに崩れた」の正体
修正のご相談でいちばん多いのが「何も触っていないのに、急に崩れた」です。不思議に思えますが、種明かしをすると、あなたが何もしていなくても、サイトの周りは毎日変わっています。
- ブラウザの自動アップデート：ChromeやSafariは数週間ごとに更新され、表示の解釈が少しずつ変わります。古い書き方のCSSが、ある日から効かなくなることがあります。
- CMS・プラグインの自動更新：WordPressは設定によって本体やプラグインを自動更新します。夜中に自動更新が走り、朝には崩れていた、はよくある筋書きです。
- 外部サービスの仕様変更・停止：Webフォント、地図、SNSの埋め込みなど、外部から読み込んでいる部品の提供側が仕様を変えると、その部分から崩れます。
- 証明書や設定の変化：証明書の期限切れで一部ファイルの読み込みがブロックされ、結果として崩れて見えることがあります。
原因調査で最初に確認するのは、崩れた日時です。その日に何が変わったか（ブラウザの更新・プラグインの自動更新ログ・外部サービスの障害情報）を突き合わせると、原因はかなり絞れます。お客様からの指摘で気づいた場合も、「いつごろから崩れて見えたか」を聞いておくと、あとが速くなります。
スマホだけ崩れる場合
パソコンでは正常なのにスマホだけ崩れるのは、スマホ対応（レスポンシブデザイン）の設定に問題があるパターンです。
1つのページを、見る側の画面幅に合わせて自動的に組み替える作り方のこと。パソコンでは3列に並ぶ内容が、スマホでは1列に積み重なる、といった変形をCSSで制御しています。この制御が一部の要素で漏れていると「その要素だけはみ出す」崩れ方になります。
- 典型原因1：幅の固定指定：バナーや表に「幅600px」のような固定値が指定されていると、それより狭い画面でははみ出します。横スクロールが出ていたらほぼこれです。
- 典型原因2：viewport設定の不備：ページ全体が縮小されて豆粒のように表示される場合、スマホ表示の基本設定（viewport）が欠けています。古いサイトに多い症状です。
- 典型原因3：大きな画像・表：本文に貼った画像や表がコンテンツ幅を超えているケース。画像に「最大幅100%」の指定を足すだけで直ることが多いです。
再現確認は、パソコンのブラウザでウィンドウの幅をゆっくり狭めていくのが手軽です。どの幅から崩れ始めるかが分かれば、修正箇所の特定は目前です。より正確には、ブラウザの開発者ツール（F12）のスマホ表示モードで機種別の画面幅を再現できます。ただし実機とは微妙に差が出るため、最終確認は実際のスマホで行ってください。
文字化けしている場合
「縺ｮ譁・ｭ・」のような記号の羅列になる文字化けは、崩れの中でも原因がはっきりしています。文字コード（文字をデータとして保存する方式）の指定と、実際のファイルの方式が食い違っているのです。
- ファイルを編集・保存した直後に化けた：編集に使ったソフトが、別の文字コードで保存してしまったケースです。現在の標準は「UTF-8」。メモ帳などで開いて、UTF-8を指定して保存し直すと直ることがあります。
- 移転後に化けた：移転先サーバーの設定が旧サーバーと異なるケース。サーバー側の文字コード設定の調整が必要です。
- 一部分だけ化けている：その部分だけ別の文字コードで書かれたデータが混ざっています。該当箇所の書き直しで解消します。
文字化けは上位の解説記事がほぼ扱っていない症状ですが、実際の相談では珍しくありません。編集前のバックアップがあれば確実に戻せるので、直す前にまずバックアップの有無を確認してください。
WordPress更新後に崩れた場合
WordPressサイトの表示崩れは、更新がきっかけになっていることが大半です。順番に切り分けます。
- キャッシュをすべて削除するキャッシュ系プラグインやサーバー側の高速化機能を使っている場合、更新後も古いCSSを配り続けていることがあります。プラグインの「キャッシュ削除」を実行し、ブラウザ側も強制再読み込みしてください。これだけで直るケースがかなりあります。
- 直前に更新したものを特定する管理画面の更新履歴やメール通知から、その日に更新された本体・テーマ・プラグインを確認します。自動更新が有効なら、身に覚えがなくても更新されています。
- 疑わしいプラグインを一時停止する更新されたプラグインを1つずつ停止して表示を確認します。停止しても設定データは消えません（削除しなければ）。崩れが直ったら、そのプラグインが原因です。
- テーマの直接編集の有無を確認する過去にテーマのファイルを直接編集してカスタマイズしていた場合、テーマの更新でその編集が上書きされて消えます。この場合は差分の復元が必要で、バックアップの出番です。心当たりのある方は、今後は子テーマ化を検討してください。
自分で直す手順と、触らない判断
ここまでで原因の見当が付いたら、自分で直すか、頼むかの判断です。
| 状況 | 判断 |
|---|---|
| キャッシュ削除・強制再読み込みで直った | 完了。頻発するならキャッシュ設定の見直しを |
| プラグイン停止で直った | 代替プラグインの検討まで自分で可能 |
| CSSやHTMLの修正が必要 | 編集経験がなければ依頼推奨。1文字の誤りで全体が崩れる世界です |
| テーマ更新でカスタマイズが消えた | 依頼推奨。復元と再発防止（子テーマ化）はセットで |
| 原因の見当が付かない | これ以上触らず依頼。試行錯誤の跡は調査を遅くします |
CSSは1か所の変更が複数ページに波及します。見えている箇所を場当たりで直すと、見ていない箇所が崩れるのが表示崩れの典型的な悪化パターンです。自分で直す場合も、変更前のファイルを必ず控えてから触ってください。
修正を依頼する場合の費用と伝え方
当社の場合、表示崩れ・不具合の修正は原因調査込みで10,000円〜が目安です（範囲により変動）。作業前に必ずお見積りを提示し、ご了承後に着手します。他社で制作されたサイトも対応します。
依頼時に次の5点を添えていただくと、見立てが最初の連絡の時点でほぼ付き、修正までが速くなります。
- 崩れている画面のスクリーンショット（最重要。これだけでも構いません）
- 崩れているページのURL
- 閲覧環境（パソコンかスマホか、ブラウザの種類）
- いつから崩れているか（気づいた日時でOK）
- 直前に行った操作（更新・編集・移転など。「何もしていない」もそれ自体が情報です）
窓口は修正・改修・不具合の緊急対応です。現状確認と見立てまでは無料です。
まとめ：切り分け→型の特定→それから修正
表示崩れの対処は、(1)誰の画面で崩れているかを切り分け、(2)崩れ方の型から原因を推定し、(3)それから直す——この順番がすべてです。原因が分からないままCSSを触るのが、いちばん傷を広げます。
そして「何もしていないのに崩れた」は、思い違いではありません。ブラウザも、プラグインも、外部サービスも、あなたのサイトの周りで毎日更新されています。だからこそ、月に一度は自分のサイトをスマホとパソコンの両方で開いて確認する習慣が、最良の予防策になります。
切り分けても手に負えない場合は、スクリーンショット1枚から当社の緊急対応窓口へどうぞ。原因調査からお受けします。
よくある質問
昨日まで正常だったのに、何もしていないのに急に表示が崩れました。なぜですか？
「何もしていない」のに崩れる場合、変わったのはサイトの外側です。よくあるのは、ブラウザの自動アップデート、CMSやプラグインの自動更新、外部から読み込んでいるCSSやフォントの配信停止、キャッシュの不整合の4つです。まず強制再読み込み（Ctrl+F5）を試し、直らなければ「いつから」「どの端末で」崩れているかを記録して切り分けに進んでください。
自分のパソコンでは正常なのに、お客様から「崩れて見える」と言われました。
相手の環境（ブラウザの種類・バージョン・画面幅）でだけ起きている崩れです。可能なら相手に、使っている端末とブラウザ、画面のスクリーンショットを送ってもらってください。LINEやInstagramのアプリ内ブラウザ、古いブラウザ、広告ブロッカー、自動翻訳機能が原因のこともあります。スクリーンショットが1枚あるだけで原因特定の速度がまったく変わります。
スマホで見たときだけレイアウトが崩れるのはなぜですか？
スマホ対応（レスポンシブ）の設定に起因することがほとんどです。典型的には、viewport設定の不備、幅を固定ピクセルで指定している箇所、大きすぎる画像や表のはみ出しです。パソコンのブラウザでウィンドウ幅を狭めて再現するか、開発者ツールのスマホ表示モードで確認できます。部分的な修正で直ることが多い症状です。
強制再読み込み（スーパーリロード）のやり方を教えてください。
Windowsは Ctrl+F5（またはCtrl+Shift+R）、Macは Cmd+Shift+R です。スマホには同じ操作がないため、iPhoneはSafariの設定から履歴とWebサイトデータの削除、Androidは Chromeの設定から閲覧履歴データの削除（キャッシュされた画像とファイル）を行ってください。シークレットモードで開いて正常に見えるなら、キャッシュが原因と確定できます。
WordPressを更新したら表示が崩れました。まず何をすべきですか？
直前に更新したもの（本体・テーマ・プラグイン）を特定してください。キャッシュ系プラグインを使っている場合は、まずそのキャッシュを全削除します。それで直らなければ、更新したプラグインを一時停止して切り分けます。テーマを直接編集していた場合、テーマ更新で編集内容が消えて崩れることがあり、この場合はバックアップからの復元が必要です。
表示崩れの修正を業者に頼むと費用はどのくらいですか？
当社の場合、表示崩れ・不具合の修正は原因調査込みで10,000円〜が目安です（範囲により変動、作業前に見積り提示）。依頼時には、崩れている画面のスクリーンショット、ページのURL、閲覧環境（端末・ブラウザ）、いつから崩れたか、直前に行った操作の5点を伝えると、見立てと修正が大幅に速くなります。他社制作のサイトでも対応しています。
