質問者さん
キタデジさん
質問者さん
キタデジさん
ホームページ公開前のスマホ確認は、重要ページを実機で開き、表示を読み、操作を試し、不具合を記録して再確認する順番で進めます。 パソコン表示が整っていても、スマホの横はみ出しや押しにくいボタンは見落とせます。すべての端末を持つ必要はありませんが、手元の1台だけで全機種の表示を保証したことにもなりません。
- トップ・サービス・問い合わせなど、読者の行動につながるページから確認する。
- 文字・画像の見え方と、メニュー・リンク・入力の操作を別々に試す。
- 不具合は端末と再現手順を残し、修正後に同じ条件で再確認する。
対象読者：ホームページの新規公開・リニューアルを控えた小規模事業者の担当者。以下は公開前点検の編集上の提案であり、特定の機種での表示保証やアクセシビリティ適合判定ではありません。情報確認日：2026年9月30日。
最初にどのページをスマホで開く？
最初は「読者が訪問してから次の行動に進むまで」に使うページを選びます。ページ数が多い場合も、トップだけを確認して終えず、サービス内容、実績・事例、問い合わせ先までの導線を通して確認します。店舗なら営業時間・場所・電話への導線、採用なら募集要項と応募導線など、目的に合わせて優先順位を変えます。
| ページ・画面 | 読者が確かめたいこと | スマホでの点検例 |
|---|---|---|
| トップ・メニュー | 何をしている会社か、どこへ進めばよいか | 見出しの読める位置、メニューの開閉、主要ページへのリンク |
| サービス・商品 | 自分に合う内容か、次に何をすればよいか | 説明文と写真の欠け、料金・条件の読みやすさ、相談への導線 |
| 実績・事例 | 依頼内容のイメージを持てるか | 画像・説明の対応、拡大や横スクロールのしやすさ |
| 問い合わせ・予約 | 迷わず連絡できるか | 必須項目、入力欄、エラー表示、確認画面までの操作 |
メニューの言葉から目的のページが見つからない場合は、ホームページのメニュー名と導線を整理する方法も参考になります。この記事はメニュー名の決め方ではなく、公開前に実際の端末で表示と操作を点検する手順に絞ります。
スマホ公開前点検は4段階で進める
点検する順番は、①重要ページを実機で開く → ②文字・画像・横はみ出しを確認する → ③メニュー・リンク・入力操作を試す → ④機種と症状を記録し修正後に再確認する、です。図解の内容は以下の本文でも説明します。
① 重要ページを実機で開く
公開予定のURLまたは確認用URLをスマホで直接開き、トップから目的のページまで進みます。確認用サイトに閲覧制限がある場合は、制作担当が案内した安全な方法を使い、公開前のURLや認証情報を不用意に共有しないでください。手元に複数の機種・ブラウザがあれば同じページを開き、差があるか比べます。
Googleのモバイルファースト インデックスに関する公式説明では、スマートフォンでクロールしたモバイル版のコンテンツをインデックスに用い、PC版とモバイル版の主要内容をそろえるよう勧めています。検索への掲載や順位をこの点検だけで保証できるわけではありませんが、スマホで本文・見出し・画像が欠けていないか確認する理由になります。
② 文字・画像・横はみ出しを確認する
見出しと本文を上から下へ読み、文字の重なり、途中で切れた画像、意図しない横スクロール、画面端に隠れたボタンがないかを見ます。表や地図など、意味上横方向の操作が必要な部分と、本文全体が横にはみ出す不具合は分けて記録します。
W3C WAIのWCAG 2.2「Reflow」解説は、原則として情報や機能を失わず、狭い表示幅でも二方向のスクロールを強いないことを説明しています。一部の二次元表示が必要な内容には例外があります。スマホで目視するだけでWCAG適合を判定できるという意味ではなく、読みづらい箇所を見つける観点として使います。
③ メニュー・リンク・入力操作を試す
指でメニューを開閉し、サービス説明から問い合わせまで実際に移動します。リンク先が想定したページか、戻ったときに迷わないか、ボタンが隣の操作と押し間違えやすくないかを確認します。W3C WAIのタッチ対象サイズの解説では、対象の大きさだけでなく、隣の操作との間隔や例外も扱っています。小さく見えるだけで直ちに不適合と判断せず、実際に操作しづらい箇所を記録してください。
問い合わせフォームでは、テスト用の値を入力し、必須項目・入力エラー・確認画面までを試します。本番フォームへの送信は、受信先とテスト方法を制作担当と決めてから行い、この点検だけのために実際の問い合わせとして送らないでください。W3C WAIの入力エラー識別の解説では、検出された入力エラーの項目と内容をテキストで伝えることを説明しています。必須欄を空にした際、どこを直せばよいかスマホ画面で分かるか確認します。
④ 機種・症状を記録し、修正後に再確認する
「スマホで崩れた」だけでは再現が難しいため、ページURL、端末名、OS・ブラウザ、見た手順、期待した表示・操作、実際の症状、撮影日時を記録します。制作担当から修正の連絡が来たら、同じページ・同じ操作をやり直し、影響する別ページも軽く確認します。
| 項目 | 記入例 |
|---|---|
| ページと端末 | サービス紹介ページ／手元のスマホA／ブラウザB |
| 再現手順 | トップ → メニュー → サービス紹介 → ページ下部までスクロール |
| 期待と実際 | 料金表を画面内で読める想定だが、右端が切れて横にも動かせない |
| 記録と再確認 | 該当箇所の画面画像、確認日時、修正後に同じ端末で再点検 |
限られた時間では何を先に直す？
まず「内容が読めない」「主要な行動ができない」問題を先に扱います。例えば、サービス説明の一部が見えない、メニューが開かない、問い合わせまで進めない、といった症状です。余白や装飾の微調整は、読める・操作できる状態を確かめた後に優先順位を決めます。
自分で確認できるのは、実機で再現する症状と読者に必要な情報です。原因が画面幅の設定、画像の作り、プラグイン、フォーム仕様のどこにあるかは、制作・保守担当の調査が必要な場合があります。修正依頼には症状と期待する動作を記し、技術的な解決方法を決めつけないほうが確認が進みます。
問い合わせ画面の内容や入力項目そのものを見直す場合は、問い合わせフォームの改善を検討する記事も参考にしてください。公開前点検は画面の不具合発見に加え、読者が迷う箇所を洗い出す機会でもあります。
まとめ：重要ページを1本の行動として通してみる
手元のスマホでトップからサービス、問い合わせまで進み、表示・操作・入力を確かめましょう。不具合があれば端末と再現手順を残し、修正後に同じ条件で再確認します。まずは自社の重要ページ3〜4つを選び、担当者と点検する日を決めるところから始められます。
公開前の点検範囲やスマホでの導線整理を制作担当と相談したい場合は、確認したページと症状をまとめてキタデジのお問い合わせページからご相談ください。対応範囲や進め方は個別に確認します。
参考資料：Google 検索セントラル「モバイルファースト インデックスに関するおすすめの方法」、W3C WAI「Reflow」、W3C WAI「Target Size (Minimum)」、W3C WAI「Error Identification」。2026年9月30日確認。
ホームページ公開前のスマホ確認についてよくある質問
パソコンで表示を確認済みなら、スマホ確認は省けますか？
省かずに実機でも確認することを勧めます。画面幅や指での操作が異なるため、PCで整っていても文字・画像の欠けやボタンの押しづらさに気づけない場合があります。少なくとも主要ページから問い合わせまでの動線を試しましょう。
すべてのスマホ機種で確認する必要がありますか？
すべての機種を手元で確認するのは現実的ではありません。まず使用可能な実機で重要ページを点検し、複数端末があれば差を比較します。機種差が疑われる症状は端末・OS・ブラウザを記録して制作担当に再現確認を依頼してください。
最初に確認するページはどれですか？
トップ、主なサービス・商品、問い合わせや予約のページを優先します。店舗なら場所・営業時間、採用なら募集要項と応募画面も加えます。読者が訪問してから次の行動を完了するまでの道筋として選ぶのが基準です。
横スクロールが少しでもあれば問題ですか？
横スクロールがすべて不具合とは限りません。表や地図など二次元表示が必要な部分と、本文全体が横にはみ出して読めない状態を分けて確認します。W3C WAIのReflow解説も、意味上二次元の表示が必要な内容には例外を示しています。
問い合わせフォームは実際に送信して試すべきですか？
本番フォームへの送信は、受信先とテスト方法を決めてから行ってください。公開前の担当者点検では、まず必須欄、入力エラー、確認画面までをテスト用の値で確認できます。送信を伴う試験は通常の問い合わせとして扱われないよう制作担当と調整します。
スマホで見つけた不具合は、どう伝えると修正しやすいですか？
該当ページのURL、端末とブラウザ、操作の順番、期待した状態、実際の症状、確認日時を一緒に伝えます。可能なら症状が見える画面画像を添えます。修正後は同じ条件で再現しないことを確認してください。
福岡県出身、大学生時代からWEBデザインのフリーランスとして活動。
卒業後、WEBデザイン・コンサルティング会社で経験を積み、2013年に独立し「goap」を設立。
WEBデザインやマーケティング、コンサルティング業務を展開し、WEBサイトがホームページ大賞で最優秀賞を受賞。
2023年にAI・メタバース事業を追加した株式会社goapを設立。
現在まで300社以上のWEBサイトのデザイン・ディレクション・システム構築に携わらせていただきました。
Web制作・マーケティング業界のプロがお客様の悩みに寄り添って丁寧にヒアリングしますので、初心者の方でも安心してご相談ください！
Categories
株式会社goap 代表取締役 相牟田 昂大
福岡県出身、大学生時代からWEBデザインのフリーランスとして活動。 卒業後、WEBデザイン・コンサルティング会社で経験を積み、2013年に独立し「goap」を設立。 WEBデザインやマーケティング、コンサルティング業務を展開し、WEBサイトがホームページ大賞で最優秀賞を受賞。 2023年にAI・メタバース事業を追加した株式会社goapを設立。 現在まで<strong>300社以上</strong>のWEBサイトのデザイン・ディレクション・システム構築に携わらせていただきました。 Web制作・マーケティング業界のプロがお客様の悩みに寄り添って丁寧にヒアリングしますので、初心者の方でも<strong>安心してご相談ください！</strong>
