小さな画面でのはみ出しと操作の問題を見つけられます。
作業を始める前に
- トップ、サービス、記事、問い合わせなど代表的なURLを用意します。
- PCのプレビューに加え、可能なら実際のスマートフォンでも確認します。
- 01文字と余白
- 02メニュー
- 03横長の要素
- 04フォーム完了
下の各項目で、判断のポイントと確認方法を説明します。
進め方・判断のポイント 04 STEPS
複数の幅で文字と余白を見る
PCブラウザーの表示幅を狭め、320px、390px、768px程度など複数の幅で確認します。これは確認用の例で、すべての端末を保証する値ではありません。長い会社名、メールアドレス、見出しがはみ出さず、必要以上に小さな文字になっていないかを見ます。
✓ 完了の目印
幅が変わっても本文を無理なく読めます。
メニューと固定要素を操作する
ハンバーガーメニューを開き、リンクから移動して閉じるところまで試します。固定ヘッダーや画面下のボタンが、本文・送信ボタン・通知を隠していないか確認してください。タップできる範囲が狭いリンクが並んでいないかも見ます。
✓ 完了の目印
メニューから目的のページへ移動できます。
横長の内容を点検する
表、地図、埋め込み動画、横長の写真は、本文と別にはみ出しやすい要素です。表は必要に応じてその領域だけ横スクロールできるようにし、ページ全体が横へ動く状態を避けます。写真の中心が変わっても必要な被写体が見えるか確認します。
| 項目 | 入力する内容・例 |
|---|---|
| 表・料金表 | 文字が読めるか必要なら表の領域内で横スクロール。 |
| 画像・動画 | 比率と切り抜き重要な箇所が欠けない。 |
| 固定ボタン | 画面下の重なり入力・送信を妨げない。 |
✓ 完了の目印
横長の要素がページ全体を押し広げていません。
フォームを最後まで入力する
入力欄をタップしてキーボードが出た状態で、ラベル、エラー、同意欄、送信ボタンを確認します。テスト可能なフォームなら試験データで送信し、完了画面と受信まで確認してください。機種やブラウザーが違う場合にも、主な導線を一度通します。
✓ 完了の目印
小さな画面でも問い合わせを完了できます。
終わったら確認すること
- 画面の見た目だけでなく、操作の順序と完了まで確認します。
途中で困ったときは
PCのスマホプレビューだけで十分ですか？
折り返し確認には役立ちますが、実機のキーボードやブラウザー固有の動作もあります。可能な範囲で実機の主な操作も確認しましょう。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.29 ／ 読む時間は目安です。操作に必要な時間は環境によって異なります。