スマホで見ると、サイトの表示が崩れる

文字がはみ出す。横にスクロールできてしまう。ボタンが押しにくい。パソコンでは問題ないのに、スマホだけおかしい。訪問者の大半はスマホで見ているので、ここが崩れていると、それだけで問い合わせが減ります。原因は数パターンです。

こんな状態ではありませんか

・横にスクロールできてしまう
・文字や写真が画面からはみ出す
・ボタンが小さくて押しにくい
・メニューが開かない・重なる

自分で確認できること

上から順に見てください。ここで分かってしまえば、それで構いません。

1
パソコンでスマホの幅を再現する
ブラウザでサイトを開き、F12（開発者ツール）→ 左上のスマホのアイコンをクリック。幅を375pxにすると、多くのiPhoneと同じ条件で見られます。実機がなくても確認できます。
2
横スクロールの原因を探す
同じ開発者ツールのConsoleに次を貼って実行すると、画面幅からはみ出している要素が並びます。 document.querySelectorAll("*").forEach(e=>{if(e.getBoundingClientRect().right>window.innerWidth+1)console.log(e)})
3
viewportの指定があるか見る
ページのソースに <meta name="viewport" ...> が無いと、スマホがパソコン向けの幅で表示しようとします。古いサイトでは、これが無いことがあります。
4
固定幅の指定を探す
width: 1200px のように固定の幅が書かれていると、狭い画面に収まりません。max-width に変えるだけで直ることが多いです。
5
長いURLや英単語が原因か確認する
途中で折り返せない長い文字列（URLやメールアドレス）が、1行のまま画面を押し広げていることがあります。

よくある原因

viewportの指定が無い

スマホ対応の出発点です。これが無いと、何をしてもスマホでは縮小表示になります。1行足すだけです。

固定幅で組まれている

スマホが普及する前に作られたサイトによくあります。部分的に直せる場合と、作り直したほうが早い場合があります。

写真が原寸のまま

横幅3000pxの写真をそのまま置くと、スマホでははみ出します。表示幅に合わせる指定を入れるか、画像自体を縮めます。

テーマの更新で崩れた

見た目のテーマを更新したとき、カスタマイズした部分だけが崩れることがあります。どこを触ったかの記録が無いと、探すのに時間がかかります。

それでも直らないとき

サイト・システムの修理

¥50,000〜

崩れている箇所を特定して直します。全体を作り直さずに済むことが多いです。作り直したほうが早い状態であれば、正直にそうお伝えします。

相談する（無料）料金を見る

直すより、作り直したほうが早いとき

いまのサイトが古く、直す先が多いなら

同じ症状が何度も出るサイトは、一つずつ直しても切りがないことがあります。作り直しが向いている場合のために、当社は月額のホームページ制作サービス「LARU HP」を運営しています。月額999円（税別）から、常時SSL・スマートフォン表示・問い合わせフォーム・検索向けの基本設定まで含みます。受託でお引き受けするより安く済む規模であれば、そちらをご案内します。

LARU HP を見る業種別の見本を見る（登録不要）

よくある質問

作り直さないと直りませんか。+

多くは部分的な修正で直ります。ただし、スマホが普及する前の作りのまま止まっているサイトは、直し続けるより作り直したほうが安くつくことがあります。

どの端末で確認すればいいですか。+

幅375pxと390pxで見られれば、実用上は足ります。開発者ツールで再現できます。

スマホ対応は検索順位に影響しますか。+

します。Googleはスマホでの表示を基準に評価します。それ以前に、見づらいサイトからは人が戻ってしまいます。

ほかの困りごと

こちらから送ったメールが、相手の迷惑メールに入るサーバーを移転したい、契約を見直したい問い合わせフォームのメールが、届かない

最終更新 2026-09-16｜株式会社LaruVisona