レスポンシブデザインによるスマホ対応のメリット・デメリット

レスポンシブデザインによるスマホ対応のメリット・デメリット

ここ数年、スマートフォンの利用者は増え続けています。

smartphone

2013年にGoogleが公開した資料によれば日本でのスマートフォン普及率は25%。

また、その半数ほどが「スマートフォンから商品を購入した経験がある」と回答しています。

アクセス解析を使ってショップの訪問ユーザーが利用しているデバイスを見ていると、スマートフォン対応の重要性をひしひしと感じる……という方も多いのではないでしょうか?

今回はそんなスマートフォン対応時における、SEOの注意点についてまとめました。

スマートフォン対応サイトとPC専用サイトでは、構築方法だけでなくSEOのポイントも少し違います。


Googleが推奨するスマートフォン対応方法

Googleがサポートするスマートフォン対応の手段は3つありますが、推奨されているのは複数のURL・HTMLを作らず、訪問ユーザーのデバイスに応じてページの見た目(CSS)のみを変更する方法=レスポンシブデザインの導入です。

css

HTMLが1つだけなので更新がしやすいこと、SNSでの拡散・外部からのリンク(情報に対する評価)などページへの評価が複数のURLに分散しないことなどがメリットです。※

※URLを統一するメリットについて詳しくは「アクセス・評価を分散させない!重複ページの優先指定」をご参照ください。


レスポンシブデザインのデメリット

訪問ユーザーの使っているデバイスによってページの見た目を変更する際、CSS3のメディアクエリという手法を使いますが、メディアクエリはIE8以前など、古いバージョンのブラウザには対応していません。

browser

また、スマートフォンからのアクセス時、PCからのアクセスの時のみに表示する情報も含め、一旦すべてのHTMLを読み込んでしまうため、情報量によってはページの表示に時間がかかってしまいます。

古いバージョンのブラウザやPCからの訪問ユーザーが多い場合は、レスポンシブデザインの採用によるスマートフォン対応は得策ではないかもしれません。

Googleもこうした問題を十分把握しているため、スマートフォン対応のSEOにおいてレスポンシブが絶対有利という訳ではありません。あくまで「推奨」です。

実際の対応方法は自サイトの情報量やメニュー、アクセス解析などを考慮して選択しましょう。


その他の注意点「再生できない動画にご注意」

スマートフォン端末によっては、ある種の動画再生に必要な環境がない可能性もあります。

cinema

スマートフォンで表示される可能性があるサイトではFlashなど、再生できる端末が限られる形式の動画の利用はやめておきましょう。

Googleは、HTML5標準タグを利用した動画の挿入を推奨しています。


※参考

Google Developers「携帯端末に最適化されたウェブサイトの構築方法」

https://developers.google.com/webmasters/smartphone-sites/?hl=ja

Can I use…「Search:media queries」

http://caniuse.com/#search=media%20queries

Our Mobile Planet

「スマートフォン普及率」

http://think.withgoogle.com/mobileplanet/ja/graph/?active=&country=jp&category=DETAILS&topic=Q00&stat=Q00_1&wave=2011&wave=2012&wave=2013&age=all&gender=all&chart_type=bar

「スマートフォンからの商品購入経験」

http://think.withgoogle.com/mobileplanet/ja/graph/?country=jp&category=MOBSHOP&topic=Q44X&stat=Q44X_1&wave=2011&wave=2012&wave=2013&age=all&gender=all&chart_type=bar

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr