スマートフォン対応の確認では、画面幅を小さくしたときに崩れないかだけでなく、訪問者が必要な情報を読めて、迷わず操作できるかを確かめます。トップページだけでなく、サービス詳細・料金・問い合わせフォームなど、判断や連絡に使うページを実機で確認しましょう。
KEY TAKEAWAY
スマホ対応は「表示」だけでなく、読む・探す・操作するまで確認する。
代表的なページを実機で開き、本文、ナビゲーション、リンク、フォーム、画像の順にチェックします。
スマートフォンでホームページを確認するチェックリスト
| 確認箇所 | チェック内容 |
|---|---|
| 文字と余白 | 本文が拡大なしで読みやすく、行・段落・ボタンが詰まりすぎていない |
| 横幅 | 意図しない横スクロールや、切れた見出し・画像・表がない |
| ナビゲーション | メニューを開閉でき、現在地や次に進む先が分かる |
| タップ操作 | リンクやボタンが押しやすく、隣の項目を誤って押しにくい |
| 問い合わせ | 入力・選択・エラー修正・送信完了の確認がスマートフォンでできる |
| 画像と動画 | 内容を伝える画像が見切れず、動画や大画像が表示を妨げない |
| 固定表示 | 追従メニューやCookie表示が本文・フォームを覆わない |
画面幅を変えただけでは分からない不具合
ブラウザーの開発者ツールで幅を変えると、レイアウトの崩れを見つけやすくなります。ただし、タッチ操作、OSの文字サイズ、ソフトウェアキーボード、実際の通信環境までは同じように確認できません。可能なら社内で使われている端末を含む複数のスマートフォンで、主要ページを実際に操作します。
横スクロールの原因を探す
表、長いURL、折り返さないボタン、幅を固定した画像や埋め込み要素が横にはみ出すことがあります。ページ全体を左右に動かすのではなく、原因となる要素が読みやすく収まっているか確認します。情報量の多い表はスマートフォン用に項目を絞る、カード形式にする、表を横スクロール領域にするなど、意味が保たれる見せ方を検討します。
文字の拡大と行間を確認する
小さな文字や細い書体は、端末や明るさによって読みづらく感じられます。説明文、注記、画像内テキスト、フォームのエラーなども読めるかを見ます。ブラウザーの拡大やOSの文字サイズ変更を使ったときに、情報が隠れたり操作ができなくなったりしないかも確認します。
リンクやボタンを実際に押す
リンクの文字だけでなく、クリック・タップできる領域とその間隔を確認します。W3CのWCAG 2.2の達成基準2.5.8では、対象サイズについて24×24 CSSピクセル以上、または一定の間隔などの条件が示されています。これはすべての状況にそのまま当てはめるチェック表ではなく、例外もありますが、隣接した操作を誤りにくくするための具体的な確認材料になります。W3C「Target Size (Minimum)」
問い合わせフォームは入力から完了まで試す
フォームは項目の見た目だけでなく、入力・選択・エラー表示・再入力・送信完了までを一連で確認します。個人情報の扱いに注意して、本番送信が関係者に通知される場合はテスト手順を決めて実施します。
- ラベルを見れば入力内容が分かる
- メールアドレスや電話番号を入力しやすいキーボードが開く
- 必須項目と任意項目を区別できる
- 入力ミスがあった場所と直し方が分かる
- 送信ボタンを押した後、受付結果が分かる
- 送信通知が正しい宛先に届く（運用者側でも確認する）
入力項目を増やすほど使いにくくなると決めつける必要はありませんが、その情報をいつ何に使うか、電話やメールで代替できるかを確認し、必要な項目に整理します。
ページ別・端末別の確認記録を残す
修正担当者と制作担当者で認識を合わせるため、「スマートフォンで見づらい」のような感想だけでなく、端末、ページURL、操作、期待した動作、実際の状態を記録します。
- ページURLと確認日
- 端末・OS・ブラウザーの情報（分かる範囲）
- どの位置で何を操作したか
- 見つけた問題と、利用者への影響
- 再現手順や画面キャプチャ
- 対応の優先度と、修正後の再確認結果
全ページをすべての端末で同じ深さまで調べるのが難しい場合は、トップページ、流入の多いページ、問い合わせにつながるページから優先します。公開後はアクセス状況や問い合わせ時の声を手掛かりに、追加で確認するページを選べます。
スマホ表示をチェックするおすすめの順番
- 代表的な端末・ブラウザーでサイトを開く
- メニューから目的の情報へ移動する
- 見出しを追いながら必要な情報を読む
- 電話・メール・資料リンクなどを操作する
- フォームを入力し、エラーや完了表示まで試す
- 別の画面幅や文字拡大でも同じ操作を試す
- 問題を記録し、優先順位をつけて修正・再確認する
よくある質問
スマホ対応の確認は、PCでブラウザー幅を狭くするだけで十分ですか？
幅を変える確認は有用ですが、それだけで十分とは限りません。タッチ操作やソフトウェアキーボードなどは実機での確認が役立ちます。サイトの目的に応じて、主要な端末・ページ・操作を選びましょう。
スマートフォンで横スクロールが出たら、表を削除すべきですか？
必ずしも削除する必要はありません。表の情報が必要なら、列の優先順位をつける、別の表示に組み替える、表だけを横スクロール可能にするなど、内容を保ちながら読める方法を検討します。
どのページから確認すればよいですか？
トップページだけでなく、サービス・料金・採用・問い合わせなど、ユーザーの判断や連絡に使われるページを優先します。アクセス解析や顧客からの問い合わせ内容があれば、利用頻度の高いページから着手できます。
まとめ：利用者の行動をたどって確認しよう
スマートフォン対応は、幅に合わせてレイアウトが縮むかだけでは判断できません。必要な情報を見つけられるか、読み進められるか、リンクやフォームを操作できるかを、実際の利用手順に沿って確認しましょう。問題の記録を残すと、修正の優先順位を関係者と共有しやすくなります。
関連：会社サイトに必要な掲載内容や問い合わせにつながらないサイトの見直しもご覧ください。
公開後に取り組む点検や改善を全体から整理したい方は、ホームページ公開後の運用・改善ガイドもご覧ください。
