店舗ホームページのスマホ対応｜お客様の大半がスマホで見る時代に確認したい5項目と直し方

ホームページのスマホ対応とは？レスポンシブとの違い

「スマホ対応」と「レスポンシブ」は同じ意味で使われることが多いですが、正確にはレスポンシブはスマホ対応を実現する方式の1つです。まず方式の違いを知っておくと、制作会社や作成ツールの説明が理解しやすくなります。

スマホ対応の3つの方式

これから作る、または作り直すなら、レスポンシブデザインを選んでおけば問題ありません。ホームページ作成ツールのテンプレートも、最近のものはほぼレスポンシブです。

なぜ今、スマホ対応が欠かせないのか

理由は3つあります。1つ目は、お客様の行動です。「〇〇駅 ランチ」と検索する人は、移動中や外出先でスマホを使っています。その場で電話や経路検索ができなければ、隣のお店に流れてしまいます。

2つ目は、Googleの評価です。Googleはスマホ向けの表示内容を基準にページを評価しています。スマホで読みにくい、操作しにくいページは、検索結果で不利になる傾向があります。

3つ目は、Googleビジネスプロフィール（Googleマップに表示されるお店の情報）との連携です。地図からホームページを開く人は、ほぼ全員がスマホです。地図で興味を持った人を受け止める場所がスマホで見づらいと、せっかくのMEO対策（Googleマップの検索対策）が途中で途切れてしまいます。

スマホで確認すべき5つの項目

ここからが本題です。以下の5項目を、自分のスマホで順番に確認してください。1つでも「いいえ」があれば、そこがお客様を取りこぼしているポイントです。

1. 電話ボタン：タップするだけで発信できるか

電話番号が文字で書いてあるだけでは不十分です。番号をタップしたときに発信画面が開くか、そしてどのページからも1回のタップで電話にたどり着けるかを確認します。飲食店・サロン・整体院など電話予約が多い業種では、画面の下に固定された電話ボタンが理想です。

• 番号をタップして発信画面が出るか
• ボタンが親指で押しやすい位置・大きさか
• 営業時間外の案内（ネット予約やLINEへの誘導）があるか

2. 地図・アクセス：地図アプリで開けるか

住所が文字で書いてあるだけだと、お客様はコピーして地図アプリに貼り付ける手間がかかります。地図をタップするとGoogleマップアプリが開き、そのまま経路案内が始まる状態が理想です。駅からの道順を写真付きで載せていると、初めての方の不安が減ります。アクセスページの作り方は「店舗ホームページのアクセスページの作り方」で詳しく解説しています。

3. 営業時間・定休日：トップ画面ですぐ見えるか

スマホで開いた瞬間の画面（ファーストビュー）か、1回スクロールした範囲に営業時間と定休日があるかを確認します。「今、営業中かどうか」は、来店直前のお客様が最も知りたい情報です。臨時休業や年末年始の案内が古いままになっていないかも、あわせて見てください。

4. 文字サイズと押しやすさ：拡大せずに読めるか

指で拡大しないと読めない文字は、スマホ未対応のサインです。本文の文字は、腕を伸ばした距離で読める大きさが目安です。リンクやボタンが密集していて、隣を押してしまう状態も避けたいところです。ボタンとボタンの間には、指1本分の余白があると安心です。

• 拡大なしで本文が読めるか
• 横スクロールが発生していないか
• 表やメニューが画面からはみ出していないか
• PDFのメニューしかない（スマホでは読みにくい）状態になっていないか

5. 表示速度：開くまでに待たされないか

モバイル回線で開いて、写真が表示されるまでに数秒以上待つようなら要注意です。重い原因の多くは、大きすぎる写真をそのまま載せていることです。速度は、Googleが提供する速度確認ツール（PageSpeed Insights）で無料で測れます。改善方法は「店舗ホームページの表示速度を速くする方法」にまとめています。

5項目のチェック表

自分でスマホ対応を確認する方法

専門知識がなくても、次の3つの方法で十分に確認できます。ポイントは「自分のお店を知らない人の目」で見ることです。

方法1：自分のスマホで「初めてのお客様」になって開く

Wi-Fiを切ってモバイル回線にし、検索エンジンで「地域名 業種」と検索して自店のページを開きます。そこから「電話をかける直前」「経路案内を出す直前」まで、実際に操作してみてください。ブックマークからではなく検索から入るのは、お客様と同じ入口を通るためです。

方法2：パソコンで画面幅を狭めてみる

パソコンのブラウザで自店のホームページを開き、ウィンドウの幅をスマホくらいまで狭めます。レイアウトが縦一列に組み替わればレスポンシブ対応、横にはみ出したり縮小されたりするなら未対応です。Chromeなどの開発者向け機能にはスマホ表示に切り替える機能もありますが、画面の表記は変わることがあるので、ウィンドウ幅を狭める方法が手軽です。

方法3：家族や常連さんに「予約するまで」やってもらう

自分では慣れていて気づけない不便さがあります。Webに詳しくない家族や常連のお客様に、「このページから予約（または電話）するところまでやってみて」と頼み、どこで迷ったかを聞いてください。「営業時間どこ？」「メニューの字が小さい」といった声が、そのまま改善リストになります。

スマホ対応していない場合の3つの選択肢

確認の結果、未対応だった場合の選択肢は大きく3つです。それぞれの向き不向きを整理します。

判断の目安

作ってから何年たっているかが、1つの目安です。古い方式（スマホ専用サイトやPC版のみ）で作られたサイトは、部分修正よりも作り直したほうが結果的に安く済むことが多いです。作り直すべきサインは「店舗ホームページのリニューアル費用と作り直すべきサイン」で詳しく解説しています。

自作・ツール・制作会社のどれを選ぶかは、費用だけでなく「店主の時間」で考えてください。月に数時間を確保できるならツール、営業に集中したいなら依頼、という分け方が現実的です。3つの作り方の比較は「店舗のホームページの作り方」にまとめています。

スマホ対応で見落としがちなポイント

レスポンシブ対応済みでも、次の点で「見づらい」「使いにくい」が起きているケースがよくあります。作り直すときは、制作会社やツールの設定でこれらを確認してください。

• ポップアップ：画面全体を覆うお知らせやクーポン表示は、スマホでは閉じるボタンが押しにくく、離脱の原因になります
• 画像の文字：メニューや料金を画像だけで載せると、スマホで読みにくいうえに、検索エンジンにも内容が伝わりません
• フォームの項目数：予約フォームは名前・電話・希望日時など最小限に。入力欄はタップで数字キーボードが出る設定にします
• 横に並べた3列レイアウト：PCでは見やすくても、スマホでは1列に崩れて順番が変わることがあります
• 駅名・エリア名の書き方：スマホで「地域名 業種」と検索する人に見つけてもらうには、本文に駅名やエリア名を自然に入れます。地域ごとの言葉の選び方は「地域別ガイド」を参考にしてください

よくある質問

まとめ