スマホ表示だけ崩れるWordPressサイトで最初に見るべき場所

PCでは問題ないのに、スマホで見ると画像がはみ出る。文字が大きすぎる。ボタンが横に切れる。WordPress制作ではよくあるトラブルです。

焦ってあちこち触ると、スマホは直ったのにPCが崩れることがあります。大事なのは、原因を順番に切り分けることです。

最初に横スクロールの原因を探す

スマホ表示で特に多いのが、画面の横スクロールです。これは、どこかの要素が画面幅を超えている状態です。画像、表、横並びのカラム、長い英数字、固定幅のボタンなどが原因になりやすいです。

まず、どのページで横スクロールが起きているかを確認します。全ページで起きるならヘッダーや共通パーツの可能性があります。特定ページだけなら、そのページ内の画像やコンテナ設定を見ます。

スマホ崩れの原因として多いのが、幅の固定です。PCで見た目を整えるために、画像やカラムに固定幅を入れていると、スマホでは収まりません。

Elementorなら、コンテナやウィジェットの幅設定を確認します。CSSを追加している場合は、widthに大きなpx指定が入っていないかを見ます。必要に応じて、最大幅は指定しても、画面幅に合わせて縮む設定に変えます。

PCでちょうどいい余白や文字サイズは、スマホでは大きすぎることがあります。特に見出し、ファーストビュー、CTA周辺は注意が必要です。

スマホでは、余白を詰めるだけでなく、情報量も見直します。長い見出しをそのまま表示すると、改行が増えて画面の大半を占めることがあります。読ませたい順番に合わせて、見出しや補足文を短くする判断も必要です。

スマホ表示だけ崩れる場合、ヘッダーが原因のこともあります。ロゴが大きすぎる、メニューアイコンが押しにくい、固定ヘッダーが本文にかぶる、といった問題です。

スマホでは、ヘッダーは小さくても機能すれば十分です。PCと同じ情報量を詰め込むより、ロゴ、メニュー、問い合わせ導線など、必要な要素に絞るほうが安定します。

ブラウザの検証ツールだけでなく、できれば実機でも確認します。特にiPhoneとAndroidでは、フォントの見え方やフォームの挙動が違うことがあります。

すべての端末で完璧に見るのは現実的ではありません。ただ、主要な画面幅で確認する習慣があるだけで、納品後の指摘はかなり減ります。

スマホ崩れは、制作者の経験差が出やすい部分です。毎回同じような崩れに悩むなら、TOFUラボのような場所で、自分の修正手順を見てもらうのも有効です。直し方だけでなく、崩れにくい作り方を身につけることが大事です。