ホームページのスマホ表示、どこを見る？
公開前の確認リスト

パソコンで整って見えるホームページでも、スマートフォンでは見出しが切れる、写真の大切な部分が隠れる、予約ボタンを押しにくい、といったことがあります。結論は、画面の縮小版を見るのではなく、初めて来た人が目的を終えられるかを実機に近い幅で確かめることです。

Googleは検索のインデックス登録とランキングに、スマートフォン向けにクロールしたサイト内容を使うと説明しています。検索のためだけでなく、読む人が同じ情報へ無理なくたどれる状態を確認します。

公開前に見る八つの項目

1. 最初の画面：会社名、何をしているか、次の行き先が読み取れるか。
2. 文字：拡大しなくても読め、行が画面の外へ切れていないか。
3. 横スクロール：本文全体を左右へ動かさなくても読めるか。
4. メニュー：開く・閉じる・戻るができ、項目名が途中で隠れないか。
5. リンクとボタン：隣の項目を誤って押しにくく、押した結果が想像できるか。
6. 写真・動画：人物、商品、手元など見せたい部分が不自然に切れていないか。
7. フォーム：項目名、入力例、エラー、送信結果が画面内で分かるか。
8. 電話・予約・相談：営業時間外や未定の人にも、別の連絡方法が分かるか。

「ページ」ではなく三つの用事で試す

確認する人へ正解を先に説明せず、「初めて相談するとして、対応内容を見つけてください」と用事だけを渡すと、どこで迷うかを見つけやすくなります。実際の送信を伴う場合は、受信担当へ事前に伝え、テストと本当の問い合わせを区別します。

画面幅と文字拡大の両方を見る

W3CのWCAG 2.2解説では、縦に読む内容は幅320 CSSピクセル相当でも、情報や機能を失わず、本文を二方向にスクロールせず読めることをリフローの考え方として示しています。表や地図など二次元の配置が必要な部分は例外がありますが、ページ全体ではなく、その部分だけをスクロールできるようにすると読みやすくなります。

参考：W3C WAI「Understanding Reflow」、Google「モバイルサイトとモバイルファースト インデックス」（2026年10月13日確認）

幅を狭くした確認に加え、文字を大きくしたときも、固定ヘッダーや相談ボタンが本文を覆わないかを見ます。「スマホ対応」という表示だけで判断せず、実際の画面で読み切れるかを確かめます。

写真は、切り抜き後の意味を確認する

横長の写真をスマートフォンの縦長枠へ入れると、人物の顔、商品の全体、現場の安全表示が切れる場合があります。画像の中心を機械的に残すのではなく、その写真で何を伝えるかを決めて位置を調整します。

パソコンとスマートフォンで同じ写真を使う場合も、altには写っている内容を簡潔に書きます。説明が画像の文字だけに依存していないかも確認します。撮影時の準備はホームページ写真の記事で整理できます。

確認結果は「感想」と「不具合」を分ける

「なんとなく見にくい」だけで終わらせず、どの端末で、何をしようとして、どこで止まったかを残します。修正後は同じ用事でもう一度確かめます。

次にすること

自社サイトをスマートフォンで開き、Wi-Fiを切り替えたり文字を少し大きくしたりしながら、「サービスを知る」「場所を確かめる」「相談する」の三つを試してください。問題があれば、スクリーンショットとURL、端末名、操作の順番を一緒に残します。

GRAVIのホームページ制作では、見た目だけでなく、スマートフォンでの読み方と相談までの動きを確認します。すべての端末や検索順位を保証するものではありません。

• 問い合わせフォームの確認方法 →
• スマホで切れる写真の確認 →
• 今のサイトを直す範囲を整理する →