ホームページを開いたら、レイアウトが崩れていた。文字が重なっている。画像が変な場所にはみ出している。メニューが縦に長く並んでしまっている。昨日までは普通だったのに。
表示崩れは、ページが消えたわけではないぶん、「壊れた」とまでは言い切れず、かといって放置もできない、対応に迷うトラブルです。
しかし、崩れたままのホームページは、見た人に「管理されていないサイト」という印象を与えます。また、崩れの原因によっては、放置するとさらに悪化することもあります。
この記事では、突然の表示崩れの原因の切り分け方と、確認の手順を整理します。長年の劣化でだんだん見づらくなってきた、という場合は、この記事よりもホームページがスマートフォンで見づらいときに確認することが該当します。ここでは「昨日まで正常だったのに崩れた」という突発のケースを扱います。
まず、自分の環境だけの問題かを確認する
最初に確認したいのは、「誰が見ても崩れているのか、自分の環境だけなのか」です。
- 別のブラウザ(Chrome、Edge、Safariなど)で開いてみる
- スマートフォン(できればWi-Fiを切った状態)で開いてみる
- 可能なら、社内の別の人にも見てもらう
自分の環境だけで崩れている場合は、ブラウザに残った古いデータ(キャッシュ)が原因のことがよくあります。ページの強制再読み込み(Windowsは Ctrl+Shift+R、Macは Cmd+Shift+R)を試してください。これで直れば、ホームページ自体に問題はありません。
複数の環境で崩れている場合は、ホームページ側に原因があります。次の確認に進みます。
このとき、崩れている画面のスクリーンショットを撮っておいてください。パソコンとスマートフォンの両方で、崩れているページごとに。後で状況が変わっても、このスクリーンショットが原因特定と依頼の際の重要な資料になります。
「直前に何をしたか」を思い出す
突然の表示崩れは、多くの場合、何かの「変化」をきっかけに起きます。次に心当たりがないか確認してください。
- WordPressの本体・テーマ・プラグインを更新した(自動更新も含む)
- 記事やページを編集した
- 新しいプラグインを入れた
- サーバーの設定(PHPのバージョンなど)を変更した
- サーバー会社からメンテナンスや仕様変更の案内が来ていた
自分では触っていなくても、自動更新が動いていることがあります。WordPressは設定によって本体やプラグインを自動で更新するため、「誰も触っていないのに崩れた」ように見えるケースの多くは、実は自動更新がきっかけです。管理画面に入れる場合は、更新履歴や各プラグインの更新日を確認すると、直前に何が変わったかがわかります。
きっかけが特定できれば、対処は絞られます。たとえば直前に更新したプラグインが原因なら、そのプラグインを一時停止して表示が戻るか確認する、という切り分けができます。ただし、操作に不安がある場合は無理に触らず、状況の記録を持って詳しい人に相談する方が安全です。中途半端な操作で状態が複雑になると、原因特定がかえって難しくなります。
崩れ方から原因の見当をつける
崩れ方のパターンからも、原因の当たりが付けられます。
デザインが全部なくなり、白い背景に文字だけが並んでいる
ページの内容は読み込めているのに、デザインの情報(CSS)だけが読み込めていない状態です。テーマの不具合、キャッシュ系プラグインの問題、サーバー側の一時的な問題などが考えられます。全ページで起きているなら、テーマやサーバーに関わる問題の可能性が高くなります。
一部のページだけ崩れている
そのページを最近編集していないかを確認します。編集中の操作(タグの消し忘れ、貼り付けたコードの不備など)が原因のことが多く、そのページの修正で解決します。
スマートフォンだけ崩れている
パソコンでは正常なのにスマートフォンで崩れる場合は、テーマのモバイル対応部分や、表示幅に関わる設定の問題です。最近入れた要素(大きな画像、埋め込みコンテンツ、表など)が幅をはみ出しているケースもよくあります。
文字化けしている
文字が記号の羅列になっている場合は、文字コードの設定に関わる問題です。サーバーの設定変更や、ファイル編集時の保存形式が原因になることがあります。
崩れに加えて、見覚えのない文字やリンクが表示されている
単なる崩れではなく、改ざんの可能性があります。この場合は対応がまったく変わるため、ホームページが改ざん・乗っ取りされたかもしれないときに確認することをすぐに確認してください。
直し方の基本方針
原因の見当がついたら、対処です。基本方針は「変化を元に戻す」ことです。
- 更新したプラグインが原因 → 一時停止して確認
- 編集したページが原因 → 編集前の状態(リビジョン)に戻す
- 追加した要素が原因 → その要素を外して確認
WordPressには、ページの編集履歴(リビジョン)から以前の状態に戻す機能があります。また、サーバーの自動バックアップがあれば、崩れる前の状態への復元も選択肢になります。
ただし、注意点が2つあります。1つは、戻す前に現状のバックアップも取ること。戻す操作自体が新たな問題を生む場合に備えます。もう1つは、テーマやWordPress本体の更新が原因の場合、単純に古いバージョンへ戻すのはセキュリティ上の後退になることです。古い環境のまま長年更新していなかったサイトで、更新をきっかけに崩れた場合は、根本の原因(テーマの非対応など)の解決が必要です。この場合はWordPressを長年更新していない場合に確認することの全体確認から進めることをおすすめします。
管理画面に入れず確認自体ができない場合は、ホームページのログイン情報がわからないときの確認ポイントから整えてください。
修正を依頼するときに伝えること
自力での対処が難しい場合は、保守会社や修正に対応できる会社へ依頼します。このとき、次の情報が揃っていると、原因特定が早く、見積もりも正確になります。
- 崩れている画面のスクリーンショット(パソコン・スマートフォン両方)
- いつから崩れているか(最後に正常だった日)
- 直前に行った操作、心当たりのある変化
- どのページで起きているか(全部か、一部か)
- 自分で試したこと(強制再読み込み、プラグイン停止など)とその結果
「なんか崩れてます」と伝えるのと、この5点を伝えるのとでは、対応の速さが大きく変わります。最初に撮ったスクリーンショットが、ここで活きてきます。
よくある質問
表示は崩れていますが、問い合わせは来ています。急いで直す必要がありますか?
機能が生きていても、早めの対応をおすすめします。崩れた状態は訪問者の信頼に影響し、「問い合わせようと思ったがやめた」人は数字に見えません。また、崩れの原因が古いテーマやプラグインにある場合、放置すると別の不具合や安全面の問題につながることがあります。
自動更新を止めれば、崩れは防げますか?
更新をきっかけとした崩れは減りますが、おすすめしません。更新にはセキュリティ上の修正が含まれており、止め続けると改ざんなどのより深刻なリスクが高まります。防ぐべきは「更新」ではなく「更新で壊れる状態」です。テーマやプラグインを現行の環境に対応したものへ整えておくことが、根本の対策になります。
何年も前から少しずつ崩れてきた気がします。この記事の手順で直りますか?
徐々に進んだ崩れは、突発的な崩れと原因が異なることが多く、「変化を元に戻す」方針が使えません。古いテーマと新しいブラウザ環境のずれなど、構造的な原因が背景にあるためです。その場合は部分的な修正で整えられるか、作りの見直しが必要かの判断からになります。ホームページを部分修正で改善できるケースを参考に、現状の整理から始めてください。
まとめ
突然の表示崩れは、「自分の環境だけか → 直前に何が変わったか → 崩れ方のパターン → 変化を元に戻す」の順で切り分けます。多くの場合、何かの変化(更新・編集・設定変更)がきっかけにあり、それを特定できれば対処は絞られます。
そして、最初にスクリーンショットで記録を残すこと。自力で直せる場合も、依頼する場合も、この記録が最短の解決につながります。
崩れの原因が特定できない場合や、古い環境ごと見直した方がよいか迷う場合は、現状の整理からお手伝いしますので、お気軽にご相談ください。
無料のホームページ見直しチェックを試す