AIで作ったサイトがスマホで崩れる原因5つと直し方｜AIへの指示文つき

結論: 「崩れてる」とだけ伝えても、AIはなかなか直せません。先に犯人の要素を見つけて、幅とクラス名を添えて渡してください。

• どこが悪いのかまだ分からない → Chromeのデバイスモードで 320／375／768px の3つの幅を見る
• 症状はもう見えている → 下の早見表で、5つの原因のどれに当たるかを選ぶ
• AIに直させたい → 「どの幅で・どの要素が・どうなるか」と「やってはいけないこと」を渡す

PCのプレビューでは完璧だったLP。クライアントにURLを送ったら「スマホだと横に揺れるんですけど」と返ってくる。AIで組んだサイトだと、これがよく起きます。

総務省の調査では、ネットにつなぐ端末にスマホを使う人は2024年に74.4%でした。クライアントの初回チェックは、ほぼスマホだと思っておいたほうがいいです。

この記事の目次

1. スマホで崩れたら、まず何px幅で見ればいい？
2. 横に揺れる？文字が変？症状から原因を見分ける早見表
3. 1. はみ出し：右側に白い帯が出るのはなぜ？
4. 2. 文字サイズ：見出しが改行だらけ、本文が小さいときは？
5. 3. 画像比率：人物が縦長に潰れる、顔が切れるのはなぜ？
6. 4. 固定幅：AIが書いた1200pxが縮まないときは？
7. 5. 横スクロールは overflow-x: hidden で消していい？
8. AIに「崩れてる」と言っても直らないときの指示テンプレ
9. よくある質問
10. この記事のまとめ

スマホで崩れたら、まず何px幅で見ればいい？

320・375・768pxの3つの幅で開いて、画面の外に出ている要素を探します。

デバイスモードには、モバイルS 320px、モバイルM 375px、タブレット 768pxといった幅が最初から入っています。画面の右端より外まで伸びている要素があれば、それが犯人です。

Googleの「モバイルフレンドリーテスト」は2023年12月1日に提供を終えたので、代わりはこのデバイスモードです。ただ、Chromeの公式ドキュメント自身が「一次近似」と書いています。最後は実機で開いてください。

320pxは、アクセシビリティの基準WCAG 1.4.10でも使われている幅です。

個人的には、375pxだけで済ませず320pxも見るのが、いちばん手間に見合うと思っています。幅が狭いほど、はみ出しがはっきり出るからです。

横に揺れる？文字が変？症状から原因を見分ける早見表

指で横に動くのか、文字や画像の見た目がおかしいのか。そこで原因はほぼ絞れます。

← 表は横にスクロールできます →

選び方の基準：MDN・web.dev・Chromeの公式ドキュメントに書かれている原因を、症状ごとに5つに分けました。番号は優先度の順ではありません。

1. はみ出し：右側に白い帯が出るのはなぜ？

多いのは「長い英数字やURL」「paddingの足し算」「flexの中身が縮まない」の3つです。

• 長いURLやメールアドレス：区切れる位置がないと改行されません。overflow-wrap: anywhere; を付ければ、どこでも折り返せます
• paddingの足し算：box-sizing の初期値は content-box です。MDNの例では、width: 350px に border: 10px を足すと表示幅は370pxになります。box-sizing: border-box; なら350pxに収まります
• flexやgridの中身：子要素は、初期設定のままだと中身より細くなりません。子要素に min-width: 0; を付けます

*, *::before, *::after { box-sizing: border-box; }
.card-body { min-width: 0; overflow-wrap: anywhere; }

地味に見落としやすいのが min-width です。AIは横並びのカードをflexで組むことがあります。カードの中に長いURLが1本入るだけで、ページごと崩れます。

2. 文字サイズ：見出しが改行だらけ、本文が小さいときは？

clamp()で「最小・推奨・最大」を決めれば、メディアクエリなしで画面幅に合わせて変わります。

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }

AIはPC基準で font-size: 64px のような大きい見出しを書くことがあります。PC用の大きさのままだと、スマホでは短い見出しでも何行にも折り返します。

本文の大きさはどうか。Lighthouseの以前の監査には「テキストの60%以上を12px以上に」という目安がありましたが、2025年10月公開のLighthouse 13で削除されています。よく聞く「本文16px」は業界の慣習で、公式の基準ではありません。

3. 画像比率：人物が縦長に潰れる、顔が切れるのはなぜ？

width と height を両方固定しているからです。初期値の object-fit: fill が画像を引き伸ばします。

← 表は横にスクロールできます →

写真ならcover、ロゴならcontain。迷ったらこの2択で考えれば足ります。

.hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

注意点が2つあります。

• aspect-ratio は、幅か高さのどちらかが auto でないと効きません
• web.devは、img タグに width と height の属性を書くよう勧めています。読み込み前に縦横比が分かるので、表示がガクッとずれる現象（CLS）を防げます

4. 固定幅：AIが書いた1200pxが縮まないときは？

width を max-width に置き換え、width: 100% と組み合わせます。たいていはこれで直ります。

.container { width: 100%; max-width: 1200px; margin-inline: auto; }
img, video { max-width: 100%; }

AIにTailwindで書かせているなら、次の3つを先に疑ってください。

← 表は横にスクロールできます →

sm: は「小さい画面」ではなく「640px以上」。Tailwindの公式ドキュメントにもはっきり書いてあります。

これはAIも人間もよく取り違えるところです。「スマホだけ直して」と頼んだのに sm: が増えていたら、まずそこを疑ってください。

5. 横スクロールは overflow-x: hidden で消していい？

消えたように見えるだけです。原因を直したあとの保険としてなら使って構いません。

• hiddenの正体：MDNの説明では、はみ出した部分を切り取り、その要素を「スクロールバーのないスクロールコンテナー」にするもの
• 固定ヘッダーが効かなくなることがある：sticky（スクロールしても上に貼り付く表示）は、overflow が hidden の直近の祖先要素にくっつきます。いつも効かなくなるわけではありません
• 表は例外でいい：表だけを overflow-x: auto の箱で囲めば、表の中だけ横にスクロールできます

AIに「横スクロールを消して」と頼むと、最初に hidden を足してくることがあります。見た目は直っても、ボタンの右端が切れたまま残ることがあるので要注意です。

AIに「崩れてる」と言っても直らないときの指示テンプレ

「幅・要素・症状・残したいもの・禁止事項」の5つをそろえると、AIの返答がぶれにくくなります。

そのまま貼って、幅とクラス名だけ自分の案件に書き換えてください。

画面幅375pxで、.price-table が右に約120pxはみ出し、ページ全体が横スクロールします。
PC表示（1024px以上）の見た目は変えないでください。
原因になっている固定幅を max-width と width:100% に置き換えてください。
次のことはしないでください：
- overflow-x: hidden で隠す
- viewport に user-scalable=no や maximum-scale=1 を入れる
変更した行と、変更した理由を1行ずつ書いてください。

禁止事項の2つ目には理由があります。MDNによると、user-scalable=no を入れると弱視の人が文字を拡大できなくなります。しかも iOS 10以降では、この指定はもともと無視されます。AIが入れてきたら、消すよう指示してください。

ついでに head も見ておきます。<meta name="viewport" content="width=device-width, initial-scale=1"> がないと、スマホでもページが980px幅で描かれ、全体が縮小表示されます。

1回の指示で頼む修正は、1つの原因に絞るのがいいと考えています。5つまとめて頼むと、どの変更で直ったのか追えません。次に崩れたとき、戻す場所も分からなくなります。

よくある質問

Q. 右に余白ができるのに、はみ出している要素が見つかりません。 A. 100vw に padding が足された要素や、margin がマイナスの要素を疑ってください。body 直下の要素から順に幅を確かめていくと見つかります。

Q. デバイスモードで問題なければ、実機で確認しなくてもいい？ A. 実機でも確認してください。Chromeの公式ドキュメントでも、デバイスモードはスマホでの見え方の「一次近似」とされています。

Q. 画像の width と height の属性は、スマホでも書いたほうがいい？ A. 書いてください。CSSで height: auto にしておけば、属性で比率を伝えつつ、幅に合わせて縮みます。

この記事のまとめ

• 確認する幅は320・375・768pxの3つ。最後は実機で見る
• 「横に動く」なら、はみ出し・固定幅・横スクロール。「見た目が変」なら、文字サイズ・画像比率
• overflow-x: hidden は、原因を直したあとの保険にとどめる
• AIには「幅・要素・症状・残すもの・禁止事項」をそろえ、1回に1つの原因だけ頼む

次にやることは1つです。いま手元にある案件をデバイスモードの320pxで開き、右端からはみ出している要素のクラス名を1つメモしてください。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。