ホームページのスマホ対応と表示速度|離脱を防ぐチェックポイント

ホームページのスマホ対応と表示速度|離脱を防ぐチェックポイント

この記事でわかること

  • スマートフォン対応と表示速度が集客に影響する理由
  • 自分のホームページを無料で確認する方法
  • 離脱を防ぐためのスマホ表示のチェックポイント
  • 表示速度を改善するために見直したいこと

大分市でお店や会社を探す人の多くは、スマートフォンで検索しています。

移動中や休憩中に、片手でさっと調べて、気になったお店に電話をかける。

そんな使われ方が当たり前になっています。

そのため、スマートフォンで見づらいホームページや、表示に時間がかかるホームページは、内容を読まれる前に閉じられてしまうことがあります。

この記事では、スマートフォン対応と表示速度の確認方法と、改善のポイントを分かりやすく解説します。

スマホ対応と表示速度が集客に影響する理由

スマホ対応と表示速度が集客に影響する理由

ホームページを開いてもなかなか表示されないと、多くの人は待たずに前の画面に戻ってしまいます。

文字が小さくて読みにくい、ボタンが押しにくいといった不便さも、離脱の原因になります。

検索エンジンもスマホでの見え方を重視している

Googleは、ホームページを評価するときに、主にスマートフォン向けの表示を基準にしています。

パソコンでは問題なく見えていても、スマートフォンで情報が欠けていたり、崩れていたりすると、検索での評価にも影響するおそれがあります。

また、Googleはページの読み込み速度や操作のしやすさを「Core Web Vitals」という指標で示しています。

指標意味良好とされる目安
LCPページの主な内容が表示されるまでの時間2.5秒以内
INPボタンなどを押してから反応するまでの時間200ミリ秒未満
CLS読み込み中にレイアウトがずれる度合い0.1未満

(出典:Google 検索セントラル「Core Web Vitals と Google 検索の検索結果について」)

数字を覚える必要はありません。

「すぐに表示され、押したらすぐ反応し、画面がずれない」状態を目指すと考えれば十分です。

自分のホームページを無料でチェックする方法

自分のホームページを無料でチェックする方法

まずは、今のホームページの状態を確認してみましょう。

Googleが無料で提供している「PageSpeed Insights」を使うと、URLを入れるだけで表示速度の診断ができます。

  1. PageSpeed Insightsを開く
  2. 自社のホームページのURLを入力して「分析」を押す
  3. 「携帯電話」のタブで結果を確認する
  4. 「改善できる項目」に表示された内容をメモする

結果の点数は、測るたびに多少変わります。

点数に一喜一憂するより、どこに問題があるのかを知るための道具として使いましょう。

実際にスマホで触ってみることも大切

ツールの診断に加えて、自分のスマートフォンで実際に操作してみることも大切です。

電波の弱い場所やWi-Fiを切った状態で開いてみると、お客様と同じ体験ができます。

離脱を防ぐスマホ表示のチェックポイント

離脱を防ぐスマホ表示のチェックポイント

スマートフォンで見たときに、次のような点を確認してみてください。

  • 文字の大きさ:拡大しなくても無理なく読めるか
  • ボタンの大きさ:指で押しやすく、ほかのリンクと近すぎないか
  • 電話番号:タップするとそのまま電話をかけられるか
  • 横スクロール:画面の横にはみ出している部分がないか
  • 表や画像:画面からはみ出さず、内容が読み取れるか
  • ポップアップ:画面全体を覆って、内容が読めなくなっていないか
  • 問い合わせフォーム:入力欄が大きく、入力しやすいか

特に電話番号は、スマートフォンで見るお客様にとって最も使われやすい問い合わせ方法の一つです。

画面の下に電話や予約のボタンを固定しておくと、どこまで読んでいてもすぐに連絡できます。

最初の1画面で何を伝えるか

スマートフォンの画面は小さいため、最初に表示される範囲に入る情報はごくわずかです。

大きな写真だけが表示されて、何のお店なのか分からない状態になっていないか確認しましょう。

最初の1画面には、次の3つが入っているのが理想です。

  • 何のお店・会社なのか(業種と地域)
  • ほかとの違いが伝わる短い一言
  • 電話や予約など、次の行動のボタン

文章は短く区切る

パソコンでは読みやすい長い段落も、スマートフォンでは文字がびっしり詰まって見えます。

1〜2文ごとに段落を分け、見出しや箇条書きを使うと、流し読みでも内容が伝わります。

表示速度を改善するために見直したいこと

表示速度を改善するために見直したいこと

表示が遅い原因はさまざまですが、地域のお店や会社のホームページでよくあるのは次のような原因です。

よくある原因見直しの方法
画像のサイズが大きすぎる表示サイズに合わせて縮小し、軽い形式で保存する
使っていないプラグインが多い不要なものを停止・削除する
トップページに動画や画像を詰め込みすぎ本当に必要なものだけに絞る
サーバーの性能が足りない契約プランやサーバー会社を見直す
外部のツールを多く読み込んでいる使っていない解析タグなどを外す

スマートフォンで撮った写真は、そのままアップロードすると非常に大きなサイズになっていることがあります。

写真の多いホームページでは、画像の軽量化だけで大きく改善することもあります。

WordPressを使っている場合は、画像を自動で軽くするプラグインを使う方法もあります。

ただし、プラグインを入れすぎると逆に重くなることがあるため、必要なものだけに絞りましょう。

画像の下に文字が回り込む「ずれ」にも注意

読み込みの途中で画像や広告が後から表示され、読んでいた文章が下に押し出されることがあります。

これがCLSの数値が悪くなる原因です。

画像に表示サイズを指定しておくと、こうしたずれを防ぎやすくなります。

自分で触る前にバックアップを

プラグインの削除やサーバーの変更は、ホームページが表示されなくなる原因になることもあります。

作業の前には必ずバックアップを取り、不安な場合は制作会社に相談しましょう。

よくある質問

パソコンで問題なく見えていれば大丈夫ですか?

パソコンとスマートフォンでは、表示のされ方が大きく違うことがあります。

必ずスマートフォンでも確認するようにしましょう。

PageSpeed Insightsの点数が低いと検索順位は下がりますか?

表示速度は評価の要素の一つですが、それだけで順位が決まるわけではありません。

まずはお客様にとって使いやすいかどうかを基準に改善しましょう。

古いホームページでもスマホ対応にできますか?

作り方によっては部分的な修正で対応できます。

ただ、全体の作りが古い場合は、リニューアルしたほうが費用と手間を抑えられることもあります。

どのくらいの頻度で確認すればいいですか?

ページを追加したときや、大きな変更をしたときに確認するのがおすすめです。

そのほか、3か月に1度ほど定期的にチェックしておくと安心です。

まとめ:スマホで「すぐ見られて使いやすい」ホームページに

スマートフォン対応と表示速度は、お客様に内容を読んでもらうための土台です。

まずは無料のツールと自分のスマートフォンで現状を確認し、できるところから改善していきましょう。

最後に

COACHING WORKSへのご相談

COACHING WORKSは、大分市の店舗・中小企業向けに、スマートフォンでの使いやすさとSEOを前提にしたホームページ制作を行っています。

集客につながるホームページの考え方は、大分市で集客に強いホームページ制作のページでご紹介しています。

今のサイトのリニューアルを検討している方は、ホームページをリニューアルする前に確認したい7つのポイントもあわせてご覧ください。

「自社のサイトがスマホでどう見えているか確認してほしい」という方は、個別無料相談でお気軽にご相談ください。