Googleが提供するツールでモバイルのエクスペリエンスを向上させる

約半数がモバイルからのアクセス

スマホの普及によりモバイルからのアクセスは増加しています。このブログへのアクセス（UUベース）も2013年1月には10％に満たなかったモバイルユーザーが、2014年下期には45％と、半数近くがモバイルからのアクセスとなっています。

ブログのモバイル対応について考えてみた | 象と散歩 でモバイル（スマホ）でYoutubeと表を見やすくするための方法について記載しましたが、今やスマホで見やすいサイトであることは必須条件となってきています。

Googleではモバイルに対するユーザビリティに関してのレポートやツールを提供していますので、これらを有効活用してモバイル・ユーザーフレンドなサイトにしましょう。

モバイル対応を求めるGoogle

Googleはモバイルに対応したサイトを望んでいます。 下記はモバイル・ファーストインデックスの動画です。日本語字幕で見られます。

Google にとっては、モバイル フレンドリーなサイトが増えることが、結果、モバイルでの検索の増加、広告収入の増加に繋がるので当然ですが、利用者にとってもモバイル ユーザフレンドなサイトが望まれているのは利用者の立場からみて間違いありません。

[スマホ対応] ラベルって何？

2014年11月14日付のGoogleウェブマスター向け公式ブログの 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために の中でモバイル版の検索結果に［スマホ対応］ラベルが表示されるという発表がありました。［スマホ対応］ラベルは下記の条件に合致する場合に適用されるとあります。

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

【引用】検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

日本語（左図）では[スマホ対応]、英語（右図）は[Mobile-friendly]と表示されます。

そして、「Googleではモバイル・フレンドリーの条件をランキング要素として使用することも実験中です。」という記載がありますので、近い将来には、”見やすさ” だけではなく、検索結果のランキングに影響しそうです。

モバイル対応を始めよう

Googleでは、サイトやブログのモバイル対応のガイダンスとして、 ウェブマスター向けモバイルガイド を提供してくれています。

モバイル フレンドリー テスト

この中にサイトやブログがモバイルに最適化されているかを確認するために モバイル フレンドリー テスト が用意されています。自分のサイトやブログをGoogleがモバイルに最適化されていると判断しているかを確認しましょう。

確認は簡単で、下記画面でURLを入力して「分析実行」ボタンをクリックするだけです。

問題がなければ下記のように「問題ありません。このページはモバイル フレンドリーです。」と表示されます。またGoogleがこのサイトを実際にどのように見ているのかがイメージとして表示されます。

このモバイル フレンドリー テストでお墨付きがもらえれば、前述したGoogleモバイル検索の結果で、[スマホ対応]ラベルが付加されます。

PageSpeed Insights でモバイルの操作性を向上させる

モバイル フレンドリー テスト で問題がなかったとしても、まだ改善できることは見つけられます。そのひとつが、PageSpeed Insights です。

PageSpeed Insights は、ページのパフォーマンス（表示速度）を測定し、改善点を指摘してくれるツールですが、PCとモバイルと両方の表示で測定を行ってくれます。（Google ウェブマスター向け公式ブログ: PageSpeed Insights を使ってサイトのモバイル操作性を向上させましょう）

1) PageSpeed Insights の実行

「ウェブページのURLを入力」欄にURLを入力して「分析」をクリックします。

2）PageSpeed Insights の実行結果

ブログのモバイル対応について考えてみた | 象と散歩 でチェックしてみましたが、58/100 点と思ったより点数が高くなりません。

改善できる点はないかと詳細を確認すると、「次のスクリプトの非同期バージョンを使用してください」という中に Google +1 のスクリプトが含まれていましたのでこちらを改善します。

Google +1のJavaScripitを非同期にする

Google +１のJavaScripitを非同期にする方法については、+1 ボタン - Google+ Platform の JavaScript の非同期読み込みに記載がありますので こちら を参考にしてください。

ヒント: パフォーマンスを最高にするには、このコードを最後の +1 タグの直後に配置します。

とありますが、</Body>タグの直前に記載すれば大丈夫です。

3) 修正後の再チェック

Google +1のJavaScriptを変更して再度、PageSpeed Insights で確認すると、58/100 → 60/100 へと2ポイント改善されました。

PageSpeed Insights のルール に日本語での解説もありますが、Bloggerを利用している場合には、これ以上の改善はできなそうです。

４）ユーザーエクスペリエンス

PageSpeed Insightsでは「速度」以外にも「ユーザーエクスペリエンス」についても評価してくれます。こちらは 96/100 で修正が必要な項目はありませんでした。

ウェブマスターツール

Googleウェブマスターツールでもモバイル ユーザビリティのチェックができます。チェックできる内容は以下の６点です。

• Flash が使用されています
• ビューポートが設定されていません
• 固定幅のビューポート
• コンテンツのサイズがビューポートに対応していません
• フォントサイズが小です
• タップ要素同士が近すぎます

詳細は、モバイル ユーザビリティ - ウェブマスター ツール ヘルプ で確認できます。

まとめ

Googleが強く推奨するだけではなく、モバイルからのアクセスは増え続けていますので、モバイル ユーザ体験の向上は今や必須です。

スマホで検索して、開いた途端に見る気が失せるサイトもまだ少なくありません。折角、Googleが無償でモバイル ユーザビリティ、表示速度など各種チェックツールと変更方法まで教えてくれているので、是非、修正可能な範囲で対応しましょう。

【おまけ】モバイル・ユーザの実態調査（Our Mobile Planet)

Googleが提供するモバイル向けのレポートとして、各国のモバイルユーザの実態をまとめた Our Mobile Planet があります。2013年のレポートなので鮮度は落ちてしまいましたが、モバイルユーザーの動向としては参考になります。

自分でグラフも作れる Our Mobile Planet

また Our Mobile Planet では、2011～2013年のデータを使って自分で簡単なグラフを作成することができます。

例えば、下記はスマホでどのくらいの頻度でウェブにアクセスをしているかを示したグラフで、83％のスマホ・ユーザーが毎日ウェブサイトにアクセスしていることがわかります。

各国との違いも比較できるので、2014年のデータも追加されることを願います。