現在、Googleが発表した「モバイルフレンドリー」によって、スマートフォンに対応していないホームページをモバイルフレンドリーに対応するためにリニューアルするサイトも段々増えてきている印象です。
最近、私の知人から「モバイルフレンドリーに対応したいからホームページをリニューアルしたい」と相談されました。
その時「レスポンシブWebデザインってよく聞くけど、レスポンシブWebデザインでホームページを作ったらなにがどう違うの？」と聞かれ、私自身レスポンシブWebデザインについて詳しく説明したつもりですが、知人はWeb関係のことには疎いのであまり理解してくれませんでした。
なので今回は、知人を含め「Web関係にあまり詳しくない方でもなるだけ分かりやすいように」レスポンシブwebデザインについて、私なりにまとめてみました。
世の中のホームページ制作を依頼する方が「ホームページ作る際の基本知識」として参考になればと思います。
レスポンシブWebデザインとは
「レスポンシブwebデザイン」とは、パソコンやタブレット、スマートフォンなどの異なる画面サイズに応じて、ひとつのHTMLファイルでホームページのレイアウト・デザインを、各デバイスに最適化された形で表示することができるwebページの制作手法のことを指します。
例:レスポンシブWebデザインならこんなページの表示ができる
上記の画像は、レスポンシブwebデザインで構築されたサイトで、タブレットで縦に見た場合と、横に見た場合とでは表示される内容(コンテンツ)違いがあります。
このように、「異なる画面サイズに合わせて」表示する内容を調整できるので、ホームページに訪れたユーザーの環境に合わせて「見やすい、使いやすい」コンテンツの表示が可能になります。
レスポンシブWebデザインの「メリット」
一つのHTMLファイルだけで対応できるから管理しやすい
レスポンシブwebデザインは一つのHTML(ソース)で管理することができるので、例えば画像の差し替えやテキストの変更など、一つのHTMLに変更を加えればどのデバイスでも同じ変更内容が反映されます。
PC用とモバイル用のURLを一つにまとめられる
PC用のURLやモバイル用の専用URLが無いので、一つのURLにそれぞれ違う端末でサイトにアクセスしても、端末毎に最適化された(見やすい)ページを表示できます。
Googleが効率的にコンテンツを発見できる
Googleのウェブマスター公式ブログによると、
ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。
と書かれており、ようするに「一つのURLのみクロールするからコンテンツを発見する効率がよくなる」と言うことになります。
スマートフォンに対応(モバイルフレンドリー)
Googleが推奨するスマートフォンに最適化する方法にレスポンシブwebデザインが含まれています。
リダイレクト設定の必要がない
前述にもある通り、一つのURLでPC、スマートフォン、タブレットなどの端末に対応できるので、PCサイトのURLからアクセスしてきたモバイルユーザーを、スマートフォン用のURLにリダイレクト(転送)設定を行う必要がありません。
レスポンシブWebデザインの「デメリット」
古いブラウザには対応していない
厳密に言うと、IE9以下のブラウザではレスポンシブwebデザインに対応するために必要なCSSの一部の機能が使えません。
IE9以下のブラウザにまったく対応できない訳ではありませんが、専用のファイルやプログラムが必要になるので、制作する際のコストは増えるかもしれません。
IEからのサイトへのアクセス数を考慮した上で、どこまで対応するかの線引は重要になります。
ページ読み込み速度の低下・サーバー負荷の可能性がある
レスポンシブwebデザインの仕様上、PCサイトで表示している画像のサイズを、モバイル端末の画面に合わせて縮小した形で使用します。
また、HTMLファイルをPCとモバイルで使い分けるため、モバイル表示では使用しないHTMLソースも一緒に読み込んでしまうので、ページ速度の低下に影響する場合があります。
解決方法参考サイト
新しい解像度のデバイスが出る度にCSSの調整が必要
新しい解像度のデバイスが発売され、そのデバイスでのアクセスするユーザーが増えた場合、そのデバイスの解像度に合わせてコンテンツの配置やデザインを調整する必要があるかもしれません。
また、レスポンシブwebデザインを構成する規格が変更された場合、サイト全体のレイアウトや仕組みを変更しなければいけない可能性もあります。
逆に、レスポンシブwebデザインなら新しいデバイス専用のページは作らずレイアウトのみ変更すれば対応できるとも言えます。
サイト設計・構築に時間とコストがかかる場合もある
レスポンシブwebデザインでもっとも悩ましい問題の一つがサイト設計にかかる時間です。
一つのHTMLを各デバイスに合わせて最適化を行わないといけないので、その端末に合わせた設計を考える必要があります。
レスポンシブWebデザインはSEOに強い？
SEOに強いと言う表現より、SEOに有効と言ったほうがいいかもしれません。
レスポンシブwebデザインはURLが一つなので、Googleからのサイト評価がPCサイトとモバイルサイトで分散することがありません。
Googleがレスポンシブwebデザインを推奨している事もあり、「レスポンシブwebデザインで構築されたサイトは、Googleが効率よく評価しやすい」という認識がいいでしょう。
結局の所ホームページはレスポンシブwebデザインの方がいいの？
一言で片付けるには難しい問題です。
メリット・デメリットがあるように、レスポンシブwebデザインも万能ではありません。
もし既存サイトをレスポンシブwebデザインで作り直す場合、時間やコストも考慮した上でレスポンシブwebデザインにする価値をしっかりと見極めてから決断しましょう。
特に「各デバイスで表示した時に、そのデバイスで利用するコンテンツの優先度、デバイスによる異なる使い方」をしっかりと考えましょう。
レスポンスwebデザインに向いているサイト
情報発信サイト
PC以外で利用頻度が多い可能性があるサイトには向いていると思います。
特にニュースサイトはSNSで記事を拡散させることが目的になっているので、URLの統一化できていいと思います。
また、ニュースサイトを見る時にブラウザを小さいウインドウで表示した際に、レスポンシブwebデザインならブラウザのサイズに合わせてコンテンツが見やすい形に切り替わるので、ユーザーはどんなブラウザのサイズでも快適に情報を見ることがでます。
レスポンスwebデザインに不向きなサイト
古いブラウザでのアクセスユーザーが多いサイト
前述にあったように、IE9以下ではレスポンシブwebデザインの機能が殆ど使えません。
無理にレスポンシブwebデザインにするより、IE専用のページをそのまま使用する形がベストかもしれません。
レスポンシブデザインに対応したサイト
まとめ
いかがだったでしょうか？
ホームページを制作する際に、レスポンシブWebデザインについて少しでもお役に立てたら幸いです。
記事の内容でも触れていますが、レスポンシブWebデザインは万能ではありません。
それをよく理解した上で、サイトを「レスポンシブWebデザインにする利点」を考えていただければと思います。