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

なお、これから公開するホームページ全体のチェック項目を知りたい場合は「ホームページ公開前チェックリスト｜初心者が見落としがちな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を入力すると、モバイル・デスクトップそれぞれの診断結果が表示されます。表示速度が主な指標ですが、あわせてページ構造上の問題点が指摘されることもあるため、表示崩れの原因を探る補助的な手段として活用できます。画面の仕様は変更されることがあるため、実際にアクセスして最新の表示内容を確認してください。

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

DevToolsのエミュレーションはレイアウトの再現には便利ですが、実際のフォント描画やタップのしやすさまでは正確に再現できません。可能であれば、自分のスマホで実際にページを開いて最終確認することをおすすめします。

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

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

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

画像タグに固定px幅を指定している場合は、CSSで画面幅に応じて縮小するように変更します。

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

これは画像を画面幅に合わせて自動的に縮小する、非常に一般的な対策です。ぼやけて見える場合は、表示サイズに対して元画像の解像度が低すぎることも原因になるため、元画像自体の解像度も確認してください。

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

表そのものの列数・幅を変えずに、横スクロールできるようラップ要素で囲む方法が手軽です。

<div style="overflow-x:auto;">
  <table>...</table>
</div>

/* CSSで書く場合 */
.table-wrap {
  overflow-x: auto;
}

列数が多い比較表の場合は、横スクロールだけでは読みにくいことがあります。その場合は、スマホ表示時だけ1行ずつカード型に組み替えるレイアウトへの変更も検討してください（実装にはある程度のCSS知識が必要です）。

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

本文の文字サイズが極端に小さい場合は、スマホ表示時のフォントサイズを個別に見直します。ボタンやリンクが押しにくい場合は、タップ領域そのものを広げることが有効です。Googleは最小のタップ領域として48×48px程度（見た目の要素が小さい場合はpaddingで余白を広げて実質的な領域を確保する方法）を推奨しているとされています。

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

このコードはボタンの大きさを確保するための一例です。既存CSSの優先順位や拡大・縮小などで結果は変わるため、指定した数値だけで押しやすさを判断しません。隣のボタンとの間隔、文字の折り返し、実機でのタップも確認してください。

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

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

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

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

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

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

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

よくある質問