GoogleがレスポンシブWebデザインを公式に推奨しているのは周知の事実です。その影響から、世間の潮流もそれに合わせてレスポンシブWebデザインが全盛を迎えています。

そこで注意したいのが、これまでPC向けとスマートフォン向けでURLを別にしてきたWebサイトのレスポンシブWebデザインへの移行です。

今回は、Googleが"ウェブマスター向け公式ブログ"で発表したその移行方法について取り上げていきます。併せて、レスポンシブWebデザイン主流となった背景などを紐解き、"なぜレスポンシブWebデザインへ移行しなくてはならないか"についてもご紹介します。

なお、本記事に関連のあるものとして、レスポンシブWebデザインのメリットとデメリットについて言及しているこちらの記事も、ぜひ参照にしてみてください。

参照：
レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット｜ferret
　　

目次

  1. スマートフォン対応｜3種類のWebサイト構築方法について
  2. PCとスマートフォンのURLが異なることで発生する“不都合”とは
  3. 別URL構成からレスポンシブWebデザインへ｜4つのステップ
  4. まとめ - Webデザインの主流はレスポンシブWebデザイン -

　　

スマートフォン対応｜3種類のWebサイト構築方法について

8789_002.jpg

Webサイトのデザインにおいて、スマートフォン対応の構築方法としては、大きく下記の3種があります。まずは簡単におさらいしておきましょう。下のスマートフォン対応に3種類のデザイン構築方法の違いを明記した表も参照ください。

Webサイトのデザインにおけるスマートフォン対応の構築方法

1. セパレートタイプ：PCとスマホで別ファイル対応／URLも別
2. ダイナミックサービング：PCとスマホで別ファイル対応／URLは一緒
3. レスポンシブWebデザイン：PCとスマホで同一ファイル
セパレートタイプ ダイナミックサービング レスポンシブWebデザイン
モバイル専用ファイル 必要 必要 必要なし
モバイル専用URL 必要 必要なし 必要なし
　　

1.セパレートタイプ

セパレートタイプはモバイルで該当のWebサイトを呼び出す際に、専用のURLが必要なため、アノテーション設定が必要となります。

アノテーションとは、あるデータに対して関連する情報（メタデータ）を注釈として付与することと定義されていますが、今回のケースについてのアノテーションは後に詳しく説明します。
　　

2. ダイナミックサービング

次にダイナミックサービングですが、こちらはURLを共通に、ユーザーエージェント機能を使ってデバイスや画面サイズに合わせて、スマートフォンなどの専用ファイルを動的に呼び出す方法です。
　　

3. レスポンシブWebデザイン

最後にレスポンシブWebデザインですが、こちらは画面サイズによってUI構成を変化させるタイプのため、ファイルもURLもPCとスマートフォンで同一になります。
　　

この3種についてですが、一昔前はGoogleがウェブマスター向け公式ブログの中で「どの方式を採用しても問題ない」旨を発表していました。

その後、少しずつレスポンシブWebデザインを推奨する方向に転換していったのはなぜなのか。「Googleウェブマスター向け公式ブログ」の中でその理由に触れているのでまとめてみました。
　　

レスポンシブWebデザインを良しとするGoogleの見解

8789_003.jpg

ユーザーの利便性におけるレスポンシブWebデザインのメリット

・URLが1つなのでユーザーによるコンテンツの共有やリンクが簡単
このメリットの対象となるのは上記でいえば「セパレートタイプ」のみとなるでしょう。

・ページが表示されるまでの読み込み時間が短縮される
PCサイトとモバイルサイトでURLが違う場合、ユーザーの端末に応じてリダイレクトが発生するため、読み込み時間が余計にかかります。また、PCサイトとモバイルサイトでHTMLが違う場合も、動的に出し分けるために余計に処理時間がかかります。

Googleがページの表示速度を検索ランキングの指標に使用すると発表したこともあり、読み込み時間が少しでも早くなることは、Webディレクターからすれば変更するに価するメリットと言えるでしょう。

運用コストの節約におけるレスポンシブWebデザインのメリット

・該当Webページをリンク、シェアしやすくなる
別ファイルで運用する場合、PCとスマホそれぞれの更新作業は必要ですが、レスポンシブWebデザインならファイルが一緒なのでこれを軽減できるという内容です。ただし、PCとモバイルページを同時に生成できるCMSの導入などにより、多少は改善できるようになります。

・リダイレクトのミスを軽減できる
モバイルユーザーがPCサイトにアクセスした場合は、モバイルサイト内の該当のページにリダイレクトする必要があります。もちろん、その逆もあります。これらの工程がなくなる分、運用コストが削減できるという内容です。
　　

Google側の都合

・PC用とスマートフォン用で別のWebサイトが存在するか否かを知る必要がなくなる
同じWebページでデバイスごとに複数のパターンがあると、Googlebotがページのインデックスがやりにくい、という意味です。

・Webサイトをクロールするために必要なリソースを節約できる
同じコンテンツなのにデバイス数に応じてページが複数あると、Googlebotがクロールする手間がそれだけ増える、ということです。
　　
以上のような理由がレスポンシブWebデザインを良しとするGoogleの見解です。

数は多いものの、それって本当にメリット？と訝しむ方もいるかもしれません。そこで次にレスポンシブWebデザインを実装しなかった場合にどのような問題が発生するのか、具体的な内容に触れてみたいと思います。
　　

PCとスマートフォンのURLが異なることで発生する“不都合”とは

8789_004.jpg

続いて、レスポンシブWebデザインを実装しなかった場合の問題点について、特にPCとスマートフォンのURLが異なる場合について考察していきます。

例えば、下記のようにPCとスマートフォンの別URLを設置したとします。

PC　www.ferret-plus.001.com/
SP　www.ferret-plus.001.com/sp

ユーザーが該当Webサイトをスマートフォンでアクセスした場合、ユーザーエージェント機能により「www.ferret-plus.001.com/sp」が表示されます。しかし、万が一クローラーへの対策を実施していない場合、Googlebotは「www.ferret-plus.001.com/」と「www.ferret-plus.001.com/sp」をそれぞれインデックスしてしまうわけです。

それぞれインデックスしてしまうことにどんな問題があるのか。これは“重複コンテンツ”とジャッチされてしまう恐れがあるということです。

Webサイトの中身、さらにはtitleタグやmeta descriptionまで重複しているのに、URLが別なのは不当なコピーコンテンツであると誤解されかねないという話で、この解決策として有効なのが、前述したアノテーションタグになります。

具体的に言えば、PCの対象ページの< head >内にスマートフォンのURLに向けて以下のタグを入れます。

（PC）www.ferret-plus.001.com/　（SP）www.ferret-plus.001.com/sp

————————————————————————————————————————————————————————————————————————————————
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https:// www.ferret-plus.001.com/sp” >
————————————————————————————————————————————————————————————————————————————————

上記は、PCのURLをクロールしたGooglebotに対して、スマートフォンのURLを伝えているという内容となります。一方でスマートフォン側には、PCのURLはこちらなので、こちらをインデックスしてほしい、という内容の下記の設定が必要です。

————————————————————————————————————————————————————————————————————————————————
<link rel=”canonical” href=”https:// www.ferret-plus.001.com/” >
————————————————————————————————————————————————————————————————————————————————

これだけなら簡単とお考えの方もいるかもしれませんが、リダイレクト設定はページ単位で必要なのが肝です。当然、大規模なWebサイトで変更する際は大掛かりな運用コストが発生します。

仮に、PCでは1ページ構成になっているが、スマートフォンだと2ページ構成となっている場合についてです。このケースでは、スマートフォンの1〜2ページをページネーション用の rel=”next” と rel=”prev” で紐付けて、スマートフォンの1〜2ページ目からもcanonicalで該当するデスクトップURLにリダイレクトさせます。

なお、PCにはあるけれどスマートフォンにないWebページの場合はアノテーションを設定する必要がありませんが、Googleとしては「全てのページにおいてスマートフォンでもストレスなく閲覧できる」ことを理想としているため、このようにPCにあってスマートフォンにないページ設計は推奨していません。

ここまで読んでもデザインを設計する上での柔軟性の高さから、ファイルを別に取る構築方法を選択する方もゼロではないでしょう。ただし、SEOと運用コストで考えた場合、レスポンシブWebデザインを選ぶ方がベターであることはご理解いただけたのではないでしょうか。
　　

別URL構成からレスポンシブWebデザインへ｜4つのステップ

8789_005.jpg

さて、レスポンシブWebデザインへ移行するべき理由をご理解しただいたところで、ここから本題「PCとスマートフォンで別URLのWebサイトのレスポンシブWebデザインへの移行手順」に入っていきます。

詳しい手順は、以下の4ステップとなります。

1. レスポンシブWebデザインサイトを先に用意しておく

2. 旧・モバイル用URLから新レスポンシブWebデザイン用URLへの301リダイレクトを設定
※すべてのページに対してリダイレクト設定が必要

3. 条件付きリダイレクトやVary HTTP ヘッダーなど、モバイル固有の設定を削除する

4. レスポンシブWebデザイン用のURL については、rel=canonical を設定して、正規URLとしてそれ自体を指すようにする

ちなみに、rel=“canonical”とはページ内容が類似もしくは重複しているURLが複数存在する場合に、Googlebotなどの検索エンジンからのページ評価が分散されないように、正規のURLがどれなのかを検索エンジンに示すために用いる記述をいいます。

Webサイトの規模によっては2の部分にかなりの工数を割くことになりますが、技術的な難易度はそう高くありません。そして、一度レスポンシブWebデザインに移行してしまえば、以降はアノテーションなどの煩雑な作業から解放されることを考えれば、許容範囲と言えるのではないでしょうか。

本内容は、Googleのウェブマスター向け公式ブログにも公開されていますので、ぜひ参考にしてみてください。

参考：
モバイル専用サイトからレスポンシブ サイトに移行する方法｜Googleウェブマスター向け公式ブログ
　　

まとめ - Webデザインの主流はレスポンシブWebデザイン -

クリエイターによって属人的なジャッジがなされていたスマートフォン対応におけるWebサイトの3種の構築方法。本記事を読んでいただいた方には、少なくともSEOと中長期の運用コストの観点で考えた場合、レスポンシブWebデザインが有効であるという一応の結論は提案できたのではないでしょうか。

もちろんこの記事を読んだ上で、それでも「PCとスマートフォンでそれぞれのデザインを変えたい」というクリエイターの方もいるでしょう。

しかし、現在ではレスポンシブWebデザインを活用した上でスマートフォンデザインを追求するというデザイナーが増えているのは事実です。

メインストリームに対して各種の先進技術が生まれてくるという技術確信の歴史を考えれば、今のうちからレスポンシブWebデザインを主戦場としたWebデザインを手がけていく方がベターといえるのではないでしょうか。