PRACTICAL GUIDE / スマホ表示
スマホ表示を公開前に確認する5つの場所
サイト公開前のスマホ確認を、幅・文字・操作・入力・読み込みの5項目で進める方法。ブラウザの縮小表示と実機確認の違いも整理します。
まずは30秒で
この記事の要点
スマホ確認では見た目だけでなく、読む・押す・入力する・戻るを一度通します。狭い画面での表示を調べた後、可能なら実際の端末でも指とソフトウェアキーボードを使って確認しましょう。
1. 幅・文字・画像を確認する
- 意図しない横スクロールがないか。
- 長い見出しやURLが切れないか。
- 画像が不自然に伸びたり、重要な部分が切れたりしないか。
- 本文を拡大しても内容を追えるか。
- 固定ヘッダーなどが本文やリンク先を隠さないか。
表やコードなど横に広い内容は、ページ全体を押し広げるのでなく、その部分で読める扱いになっているかを見ます。最短の文だけでなく、実際の長い記事名でも試してください。
2. 操作と入力を一つの流れで試す
- トップから目的のページへ進む。
- メニューを開き、選び、閉じる。
- 主ボタンと補助リンクを押し分ける。
- フォームがあれば入力し、エラー表示を確認する。
- 戻る操作で現在地を見失わないか確かめる。
ソフトウェアキーボードを出すと、送信ボタンや入力中の項目が隠れることがあります。画面の向きを変えた後、開いたメニューやフォームの状態も確認します。
公開フォームを検査するときは、実際に送信されるかを理解し、テスト環境やテスト用の内容を使います。表示確認だけで、本番の問い合わせをむやみに送らないようにします。
3. 条件と未確認を記録する
端末名、OS、ブラウザ、画面の向き、確認した経路、問題が出た場面を残します。ブラウザの幅を狭めた確認はレイアウトの手がかりですが、実機のタッチ、処理速度、キーボード、ブラウザ固有の挙動まで検証したことにはなりません。
修正後は同じ条件で再確認し、広い画面にも影響していないか見ます。最初の読み込みと、再訪時の表示も分けて確かめると、画像やキャッシュの問題を見つけやすくなります。
公開前チェックへ結果をまとめられます。