SEOに適した3つのモバイル向けサイト構成〜Googleの推奨はレスポンシブウェブデザイン
JECCICA客員講師 鈴木 謙一
ECでも急成長するモバイル
- 2014年のモバイル端末経由の上位100社の合計EC売上高は5385億円、2013年から1708億円増加
- 2014年下四半期のオンラインショッピングでのモバイル使用率、日本は49%で11か国中トップ。モバイルでの商品購入、日本は米国の2倍超
- 2014年ホリデーシーズンの米Amazonのアクセスの60%近くがモバイル経由
モバイル（スマートフォン）の利用が爆発的に伸びてきていることは、今さら言うまでもないことです。モバイル普及の大波は、EC市場にも確実に押し寄せてきている事実を、今見せたデータは示しています。
あなたが運営するECサイトは、今後さらに伸びることが間違いないモバイルに対応できているでしょうか？
【補足】データの参照元は順に次のとおり。
- 日本ネット経済新聞 http://www.bci.co.jp/netkeizai/article/363
- Criteo http://www.criteo.com/resources/mobile-commerce/
- Amazon http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=2002024
SEOに適したモバイルサイトが必要
SEOを意識するのであれば、検索エンジンに適したモバイルサイトを構築しなければなりません。スマートフォンユーザーのためにあなたが準備したモバイル向けサイトが、たしかにモバイル向けサイトであることを検索エンジンに的確に理解してもらう必要があります。
Googleの技術力が進歩しているとはいえ、あなたの方からもGoogleに対して、「これがPC向けのページです。対応するスマートフォン向けページがこれです。」ときちんと伝えることも重要です。
そうしないと、本来あるべき順位に検索結果で表示してもらえないことがあります。
3つのモバイル構成
Googleは、次の3つのタイプのモバイルサイト構成をサポートしています。
- レスポンシブウェブデザイン
- 動的な配信
- 別々のURL
この3つの構成のなかで、Googleが推奨しているのが1つ目レスポンシブウェブデザインです。このコラムではこの後、レスポンシブウェブデザインの特徴をわかりやすく説明します。
レスポンシブウェブデザインの特徴
レスポンシブウェブデザインは、PCやスマートフォン、タブレットなどにかかわらず、すべてのデバイス（端末）に対して同じURLで同じHTMLを配信します。
「1URL・1HTML」構成です。
CSSによって、レイアウトを変化させ、PC用に適した表示、スマートフォンに適した表示、タブレットに適した表示を自動的に切り替えます。
スターバックはレスポンシブウェブデザインを採用しているURLは、PC向けもスマートフォン向けも http://www.starbucks.co.jp/ で同じ。
Googleはレスポンシブウェブデザインを推奨
先ほども述べたように、Googleはレスポンシブウェブデザインを推奨しています。なぜレスポンシブウェブデザインをGoogleは推奨するのでしょうか？主な理由は次のようになります。
1. URLが1つ
PCとスマートフォンでURLが同じ、言い換えるとURLが1つというのがまずいちばんのメリットです。
なぜなら、重複コンテンツが発生しないからです。同じコンテンツが異なる複数のURLで表示される重複コンテンツを検索エンジンは嫌います。
PC向けページとスマートフォン向けページを別々のURLで提供している場合は、適切な設定をしておかないと、重複コンテンツとしてみなされてしまうことがあります。しかしレスポンシブウェブデザインなら、対処する必要は何もありません。
また、別々のURLでスマートフォン向けページとPC向けページを提供している場合、たとえばモバイルユーザーがツイッターで共有したURLを、PCユーザーがクリックしたら、PCなのにスマートフォン向けサイトが表示されてしまうかもしれません。
URLのシェアという点でも、1つのURLにはトラブルが起きにくいメリットがあります。
2. 技術的な要件が少ない
「レスポンシブウェブデザイン」以外の残りの2つの構成、「動的な配信」と「別々のURL」では、PCなのかスマートフォンなのかを判別するために、ユーザーエージェント（User-Agent）を識別する必要があります。
またVary-HTTPヘッダーを返すことが推奨されます。
さらに、「別々のURL」構成では、正しいリダイレクトを実行しなければならなりません。加えて、モバイル向けページとPC向けページを対応付けするために“アノテーション”を設定します。
モバイル向けページにはrel=”canonical”を、PC向けページにはrel=”alternate”を設定します。
さてこれを読んであなたはすんなりと理解できたでしょうか？
何を言っているのかわからないと感じた方も多いのではないでしょうか。レスポンシブウェブデザイン以外の2つの構成は、検索エンジンのためにしてあげなければならない、技術的に難解な設定が多いのです。
もちろんレスポンシブウェブデザインも、レスポンシブウェブデザインという技術を使ってサイトを構成しなければなりません。
しかしながら、レスポンシブウェブデザインだとしてGoogleに認識させるために何か特別な追加の設定が求められることはありません。
Googleが自動で認識してくれます。
3. 運用コストの負担が少ない
レスポンシブウェブデザインは、1つのHTMLをスマートフォンとPCで共用します。新しいページを追加したときでも、新規に作成するページが1つで済みます。既存のコンテンツを更新するときも1回の変更で済みます。
一方で、スマートフォンとPCで別々のHTMLを配信する残りの2つの構成では、同じコンテンツであったとしても、スマートフォン向けページとPC向けページに対してそれぞれの追加・更新作業が必要になります。
つまり2回の更新作業が発生します。したがって、維持管理の観点から考えると、レスポンシブウェブデザインは運用コストの負担が少ないのです。
このほかにも、動的な配信と別々のURLにはないメリットがレスポンシブウェブデザインにはあります。
レスポンシブウェブデザインは万能なのか？
では、レスポンシブウェブデザインはすべての面において動的な配信と別々のURLよりも優れているのでしょうか？
レスポンシブウェブデザインにデメリットは存在しないのでしょうか？レスポンシブウェブデザインのデメリットとしては次のようなものが挙げられそうです。
- 表示速度が遅くなる
- スマートフォンに本当に適したサイトを作りづらい
- レスポンシブウェブデザインで作成しなければならない
●表示速度が遅くなる
レスポンシブウェブデザインは、ページの表示速度が遅くなる要因を含んでいます。たとえば、PCに対してもスマートフォンに対しても同じ画像をダウンロードさせます。PCに適した大きな画像はファイルサイズも相応に大きくなります。
スマートフォンはスクリーンサイズが小さいにもかかわらず、不相応に大きな画像をダウンロードしなければなりません。スマートフォンのCPUの性能や通信環境によっては表示速度を低下させます。
ただしこれは、画像のファイルサイズを軽量化したりサーバー側でデバイスに適した画像を提供するといった仕組みで対応できます。レスポンシブウェブデザインが必ずしも遅くなるということではありません。
●スマートフォンに本当に適したサイトを作りづらい
レスポンシブウェブデザインでは、スマートフォン向けページとPC向けページで同じHTMLを共有します。
これがかえって、本当にスマートフォンユーザーに最適化したサイトを作成する制約になると考える人がいます。
スマートフォンユーザーだけに必要なもの、スマートフォンユーザーには不要なものがあるかもしれません。
また、スマートフォン向けページを作るときにもPC向けページのことを完全に無視することが難しい場合があるかもしれません。
とはいえ、これも本当にそうなのかどうかを問われると怪しいところがあります。
レスポンシブウェブデザインにして売上が上がったECサイトの事例も数多くあります。レスポンシブウェブデザインだからスマートフォンに本当に適したサイトを作れないという主張は、どんなケースにおいても当てはまるわけではないことは確かです。
●レスポンシブウェブデザインで作成しなければならない
当然のことながら、レスポンシブウェブデザインの技術を利用してサイト（ページ）を作成していく必要があります。
レスポンシブウェブデザインは比較的新しい仕組みなので、ウェブ制作者がその技術に詳しくなければなりません。
そうはいっても、ものすごく高度で敷居が高い技術ではありません。
最新の技術に追い着いていけないウェブ制作者がいたとしたら、レスポンシブウェブデザイン以前に、そういった人にサイト制作を任せるほうが心配のような気がします。
ということで、レスポンシブウェブデザインにデメリットらしきものがないわけではありません。
しかしどうにでも対処できる問題ばかりです。対処が困難な、致命的な欠点ではありません。
レスポンシブウェブデザインを最有力候補として
動的な配信や別々のURLの構成でモバイル向けサイトを公開しているのであれば、わざわざレスポンシブウェブデザインに作り直す必要はありません。
Googleはレスポンシブウェブデザインを推奨していますが、それは他の2つのよりも評価を高くして検索結果で優遇するということでは決してありません。正しく設定されていれば、3つの構成に優劣はありません。平等に扱います。
しかし新規にサイトをオープンするとか、これからモバイル向け対応していくといったケースでは、レスポンシブウェブデザインを最有力候補として検討してもいいのではないでしょうか。
ここまで話したようにメリットが数多くあります。
Googleは、サイト管理者のたに「ウェブマスター向けモバイルガイド」というモバイル対応のためのマニュアルを公開しています。
どの構成を選ぶにせよ、絶対に読まなければなりません。
最後にこれを紹介してこのコラムを終わりにします。
あなたのサイトが上手にモバイル対応することを期待しています。
Google ウェブマスター向けモバイルガイド https://developers.google.com/webmasters/mobile-sites/
（短縮URL http://goo.gl/CQ7O6R）
JECCICA客員講師 鈴木 謙一
2005年フリーランスのネットコンサルタントとして独立。20011年セルフデザイン・ホールディングスの取締役に就任。「Web担当者Forum」で週刊コラム執筆を担当。