blancブログ記事｜伝わる、つながる、育てる。blancのホームページ制作

「昨日まで普通に見えていたのに、開いてみたらレイアウトがバラバラになっていた」「スマホで見ると文字や画像が重なってしまう」——ホームページの表示崩れは、ある日突然起きることが多いトラブルです。お客様が最初に目にする画面が崩れていると、会社の印象にも関わるため、できるだけ早く直したいところです。

ただ、表示崩れは原因によって対処のしかたが大きく変わります。この記事では、まず確認していただきたいことから、よくある原因と対処法、自分で直せるケースとプロに任せたほうがよいケース、依頼した場合の費用の目安までを、順を追ってご説明します。

まず落ち着いて確認したい3つのこと

「崩れた！」と思ったときほど、いきなりサイトを触らないことが大切です。最初に次の3つを確認すると、原因の切り分けがぐっと楽になります。

• 他の端末・ブラウザでも崩れているか — 自分のパソコンだけで崩れている場合は、ブラウザのキャッシュ（古いデータ）が原因のこともあります。スマホや別のブラウザでも同じように崩れているかを見てみましょう。
• ページを強制的に再読み込みしてみる — WindowsならCtrl＋F5、MacならCommand＋Shift＋Rで、キャッシュを無視した再読み込みができます。これだけで直ることも珍しくありません。
• 「いつから」「直前に何をしたか」を思い出す — ページを編集した、WordPressやプラグインを更新した、サーバーを移転した、など直前の出来事が原因の手がかりになります。

どの端末で見ても崩れている場合は、サイト側に原因がある可能性が高い状態です。次の章で、よくある原因を症状別に見ていきましょう。

よくある表示崩れの原因と対処法

あくまで一般的な例ですが、症状ごとに考えられる原因と、まず試していただきたいことを整理すると次のようになります。

原因が分かれば自分で対処できるものもありますが、「原因がどれか分からない」「試しても直らない」場合は、それ以上触らないほうが安全なこともあります。

スマホで見たときだけ崩れる場合

「パソコンでは問題ないのに、スマホだと文字がはみ出す・画像が重なる」という相談は特に多いパターンです。この場合、ページが壊れたというより、そもそもスマホ表示に対応しきれていないことが原因になっているケースがよくあります。

数年前に作ったままのホームページは、当時のスマホ事情に合わせて作られているため、今の画面サイズでは崩れて見えることがあります。今はホームページを見る人の半分以上がスマホからと言われており、スマホで崩れたままにしておくのは、それだけで問い合わせの機会を逃していることになります。部分的な調整で済むのか、スマホ対応そのものが必要なのかは、現状を確認したうえでの判断になります。

WordPressの表示崩れは「更新」が引き金になりやすい

WordPressで作られたサイトの場合、本体・テーマ・プラグインの更新をきっかけに表示が崩れることがよくあります。それぞれが別々に更新されていくため、組み合わせによっては相性の問題が起きるからです。自動更新が有効になっていて、「何もしていないのに崩れた」ように見えるケースもあります。

• 直前に更新したテーマ・プラグインがあれば、一つずつ停止して表示が戻るか確認する
• 複数のプラグインを一度に更新した場合は、どれが原因かを切り分ける
• 停止・切り戻しの前に、可能であればバックアップを取っておく

プラグインの停止くらいであれば管理画面から試せますが、テーマのファイルを直接編集するような対処は、誤ると被害が広がることがあります。不安を感じたら、その時点で手を止めて相談したほうが結果的に早く済みます。

自分で直せるケースと、プロに任せたほうがよいケース

費用をかけずに済むなら、それに越したことはありません。判断の目安として、次のように分けて考えると整理しやすくなります。

• 自分で直しやすいケース — キャッシュの再読み込みで直る、直前に自分で編集した箇所が原因と分かっていて元に戻せる、画像の再アップロードで済む、など原因がはっきりしている軽微なもの。
• 任せたほうが安全なケース — 原因が分からない、サイト全体が崩れている、スマホ表示への対応が必要、WordPressの更新が絡んでいる、管理画面に入れない、急いで直したい、など。

公開中のサイトは、直そうとして触った結果、かえって崩れが広がってしまうことがあります。「まず試してみて、直らなければ相談する」で十分ですが、試す前の状態に戻せるようにしてから進めると安心です。

修正を依頼する場合の費用の目安

表示崩れの修正を依頼する場合の料金は、崩れの範囲と原因によって幅があります。あくまで一般的な目安ですが、次のような幅になることが多いです。

崩れの修正とあわせて、再発を防ぐための保守までまとめて相談されるケースも多いです。blancの具体的な料金は料金ページもあわせてご覧ください。

まとめ

ホームページの表示が崩れたときに、押さえておきたいポイントは次の3つです。

• いきなり触らず、まず「他の端末でも崩れているか」「再読み込みで直るか」「直前に何をしたか」を確認する
• キャッシュや自分の編集が原因なら自分で直せることも多い。原因不明・全体崩れ・スマホ表示・WordPress更新絡みは依頼したほうが安全
• 依頼する場合、軽微な修正は数千円〜、予防を含む継続保守は月額5,000円程度〜が一つの目安

blancのホームページ修正・更新サービスでは、他社が制作したサイトの表示崩れや、原因が分からない状態からの調査にも対応しています。相談・現状調査・お見積りは無料ですので、「どこが原因か分からない」という段階でも、崩れている画面の状況をそのままお聞かせください。確認したうえで、直し方と費用の目安をお伝えします。