スマホでサイトが横にはみ出すときの直し方｜AIへの指示と確認例

スマホの横はみ出しは、崩れるページと場所から伝える

「スマホで崩れています」だけでは、文字が大きすぎるのか、画像が切れるのか、ボタンが重なるのかが分かりません。まず、気付いた場所を具体的にします。

たとえば、次のような伝え方です。

記事ページをスマホで見ると、画面全体が左右に動きます。特に、ページ名が長い記事と、記事の下の「次に読む」部分を確認してください。本文は今の読みやすさを保ちたいです。

確認するURLと、崩れている画面の画像も添えます。端末が分かれば機種名を、ブラウザの確認画面を使っているなら画面幅も伝えてください。コードのどこが悪いかを、自分で決めてから依頼する必要はありません。

修正前には、元に戻せるコピーを残します。保存方法や依頼前の準備は、ホームページを自分で修正する手順で整理しています。

サイトの横幅を調べると、本文と案内枠が別々だった

今回見つかったのは、一つの原因だけではありませんでした。

狭い画面では、表の中を左右に動かして変更内容を読めます。

パンくずは、「ホーム → 記事一覧 → 今の記事」のように、ページの位置を示す案内です。文章が長くなる場所なので、短い記事名のページだけを見ていると問題に気付きにくくなります。

また、本文と案内枠の幅が違っていても、必ず画面外へはみ出すとは限りません。今回も「左右の線がそろわない問題」と「ページ全体が横へはみ出す問題」を分けて確認しました。

原因が違うものをまとめて「全体を小さくして」と頼むと、読みやすかった本文まで細くなるかもしれません。どの部分の幅を、何にそろえるのかまで確認してから直すと、変更の理由を追えます。

AIにCSS修正を頼む指示例

CSSは、文字の大きさや配置、余白などを決める指定です。詳しい書き方が分からなくても、調べてほしい場所と、残したい動作は伝えられます。

以下は、今回の修正記録から組み直した指示例です。URLや症状を自分のサイトへ置き換えて使ってください。

記事ページがスマホで横にはみ出す原因を調べて、修正してください。

対象URL：［崩れる記事のURL］
症状：［例：長い記事名のページで、画面全体が左右に動く］
確認した画面幅：［分かれば記入］

まず、本文、パンくず、関連記事、前後のページへのリンクについて、
幅や折り返しの指定がそろっているか調べてください。
原因と、変更する箇所を短く説明してください。

本文の読みやすい幅、文章、画像、リンク先は保ってください。
比較表の中だけを左右に動かす操作は残してください。

修正後は、狭いスマホ・広めのスマホ・PCの幅で、
画面全体のはみ出し、文字や画像の切れ、リンクの操作を確認してください。
同じレイアウトを使う別の記事も確認し、未確認の条件を教えてください。

「比較表の中だけを左右に動かす操作」を残す指定にも意味があります。列が多い表では、その枠だけ横に動かして読む作りにしていることがあります。ページ全体がはみ出す問題と、表の中を動かす操作は分けて確認します。

今回の修正でも、比較表の枠内スクロールは保持しました。横に動くものを全部止める、という依頼にはしなかったわけです。

横スクロールを直したあと、スマホとPCで何を見る？

修正したら、最初に崩れていたページを、同じ条件でもう一度開きます。見た目だけでなく、読んだり押したりできるかも確かめます。

• 画面全体が意図せず左右へ動かないか。
• 長いページ名が途中で隠れていないか。
• 本文と、その下の案内の左右が自然にそろっているか。
• 比較表の端の項目まで読めるか。
• 「次の記事」などのリンクを押せるか。

今回の確認では、320px・768px・1280pxの幅でページを調べ、対象とした横はみ出しと枠のずれが残っていないことを確認しました。特定の案内部分は、スマホ幅とPC幅の画像でも見直しています。

ただし、これはローカルの表示確認です。全ページを人の目で見たわけではなく、実機のSafariや、すべての文字拡大条件も確認できていません。検索順位や読者の反応が良くなった、という結果でもありません。

AIから「直しました」と返ってきたら、どの画面で、何を確認したのかを一緒に受け取ってください。自分の端末で同じ場所を開けば、確認した結果を重ねられます。

まずは、崩れるページを一つと、直したあとも残したい見た目や操作を一つ書いてみましょう。そこまで具体的にすると、次の修正を頼む言葉が作りやすくなります。