ホームページのスマホ表示崩れをチェック・修正する方法｜初心者向けレスポンシブ対応ガイド

なお、これから公開するホームページ全体のチェック項目を知りたい場合は「ホームページ公開前チェックリスト｜初心者が見落としがちな20項目」を、設計から公開後の改善まで全体像を整理したい場合は「個人事業主のホームページ設計ロードマップ｜6つの基本ページをつなぐ作り方」をあわせてご覧ください。WordPressで自作する流れから確認したい場合は「個人事業主のホームページをWordPressで自作する方法｜初心者でも集客できる完全ガイド」が入口です。本記事は、すでに公開しているサイトで「スマホだけ崩れている」ことに気づいた方向けに、原因の特定と修正方法に絞って解説します。

なぜパソコンでは正常なのにスマホだと崩れるのか

パソコンとスマホでは画面幅が大きく異なるため、幅の指定が固定的な作りになっていると、パソコンでは問題なく見えても、スマホの狭い画面幅では崩れとして表面化します。よくある原因は次の3つです。

スマホとPCの表示崩れを簡単に直せるツールはある？

サイト全体の表示崩れを安全にワンクリックで自動修正できる万能ツールはありません。まず無料のChrome DevToolsで崩れる画面幅と要素を特定し、PageSpeed Insightsや実機確認を補助に使うのが現実的です。原因が画像の固定幅やテーブルなら数行のCSSで直せることがありますが、テーマ全体の構造が原因なら自動修正よりバックアップを取って部分的に直す方が安全です。

表示崩れを無料でチェックする方法

専門知識がなくても、以下の無料の手段で表示崩れを確認できます。まずは原因を推測する前に、実際の崩れ方を目視で確認しましょう。

Chrome DevToolsのレスポンシブデザインモードの使い方

確認したいページをChromeで開き、キーボードショートカット（Windows: Ctrl+Shift+M、Mac: Cmd+Shift+M）でデバイスツールバーの表示を切り替えます。ショートカットが効かない場合は、先にDevTools自体を開いてから切り替えてください。DevToolsを開くショートカットはWindows/LinuxではF12またはCtrl+Shift+I、MacではFn+F12またはCmd+Option+Iです（MacはCmd+Shift+Iでは反応しないため注意してください）。画面上部のプルダウンから任意のスマホ機種を選ぶか、画面幅を数値で直接指定して、崩れが起きる幅を特定できます。ショートカットキーはChromeのバージョンによって多少異なる場合があるため、反応しない場合はDevToolsのメニューから操作してください。

PageSpeed Insightsでモバイル診断を確認する

PageSpeed Insights（https://pagespeed.web.dev/）にサイトのURLを入力すると、モバイル・デスクトップそれぞれの診断結果が表示されます。表示速度が主な指標ですが、あわせてページ構造上の問題点が指摘されることもあるため、表示崩れの原因を探る補助的な手段として活用できます。画面の仕様は変更されることがあるため、実際にアクセスして最新の表示内容を確認してください。

実機での確認も必ず併用する

Chrome DevToolsのデバイスモードは、スマホ表示を近似するための確認機能です。実機そのものではないため、最後はスマホで文字・操作・表示を確認します。まず同じURLを幅320px・375px・425pxで開き、「ページ全体に横スクロールが出るか」「画像や表だけがはみ出すか」「ボタンやメニューが操作できるか」を順に確認してください。この3幅はChrome公式のプリセットを使った確認例で、すべての端末への対応を保証する基準ではありません。崩れる幅と場所を記録し、該当する要素だけ修正してからパソコン表示も再確認します。

Chrome公式：デバイスモードの使い方と実機確認が必要な理由（確認日：2026年10月6日）。

症状別の直し方（CSS修正例つき）

原因が特定できたら、症状に応じて以下のように対処します。個別サイトのテーマやプラグインの実装によって調整が必要な場合がありますが、まずは基本形として押さえておくと応用が利きます。

画像がはみ出す・ぼやける場合

画像自体が縮まらないことを確認したら、次の考え方で幅を調整します。例のimgは画像全般に一致するため、そのままサイト共通CSSへ追加せず、DevToolsで崩れている画像を選び、既存クラスなどで対象を限定して試してください。親の枠がはみ出している場合は、その枠を先に調べます。

img {
  max-width: 100%;
  height: auto;
}

このCSSは画像を画面幅に収めるための例です。ぼやける問題は別に、表示幅に対して配信画像が小さすぎないかを確認します。メディアライブラリの元画像だけでなく、公開ページで使われる画像候補とファイル寸法を比べてください。画像は鮮明でも全体が小さい、端だけ切れる場合は、ブロックや外側の枠の幅・縦横比も分けて調べます。

表がスマホで見切れる場合

料金表だけが右へ切れる場合は、表の外側に横スクロール用の枠を作ります。表を縮めて文字を極端に小さくする前に、枠の幅を本文内へ収め、右端の列まで読める形を試してください。

<p id="yh-price-hint">表は横にスクロールできます。</p>
<div class="yh-price-scroll" tabindex="0" role="region"
     aria-label="料金比較表" aria-describedby="yh-price-hint">
  <table>
    <caption>料金比較（架空の例）</caption>
    <thead><tr>
      <th scope="col">プラン</th>
      <th scope="col">料金の例</th>
      <th scope="col">含む作業の例</th>
    </tr></thead>
    <tbody>
      <tr><th scope="row">A</th><td>10,000円</td><td>1ページの文章調整</td></tr>
      <tr><th scope="row">B</th><td>30,000円</td><td>3ページの文章調整</td></tr>
    </tbody>
  </table>
</div>

.yh-price-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.yh-price-scroll table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}
.yh-price-scroll th,
.yh-price-scroll td {
  padding: 12px;
  border: 1px solid #dce5ef;
  text-align: left;
  overflow-wrap: anywhere;
}
.yh-price-scroll:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

まだページ全体が横にはみ出す場合は、表の枠の外に固定幅の要素がないかも確認します。横スクロールで比較しづらい表は、項目を減らす、用途別に表を分ける方法も選べます。body { overflow-x: hidden; }だけで隠して、読めない列を残さないようにしましょう。

文字が小さい・ボタンが押しにくい場合

本文の文字サイズが極端に小さい場合は、スマホ表示時のフォントサイズを個別に見直します。ボタンやリンクが押しにくい場合は、タップ領域そのものを広げることが有効です。Chrome Lighthouse / web.devでは、モバイルのタップ領域は約48×48pxを目安にし、近接するターゲットには十分な間隔を持たせる考え方が案内されています。見た目のアイコンが小さい場合でも、paddingで実際のタップ領域を広げられます。

.button {
  display: inline-block;
  min-width: 48px;
  min-height: 48px;
  padding: 12px 20px;
}

例の.buttonは、実際のボタンにそのクラスがある場合だけ一致します。見た目がボタンでも、別のクラスならそのままでは適用されません。DevToolsで対象と適用中のCSSを確認し、範囲を限定します。数値だけで押しやすさを判断せず、隣との間隔、文字の折り返し、実機でのタップを確かめてください。

コラム：WordPress（Cocoon等）特有の崩れ方にも注意

自分で直せる範囲と、専門家に依頼すべき範囲

ここまでの内容の多くは、CSSの基本的な知識があれば自力で対応できます。一方で、以下のようなケースは無理をせず専門家に相談したほうが安全です。

「そもそも自作・AI活用・外注のどれで運営していくべきか」から判断したい場合は「個人事業主向けホームページ制作の選び方｜自作・AI活用・外注を徹底比較」も参考にしてください。また、表示崩れが特定のテーマの構造に起因している場合、テーマ自体の作り込みの丁寧さも関係します。テーマ選びの基準は「WordPressテーマは無料と有料どっち？費用・機能・サポートで比較」で解説しています。

修正後の確認チェックリスト

修正が完了したら、以下の手順で「本当に直ったか」を確認しましょう。

公開前の総合的なチェック項目は「ホームページ公開前チェックリスト｜初心者が見落としがちな20項目」を、公開後の定期チェックの習慣化は「ホームページ運営 月次メンテナンスチェックリスト｜個人事業主が毎月確認すべき20項目」を参考にしてください。Google Search Consoleを併用している場合は、URL検査ツール等の関連機能について「Google Search Consoleの使い方」でも解説しています。

よくある質問