ホームページを作ったあと、ご自分のスマートフォンで開いてみたことはありますか。パソコンの大きな画面ではきれいに見えていても、スマホだと文字が小さすぎたり、押したいボタンが押せなかったりすることがあります。いまホームページを見る人の7割以上はスマートフォンです。ここでつまずくと、せっかく来てくれた人がそのまま帰ってしまいます。
つまずき1：横スクロールが出てしまう
指で左右に動かさないと全部が読めない状態です。原因はたいてい次のどれかです。
- 画像の幅が固定されている ── 「幅800px」のように決め打ちすると、画面の狭いスマホからはみ出します
- 横に長い表がある ── 料金表や比較表でよく起きます
- 途中で改行できない長い文字列 ── URLをそのまま貼ったときなど
直し方は難しくありません。画像は「画面の幅まで」という指定に変え、表はその表だけ横にスクロールできる箱に入れるのが定番です。ページ全体が横に動くのと、表だけが動くのとでは、読みやすさがまるで違います。
ご自分で確認する方法
スマホでページを開き、下まで一度スクロールしてから、画面を左右に指で払ってみてください。ページ全体が動くようなら、どこかがはみ出しています。
つまずき2：電話番号が「押せる」ようになっていない
これは本当によくあります。電話番号がただの文字として書いてあると、タップしても何も起きません。お客様は番号を覚えて、電話アプリを開いて、打ち直すことになります。そこまでしてくれる人は多くありません。
正しくは、電話番号をタップするとそのまま発信できるリンクにしておきます。制作会社に「電話番号をタップで発信できるようにしてください」と伝えれば、すぐ直せる部類の作業です。
同じ考え方で、住所は地図アプリに飛ぶように、メールアドレスはメールアプリが開くようにしておくと親切です。
つまずき3：一番大事なことが、下のほうに埋もれている
パソコンの画面なら一目で入る情報も、スマホでは縦に細長く並びます。その結果、何の会社なのか・どこで営業しているのかが、何回もスクロールしないと分からないサイトになりがちです。
スマホで開いて最初に見える一画面に、次の3つが入っているか確認してください。
| 入れるもの | 書き方の例 |
|---|---|
| 何をしている会社か | 「横浜市鶴見区の外壁塗装専門店」のように、業種と地域をセットで |
| どこで営業しているか | 「鶴見区・神奈川区を中心に対応」 |
| 次にしてほしいこと | 「無料見積もりはこちら」「お電話はこちら」のボタン1つ |
ボタンは指で押せる大きさにしてください。目安は高さ44ピクセル以上、ボタン同士は少し離す。小さくて隣を押してしまうボタンは、無いのと同じです。
まず今日できること
- ご自分のスマホでホームページを開き、上から下まで読んでみる
- 電話番号を実際にタップしてみる（発信画面が出るか）
- 問い合わせフォームを、スマホから最後まで送信してみる
- ご家族や従業員の方にも、別の機種で同じことをしてもらう
この4つだけで、たいていの問題は見つかります。作った人ではなく、お客様と同じ道具で見ることが大事です。
私達の現場から
私達の現場でも、ホームページの相談をいただいたとき、最初にすることはスマホで開いて一通り触ってみることです。全部を作り直さなくても、電話番号のリンクと最初の一画面を直すだけで問い合わせが増えた、というケースが実際にあります。
「うちのサイト、スマホでどう見えているのか分からない」という方は、URLをお送りいただければ診断だけでもお受けしています。直すべきところと、直さなくてよいところをお伝えします。