投稿する
マガジン
著者：アソバース編集部公開：更新：約11分で読めます

スマホで横にはみ出す・文字が小さいWebツールの原因を、AIと切り分ける手順

AIを使いこなす

Claudeで執筆し、GPTで自動校閲・修正しています。

幅の狭い紙からはみ出す長い紙片の端を指で確かめる手元
記事の内容をもとに制作したAI生成イメージです。実際の製品画面や検証結果の写真ではありません。

スマホで見ると横にスクロールできてしまう、あるいは文字が極端に小さい。この二つの症状は、まず「viewportの指定が足りない」か「画面幅より広い要素が1つ混ざっている」かのどちらかを疑うと、短時間で切り分けられます。 AIに「スマホで崩れます。直してください」とコード全体を貼ると、関係のない箇所まで書き換えられ、どの修正が効いたのか分からなくなりがちです。この記事では、症状を2つに分け、原因候補を表で絞り、画面幅と要素名を添えた相談文でAIに1つずつ検証してもらう手順を紹介します。

この記事の目次
  1. まず症状を2つに分ける
  2. 症状別の原因候補表
  3. AIに渡す前に、人が測っておく3つ
  4. 相談文テンプレートと入力例
  5. AIの返答を受け取るときの確認ポイント
  6. 直らないときの次の一手

まず症状を2つに分ける

最初に見るのは次の2点です。

  1. ページ全体が縮small表示され、文字が小さい(PC版をそのまま縮めたように見える)
  2. 文字の大きさは普通なのに、画面が左右に動く(特定の部品が右にはみ出している)

1は、HTMLの<head>にviewportの指定がない場合の典型です。web.devの解説によると、スマートフォンが普及し始めた頃は多くのサイトがモバイル向けでなかったため、ブラウザは980px程度の幅で描画していました。指定がないと、その仮想的な広い幅をスマホの小さな画面に縮めて見せることがあります(web.dev「Responsive web design basics」)。MDNも、width=device-widthでビューポート幅を端末の実際の幅に合わせると説明しています(MDN「Responsive web design」)。

html
<meta name="viewport" content="width=device-width, initial-scale=1">

2は、画面幅より広い要素が1つあるだけで起きます。web.devも、固定幅の要素がビューポートより大きいと横スクロールが出ると述べ、画像にはmax-width: 100%、レイアウトにはパーセント指定やFlexbox、Gridの利用を勧めています。

なお、2の原因になる要素があると、ブラウザがページ全体を縮めて表示し、1と同じように「文字が小さい」と見えることがあります。viewportを確認しても直らないときは、2の調査に進んでください。

症状別の原因候補表

上から順に確認すると、手戻りが少なくなります。

  • ページ全体が小さく、PC版の縮小に見える、原因候補：viewportの<meta>がない、または書き間違い、確認すること：<head>にwidth=device-width, initial-scale=1があるか、AIに頼むこと：該当行だけの確認
  • 画像や動画だけが右にはみ出す、原因候補：widthの固定、max-widthの未指定、確認すること：画像の幅指定(HTML属性・CSS)、AIに頼むこと：img, videoへのmax-width: 100%の可否
  • ボタンや入力欄が右に突き出る、原因候補：width: 400pxのような固定値、min-widthの大きな値、確認すること：その要素のCSS、AIに頼むこと：固定幅をmax-widthや%に置き換える案
  • 長いURLや英数字の列で横に伸びる、原因候補：改行できない文字列、確認すること：表示している文字列の内容、AIに頼むこと：overflow-wrapの追加案
  • 表(table)が画面より広い、原因候補：列数が多く、折り返せない、確認すること：表の列数と各セルの幅、AIに頼むこと：表を囲む要素の横スクロール化、または縦並びへの変更案
  • 全幅にしたはずの帯が少し右にはみ出す、原因候補：100vwと余白・枠線の足し算など、確認すること：width: 100vw、padding、borderの併用、AIに頼むこと：width: 100%への置き換え案
  • 横並びの部品が折り返さず突き抜ける、原因候補：display: flexで折り返しが無効、確認すること：flex-wrapの有無、AIに頼むこと：flex-wrap: wrapの追加案

長い文字列については、MDNのoverflow-wrapの説明で、既定値では単語の区切りでしか改行されないため長いURLなどがはみ出すこと、break-wordやanywhereを指定すると途中でも改行できることが確認できます(MDN「overflow-wrap」)。

表の100vw、flex-wrap、paddingまわりは、CSSの一般的な挙動に基づく候補です。この記事の範囲では個別に公式ページを確認していないので、実際の画面で試して判断してください。

AIに渡す前に、人が測っておく3つ

AIは画面を見ていません。次の3点を人が測って渡すと、返答の精度が上がります。

1. 症状が出る画面幅

ブラウザの開発者ツールのデバイス表示(レスポンシブ表示)で、幅を変えながら横スクロールが出る幅を探します。「375pxで出て、600pxでは出ない」と分かれば、候補はかなり絞れます。

2. はみ出している要素の名前

開発者ツールの「要素の選択」で、右端に突き出ている部品をクリックし、タグ名とclass名を控えます。見つからないときは、コンソールに次のコードを貼ると、右端が画面幅を超えている要素を10個まで一覧にできます(説明用のコードで、私の側では実行していません。うまく動かない場合は手順1と2だけで十分です)。

js
const w = document.documentElement.clientWidth;
[...document.querySelectorAll('body *')]
  .filter(el => el.getBoundingClientRect().right > w + 1)
  .slice(0, 10)
  .forEach(el => console.log(
    el.tagName, el.className,
    Math.round(el.getBoundingClientRect().right)
  ));

3. その要素のHTMLとCSS

コード全体ではなく、該当要素と、それを囲む親要素1〜2段分のHTML、およびそれに効いているCSSだけを切り出します。APIキーや個人情報、本番のURLが混ざっていないかも貼る前に確認し、必要なら「sample-key」のようなダミーに置き換えてください。

相談文テンプレートと入力例

以下をそのままコピーして、【】の部分を埋めてください。

text
スマホ表示で【横スクロールが出る / 文字が小さい】問題を調べています。
一度に直さず、原因候補を可能性が高い順に挙げ、
それぞれ「何を確認すれば当たりか外れか分かるか」を教えてください。

【症状】
・出る画面幅:【例 375px】 / 出ない画面幅:【例 600px】
・見え方:【例 右に30pxほど動く。文字の大きさは普通】

【分かっていること】
・viewportのmeta:【あり(内容を貼る) / なし / 分からない】
・はみ出している要素:【例 <div class="result-box">】
・右端の位置:【例 コンソールの出力で 412】

【関連コード】(ここだけを貼ります)
HTML:【該当部分】
CSS:【該当部分】

【お願い】
・修正は、最も可能性が高い候補1つだけ、変更箇所を最小にして示してください
・変更前と変更後を並べ、なぜ効くのかも1〜2文で説明してください
・上記に書いていない箇所は書き換えないでください

以下は説明用の例です。実在のツールの結果ではありません。

text
【症状】
・出る画面幅:375px / 出ない画面幅:600px
・見え方:右に約30px動く。文字の大きさは普通

【分かっていること】
・viewportのmeta:あり(width=device-width, initial-scale=1)
・はみ出している要素:<div class="result-box">
・右端の位置:412

【関連コード】
CSS: .result-box { width: 412px; padding: 16px; }

この例なら、AIの答えは「固定幅412pxが375pxの画面より広い」という候補になるはずです。確認方法は、widthを100%に変える、またはmax-width: 100%を足して、375pxで横スクロールが消えるかを見ることです。

AIの返答を受け取るときの確認ポイント

返答をそのまま全部適用せず、次の順で扱います。

  • 1回に1つだけ適用する。 複数の修正を同時に入れると、何が効いたか分からなくなります。
  • 変更後に、同じ幅で再確認する。 症状が出た375pxで、横スクロールが消えたかを見ます。直ったら他の幅(320px、600px、PC幅)も眺めます。
  • 直らなければ、結果を伝えて次の候補へ進む。 「widthを直したが、まだ412pxのまま。次の候補を」と伝えます。
  • user-scalable=noを提案されても採用しない。 拡大できなくなると、見づらい人が読めなくなります。MDNはアクセシビリティ上の問題として警告しています(MDN「viewport meta」)。「文字が小さい」の解決策として、拡大禁止や極端なフォント拡大に頼らないでください。
  • body { overflow-x: hidden; }で隠すだけの案は、最後の手段にする。 はみ出しが見えなくなるだけで、右端の内容が切れて読めなくなる可能性があります。この点は編集上の注意で、公式資料で確認したものではありません。

直らないときの次の一手

上の手順で改善しない場合は、症状が変わったかを基準に、次のように進めます。

  • 出る幅が変わった: 別の要素が原因の可能性があります。コンソールの一覧を取り直し、先頭の要素名で再相談します。
  • 幅に関係なく出る: 画像や表のような、伸縮しない部品を疑います。
  • スマホ実機でだけ出る: 開発者ツールの擬似表示と実機は完全には一致しません。実機で見える幅と、どのブラウザで開いたかを、相談文の【症状】に加えてください。

AIに任せるのは、候補の整理と最小の修正案の提示までです。画面幅の測定、該当要素の特定、修正後の表示確認は、人の目で行います。この分担にすると、崩れた画面でも原因を一つずつ潰していけます。

出典・参考資料

マガジン一覧に戻る