ホームページがスマホで崩れる原因と直し方｜レイアウトのずれ・文字のはみ出し・ボタンが押せない

結論：まず「どの端末・どのページで崩れるか」を確かめてください。原因はほぼ5つです

スマホで崩れて見えるとき、原因はほとんどの場合、次の5つのどれかです。

1. そもそもスマホ対応（レスポンシブ）になっていない
2. WordPressやプラグインの更新で、デザインの設定（CSS）が効かなくなった
3. 画像や表が、スマホの画面幅を超えている
4. 文字やボタンが小さすぎて、読めない・押せない
5. 直したのに、古い表示（キャッシュ）が残っている

確認は簡単です。自分のスマホと、家族や同僚のスマホの両方で、トップページと問い合わせページを開いてみてください。「全部のページで崩れる」なら1か2、「特定のページだけ」なら3、「自分のスマホだけ」なら5の可能性が高いです。

私たちは、管理しているお客様のサイトで更新のたびにスマホ表示を目で確認しています。更新したあとに崩れることが多いので、作業とセットで見るのが確実です。

症状から原因の見当をつける

スマホでの症状	考えられる原因
画面が横にスクロールする、全体が小さく縮んで見える	スマホ対応になっていない（原因1）
昨日まで普通だったのに、急にレイアウトがずれた	更新でCSSが効かなくなった（原因2）
特定のページだけ、画像や表が切れる・はみ出す	画像・表の横幅（原因3）
文字が読めないほど小さい、ボタンやリンクが押しにくい	文字・ボタンのサイズ（原因4）
直したはずなのに、自分のスマホでは直っていない	キャッシュ（原因5）

原因1：スマホ対応（レスポンシブ）になっていない

数年前に作ったサイトで、画面全体が縮んで表示される場合は、これです。パソコン用の横幅のまま、スマホに無理やり収めているので、文字は米粒のようになり、指でつまんで拡大しないと読めません。

見分け方は、スマホでページを開いて、横にスクロールできるかどうかです。横に動くなら、スマホ対応になっていません。

直し方は、サイトをスマホ対応（レスポンシブ）に作り直すことです。WordPressなら、スマホ対応のテーマに切り替えるだけで直ることもありますが、ページの中身や画像の調整が必要になるため、部分的な修正では直りません。作り直しを検討する時期です。

原因2：WordPressやプラグインの更新で、CSSが効かなくなった

昨日まで普通だったのに急に崩れた、という場合は、ほとんどこれです。WordPress本体やテーマ、プラグインを更新したとき、デザインを決めているファイル（CSS）の読み込みが止まったり、テーマの仕様が変わったりして、レイアウトが崩れます。

• 更新したあとから崩れた
• パソコンでも少し崩れているが、スマホのほうがひどい
• 管理画面に「更新に失敗しました」と出ていた

このケースは、原因になった更新を特定して、設定を直せば戻ります。ただし、テーマを直接書き換えていたサイトは、更新でその書き換えが消えていることがあり、復元が必要です。

更新まわりの対処は「WordPressが更新できないときの原因と対処法」でまとめています。

原因3：画像や表が、スマホの画面幅を超えている

特定のページだけ崩れる場合は、そのページに置いた画像や表が原因のことがほとんどです。横幅の大きい画像をそのまま貼ったり、列の多い表を入れたりすると、スマホの幅に収まらず、ページ全体が横にはみ出します。

直し方は、画像に「横幅100%以内」の指定を入れる、表は横スクロールできる形にするか、スマホでは縦に並べる形にすることです。WordPressの編集画面で、ブロックの設定を変えるだけで直ることも多いです。

料金表や会社概要を画像だけで貼っているサイトは、スマホで読めないうえに、検索エンジンやAIにも読み取られません。文字で入れ直すのがおすすめです。

原因4：文字やボタンが小さすぎて、読めない・押せない

崩れてはいないけれど「見づらい」「押しにくい」という場合です。パソコンでちょうどいい大きさの文字やボタンは、スマホでは小さすぎます。

• 本文の文字は、スマホで16px以上が目安です
• ボタンやリンクは、指で押せる大きさ（高さ44px以上が目安）にします
• 電話番号は、タップしたら電話がかかるようにしておきます

問い合わせボタンが押しにくいだけで、問い合わせは減ります。崩れていなくても、一度自分のスマホで「問い合わせまでたどり着けるか」を試してみてください。

原因5：直したのに、古い表示（キャッシュ）が残っている

修正したのに自分のスマホでは直っていない、という場合は、古い表示が残っているだけのことが多いです。ブラウザやサーバーが、以前の状態を覚えています。

• スマホのブラウザで、ページを開き直す（タブを閉じて、もう一度開く）
• それでも直らなければ、ブラウザの履歴・キャッシュを削除する
• サーバー側のキャッシュ（高速化のプラグインなど）を使っている場合は、管理画面からキャッシュを削除する

別の端末や、Wi-Fiではなくモバイル回線で開いて直っていれば、キャッシュが原因です。

放置すると、どれだけ損をするか

今は多くの業種で、ホームページを見る人の半分以上がスマホです。Googleも、スマホで表示される内容をもとにサイトを評価しています（モバイルファーストインデックス）。

放置した場合の影響	内容
問い合わせ	読みづらい・押しづらいページは、その場で閉じられます
検索順位	スマホで使いにくいサイトは、評価が下がります
信用	「スマホで見たら崩れていた」は、会社の印象にそのまま直結します
広告費	広告でスマホから来た人が、崩れたページで帰ってしまいます

パソコンで見ているあなたには見えていない損失です。社内の誰も気づかないまま、問い合わせだけが減っていきます。

自分で直せるケース・頼んだほうがいいケース

自分で試してOK	頼んだほうがいい
ブラウザを開き直す、キャッシュを削除する	更新で崩れたが、原因が分からない
画像のサイズをブロック設定で変える	CSSやテーマのファイルを直す必要がある
文字サイズをテーマの設定で変える	スマホ対応になっていない（作り直し）
別の端末で確認する	制作会社と連絡が取れない

テーマのファイル（style.cssやfunctions.php）を直接書き換えるのは、1文字のミスでサイト全体が真っ白になることがあります。慣れていない方は触らず、バックアップのある状態で頼んでください。

制作会社と連絡が取れない場合の進め方は「ホームページ制作会社と連絡が取れない・倒産したときの対処法」でまとめています。

頼むと、いくらかかる？

参考までに、ベストフューチャーでお受けしている料金は次のとおりです（税込）。

作業	料金
軽微なCSS・表示の修正（はみ出し、ずれの調整）	4,400円
不具合の原因調査（崩れた原因の特定）	3,300円〜
画像の差し替え・サイズ調整	550円〜

1回ずつの料金は「ホームページ修正代行」にまとめています。毎月の保守管理（月1万円・税別）には、更新後のスマホ表示の確認も含まれます。「更新したら崩れた」が起きない状態にしておくほうが、結果的に安く済みます。くわしくは「ホームページ保守管理」をご覧ください。

スマホ対応になっていなくて作り直しが必要な場合は、制作費0円・月9,900円（税込）のサブスク型ホームページという選択肢もあります。

【当サイト調査】制作会社616社のうち、スマホ対応を明記しているのは193社でした

当サイトに掲載している、関東3県と山梨県のホームページ制作会社616社の公式サイトを調べたところ、「スマホ対応」「レスポンシブ」を明記している会社は193社（31%）でした（2026年10月時点）。

今の時代、スマホ対応は当たり前のはずですが、3社に2社は、公式サイトにそれを書いていません。これから制作や作り直しを頼むなら、「スマホでどう見えるか」を最初に確認し、実際に制作した他社のサイトをスマホで開いてみるのがおすすめです。

県ごとの制作会社の比較は「千葉県のおすすめホームページ制作会社10選」などでまとめています。

よくある質問

パソコンでは普通なのに、スマホだけ崩れます。

スマホ対応になっていないか、スマホ用の設定（CSS）だけが効かなくなっているかのどちらかです。横にスクロールできるなら前者、昨日まで普通だったなら後者の可能性が高いです。

iPhoneでは普通なのに、Androidだけ崩れます（またはその逆）。

端末ごとの画面幅やブラウザの違いで、特定の端末だけ崩れることがあります。画像や表の横幅、文字サイズの指定がぎりぎりの場合に起こりやすいです。原因の特定からお受けしています。

自分で直そうとして、さらに崩れてしまいました。

まず、それ以上触らないでください。直前のバックアップがあれば戻せます。なければ、現状を確認して戻せるところまで戻します。何をどう変えたかを覚えている範囲でお伝えください。

スマホ対応に作り直すと、いくらかかりますか？

ページ数や内容によりますが、今のサイトの文章や写真を流用できれば費用は抑えられます。制作費0円・月額9,900円のサブスク型なら、初期費用なしでスマホ対応のサイトに切り替えられます。まずは今のサイトを拝見してお見積もりします。

まとめ

• 崩れる原因はほぼ5つ。「全ページか・特定ページか・自分の端末だけか」で見当がつく
• 急に崩れたなら、更新が原因のことがほとんど。設定を直せば戻る
• 横にスクロールするなら、スマホ対応になっていない。作り直しの時期
• 放置すると、パソコンでは見えないところで問い合わせが減り続ける

ベストフューチャーでは、他社が作ったホームページでも、スマホ表示の崩れの原因調査から修正までお引き受けしています。「どこがおかしいのか説明できない」という段階でも大丈夫です。スマホのスクリーンショットを送っていただければ、確認は無料です。無理な営業はしません。