スマホでWebページが崩れたときに確認する5項目

PCではきれいに見えるページでも、スマートフォンでは横にはみ出したり、文字が読みにくくなったり、ボタンが押せなくなったりすることがあります。見た目だけを急いで直すと、別の画面幅で崩れたり、既存の動作を壊したりすることがあります。公開前なら、次の順番で症状を切り分けると、どこを確認すべきか整理しやすくなります。

1. 横スクロールが出ていないか。ページ全体を左右に動かせる場合、固定幅の要素、画像、余白、画面外へ押し出されたメニューが原因のことがあります。

2. 画像が画面幅を超えていないか。画像の幅だけでなく、親要素の幅、左右の余白、画像を囲む要素の指定も確認します。

3. 長い文字列やボタンが折り返されているか。URL、英数字、見出し、ボタンの固定幅が原因になることがあります。文字が切れているのか、要素全体が横へ広がっているのかを分けて確認します。

4. メニューや開閉ボタンが押せるか。見た目だけでなく、押した後に表示が変わるか、別の要素に隠れていないか、1回目と2回目で同じ動きをするかを確認します。

5. PCで直した後に別の幅が崩れていないか。1つの幅だけで修正を終えず、PC幅とスマホ幅の両方で確認します。可能なら中間の幅でも、横スクロールやボタンの重なりがないかを見ます。

確認しても原因が分からない場合は、対象ページ、崩れる症状、再現手順、確認した端末・ブラウザを整理してください。「スマホで崩れる」だけでなく、「幅を狭くすると画像の右端が切れる」「メニューを押しても開かない」のように、操作と結果を書けると修正可否を判断しやすくなります。スクリーンショットを添える場合は、個人情報やログイン情報が写っていないか確認します。

静的HTML・CSS・JavaScriptの1ページ・1件の不具合であれば、修正ファイル、変更点、確認結果まで返すサービスの対象になる場合があります。複数ページ、機能追加、外部APIやサーバー処理を含む場合は、同じ方法で対応できないことがあります。対応範囲は、対象ファイルと再現手順をそろえて購入前にご相談ください。