「スマホで見ると、
うちのホームページ見づらいかも…
大丈夫かな？」
そんな不安を感じていませんか。
お店や会社を探すとき、
まずスマホで検索する方は
多くなっています。
スマホで見づらいサイトは、
それだけで
閉じられてしまうことがあります。
そこで今回は、
“スマホ対応（レスポンシブ）の
基本と、確認ポイント”
を、分かりやすく整理します。
目次
1. なぜ必要か｜見る人の多くはスマホから
業種によって差はありますが、
ホームページを最初に見るのが
スマホ、という方は少なくありません。
スマホで読みにくいと、
問い合わせの前に離れてしまう
おそれがあります。
せっかくの集客が
もったいない結果になります。
2. レスポンシブデザインとは｜画面に合わせて形が変わる
| 方式 | 特徴 | 注意点 |
|---|---|---|
| レスポンシブデザイン | 1つのサイトが、画面の幅に合わせて自動で表示を変える | 設計の段階から作り込むと、更新も楽になる |
| スマホ専用サイト | PC用とは別のURLでスマホ用を用意する | 2つ分の更新が必要になり、手間が増えやすい |
| PC表示のみ | スマホでも、PC用の画面がそのまま小さく出る | 文字が小さく、操作しにくい |
今は、1つのサイトで済む
レスポンシブデザインが主流
です。
更新の手間が少なく、
情報の食い違いも防げます。
3. 確認する方法｜自社サイトをスマホで見てみる
- ご自身のスマホで、トップページと主要ページを開く
- 文字が小さすぎず、拡大しなくても読める
- ボタンやリンクが、指で押しやすい大きさと間隔になっている
- 画像が画面からはみ出さず、横にスクロールしない
できれば複数の機種で、
実際に触って確かめる
のがおすすめです。
パソコンの画面を縮めただけでは
気づけない不具合もあります。
4. スマホで見やすいサイトの5つのポイント
- 文字の大きさ：本文は拡大せずに読める大きさにする
- ボタン：電話・問い合わせが、すぐ押せる位置にある
- 画像：重すぎず、表示が遅くならない
- メニュー：項目を絞り、迷わず目的のページへ進める
- フォーム：入力項目を必要最小限にする
特に、
電話ボタンと問い合わせボタン
の置き場所
は、成果に直結します。
画面の下に固定する方法も
よく使われます。
5. 検索との関係｜Googleはスマホ版を重視する
Googleは、スマホ版のページの
内容をもとに評価する仕組みを
基本としています。
スマホ版で情報が少ないと、
検索での評価にも影響する
可能性があります。
PC版と同じ内容が
スマホでも読めるか確認しましょう。
6. よくある失敗｜PCだけ見て作ってしまう
- PCでは整って見えるが、スマホでは文字が崩れている
- 表が横にはみ出して、読めない
- ポップアップが画面をふさぎ、閉じにくい
- 電話番号がタップしても発信されない
作る段階から、スマホ表示を
基準に設計する
と、後から直すより
手間も費用も抑えられます。
7. まとめ｜スマホで見て、迷わない状態をつくる
スマホ対応は、
「見やすさ」と「押しやすさ」
の両立
がポイントです。
まずは、ご自身のスマホで
自社サイトを開いてみましょう。
貴社サイトのスマホ表示を、
無料で診断します。
お気軽にご相談ください。
販促物、Webの無料診断やります
ホームページも、パンフレットやチラシなどの販促物も、
いまの状態が目的に合っているかを無料で診断します。
「何から手を付ければよいか分からない」
「他社の見積もりが妥当か見てほしい」
といったご相談も承ります。
改善点は優先順位を付けてお伝えします。
関連ページ：