BLOOM journal

あなたのWebサイトがモバイルフレンドリーかチェックする方法

投稿日:2015年06月09日
SEOの知識

  • このエントリーをはてなブックマークに追加

モバイルフレンドリー

こんにちは、石山です。

2015年4月21日から、 Googleの検索エンジンは、「Webサイトが『モバイルフレンドリー』かどうかを検索結果のランキング要素として使い始める」ようになりましたが、みなさんのWebサイトはモバイル対応していますか?

2015年6月8日現在、弊社のWebサイトは(実際にどの程度順位に影響がでるのか検証するために)モバイル対応していなかったのですが、検索結果に影響は出ていなく、「札幌 SEO」「SEO 札幌」ともに1位をキープしています。

今のところ、全体的にも検索結果の影響は少ないようですが、まだモバイル対応していないのであれば、Googleのモバイルフレンドリーアップデートに関係なく、今後モバイルに対応していく必要があるでしょう。
ちなみに弊社のWebサイトは、近日リニューアル予定です!

さて、Googleはモバイルフレンドリーかどうかを判断するためにどんなところを見ているのでしょうか。Googleは以下の4点をチェックしています。

  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

引用:http://googlewebmastercentral-ja.blogspot.jp/2014/11/helping-users-find-mobile-friendly-pages.html

モバイルフレンドリーじゃないあるある

上記4点の項目に問題がなければ、Googleはひとまずモバイルフレンドリーと認めてくれます。
認められた場合はモバイル端末の検索結果で「スマホ対応」と表示されます。

スマホ対応

自分のWebサイトが「スマホ対応」になっているかどうかを知るためには、実際にモバイルで検索してみればわかりますが、調べる為のツールもあるのでご紹介します。

  1. Google developers / モバイルフレンドリーテスト
  2. Google Search Console / モバイルユーザビリティ
  3. Google Developers / PageSpeed Insights

全部Googleのツールですが、どう違うんでしょう?
ということで、上記3つのツールで某レスポンシブサイトをチェックしてみました。

1. Google developers / モバイルフレンドリーテスト

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

モバイルフレンドリーテストは、Google developersのモバイルガイドで紹介しているツールで、ページ単位でのチェックが可能です。
某レスポンシブサイトをモバイルフレンドリーテストで分析してみたところ、ジャン!

モバイルフレンドリーツール、問題なしバージョン

問題が無い場合は「問題ありません。このページはモバイルフレンドリーです。」
と表示されますね。やったー!優秀だ〜〜〜!

ちなみにNGが出ると画面は以下の表示になります。

モバイルフレンドリーツール、問題ありバージョン

モバイルフレンドリーテストの検証については、下記Webサイトが詳しく紹介してくれているようだったので、そちらをご覧ください。

Google が言う 「モバイルフレンドリー」 とは? モバイルフレンドリーテストツールで色々試してみた

2. Google Search Console / モバイルユーザビリティ

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

検索結果でのWebサイトのパフォーマンスを監視&維持できるSearch Consoleは、登録していればWebサイト全体のモバイルユーザビリティをチェックしてくれます。

Google Search Console問題なしバージョン

こちらもエラーが出なかったので面白みにかける画面ですが、エラーがあった場合は、エラー内容と該当ページまで表示してくれます。
一括で確認したい場合には便利ですね。

Google Search Console問題ありバージョン

3. Google Developers / PageSpeed Insights

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

PageSpeed Insightsは、正確にはWebのパフォーマンスをチェックするためのツールなのですが、モバイルのユーザーエクスペリエンス(使いやすさ)もチェックしてくれます。
PageSpeed Insightsはページ単位でのチェックとなります。

PageSpeed Insights結果表示

モバイルフレンドリーテストとSearch Consoleでは問題が検出されなかったのですが、PageSpeedInsightsでは、ユーザエクスペリエンスが99点でした。
エラーは、ページ内で埋め込んでいるGoogleマップ内のリンク「利用規約」「ログイン」のタップターゲットが小さすぎて接近している点です。

PageSpeed Insightsエラーの原因

ちなみに、Googleインドアビューでも同じようなエラーが出ていました。

これはどうしてかというと、けんちゃんこと鈴木謙一さんのブログに書いてありましたが、
「PageSpeed InsightsはGooglebotのUAを使わずに僕たち人間が使う一般的なブラウザのようなUAでページを取得します。」
ということだそうです。

引用:https://www.suzukikenichi.com/blog/two-reasons-pagespeed-insights-returns-deferent-results-from-mobile-friendly-

まとめ

☆Googleがモバイルフレンドリーかどうか判断する基準は4点

  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 目的のリンクを簡単にタップできるよう、また誤って別のリンクをタップしないよう、それぞれのリンクが十分に離れた状態で配置されていること

☆Googleが提供しているモバイルフレンドリーかチェックできるツールは以下の3つ

  • Google developers / モバイルフレンドリーテスト
  • Google Search Console / モバイルユーザビリティ
  • Google Developers / PageSpeed Insights

☆PageSpeedInsightsは、Google developersとGoogle Search Consoleとは違うUAでチェックしているため、同じGoogleのツールですが分析結果が異なる。

今回ご紹介したツールは全てGoogleが公式に出しているので、是非一度チェックしてモバイルユーザビリティの向上に努めてみてはいかがでしょうか。

最後に、私が1年前に書いたモバイルの重要性について書いた記事も読んでみていただけると嬉しいです。

ホームページ制作はさらなるモバイルファーストへ

  • このエントリーをはてなブックマークに追加