Googleがレスポンシブデザインを推奨する7つの理由
Posted by admin at 7:53 日時 2015/03/02
Googleが、ウェブサイトがモバイルフレンドリーかどうかを、4月21日からモバイル検索でのランキング指標に使用する、と発表しました。
検索結果をもっとモバイル フレンドリーに | Google ウェブマスター向け公式ブログ
ウェブサイトがモバイルフレンドリーかどうかをモバイル検索結果で表示する変更はすでに行なわれていましたが、ランキングに影響するとあってにわかに騒がしくなってきたようです。
Googleは以前から、ウェブサイトをモバイルフレンドリーにする方法としてレスポンシブウェブデザイン（RWD）を推奨しています。Googleが公開しているモバイルSEOガイドでも、「Google では、デザインパターンとしてレスポンシブデザインを推奨しています」と明記されています。この記事では、GoogleがなぜRWDを推奨するのかを改めてまとめてみたいと思います。
さて、この発表後すぐにWebmaster Central office-hours hangoutでも、この件が取り上げられました。
冒頭のスライドで、モバイルユーザーがモバイルフレンドリーではない検索結果に不満を持っているという調査結果が示され、モバイルフレンドリーな検索結果の必要性について紹介されています。また、その後でRWDの利点も紹介されています。RWDが他の手法に比べて優れているのは、モバイルユーザーに見せるページとそれ以外のユーザーに見せるページの「URLが同じ」「HTMLが同じ」という２点です。
それでは、この２点がなぜ重要なのでしょうか。その理由は Google Developers サイトのモバイルSEOのページにて箇条書きで示されていますが、さらにその理由を分かりやすく「ユーザーの利便性」「運用コストの節約」「Googleの都合」の３つに分類して整理してみました。
ユーザーの利便性
ユーザーがページをシェアしたりリンクしたりしやすくなります。
URLが２つ以上あると、どちらをシェアしたらいいのか分かりにくいですよね。ただしこれが当てはまるのは、PCサイトとモバイルサイトを違うURLにする場合で、HTMLは別でも良いことになります。
ページの読み込み時間を短縮できます。
PCサイトとモバイルサイトでURLが違う場合、ユーザーの端末に応じてリダイレクトが発生するため、その分RWDより読み込み時間が余計にかかります。また、PCサイトとモバイルサイトでHTMLが違う場合も、動的に出し分けるために余計に処理時間がかかります。
Googleがページの表示速度をランキングの指標に使用すると発表したことも記憶に新しいと思いますが、削れる処理時間は削ってしまいたいところです。
運用コストの節約
同じコンテンツのページをいくつも維持管理する手間が省けます。
もし積極的にモバイルサイトのコンテンツを別に管理する理由がなければ、モバイル用のサイトがメインサイトと別にあることで、更新作業が単に二度手間と言うことになってしまいます。これはPCページとモバイルページを同時に生成できるCMSを導入すれば多少は改善するかもしれませんね。
リダイレクトのミスが発生する可能性を下げることができます。
モバイルユーザーがPCサイトにアクセスした場合は、モバイルサイト内の該当のページにリダイレクトする必要があります。もちろん、その逆もあります。PCサイトとモバイルサイトを分ける場合、このリダイレクトを適切にメンテナンスする必要性が発生します。
その他に起こりやすいミスについては、モバイルサイトのよくあるミスを回避するページにまとめられています。
ユーザーエージェントのリストの更新をしなくて良くなります。
PCからのアクセスなのか、モバイルからのアクセスなのかを判断する方法としては、ユーザーエージェントの解析に頼ることになります。ユーザーエージェントとは、ウェブページにアクセスする際にブラウザから送信される文字列で、どんな端末のどんなブラウザでアクセスしているかを自己申告するものです。
このユーザーエージェント文字列は、「私はスマホです」のような単純なものではありません。たとえば、多くのPHPアプリケーションで使用されているMobile Detectライブラリのソースコードを見ても、膨大なパターンが羅列されており、一見してメンテナンスの大変さが分かります。世の中にはもっと簡便に、PCとモバイルを見分けられるかのようなサンプルコードがたくさん落ちていますが、実際には正しくモバイルデバイスを見分けるコードのメンテナンスは大変です。単純なサンプルコードで実装している場合は、おそらく一部のモバイルデバイスにモバイル用のコンテンツが配信されていないことでしょう。
Googleの都合
対応するパソコン用ページやモバイル用ページが存在することをGoogleが知る必要がありません。
同じページでデバイスごとに複数のパターンがあると、ページのインデックスがやりにくい、ということのようです。完全にGoogleの都合ではありますが、Googleでも分からないことはユーザーにとっても分かりにくいと思います。特に、モバイルサイトに切り替えた場合に、モバイルサイトのトップページにリダイレクトするようなミスを犯している場合は、ユーザーは即離脱してしまうでしょう。
Googlebot がサイトをクロールするために必要なリソースを節約できます。
同じコンテンツなのにページが複数あると、Googlebotがクロールする手間がそれだけ増える、ということのようです。これもGoogleの都合ではありますが、作成したページがいち早くインデックスされるために、Googleの手間を減らしてあげるというのも必要なことなのかもしれません。
RWDを避ける理由はない
Googleは、img 要素の srcset 属性や、picture タグと言ったレスポンシブ画像や、SVGフォントのなどのテクニックも、すでに十分な後方互換性があり、推奨すべき手法として紹介しています。
マークアップ内の画像 | Web Fundamentals | Google Developers
アイコンに SVG を使用する | Web Fundamentals | Google Developers
このように、Googleが旗を振ることでRWDはいよいよ普及の段階に入ったのだなぁという印象です。2015年時点で、技術的にRWDを避ける理由はもはや無いと思います。
一方で、何が何でもRWDを採用しないといけない、という意味ではないことも強調しておきましょう。冒頭で紹介した動画でも言われていますが、今回の変更はモバイル検索結果でのランキングにのみ影響しますので、もしあなたのビジネスにおいてモバイルからの検索流入が不要と言うことであれば、モバイル対応も不要と言う結論になります。また、上記のRWDを採用すべき理由があったとしても、それを上回るだけのモバイルに最適化したユーザーインターフェースを別途用意する理由があることは否定しません。しかし、そのような理由がある場合は、ウェブサイトを２つ用意するよりは、モバイルアプリを検討すべきなのかなと思います。その際は、同時に発表されたApp Indexingが効果的でしょう。
この記事ではGoogleがソースの情報しか紹介していませんが、私が普段利用しているCMS「concrete5」も、レスポンシブなグリッドレイアウトを作成する機能が追加されたり、レスポンシブ画像に対応したりと、よりRWDへの親和性を高めていますので、Googleだけが言っているというわけではない世界的なRWDへの動きがあることを感じています。これらの機能を使ってモバイルフレンドリーなサイトを作るのが楽しみです！このまとめがRWDを提案する際の一助になれば幸いです。