PCサイトをスマホ対応（最適化）する3つの方法とそれぞれの注意点

スマホの普及に伴って、サイトをスマホ向けに最適化することが当たり前になってきています。スマホ経由のアクセスの方が多いという状況も表れ始めています。

PCサイトをスマホに最適化する方法はいくつかありますが、今回は、Googleがサポートする3つの方法について、それぞれの注意点や課題と共にご紹介します。

• レスポンシブウェブデザイン
• 動的な配信（ダイナミックサービング）
• PCとスマホでURLを分ける

レスポンシブウェブデザイン

Googleが推奨する方式で、同じURLで同じHTMLを返します。画面幅に応じてコンテンツの配置が変わるやつです。
推奨されている理由として、以下の様な理由が挙げられます。

• リダイレクト等の設定が不要なので設定誤りが起こりにくい
• PCとスマホで分かれていないのでクローリングリソースを節約できる

PCのUIがスマホにとってもいいとは限らない

画面幅に応じてコンテンツの配置を変更するレスポンシブデザインでは、基本的なUIパーツはPCのものとなります。
ブログやメディアサイトといった読み物が中心のサイトでは問題ないかもしれませんが、要素が多かったり、レイアウトが複雑なサイトでは、単純に画面幅に応じて配置を変えるだけでは、スマホでのユーザビリティを損ないかねません。

開発工数

CSS3 Media Queriesを利用して実現されるレスポンシブウェブデザインでは、適切な表示を実現するための設計工程や実装工程の工数が、通常のサイト制作より膨らみます。
BootstrapやFoundationといったフレームワークを利用したり、レスポンシブに対応しているWordpressのテーマを利用したりと、制作工数を減らす手段もあります。

古いブラウザに対応していない

CSS3 Media Queriesは、IE8以下では認識されません。（Respond.jsで対応することは可能）
また、フロントエンドフレームワークは、古いブラウザのサポートをしていないものが多いです。サイトにアクセスしているブラウザのシェアを確認した上での導入検討が必要です。

動的な配信（ダイナミックサービング）

同じURLで異なるHTMLを返す方式です。
私はこの方式が一番好きで、ランサーズでもこちらを採用しています。
同じURLなので、リダイレクトやソーシャルのシェア等においてユーザビリティを損なうことがないですし、複雑な設定も不要です。

Vary HTTP ヘッダを設定する

インターネット上のコンテンツは、レスポンス速度の向上やトラフィック軽減のために、ISPやCDNなどによってキャッシングされています。同じURLで別のコンテンツ（HTML)を返却する動的配信の場合、キャッシュされているPC用のコンテンツをスマホに返却してしまう可能性があります。（逆も然り）
これを防ぐために、「このサイトはUAに応じて別のコンテンツを返却していますよ」とリクエスト元に伝えるのが、Vary HTTP ヘッダです。

PCとスマホでURLを分ける

設定が複雑

URLを分けることによって、同一コンテンツが複数URLで存在することになります。それによるSEO的なデメリットを解消するために、PCサイトとスマホサイトの関連をアノテーションで記述するのですが、こちらの設定が少々複雑です。Googleは、設定誤りのあるサイトのスマホでの検索順位を下げる、と発表しているので、慎重な実装が求められます。
詳しい設定方法は以下をご参照下さい。
スマホサイトのURLをPCサイトと分ける場合に気をつけるべき３つの設定 - No Web Service No Life

外部リンクの分散

ソーシャル上でシェアされた場合、閲覧している端末によって、シェアされるURLが変わり、PCでスマホ用URLを踏んでリダイレクトされるといった細かいユーザビリティの低下が発生します。

まとめ

3つの方法にそれぞれメリット・デメリットがありますが、サイト構造や運用体制に応じて、最適化方法を選び、間違いのない設定をすることが重要です。

何より一番重視すべきは、ユーザです。Googleが推奨しているから、SEO的によいからといった理由で、著しくユーザビリティを損なう実装をすることは避けるべきです。

現時点では、PCでしっかりとSEO対策を行い、スマホサイト側では適切な設定を実施していれば大きな影響はないかと思いますが、今後は、スマホ専用の検索アルゴリズムが現れ、スマホ専用のSEO対策が求められるようになるかもしれません。