制作会社からみるGoogleモバイルフレンドリーまとめ

投稿日:2015年4月4日

2015年4月21日から開始されるGoogleのモバイルフレンドリーについてスマートフォンサイトの制作会社として纏めてみました。

なぜGoogleのモバイルフレンドリーが必要か!?

ユーザーにとってスマートフォンなどの携帯端末を使って、多くの情報を気軽に検索することは今や日常茶飯事になっています。
そんな中で、Googleの検索結果をタップした時に表示ページのテキスト文字が細かすぎて読みにくい、あるいはリンク表示が小さくて見にくかったり、見落としてしまったりということは意外に多いものです。

googlemobilefriendly1

もしくは表示が大きすぎて、全てのコンテンツを見ようとすると横方向にスクロールしなければならないなどの不便は、誰でも経験しているのではないでしょうか。

これらは主として、ウェブサイトが携帯端末画面での表示を前提として最適化されていないことが原因です。

こうした使い勝手の悪さは、モバイル端末で検索を行うユーザーの利便性を妨げることにつながるとして問題視されてきました。

そこでGoogle は、「モバイルフレンドリー・アルゴリズム」について、2015年4月21日にローンチすると発表。

ユーザーの情報検索の利便性向上に寄与することを目的に、モバイル表示対応済みのサイトはSEO順位がアップするなど優位性が増すことが伝えられています。

文字通り「ユーザーにやさしい」作りであるとのお墨付きが得られる格好です。
Googleは過去にさまざまなアップデートをしていますが、基本的にはユーザーの利便性を考慮したものです。今回の「モバイルフレンドリー」もユーザーの検索性アップを考慮したものと考えるのは当然です。

最適化指標「モバイルフレンドリー」の基準とは

「モバイルフレンドリー」とは、そのサイトがモバイル表示用に最適化されているかどうかの指標です。
問題は、Googleが何をもって「モバイルフレンドリーか否か」を判定するのか、という点ですが、根拠の一つとなる指標は、Googleが公開する「モバイルフレンドリーテスト」というツールでしょう。

モバイル用サイトのテスト用HTMLをいくつか作ってテストを行うと、以下のようなメッセージが表示れます。

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

×テキストが小さすぎて読めません
×リンク同士が近すぎます
×モバイル用 viewport が設定されていません
×コンテンツの幅が画面の幅を超えています

また、結果として「モバイルフレンドリーではありません」というメッセージも表示されます。

このテストをする事でGoogleでモバイルフレンドリーと認識されるかの確認ができます。
画像の文字が小さすぎる等の細かな点までは判定されませんので、ある種Googleのチェックをパスできるかというチェックになります。
BRISKで作成するサイトは当然このチェックをパスしその先にあるユーザビリティまで考えたサイトを制作します。

またGoogleは「今回の更新は、検索結果において世界的規模で大きな影響を与えるものになる」とまで公言していることからユーザビリティを求めたスマートフォンサイトを作らないまでも、このチェックを通過する事は最低限の要件になりそうです。

モバイルフレンドリーでの補足

情報が錯綜する中で、Googleの公式情報や関係者の発言が、最も信頼出来るデータでしょう。
それを踏まえると、押さえておくべきポイントは、次のようになります。
※意外と知らない人もいるので要チェックです!

1 モバイル検索にだけ適応されること。
2 ページ単位で評価されること。
3 ナビゲーショナルクエリには影響しないこと。
4 モバイルフレンドリーテストの基準で評価されること。

ポイントを踏まえるとPCで検索した場合には、影響がない可能性があります。
しかし、顧客やユーザーがモバイルの利用者である場合は、モバイルフレンドリーに対応したサイト制作が求められることになります。

また今年から、Googleはモバイルフレンドリーではないサイトのウェブマスターツール宛に、警告メールを送付しています。

ウェブマスターツール 警告メール

しかし、ピンチはチャンスです。
もしモバイルフレンドリーなスマホSEOを講じることが出来れば、競合他社を抜く可能性もあります。

モバイルフレンドリーに対応したスマホのhtmlコーディングについて

モバイルフレンドリーに対応したスマホのhtmlコーディングについては、以下の通りです。

googlemobilefriendly4

1 ビューポートを設定すること。
ビューポートとは「表示領域」のことです。スマホの場合は、全ての領域を一度に表示できません。その為、ビューポートを設定する必要があります。

2 フォントサイズを大きくすること。
文字が小さいと読めないこともあります。適切な文字の大きさを考えましょう。

3 タップを余り近づけないようにすること。
リンクやボタンが近すぎると、誤操作の原因になります。

4 コンテンツのサイズをビューポートに対応させること。
コンテンツは指定されたビューポートのサイズに合わせて作成しましょう。

5 スマホで再生できないコンテンツは掲載しないこと。
Flashを使用しているとNGになります。

絶対ではない「モバイルフレンドリーテスト」の落とし穴

「モバイルフレンドリーであるかどうか」は、Googleが提供するチェックツール「モバイルフレンドリーテスト」が、現時点では最もわかりやすいチェックツールです。

しかし、同テストにパスしたら、全く問題がないかと言うと、実はそうでもないのです。Googleの「モバイルフレンドリーテスト」では検出や判定できない項目もいくつか確認されています。

例えば、リダイレクト先を誤って設定している場合、リダイレクト先がモバイルフレンドリーであれば、テストにはパスしたことになります。
モバイルフレンドリーテストではGooglebot Mobileでのアクセス結果のみで判定するため、このようにくぐり抜けてしまう例があるようです。
表示速度についても、モバイルフレンドリーテストでは判定不可能です。

モバイル回線での表示速度は、PC回線に比べて画面表示が遅いものですが、スマートフォン用の表示が最適化されてさえいれば、テスト結果では「問題なし」と出ます。

googlemobilefriendly5

Webページの表示速度については、PageSpeed Insightsで確認しましょう。
このように、Googleが提供するモバイルフレンドリーテストも決して万能ではなく、どんなWebページでも完璧に判定することはできないということを理解しておくことが大切です。

やはり最後は目視・実機での確認を

モバイルフレンドリーテストで判別できない項目があるとすれば、頼るべきは実端末による検証です。やはり最終的には、人がやる実機チェックです。

最後は目視・実機での確認

モバイルフレンドリーテストに合格していることを前提として、次の点に注意しましょう。
1)スマホで下層ページへのアクセス時、スマホ用トップページにリダイレクトしないか
2)モバイル回線で実端末でアクセスしページの表示はストレスを感じない程度のスピードになっているか
3)スマホでのアクセス時、ダイアログが表示されてタップを要求することで、ユーザーにストレスをかけていないか
4)画像の文字が小さすぎないか、スマホ端末で読み取れる配色であるか

モバイルフレンドリーの目的は、ユーザーがストレスを感じることなく情報検索や閲覧ができることです。

最適化に関しては、検索順位を上げることだけに汲々とせず、ユーザー目線で使い勝手の良いWebサイトを目指すことが、モバイル対応全体への質的向上につながっていくと考えています。
また、Googleモバイルフレンドリーはスマホ最適化されていないものサイトの順位を下げるという内容ですが、どのデバイスで見ても良いコンテンツであれば自然と順位もアップするものです。

関連記事

  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル