モバイルフレンドリーアップデートとその対策

2015年2月27日、GoogleはWebサイトがモバイルフレンドリーかどうかをランキング要素として使用する、モバイルフレンドリーアップデートを2015年4月21日から展開すると発表しました。
PCの月間ネット利用者数は昨年より8％減／スマホの月間ネット利用者は30％以上増【ニールセン調査】にあるように、スマホ利用者が爆発的に増えている状況（ニールセン調査）ですので、Googleのランキング要素に入る入らないは関係なく、スマホに最適化されたWebサイトにする事は必須です。
では、モバイルフレンドリーアップデートにWebサイトを対応させるには、どのようなことをすればいいのでしょうか？

モバイルフレンドリーか確認する方法

最初にモバイルフレンドリーテストを行って、スマホに最適化されたページになっているか確認しましょう。

見た目にはスマホに最適化されているページでも、HTMLやCSSの問題からスマホで見た時にレイアウトが崩れてしまう可能性がある場合はモバイルフレンドリーテストで指摘されることがあるかもしれません。

モバイルフレンドリーテストはページごとに評価をしていますので、トップページをテストしてOKだったとしてもWebサイト全体がモバイルフレンドリーと評価されたわけではありません。

特にPV数の多いページや、自然検索からの訪問者数が多いページは、モバイルフレンドリーテストを使ってすべて確認しておきましょう。

スマホ対応ページを制作する方法

モバイルフレンドリーではないページは、スマホ対応のページを制作する必要があります。
スマホ対応ページを制作する以外にモバイルフレンドリーにする方法はありません。

スマホ対応ページの制作には3つの方法があります。Googleはレスポンシブウェブデザインを推奨しています。これはレスポンシブウェブデザインを使用したほうが、ケアレスミスによるエラーが起きにくいからです。

もちろん、レスポンシブウェブデザイン以外の方法でスマホ対応ページを制作しても問題はありません。

ページの制作方法	説明
レスポンシブウェブデザイン	すべてのデバイスで同じURL、同じHTMLを使ってページを表示させる方法です。
動的にHTMLを出力	ユーザーがアクセスに使用したデバイスに応じて、サーバー側で適切なHTMLを使ってページを表示させる方法です。 PC向け、モバイル向けで同じURLになります。
別のURLを利用	ユーザーがアクセスに使用したデバイスごとに別のURL、別のHTMLを使ってページを表示させる方法です。

スマホ対応ページの設定をGoogleに伝える方法

スマホ対応ページを制作したら、Googleにスマホ対応ページが存在していることを伝える処理をしておいたほうが無難です。ページの制作方法ごとに正しい設定方法で、Googleにスマホ対応ページの存在を伝えましょう。

ページの制作方法	Googleに設定を伝える方法
レスポンシブウェブデザイン	特別な設定をする必要はありません。meta viewportメタタグを正しく設定し、レスポンシブな画像にはpicture要素を含めるようにしておきましょう。（picture要素を含めなくてもモバイルフレンドリーテストに不合格になる事はありません）
動的にHTMLを出力	Vary HTTPヘッダーを設定してGooglebotがモバイル向けコンテンツを検出しやすいように設定をする必要があります。
別のURLを利用	PC用ページURLとモバイル用ページURLのアノテーションを設定する必要があります。 双方向にアノテーションを設定する事によりGooglebotがモバイル向けコンテンツを検出しやすくなります。

スマホ対応ページ制作時の注意点

スマホ対応ページの制作をした際にはいくつか注意する点があります。

ページの制作方法	注意
レスポンシブウェブデザイン	レスポンシブウェブデザインである事をGooglebotが正しく検出できるよう、CSS、Javascript、画像などの構成要素に対するクロールをrobots.txtなどでブロックしないようにしましょう。
動的にHTMLを出力	多くの場合でユーザーエージェントで出力するHTMLを切り替えますので、正しくユーザーエージェントが検出されるようにする必要があります。新しいデバイスなどのユーザーエージェントでも正しく動作するようにしておく必要があります。
別のURLを利用	PC用ページとモバイル用ページのアノテーションを1対1で設定する必要があります。 1つのPC用ページを複数のモバイル用ページから参照するような設定はNGです。（すべてのモバイル用ページでPCのトップページを参照するような設定など） アノテーションがうまく設定されていないと、PC用ページとモバイル用ページがそれぞれGoogleにインデックスされてしまい、正しく設定されている場合よりもランキングが下がってしまう可能性があります。

Googleがレスポンシブウェブデザインを推奨する理由

Googleは3つのスマホ対応ページの制作方法のうち、レスポンシブウェブデザインを推奨しています。それには設定ミスを防げるという以外にも理由があります。

ページの表示速度があがるかもしれない

ユーザーエージェントを使ったリダイレクトなどを行う必要がないので、ページの表示までの速度が向上します。

クロールの効率があがる

Googlebotが複数のバージョンのページをクロールする必要がないので、クロールの効率が上がり多くのページがインデックスされるようになる。

モバイル対応ページを制作する時のよくあるミスを防げる

• どのPC用ページでもモバイルサイトのトップページにリダイレクトしてしまうといった、誤ったリダイレクトを設定してしまう事がない
• リダイレクトの設定ミスなどによりモバイルでアクセスしたときのみに404エラーが発生する事がない
• PC向けとモバイル向けの双方のページからリンクを張る場合に、誤ったページにリンクを張ってしまうというミスが起こらない

ただし、レスポンシブウェブデザインでページを制作したからといって、Googleの評価が上がる、ランキングが上昇するわけではありません。

他の2つの制作方法で間違った設定をしてしまった場合に、Googleが適正な評価ができない可能性もあるため、レスポンシブウェブデザインを推奨していると捉えるようにしましょう。

モバイルフレンドリーアップデートの適用範囲

モバイルフレンドリーアップデートは、スマホ検索結果のみに影響を与え、PCでの検索結果には影響を与えません。そのため、PCでの検索結果とスマホでの検索結果が大きく異なる場合があります。
（英語版オフィスアワーでJohn Muellerが発言しています）

モバイルフレンドリーアップデートは、ページ単位＆リアルタイム反映です。（SMX WestでGoogleのGary Illyes氏が発言）

10ページあるWebサイトで、5ページ分スマホ対応ページを用意すれば、その5ページはモバイルフレンドリーアップデートの恩恵を受け、残りの5ページはランキングが下がるなどの問題が起きる可能性があります。

また、このアルゴリズムはリアルタイムで反映されますので、ページをスマホ対応した後にFetch as Googleなどを使ってインデックスを書き換えると、すぐにランキングにも反映されるものと考えられます。

ただし、ランキングを決める時の要素の一つにしか過ぎませんので、スマホ対応ページを制作したからといって、ランキングが上昇するわけではありません。
引き続き、コンテンツの内容や検索されるキーワードとの関連性や、自然な被リンクがあるかどうかなどの要素が、ランキングを決めるうえで重要です。

2015年11月1日から一部のインタースティシャルもアルゴリズム要因に

Googleは2015年11月1日より、画面を覆ってアプリのダウンロードを促すような、インタースティシャルと呼ばれる手法を採用しているページはモバイルフレンドリーではないとみなすアルゴリズムに修正すると発表しました。

参考：アプリバナーでよりモバイルフレンドリーなウェブページを – Googleウェブマスター公式ブログ

以下の図のように、アプリのダウンロードを促すために画面全体を覆うようにして広告を表示させる手法がNGになります。
ユーザーのアプリダウンロードを促したい場合には、バナーのようにコンテンツの邪魔にならないような手法を使うことが推奨されます。

アプリバナーでよりモバイルフレンドリーなウェブページを – Googleウェブマスター公式ブログより引用

大手メディアサイトを中心に、コンテンツを見ようとすると全面に広告が出現する手法もありますが、この方法も遠からず「モバイルフレンドリーではない」と判断されてもおかしくありません。
（個人的にはこういう広告の見せられ方で、いい感情は生まれないと思っています）

アプリをダウンロードしてほしい、広告を見せたい、そんな運営者側の考えも理解できないわけではありませんが、ユーザー第一で考えていく事が結果的にアプリのダウンロード数増加、広告経由のアクセスの増加にもつながっていくものと思います。
（2015/9/6追記）

さいごに

スマホに対応したページかどうかが検索順位を決める要素の一つに加わりましたが、「アルゴリズムに加わったからスマホ対応ページを制作する」という考え方は、かなり遅れていると言わざるを得ないでしょう。

スマホを取り巻く環境は日々変化しています。ユーザーニーズに迅速に対応する必要性からもスマホ対応ページの制作は必須事項と言えます。

Googleのマルチスクリーン対応の成功事例によると、ミサワホーム株式会社ではフィーチャーフォンの同じキャンペーンからのコンバージョン数が、スマホページからでは39.6%も増加したそうです。

また、モバイルフレンドリーアルゴリズムの導入がきっかけで、多くのWebサイトがスマホ対応ページを用意したそうです。
そういった意味で、Googleの目論見は的中した、インターネットがまた少し使いやすくなったと言えるかと思います。

また、Googleではスマホ専用のインデックス、つまりスマホ専用の検索エンジンを開発中だそうです（2015/6/14現在の情報）
もしまだスマホ対応ページを制作していないのであれば、早急に制作することをおすすめします。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします