Webサイトがモバイルフレンドリー化(スマートフォン対応)していないと、検索順位の低下などの無視できない影響がでてきます。

今回は、モバイルフレンドリーの概要から、Webサイトのモバイルフレンドリー化が済んでいるかのチェック方法を解説します。

モバイルフレンドリーとは

モバイルフレンドリーとは、2015年4月21日にGoogleが全世界で実装したアルゴリズムです。モバイルフレンドリーアップデートとも呼ばれます。スマートフォンでの閲覧に適していないページの順位を引き下げる仕組みです。

モバイルフレンドリーにすることで、ユーザーがスマートフォンでの閲覧がよりスムーズになり、モバイル検索ユーザーの利便性が高まります。

大きな特徴としては以下の点が挙げられます。

  • Webサイト単位ではなく、ページ単位で適用される
  • スマートフォンでの検索順位のみ適用される
  • 世界中のすべての言語での検索順位に影響する

参考:
Google 検索セントラル ブログ: 検索結果をもっとモバイル フレンドリーに

なぜモバイルフレンドリーにする必要があるのか

1.スマートフォンユーザーの増加

総務省が毎年発表している「通信利用動向調査」の2017年結果が2018年5月25日に発表されました。

https://ferret.akamaized.net/images/5b8dda3ffafbd81d50000011/original.png?1536023102

引用:
公表資料「平成29年通信利用動向調査の結果」(平成30年6月22日訂正)

個人のインターネット利用機器で、スマートフォンがPCを初めて上回るというデータがありました。そのため早急にスマートフォンユーザーでの閲覧に適しているページを用意する必要がありました。

2.スマートフォンの検索順位に影響がある

前述したとおり、モバイルフレンドリーでないとスマートフォンにおける検索順位に悪い影響があります。
これは「モバイルフレンドリーアップデート」と呼ばれ、モバイルフレンドリーなページの検索順位が引き上げられます。

参考:
Google 検索セントラル ブログ: モバイル フレンドリー アップデートを開始します

3.ページの見やすさが向上する

スマートフォンはPCに比べ、ディスプレイサイズが小さいという特徴があります。PCに最適化されたページをスマートフォンで表示しようとすると、全体的に縮小表示になり文字が小さく読めないページが表示されます。これではアクセスしてきたユーザーは内容を読めず、ストレスが溜まってしまいます。当然コンバージョンにつながる可能性も下がるでしょう。

スマートフォンに最適化されたページを用意することで、ユーザー満足度を損なうことなく最適な体験を提供できるようになります。

ページがモバイルフレンドリーか確認する方法

1.モバイルフレンドリーテストでチェックする

image3.png
https://www.google.com/webmasters/tools/mobile-friendly/

Googleが無料で公開しているモバイルフレンドリーテストツールを用いると、Webサイトがスマートフォンでの閲覧に適しているかどうかをチェックできます。

モバイルフレンドリーのチェック項目は全部で4つあります。

  1. フォントサイズが小さすぎないか
  2. ビューポートが設定されているか
  3. タップ要素同士が近すぎないか
  4. コンテンツサイズがビューポートに対応しているかどうか

無料で誰でも使うことができるので、ぜひ一度使ってみて自分のサイトの状態をチェックするようにしましょう。ツールにアクセスして、チェックしたいURLを入れて調べるだけです。

不合格だと下記のような表示になります。

image4.png

2.GoogleSearchConsoleでチェックする

image2.png

https://www.google.com/webmasters/tools/home?hl=ja

GoogleSearchConsoleのモバイルユーザビリティレポートを確認すると、ページがモバイルフレンドリー対応しているかをチェックすることができます。

3.PageSpeed Insightsでチェックする

image1.png

https://developers.google.com/speed/pagespeed/insights/

ページスピードなどのパフォーマンスをチェックするツールですが、モバイルフレンドリー化されているかもチェックできます。

モバイルフレンドリーテストに合格していなかった場合

モバイルフレンドリーテストに合格していなくても、焦らずにページをモバイルフレンドリーに対応しクロール及びインデックスが行われれば、順位などは再判定されます。ページ単位で判定されるため、ページ数が多くても優先順位の高いページから対応していくことができます。

モバイルフレンドリーの対応方法3種

モバイルフレンドリーにページを対応させる方法は大きく分けて3つあります。

  1. ダイナミックサービングタイプ:ユーザーエージェントでページを分ける
  2. セパレートタイプ:URLページをを分ける
  3. レスポンシブWebデザイン:ファイルもURLもPCとスマートフォンで同一

それぞれメリット・デメリットがありますので、そちらも理解しましょう。

ダイナミックサービング

ダイナミックサービングは、URLはPCもスマートフォンも共通ですが、ユーザーエージェント機能を使ってデバイスや画面サイズに合わせて、スマートフォンなどの専用ファイルを動的に呼び出す方法です。

セパレートタイプ

セパレートタイプは、PCページとスマートフォンページURLを分けるタイプです。GooglebotがそれぞれのURLを認識できるように、アノテーションの設定が必要になります。

アノテーションとは、あるデータに対して関連する情報(メタデータ)を注釈として付与することです。

参考:
スマホサイトと、Webサイトの内容が同じにも関わらずURLが違うケース

レスポンシブWebデザイン

レスポンシブWebデザインとは、こちらは画面サイズによって UI構成を変化させるタイプのため、ファイルもURLもPCとスマートフォンで同一になります。

Googleが実装を推奨しているのがレスポンシブWebデザインです。

なぜレスポンシブWebデザインがオススメなのか

レスポンシブWebデザインには以下のようなメリットがあります。

1.URLが1つなのでユーザーによるコンテンツの共有やリンクが簡単

これはレスポンシブWebデザインだけでなく、ダイナミックサービングのメリットでもありますが、URLが1つなので読み手のデバイスを気にせずにユーザーシェアが可能です。

2.ページが表示されるまでの読み込み時間が短縮される

PCページとスマートフォンページURLが違う場合、ユーザーの端末に応じてリダイレクトが発生するため、読み込み時間が余計にかかります。また、PCページとスマートフォンページHTMLが違う場合も、動的に出し分けるために余計に処理時間がかかります。