SEO対策において、モバイル対応が重要な理由は「Googleがスマートフォン版のサイトを基準にして検索順位の評価を行っている」という点が挙げられます。
この仕組みをGoogleでは「モバイルファーストインデックス」と呼んでいます。
現代の検索ユーザーの大半がスマートフォンを利用している背景によって導入された仕組みです。
今回は、SEO対策でモバイル対応が重要と言われている具体的な理由やモバイルフレンドリーであるか確認する方法、対応させるための方法などを解説していきます。
SEO対策を適切に行うためにも参考にしてみてください。

SEO対策でモバイル対応が重要な理由

Googleでは、モバイルファーストインデックスを導入しており、検索評価の基準をスマホ版ページに移行しています。
具体的には、Googleのクローラーがスマホ版のページを巡回し、その内容を評価する仕組みです。
そのため、スマートフォン対応していないと評価がされにくくなってしまいます。
スマホ対応していないと、パソコン版のサイトがどんなに素晴らしい内容でも検索順位が大幅に下落する可能性があり、最悪の場合は検索結果に表示されにくくなってしまいます。
こうしたリスクを避けるためにも、SEO対策ではモバイル対応が重要です。

また、検索行動の変化もモバイル対応が重要視される理由として挙げられます。
現在、情報収集をするための道具としてスマートフォンは主流となっています。
普及が進んでおり、個人・世帯ともに高い保有率となっているのが事実です。
その結果、情報収集の入り口はモバイル端末へと移行しています。

  • 通勤電車の中でサービス名を調べる
  • ランチをする場所を探す
  • 現在地を意識した検索の増加（「コンビニ　近く」や「近くのカフェ」など）
  • 寝る前に欲しいものを探す
  • 気になる商品の情報を比較する

これらの行動は、すべてスマートフォン上で可能です。
パソコンを開いてじっくりと比較する行為は購入直前の限られたシーンでしかありません。

自社サイトがモバイルフレンドリーであるか確認する方法

モバイルフレンドリーとは、スマートフォンやタブレットといったモバイル端末でWebサイトを快適に閲覧、操作できるよう最適化されている状態を指します。
自社で作成したサイトがモバイルフレンドリーであるか確認する方法は複数あります。

  • Google Search Console
  • PageSpeed Insights
  • 実機

それぞれの方法について具体的に解説していきましょう。

Google Search Console

Google Search Console は、Google検索結果でのWebサイトの掲載順位やアクセス状況などを分析・管理できるツールです。
モバイルフレンドリーを自動でチェックし、問題がある場合には具体的な内容を指摘してくれます。
使い方も簡単でログイン後に「エクスペリエンス→モバイルユーザビリティ」に進むだけで問題のあるページやエラー数をチェックできます。
よくあるエラー例としては以下の通りです。

  • テキストが小さすぎて読めない（画面に対して文字が小さい）
  • ビューポートが設定されていない（端末の画面サイズにページの幅が合っていない）
  • クリック可能な要素同士が近すぎる（リンクが密集していてタップ操作がしにくい）

PageSpeed Insights

PageSpeed Insights は、Googleが提供している無料のWebページ表示速度測定ツールです。
URLを入力するだけでモバイルやパソコンの読み込み速度をスコア化して表示する他、具体的な改善提案を確認できます。
スコアは「0～100」で評価される仕組みとなっており、基準は以下の通りです。

  • Low（0～59）：改善点が非常に多い
  • Medium（60～79）ある程度の改善の余地あり
  • Good（80～100）：良好

測定項目の中でも主要なものは以下の通りです。

  • INP：タップやキーボード入力など、ユーザーインタラクションの応答性を測定する指標
  • LCP：テキストや画像など、最も大きなコンテンツが表示されるまでの時間
  • CLP：ページの読み込み中にレイアウトがズレる度合い

実機

自分のスマートフォンでサイトを開いて確認する方法です。

  • 実際の画面サイズでレイアウト崩れがないか
  • 文字が小さすぎて見えにくい箇所はないか
  • ボタンをタップしやすいか

などを細かくチェックしてみてください。
操作しにくい箇所や見えにくい箇所があれば改善しましょう。

モバイルフレンドリーに対応させる方法と注意点

最後に、Webサイトをモバイルフレンドリーにするための具体的な方法を解説していきます。

レスポンシブWebデザインの採用

パソコンやスマートフォン、タブレットなど、画面サイズが異なるデバイスにおいて、Webサイトの表示を自動的に最適化する手法をレスポンシブWebデザインと言います。
デバイスごとに専用のページを作り分ける必要がなく、1つのおHTMLとURLで管理できる点が特徴です。
レスポンシブWebデザインを採用する具体的なメリットは以下の通りです。

・更新や管理が簡単
HTMLが1つなので、修正や更新作業が1度で済む点がメリットです。
運用コストの削減にもつながります。

・URLが1つ
パソコン用とスマートフォン用でURLが共通しているので、SNSでのシェアもしやすくなり、ユーザーの利便性向上に役立ちます。

ただし、パソコン用の重いデータをスマートフォンでも読み込むことになるため、通信環境によっては表示が完了するまでに時間がかかるケースがあります。
また、画面幅によってレイアウトが自動で変わるため、パソコンとスマートフォンで全く異なる魅せ方にしたい場合、制限が出る可能性があります。
注意点を理解した上で採用を検討してみてください。

スマホ特有の操作性を意識したデザインにする

パソコン向けに作ったサイトをそのまま縮小すれば良いと考える方もいるはずです。
しかし、スマートフォンでは非常に見えにくくなってしまうため、以下のポイントに注意をしてレイアウトを組む必要があります。

・フォントサイズ
サイズが小さくなるケースがあります。
そのままだと拡大して読む手間があるため、離脱の要因となってしまいます。
ベースの文字サイズを16px以上に設定することで問題解消に役立つはずです。

・タップターゲットのサイズ
タップターゲットとは、スマートフォンでユーザーがタップをして操作できる領域を指します。
Webサイト内のボタンやリンク、入力フォームなどが該当します。
間隔が狭いと指でタップしにくいため、リンクやボタン同士の間隔を十分に空ける必要があります。
タップターゲットの大きさは44～48px以上、間隔は8px以上の余白が推奨されています。

・画像の最適化
Webサイトに画像をはめ込めば、テキストだけでは伝えきれない情報を伝えやすくするメリットがあります。
検索エンジンでの評価にも影響を与えるため活用を検討する方もいますが、サイズには注意が必要です。
スマートフォンでも素早く読み込めるように画像サイズは圧縮し、適切なフォーマットを使用するようにしてください。

スマホで再生できない技術に注意する

スマートフォンで再生できない古い技術が使用されていないか確認することも大切です。
その1つが「Flash」です。
Flashは、Webサイトの演出や動画やゲームなどで使われていた技術です。
パソコンのブラウザ上で音声や高画質な動画、複雑なアニメーションなどに連動するゲームなどを手軽に表示できる技術で、閲覧するためには専用のプラグインをインストールする必要があります。
しかし、セキュリティ上の問題が多かったことやスマートフォンのタッチ操作に適していないといった理由から2020年末にサポートを終了しています。
再生できないコンテンツがあればエラーが表示されるため、ユーザー体験を損なってしまいます。
動画を埋め込む際にはHTML5といったスマートフォンに対応した技術を使用するようにしましょう。

SEO対策においてモバイル対応は必須の施策です。
スマートフォンでの見やすさや動きの軽さなどを最優先で設計する必要があります。
今回ご紹介した内容を参考に、自社サイトがモバイルフレンドリーであるか確認し、具体的な対応策を検討していきましょう。

投稿タグ
, , , , , , ,