スマホで見にくいホームページを直す｜公開前の操作チェック
文字の大きさだけでなく、横スクロール、メニュー、フォーム、固定ボタンまで。実機で確かめる順番と修正依頼の書き方をまとめます。
この記事でわかること
スマホ対応は、画面に収まるだけでは完了しない
料金を読んで問い合わせる、営業時間を見て地図を開く。スマホ確認は、このような目的を一つ決めて最初から最後まで試します。画像が縮んで見えても、ボタンを押せない、入力中に内容が隠れる、送信後に何も分からないなら、利用者は作業を終えられません。
ここでは架空の店舗サイトを例に、編集部の公開前確認手順を紹介します。端末やブラウザーによって動きが違うため、利用者が使いそうな環境での確認を増やす考え方です。
まず、縮小表示と横にはみ出す原因を分ける
自作サイトでは、viewport設定が画面幅の扱いに関係します。MDNではwidth=device-widthとinitial-scale=1の組み合わせが一般的な例として示されています。ただし、設定しただけですべての要素が収まるわけではありません。大きさが固定された表、画像、長いURLなども確認します。
| 症状 | 確認する箇所 | 直し方の考え方 |
|---|---|---|
| 全体が極端に小さい | viewportと固定幅 | 端末幅で読めるレイアウトへ |
| 右へはみ出す | 表・画像・横並び要素 | 折り返し、幅、表のスクロールを整理 |
| 文字が写真に埋もれる | 背景との重なり | 写真の切り取りや文字領域を変更 |
| 下のボタンが隠れる | 固定バー・キーボード | 操作中にも必要な領域を確保 |
ブラウザーの文字拡大を妨げて見た目を固定する方法に頼るより、拡大しても内容を読める構成へ調整します。
6つの操作を実際に行う
- ログインしていない状態で本番URLを開きます。
- 上部メニューを開き、閉じる操作と別ページへの移動を試します。
- 料金表・長い見出し・写真の注釈を読みます。
- 地図や電話などのリンク先が意図どおりか確認します。電話は発信直前までの確認でも構いません。
- 問い合わせフォームへテスト情報を入力し、エラー修正と送信を試します。
- 完了表示を見て、運営側で受付結果を確認します。
入力欄では、必須項目の案内が消えないか、エラーの場所まで戻れるかを見ます。MDNのフォーム検証資料が説明するように、入力内容に問題がある場合は、何を直せばよいか分かるフィードバックが必要です。スマホでは画面が狭いため、エラーが離れた場所に出ると気づきにくくなります。
修正依頼は「場所・操作・結果」で書く
「スマホで崩れる」だけでなく、再現できる情報を渡します。例は「料金ページでメニューを開くと、閉じるボタンが画面右に隠れます。縦向きのときに発生し、横向きでは見えます」です。これは説明用の架空例です。
| 記録項目 | 記入するもの |
|---|---|
| 環境 | 端末名・OS・ブラウザー・向き |
| 場所 | 完全なURL・見出し名 |
| 操作 | 開いたメニューや入力した欄 |
| 結果 | 見えない・押せない・戻れない等 |
| 期待 | 本来どう動いてほしいか |
画像を添える場合は、入力した名前やメールアドレス、通知が写っていないかを確認します。テスト用の画面に本物の顧客情報を入れる必要はありません。
修正後は、同じ操作でもう一度確かめる
一箇所の余白を直すと、別の画面幅で配置が変わることがあります。問題が出た端末での再確認に加え、PCや別の幅でも主要な操作を確認します。すべての端末で試したという記録にせず、確認した環境をそのまま残してください。
SITE PORTを検討するときの確認ポイント
SITE PORTを選ぶ場合も、完成例をスマホで開き、料金から問い合わせまで進めるか試してみましょう。見本と編集の流れを合わせて確認すると、自分で更新した後に何をチェックすべきかも見えてきます。
SITE PORTの完成例を見る・編集のデモを見る。自分で更新する場面を想像しながら、利用できる機能とサポート範囲を申込前に確認してください。
次に確認したいこと
[画像を軽くして読みやすくする](/articles/website-images-size-alt)・[フォームのテスト手順](/articles/contact-form-delivery-test)
出典・確認情報
確認日：2026-10-12 ／ 公式情報の要点と編集部の提案を整理しています。価格・機能・条件は変更される場合があります。
MDN：viewportの設定MDN：フォームの入力検証