「画像が画面からはみ出した」「スマートフォンだけ文字が重なる」「昨日まで正常だったのに、更新後からレイアウトが崩れた」。ホームページの表示崩れが起きると、焦って管理画面やプラグインを触りたくなります。しかし、原因が分からない状態で変更を重ねると、復旧に必要な手掛かりまで失うことがあります。本記事では、非技術者でも安全にできる5分の確認、表示崩れの原因を切り分ける4つの軸、緊急度の判断、修正業者へ渡す情報を解説します。
- 表示崩れが自分の環境だけかサイト全体か確認する方法
- PC・スマホ、全ページ・一部ページで原因を分ける考え方
- キャッシュ、HTML・CSS、WordPress更新など主な原因
- 自分で触らず専門家へ連絡した方がよい症状
- 原因調査と復旧を早める依頼テンプレート
最初の5分は修正せず「どこで起きるか」を確認する
表示崩れが起きたら、最初に直すのではなく、再現する条件を記録してください。
自分のブラウザに古いデータが残っているだけなら、サイト自体は壊れていません。一方、複数端末で同じ症状が出るなら、ページのHTML・CSS、画像、テーマ、プラグイン、サーバーなどを調べる必要があります。
- 崩れているページのURLを保存する
- 画面全体のスクリーンショットを撮る
- シークレットモードで同じURLを開く
- 別ブラウザまたは別端末で確認する
- 発生前に行った更新や編集をメモする
この確認だけで「自分の画面だけ」「スマートフォンだけ」「特定ページだけ」「全員に起きている」といった範囲が見えます。修正業者にとっても、症状の範囲は原因を絞る重要な情報です。
問い合わせフォーム、予約、購入、電話ボタンが使えない場合は緊急度が高い状態です。原因調査前にページ編集、テーマ更新、プラグイン停止を繰り返さず、現状を保存して専門家へ連絡してください。
表示崩れは4つの軸で切り分ける
技術用語を知らなくても、「誰に」「どの端末で」「どのページに」「いつから」起きたかを整理すれば、調査範囲を大きく絞れます。
| 切り分け軸 | 確認すること | 考えられる範囲 |
|---|---|---|
| 誰に起きるか | 自分だけ／複数人 | キャッシュ／サイト本体 |
| どの端末か | PC／スマホ／両方 | 画面幅・レスポンシブ設定 |
| どのページか | 1ページ／全ページ | 本文／共通テーマ・CSS |
| いつからか | 編集直後／更新直後／突然 | 操作内容・自動更新・外部要因 |
自分だけに起きている
別端末では正常なら、ブラウザキャッシュ、拡張機能、通信環境の影響が考えられます。シークレットモードや別ブラウザで確認し、スーパーリロードを試します。それでも自分だけ崩れる場合は、ブラウザ名とバージョンを記録します。
スマートフォンだけ崩れる
画像や表の固定幅、長いURL、ボタンの横並び、スマートフォン用CSSの不足などが考えられます。特定の機種だけか、複数のスマートフォンで同じかも確認します。画面を横向きにすると直る場合は、横幅設定が原因の手掛かりになります。
特定ページだけ崩れる
直前に追加したHTML、表、画像、埋め込みコードなど、そのページ固有の内容を疑います。開始タグと終了タグの不一致や、コピーした装飾コードの影響で、後ろの要素まで崩れることがあります。
全ページで崩れる
共通CSSが読み込めていない、テーマやプラグインが更新された、キャッシュ配信に問題がある、サーバー上のファイルが変わった可能性があります。ヘッダーやメニューまで崩れているなら、個別ページの本文編集より共通部分の調査を優先します。
- 「iPhoneとAndroidで再現し、PCでは正常」
- 「料金ページだけ崩れ、他ページは正常」
- 「プラグイン更新直後から全ページで発生」
ホームページの表示崩れで多い原因
表示崩れの原因は一つとは限りません。たとえば、WordPress更新をきっかけに古いテーマのCSSが合わなくなり、さらにキャッシュが残って端末ごとに見え方が違うこともあります。
ブラウザ・サイトのキャッシュ
変更前のCSSや画像が保存され、新旧のファイルが混ざって表示されるケースです。自分の端末だけならブラウザキャッシュ、複数人で一時的に起きるならサイトやCDN側のキャッシュも確認します。
HTMLの閉じ忘れ・入れ子の誤り
文章を装飾するタグや表のタグが正しく閉じられていないと、その後の文章やサイドバーまで影響します。Wordや他サイトから書式付きで貼り付けたときに不要なタグが混ざる場合もあります。
CSSの読み込み・指定ミス
CSSファイルのURLが間違っている、ファイルが削除された、別の指定に上書きされた、記述エラーがある場合です。デザイン全体が装飾なしの縦並びになった場合は、CSS自体が読み込めていない可能性があります。
画像・表・埋め込み要素の横幅
固定幅の画像や表がスマートフォン画面より大きいと、横にはみ出します。地図、動画、予約システムなど外部サービスの埋め込みコードが画面幅に対応していない場合もあります。
WordPress本体・テーマ・プラグインの更新
更新によって仕様が変わり、古いテーマや他のプラグインと競合することがあります。自動更新で担当者が操作していなくても変化する場合があるため、管理画面の更新履歴や通知メールを確認します。
原因を探すために本番サイトのプラグインをすべて停止すると、フォーム、予約、セキュリティ、表示機能まで止まる恐れがあります。停止テストはバックアップと復旧手順を用意し、可能なら検証環境で行います。
【相談事例】料金表を直した後からページ下部が横にずれた
以下は、実際に多い相談をもとに業種や詳細を変更した事例です。店舗運営者から、「料金表の数字を自分で変更したら、その下の文章とフッターが右へずれた」という相談がありました。
PCでは少しずれる程度でしたが、スマートフォンではページ全体が横スクロールし、問い合わせボタンが画面外へ出ていました。担当者は直そうとして同じ箇所を何度か編集していました。
バックアップを取ってHTMLを確認すると、料金表の行を追加した際に終了タグが一つ不足していました。そこから後ろの要素が表の一部として解釈され、全体の幅が広がっていました。タグを修正し、表が画面幅に収まる設定を追加して、PCとスマートフォンで確認しました。
担当者が「いつ、どのページの、どの表を編集したか」を覚えていたため、調査範囲をすぐ絞れました。もし複数ページやプラグイン設定まで変更していたら、原因特定にさらに時間がかかったでしょう。
崩れた後に行った操作を増やさず、直前の変更を正確に伝えることが最短復旧につながります。自分の操作が原因かもしれなくても、隠さず伝える方が調査費用を抑えやすくなります。
自分で試してよいこと・止めた方がよいこと
| 安全に試しやすいこと | 専門家へ任せたいこと |
|---|---|
| 別端末・別ブラウザで確認 | 本番ファイルの直接編集 |
| スクリーンショットを保存 | テーマ・プラグインの一括停止 |
| 直前の操作を記録 | バックアップなしの更新・復元 |
| シークレットモードで確認 | データベースの直接変更 |
キャッシュ削除は比較的安全ですが、サイト全体のキャッシュプラグインやCDN設定を変更する場合は注意が必要です。操作前の設定を記録し、戻し方が分からなければ作業者へ任せます。
管理画面へ入れない、白い画面や重大なエラーが出る、改ざんの疑いがある、注文や問い合わせが止まっている場合は、通常のレイアウト調整ではありません。スクリーンショットと発生時刻を保存し、サーバーやセキュリティも調査できる専門家へ連絡してください。
修正依頼を早める情報テンプレート
表示崩れは原因調査が必要なため、「崩れています」だけでは費用と納期を判断できません。次の情報を一度に送ると、初期調査が進みやすくなります。
対象URL：https://example.com/price/
発見日時：6月14日 10時ごろ
症状：スマホで料金表が右にはみ出し、問い合わせボタンが見えない
再現環境：iPhone Safari、Android Chrome
正常な環境：Windows Chrome
直前の操作：6月13日に料金表の行を1件追加
添付：画面全体のスクリーンショット
希望：原因調査、復旧、他ページへの影響確認
- ページURLと崩れている位置
- 端末名、OS、ブラウザ名
- 発見日時と直前の操作
- 全ページか特定ページか
- 他の人や端末でも再現するか
- 売上・問い合わせへの影響
費用は、軽微なHTML・CSS修正だけで済むか、テーマやプラグインの競合、サーバー、古いCMSまで調査するかで変わります。見積もりでは、原因調査、バックアップ、復旧、スマホ確認、再発防止がどこまで含まれるかを確認します。
- 高：購入・予約・問い合わせができない
- 中：内容は読めるが、主要ボタンや表が崩れている
- 低：自分の端末だけで軽微なずれがある
復旧後に再発を防ぐ方法
表示が直ったら、原因と対応内容を記録します。担当者が変わったときも、どの更新で問題が出たか分かれば同じ失敗を避けられます。
更新前にバックアップ
ファイルとデータベースを戻せる状態にします。取得だけでなく復元方法も確認します。
変更を一度に増やさない
複数の更新をまとめて行うと原因が分かりません。一つずつ変更し、表示を確認します。
PCとスマホを確認
主要ページ、フォーム、メニュー、ボタンを複数の画面幅で確認します。
更新履歴を残す
日付、担当者、変更内容、確認結果を記録し、問題発生時に追えるようにします。
一度崩れると、必要な情報更新まで止めてしまいがちです。更新代行や保守サービスを使い、バックアップと表示確認を含む手順を決めると、放置を防げます。
営業時間外に表示崩れを発見したときの対応
夜間や休日に不具合を見つけても、すべてが即時復旧を必要とするわけではありません。まず売上や顧客行動への影響で緊急度を判断し、社内でできる案内と専門業者へ依頼する作業を分けます。
| 症状 | その場の対応 | 連絡優先度 |
|---|---|---|
| 決済・予約が不能 | 別の受付方法を案内 | 最優先 |
| フォームが送れない | 電話・メールを案内 | 高い |
| 文字や画像が一部ずれる | 記録して影響を確認 | 通常 |
| 自分の端末だけ崩れる | 別端末で再確認 | 低い |
予約や問い合わせが止まっている場合、SNSや店舗のお知らせで代替手段を案内します。ただし、原因が分からないままサイトを非公開にすると、正常なページまで見られなくなります。影響範囲を確認し、必要な場合だけ一時案内を出します。
「緊急です」だけでなく、売上への影響、代替手段の有無、いつまでに暫定復旧したいかを伝えます。例として「予約ボタンが全端末で押せない。電話予約は可能。明朝9時の営業開始までに暫定対応を希望」のように書きます。
保守契約がある場合は、夜間・休日の対応範囲、連絡先、追加料金を平常時に確認しておきます。契約がなくても、サーバー会社、ドメイン会社、ホームページ制作会社の連絡先と契約者名を一つの管理表にまとめておくと、担当者が不在でも動けます。
改ざん、見覚えのない広告、別サイトへの転送、管理者アカウントの追加などがある場合は、単なる表示崩れとして扱わないでください。端末の安全も確認し、パスワード変更やログ調査を含むセキュリティ対応が必要です。
よくある質問
キャッシュを削除すれば直りますか？
古い表示が残っているだけなら直ることがあります。複数端末で同じ崩れが出る場合や、HTML・CSS自体に問題がある場合は直りません。
スマホだけ崩れる原因は何ですか？
固定幅の画像・表、長い文字列、画面幅ごとのCSS、外部埋め込みなどが代表的です。機種とブラウザを含めて再現条件を確認します。
WordPressを更新したら崩れました。元に戻せますか？
バックアップがあれば戻せる可能性があります。ただし、すぐ旧版へ戻すと安全性に問題が残る場合があります。競合原因を調査し、安全な更新方法を検討します。
修正費用はいくらですか？
症状だけでは断定できません。原因調査のみで特定できる場合もあれば、テーマ、プラグイン、サーバーを調べる場合もあります。調査費と修正費を分けて確認してください。
- 表示崩れが起きたら、修正前にURL・画面・発生時刻・直前操作を記録する
- 自分だけか、スマホだけか、一部ページだけか、更新直後かで原因を絞る
- 本番コード編集やプラグイン全停止は、バックアップなしで行わない
- 問い合わせや購入に影響する場合は、変更を止めて早めに専門家へ連絡する
ホームページの表示崩れは、焦って触るほど原因が見えにくくなることがあります。まず安全な範囲で再現条件を確認し、記録を残してください。原因が分からない、複数端末で崩れる、問い合わせに影響している場合は、無理に直そうとせず修正業者へ相談する方が早いことがあります。楽楽ホームページ修正では、他社制作サイトの表示不具合も、症状と環境を確認して対応方法をご案内します。
