目次
ホームページのスマホ対応は、画面が崩れないだけでなく、情報を読めて問い合わせまで迷わず操作できる状態を指します。パソコンできれいに見えても、スマホで文字が読みにくい、ボタンを押せない、フォームへ入力しにくい状態では十分ではありません。
この記事では、Webに詳しくない方でも試せる7つの確認点を紹介します。まず自社のスマホで症状を確かめ、問い合わせを止めている問題から直す順番を決めましょう。
あなたのホームページは、スマホから問い合わせまで迷わず進めますか？
ホームページのスマホ対応は問い合わせまでの操作で判断する
ホームページのスマホ対応ができているかは、スマホで問い合わせまで進めるかどうかで判断します。画面幅に合わせて部品を並べ替えるだけでは完成しません。読者が必要な内容を読み、サービスを比べ、電話や問い合わせへ進めるところまでを一続きで確認します。
画面サイズに合わせて同じURLの表示を変える作りは、レスポンシブデザインと呼ばれます。Googleも、実装と維持がしやすい方法としてレスポンシブデザインを勧めています。ただし、この仕組みが入っているだけで使いやすさが決まるわけではありません。
たとえば、画面から画像がはみ出していなくても、料金表の文字が小さすぎれば読者は判断できません。ボタンが見えていても、指で押しにくければ問い合わせへ進めません。まずは次の流れを、自社のスマホで実際にたどってください。
- トップページを開く
- サービス内容と料金を探す
- 問い合わせ方法を見つける
- 入力から送信直前まで進む
途中で拡大した、戻った、押し直した、待った場所が改善候補です。見た目の感想ではなく、利用者の行動が止まった場所として記録すると、修正範囲を伝えやすくなります。
見づらさを直す7つの確認点
見づらさを直す7つの確認点は、読む・移動・入力・待機という利用者の行動順で確かめます。すべてを同時に直すのではなく、まず現状を同じ表へ書き出してください。
| 確認点 | スマホで試すこと | 問題の例 | 見送らない条件 |
|---|---|---|---|
| 1. 内容 | パソコン版と主要な見出しや説明を比べる | スマホ版だけ料金や事例が省かれている | 判断に必要な内容が両方で読める |
| 2. 文字 | 拡大せず本文と表を読む | 文字が小さい、行が詰まる | 一度の表示で文章を追える |
| 3. 移動 | メニューからサービスと問い合わせへ進む | 項目名が分かりにくい、ボタンが重なる | 迷わず目的のページへ移れる |
| 4. 入力 | フォームへ実際に入力する | 入力欄が狭い、キーボードに隠れる | 入力内容と送信ボタンを確認できる |
| 5. 画像 | 縦向きと横向きで写真や表を見る | はみ出す、切れる、文字がつぶれる | 主題と説明が画面内に収まる |
| 6. 速度 | Wi-Fiを切って主要ページを開く | 画像だけが長く残る、内容が出ない | 主要な内容を待たずに確認できる |
| 7. 実機確認 | 別の端末と閲覧アプリでも同じ操作をする | 一つの端末だけで崩れる | 症状が起きる条件を説明できる |
この表の目的は、合格数を増やすことではありません。読者の行動がどこで止まるかを見つけ、応急処置で戻す範囲と、作り直す範囲を分けることです。
問い合わせを止める問題から先に直す
最初に直すのは、問い合わせや電話など、利用者の行動を止めている箇所です。色や余白の好みより、押せない、入力できない、送信先が分からない問題を先に扱います。
直す順番は、次の3段階に分けると迷いにくくなります。
| 優先度 | 状態 | 最初の対応 |
|---|---|---|
| 高 | 電話できない、フォームを送れない、メニューを開けない | 入口を使える状態へ応急処置する |
| 中 | 料金やサービスが読みにくい、重要な内容が省かれている | 判断に必要なページから直す |
| 低 | 一部の余白や装飾に違和感がある | 入口の問題を直した後でまとめて調整する |
ここで大切なのは、応急処置と根本修正を混ぜないことです。一つの画像や表が原因なら、その部分だけ戻せる場合があります。ほぼ全ページで文字や並びが崩れ、更新のたびに問題が増えるなら、部品ごとの修正より再設計の方が手戻りを減らせることがあります。
どちらを選ぶ場合も、まず「今止まっている行動」を一つ決めます。問い合わせの入口を戻した後に、情報の読みやすさや全体の作りを整える方が、確認の目的がぶれません。
スマホ版でも重要な内容を省かない
パソコン版にある重要な内容は、スマホ版でも省かず同じURLで読める状態にします。表示を短くするために、スマホ版だけ内容を消すのは避けてください。料金や事例に加え、よくある質問も読者の判断材料です。
Googleは、インデックス登録とランキングにスマホ版の内容を使うと説明しています。そのうえで、パソコン版とスマホ版には同等の内容と、明確で意味のある見出しを置くよう勧めています。詳しくはモバイルファーストインデックスの推奨事項※をご覧ください。
スマホでは、長い説明を折りたたみ表示へ移すことはできます。たとえば料金表の注意書きを「詳しく見る」の中へ入れても、開けば同じ文章を読めるので内容は消えません。一方、スマホ版だけ注意書きの行を削ると、読者は前提を知らないまま見積もりを比べてしまいます。大切なのは、内容そのものを消さないことです。次の3つをパソコン版と見比べてください。
- サービスの対象と対象外
- 料金や見積もりの前提
- 実績、事例、問い合わせ前の確認事項
「見た目は整ったが、判断材料が減った」という状態は合格にしません。ホームページ全体の改善項目も確認したい場合は、ホームページ改善のチェックリストも参考にしてください。
ボタンとフォームは親指で実際に操作する
ボタンと入力欄は、実際のスマホで親指を使い、押し間違いと入力のしにくさを確かめます。パソコンの開発画面で幅を縮めただけでは、指の大きさやキーボードの重なりまで判断できません。
web.devは、タップする領域の目安を約48ピクセルとし、隣の領域とは約8ピクセル離すよう案内しています。これはボタンの見た目を48ピクセルに固定する意味ではありません。文字リンクでも、周囲の余白を含めて押しやすい領域にできます。詳しくは押しやすいタップ領域の説明※をご覧ください。
ボタンで確認すること
- 親指で一度で押せるか
- 隣のリンクを誤って押さないか
- 押した後に画面が変わったと分かるか
- 電話番号を押すと発信確認へ進むか
フォームで確認すること
入力欄を上から順に埋め、送信直前まで進みます。文字が小さくないか、入力中の欄がキーボードに隠れないか、エラーの場所が分かるかを確認してください。web.devのフォーム設計の推奨事項※でも、入力欄とボタンを実際の指で試すよう案内しています。
フォームまで来る人がいるのに問い合わせへつながらない場合は、ホームページから問い合わせが来ない原因もあわせて確認すると、スマホ表示以外の問題と切り分けやすくなります。
画像と表示速度はスマホ回線で確かめる
画像は見た目だけでなく、スマホ回線で主要な内容が出るまでの待ち時間も確認します。Wi-Fiではすぐに開いても、移動中の回線では大きな写真や動画の読み込みが長く感じられることがあります。
まずWi-Fiを切り、トップページ、サービスページ、問い合わせページの3つを開きます。次に、画面の上から主要な見出しとボタンが出るまでを見てください。秒数だけを合否にせず、読者が待っている間にも目的の内容へ進めるかで判断します。
画像で確認する点は次のとおりです。
- 画面の横幅からはみ出さない
- 人物や商品の主役が不自然に切れない
- 画像内の文字を拡大せず読める
- 同じ写真を必要以上に大きく配信しない
重い画像だけを軽くすれば直る場合もあります。動画や外部の予約部品、アクセス解析のタグなど、画面に見えない処理が原因のこともあります。原因を一つに決めつけず、主要ページごとに待ち方の違いを記録してください。
修正前と同じ実機確認票で合否を決める
修正前と同じ端末、ページ、操作手順で確かめると、見た目だけの改善で終わりません。修正後に別の端末や別のページだけを見ると、何が直ったのか比較できないからです。
EQUAL DESIGNでは、修正の前後で見る条件をそろえ、利用者の行動が進むかを実物で確かめます。次の確認票を、修正依頼の前に一枚残してください。
| 固定する条件 | 修正前 | 修正後 |
|---|---|---|
| 端末と画面向き | 例：iPhone、縦向き | 同じ条件で確認 |
| 閲覧アプリ | 例：Safari | 同じアプリで確認 |
| 対象ページ | URLを記録 | 同じURLを開く |
| 操作手順 | トップから問い合わせまで | 同じ順番で操作 |
| 止まった場所 | 画面保存と症状 | 同じ場所を再確認 |
| 合否 | 改善が必要 | 読める、押せる、入力できる |
この確認票があれば、「スマホ対応しました」という作業報告だけで終わりません。問い合わせまで進めるようになったかを、自社でも確認できます。
一部だけ直して済むかどうかは、いまのページの作り方を見てからでないと決まりません。古い作りへ変更を重ねている場合は、直した箇所が別のページへ影響することもあるためです。
よくある質問
レスポンシブデザインなら確認は不要ですか？
いいえ。画面幅に応じて並びが変わっても、文字やボタンの使いやすさは別に確認します。フォームへの入力と画像の見え方も、実際のスマホで問い合わせまで操作して確かめてください。
スマホ専用ページを別に作るべきですか？
多くのサイトでは、同じURLと内容を保ちやすいレスポンシブデザインが候補になります。ただし、現在の構成や更新方法によって判断が変わるため、方式だけで決めません。
何台のスマホで確認すれば十分ですか？
最初は社内で使われている2種類以上の端末と、主要な閲覧アプリで確認します。問題が1台だけで起きるか、どの端末でも起きるかを分けることが目的です。
スマホ対応の費用は何で変わりますか？
対象ページ数、現在の実装、画像や表の数、外部フォームの有無で作業範囲が変わります。症状と対象URLを先にそろえ、同じ条件で見積もりを比べてください。
まとめ｜直す場所と確認方法を一枚に残す
ホームページのスマホ対応の合否は、実際のスマホで問い合わせまで進めたかどうかで決まります。レスポンシブデザインを入れたかどうかだけでは判断しません。内容を読めるか、目的のページへ移れるか、フォームへ入力できるかを自社のスマホで確かめてください。
まずは7つの確認点を使い、問い合わせを止める問題から優先してください。そのうえで、修正前と同じ端末、ページ、操作手順を使って結果を比べます。対象URLと端末名を残し、症状は画面保存で示してください。制作会社へ直してほしい範囲も伝えやすくなります。
ホームページのスマホ対応でお悩みなら｜無料相談
現在のサイト状況と課題を確認し、必要な制作・改善範囲を整理して提案または専門領域を切り分けます。ホームページのスマホ対応で見つかった症状を共有いただければ、部分修正で戻す箇所と、再設計を検討する箇所を一緒に整理できます。
部分修正で直せるかどうかは、現在の構成と実装状態を確認して判断します。検索順位や問い合わせ数を保証するものではありませんが、読者が情報を読み、問い合わせまで操作できる状態を目標に改善範囲をご提案します。
