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

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

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

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

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

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

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

参考:
Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

自社の魅力を「広く・深く」伝えるならferretの広告

ブランド認知広告を出稿した
効果を見てみる

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

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.モバイルフレンドリーテストでチェックする

mft01.jpeg
https://www.google.com/webmasters/tools/mobile-friendly/

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

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

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

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

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

mft02.jpeg

2.GoogleSearchConsoleでチェックする

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

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

3.PageSpeed Insightsでチェックする

mft04.jpeg
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が違う場合も、動的に出し分けるために余計に処理時間がかかります。

Googleページの表示速度を検索ランキングの指標に使用すると発表したこともあり、読み込み時間が少しでも早くなることは、Webディレクターからすれば変更するに価するメリットと言えるでしょう。

3.管理運営がしやすくなる

URLで運用する場合、PCとスマートフォンそれぞれの更新作業は必要ですが、レスポンシブWebデザインならページが一緒なのでこれを軽減できます。ただし、PCとスマートフォンページを同時に生成できるCMSの導入などにより、多少は改善できるようになります。

4.リダイレクトのミスを軽減できる

同一URLの場合、スマートフォンユーザーがPCサイトにアクセスがあったら、該当のスマートフォンページリダイレクトする必要があります。もちろん、その逆もあります。これらの工程がなくなる分、運用コストが削減できます。

5.PCとスマートフォンで別のページが存在するか否かを知る必要がなくなる

同じWebページデバイスごとに複数のパターンがあると、Googlebotページをそれぞれクロールする必要があります。アノテーションの設定が済んでいれば良いですが、そうでないページがあるとGoogleは困るため、そもそも設定の必要がないレスポンシブWebデザインをGoogleは推奨しています。

以上のような理由がレスポンシブWebデザインを良しとするGoogleの見解です。

まとめ:モバイルフレンドリー対応でユーザーメリットを

モバイルフレンドリー対応は、スマートフォンの利用がメインとなった現代では必須です。
検索順位だけでなくユーザーメリットのことをしっかりと考えて対応していきましょう。