MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

Googleウェブマスターツールでモバイルユーザビリティを確認する方法

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

2月12日(木)よりGoogleウェブマスター向け公式ブログにて告知がありましたが、Googleウェブマスターツールにて自サイトのモバイルユーザビリティについて確認できるようになりました。

今回はGoogleウェブマスターツール上でモバイルユーザビリティに関する情報を確認する方法を解説します。

 

モバイルユーザビリティについて確認する方法

 

以下の3ステップで確認できます。

 


 1. Googleウェブマスターツールにログインする

 2. 検索トラフィックのカテゴリをクリック

 3. モバイルユーザビリティをクリック


 

[Googleウェブマスターツール > 検索トラフィック > モバイルユーザビリティ] と順にクリックしていくと確認画面にたどり着きます。

モバイルユーザビリティの位置

 

モバイルユーザビリティにおいて問題がなければ、以下のような表示がされています。

問題ない場合

 

 

確認の仕方は以上です。

ここからは確認した上で問題が合った場合の表示内容の解説と対処法を記載します。

 

確認できる情報の解説

 

ウェブマスターツール上でモバイルユーザビリティに関する問題点が検出された場合、以下のように表示されます。

問題箇所の表示

 

Googleウェブマスターツールで確認できるモバイルユーザビリティに関する項目は主に以下の6つです。

 


 1. Flashを利用しているか

 2. リンクやボタンが近すぎる位置にないか

 3. 文字フォントがスマートフォンで見た時に問題がないか

 4. viewportが存在しているか。

 5. viewportの固定幅が適切か

 6. コンテンツがviwportのサイズにあっているか。


 

それぞれ簡単に解説いたします。

[確認項目1] Flashを利用しているか

Flashとは、Adobe Systems社によってつくられたソフトです。一般的な言葉の使われ方としてコンテンツそのものを指すことが多く、音声や動画、ベクターグラフィックスのアニメーションを組み合わせて作られるWebコンテンツです。

一時期Flashは多くのWebコンテンツに使われましたが、スマートフォンでは表示されません。

Flashが使えない

 

 

上図のようなエラーが発生してしまい、結局ユーザーはFlashの中身を見ることはできないのでユーザービリティを大きく害する要因となります。

改善策としては、モバイルに適応した最新のアニメーションを利用しましょう。

最新のアニメーションに関しては、以下のGoogleディベロッパーのページで説明がされています。

https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/unplayable-content?hl=ja

[確認項目2] リンクやボタンが近すぎる位置にないか

スマホページやレスポンシブのページでない場合、大概はカテゴリなどのリンク同士が近くに有るために、この検査項目で引っかかってしまいます。

リンク同士の距離を遠ざけることが直接的な改善策なのですが、結局のところサイト全体のデザインを変えなければならないため、スマホ用のページを用意することとほとんど変わらないのではと思ってしまいます。

こちらも改善策がGoogleディベロッパー内に記載されています。

https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately

[確認項目3] 文字フォントがスマートフォンで見た時に問題がないか

皆さんもご経験があるかと思いますが、スマートフォン最適化されていないサイトにアクセスしたとき、ページの文字が全部小さすぎて拡大しないと見えないといったパターンです。

読みやすいフォントに関しては、以下のガイドラインに記載があります。

https://developers.google.com/speed/docs/insights/UseLegibleFontSizes

[確認項目4] viewportが存在しているか。

viewportとは、スマートフォン最適化において重要なmetaタグのことです。そのタグをサイトのソース内に設置することで問題解決が出来ます。

viewportの設定に関しては以下の公式ガイドラインにそって進めましょう。

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=ja

[確認項目5] viewportの固定幅が適切か

こちらはviewportタグがページ設置されているが、幅の設定を誤っている場合に検出されるエラーです。指摘されたページに対し固定幅を適切に設定しなおしましょう。

設定の仕方に関しては確認項目4と同じガイドラインをご覧になって進めて下さい。

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport?hl=ja

[確認項目6] コンテンツがviwportのサイズにあっているか。

コンテンツがviewportのサイズに合っていない場合、ユーザーはそのページを閲覧する際横にスクロールしながら見なければならなくなります。非常に不便なので、改善する必要が有るでしょう。

方法としては、ページ要素のCSSをパーセンテージで設定することで様々なデバイスに対し柔軟にページ表示が出来るようになります。

詳しくは以下のガイドラインに記載があります。

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport?hl=ja

 

まとめ

 

スマートフォンの普及により、Googleもスマートフォンに合った検索エンジンに進化していなければなりません。1月16日あたりからウェブマスターツールに届くようになったアラートもそうですが、Google自身が変革を遂げるために日々努力しているようにも感じます。

スマートフォン最適化がウェブマスターにとって一種の義務になってくる日もそう遠く無いかもしれません。

 

【あわせて読みたい記事】


 ◯ 「モバイルユーザビリティ上の問題が検出されました」解説と対処法 【Goolgeウェブマスターツールアラート】

1月16日あたりからGoogleウェブマスターツールに届くようになったアラートについて解説しています。

 ◯ Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法

2012年6月にGoogleが公表している、スマートフォン最適化について触れた記事です。


 

-カテゴリ:アクセス解析

みんな使えるWeb活用術 MINWEB

 

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

Webソリューション活用のウェブアクセル

最新記事一覧
カテゴリー

Webソリューション活用のウェブアクセル