スマホで見やすいお店サイトの作り方｜今日から直せる7つのポイント

お店を探すとき、ほとんどの人はスマホで検索します。つまりあなたのホームページは、まずスマホで見られる前提で作る必要があります。

「パソコンで見るときれいなのに、スマホだと文字が小さくて読めない」——これは今でも本当によくある失敗です。この記事では、スマホで「見やすい・押しやすい・速い」サイトにするためのポイントを7つにまとめました。

① 文字は16px以上、行間はゆったり

スマホで拡大せずに読める文字サイズの目安は16px以上。本文が小さいと、読む前に閉じられてしまいます。行間も詰まっていると読みづらいので、1.7〜2倍程度を目安に。

② ボタンは「親指で押せる」大きさに

電話・予約・地図などのボタンは、高さ44px以上が目安。リンク同士が近すぎると押し間違いが起きます。特に「電話をかける」ボタンは、タップでそのまま発信できるようにしておきましょう（tel:リンク）。

③ 大事な情報は「上から3画面以内」に

スマホの画面は狭く、下まで読んでもらえる保証はありません。お店の名前と一言・営業時間・予約方法は、スクロール2〜3回以内で見つかる位置に。凝った挨拶文を長々と先頭に置くのは逆効果です。

④ 写真は「軽く」する

写真が重いと表示に数秒かかり、その間に離脱されます。目安は1枚500KB以下。最近はWebPという軽い形式が主流です。難しければ、作成サービス側が自動で軽くしてくれるものを選ぶと安心です（ミセコミは自動でWebP変換されます）。

⑤ 横スクロールを発生させない

表や大きな画像がはみ出して、ページ全体が横に動いてしまうのは典型的なNG。メニュー表などは、スマホでは縦に並ぶレイアウトにするか、表の中だけスクロールできる形にします。

⑥ 電話番号・住所は「コピペ・タップ」できるテキストで

画像に埋め込まれた電話番号はタップで発信できず、住所は地図アプリに貼り付けられません。テキストで書く——これだけでお客さんの手間がぐっと減り、Google検索にも正しく伝わります。

⑦ 実機で確認する習慣を

最後はこれに尽きます。更新したら自分のスマホで開いて確認。家族や友人のスマホ（画面サイズ違い）でも見てもらえたら完璧です。「読める？押せる？すぐ開く？」の3点をチェックしましょう。

チェックリスト

• 文字は拡大せずに読めるか（16px以上）
• 電話・予約ボタンは親指で押せるか
• 営業時間・予約方法は3画面以内にあるか
• 写真の表示は一瞬で終わるか
• 横スクロールが発生していないか
• 電話番号・住所はテキストか
• 自分のスマホで最終確認したか

まとめ

スマホ対応は「デザインの話」ではなく「来店数の話」です。7つのうち1つ直すだけでも、確実にお客さんの体験は良くなります。これから作る方は、最初からスマホ対応が組み込まれたサービスを選べば、この記事の内容はほぼ自動でクリアできます。ミセコミで作るサイトも、すべてスマホ最適化済みです。