スマホだけホームページが崩れるときの確認手順と修正依頼メモ

1. 最初に「起きる条件」をそろえる

同じURLを開いても、画面の幅、文字の拡大設定、ログイン状態などが違うと見え方は変わります。原因を探す前に、問題の画面を保存し、別の端末やブラウザで同じ操作をした結果と並べます。

1. ページを特定する：トップページではなく、不具合があるページそのもののURLを控えます。
2. 操作を記録する：開いた直後か、メニューを開いた後か、入力欄を選んだ後かを書きます。
3. 環境を添える：端末名、ブラウザ、縦・横向き、文字の拡大設定を分かる範囲で控えます。
4. 影響を比べる：同じサイトの別ページでも起きるか、別の端末でも起きるかを確認します。

「全ページでメニューが重なる」なら共通部分、「料金ページの表だけ切れる」ならその部品を先に調べる、という確認順を決められます。ただし、この比較だけでCSSやテーマの不具合と断定はできません。変更直後に起きた場合は、変更日時と内容も残してください。

2. 症状から確認する箇所を絞る

以下は当サイトで整理した点検表です。原因の確定診断ではなく、担当者が同じ状態を再現するための出発点として使います。表は横にスクロールできます。

表だけを横スクロールさせる設計と、ページ全体がはみ出して本文まで読めない状態は分けて考えます。W3Cのリフローの解説でも、通常の文章と、二方向の配置が必要なデータ表などを区別しています。詳しい基準はW3CのReflow解説をご覧ください。

表が原因と思われる場合は比較表をスマホで読みやすくする方法、画像の読み込みで文章が動く場合は画像によるレイアウトのずれの確認方法へ進めます。

3. 見えなくする変更だけで終わらせない

横にはみ出した部分を一律に隠すと、見切れた料金やボタンまで見えなくなることがあります。先に「はみ出している部品」と「利用者が読む必要のある内容」を特定します。画面幅に合わせる、文章を折り返す、表の領域だけスクロールできるようにするなど、部品に合った方法を選びます。

制作担当者向けには、HTMLのhead内のviewport指定も確認項目です。例えば <meta name="viewport" content="width=device-width, initial-scale=1.0"> のように画面幅を扱います。ただし既存の指定を確認せず重複追加したり、これだけで全て直ると考えたりしないでください。viewportの意味はMDNの仕様解説で確認できます。

見た目を合わせるために利用者の拡大操作を禁止する方法も避けます。拡大して読む人が内容を確認できなくなるためです。編集できる権限がない場合は、コードを変更せず、次の確認結果を担当者に渡してください。

4. スマホとPCで同じ確認を繰り返す

ブラウザの画面幅を狭めるだけでも、改行やはみ出しは点検できます。ただし、PC上の模擬表示だけでスマホの動作確認が完了したとは扱いません。Chromeの公式案内も、Device Modeには再現できない実機との差があることを説明しています（Chrome DevToolsの端末モード）。

• 表示：見出し・本文・料金の条件が読めるか。横向きや文字の拡大でも内容が隠れないか。
• 移動：メニューを開いて閉じられるか。リンク先が意図したページか。
• 入力：フォームのラベルと入力欄が見えるか。キーボードで重要な案内が隠れないか。
• 関連ページ：共通部品を修正した場合、トップ・サービス・問い合わせなどにも問題が出ていないか。

端末を多く用意できない場合は、実際に問題が出た端末を優先し、確認していない環境を記録に残します。問い合わせの送信試験は、宛先と担当者の了承を先に決めます。フォームを開いて表示を確認することと、通知メールが届くことは別の確認です。

このページの表で確認した、ページ幅と表内スクロール

2026年10月8日、公開中のこの記事をChromeで開き、ビューポート幅を390pxと320pxに指定して「スマホ表示の症状別チェック表」を確認しました。PC上で表示幅を変えた試験で、スマートフォン実機の試験ではありません。

390px指定では、スクロールバーを除くページ幅と本文全体の幅はいずれも375pxでした。表の表示領域は341px、内容の幅は600pxです。320px指定でもページ幅と本文全体の幅は305pxで一致し、表だけが271pxの領域内で600px分の内容を持っていました。ページ全体のはみ出しと、表内の意図したスクロールを、この二つの値で区別できます。

390px指定で表の領域へフォーカスを当て、右矢印キーを押すと、表内の横位置が0pxから40pxへ変わりました。繰り返すと259pxまで移動し、これは600−341pxの最大移動量に一致しました。ページの幅は375pxのままでした。表の右端を見るために、ページ全体を横へ移動させる構成にはなっていません。

自分のページで追試するときは、表示幅、ページ全体の幅、表の表示領域と内容幅、矢印キーで移動した位置を記録してください。はみ出しがなかったことだけで、実機のタッチ操作、ソフトウェアキーボード、文字拡大、読み上げまで合格したとは判断できません。

今回の表示幅・表内移動の記録（JSON）。この記録は症状の確認方法を示すためのもので、検索順位や問い合わせ増加の実測ではありません。

5. 修正依頼は「症状・希望・確認範囲」を渡す

原因が分からない段階でも相談はできます。「レスポンシブにしてほしい」だけでなく、利用者が何をできずに困るのかを書くと、作業の優先順位を伝えられます。以下は記入例で、実際の受注実績ではありません。

対象：example.com のサービス料金ページ。
環境：手元のスマホを縦向きにしてブラウザで閲覧。
症状：料金表の右端にある追加条件が見切れます。ページ全体を横に動かすとメニューもずれます。PCでは読めます。
希望：スマホでも料金と条件を確認できるようにしたいです。
範囲：料金ページと、同じ表を使う案内ページを確認してください。
時期：未定。作業できる日と見積もりを相談したいです。

スクリーンショットを添える場合は、不要な個人情報を隠します。問い合わせ本文に管理画面のパスワードを書く必要はありません。変更前の保存、修正箇所、確認する端末、本番への反映担当まで決めてから作業を進めます。

当サイトの公開前チェック・軽微修正は5,500円〜（税込）が基本作業の目安です。原因・ページ数・修正範囲によって総額が変わり、全面改修や機能開発は別範囲となります。詳しくは修正費用の見方と依頼前の確認事項をご覧ください。

スマホで困っている箇所を相談する

相談の送信だけで契約は確定しません。着手前に対象と総額を確認します。対応範囲と料金目安を見る