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なので、リダイレクトやソーシャルのシェア等においてユーザビリティを損なうことがないですし、複雑な設定も不要です。
PCとスマホでURLを分ける
設定が複雑
URLを分けることによって、同一コンテンツが複数URLで存在することになります。それによるSEO的なデメリットを解消するために、PCサイトとスマホサイトの関連をアノテーションで記述するのですが、こちらの設定が少々複雑です。Googleは、設定誤りのあるサイトのスマホでの検索順位を下げる、と発表しているので、慎重な実装が求められます。
詳しい設定方法は以下をご参照下さい。
スマホサイトのURLをPCサイトと分ける場合に気をつけるべき3つの設定 - No Web Service No Life