RESPONSIVE DESIGN | 株式会社Silver Haze

レスポンシブWebデザインとは?

  • 前知識として、念のため。
  • PC用サイトとスマートフォン(以下スマホ)用サイトを用意する場合、↓このように、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的です。
  • この人はパソコンで閲覧しているから → パソコン用のHTMLを表示
  • この人はiPhoneで閲覧しているから → スマホ用のHTMLを表示
  • というように、複数のHTMLを割り振っています。
  • それに対しレスポンシブWebデザインは、 OSやブラウザを判断基準にしているのではなく、ブラウザの横幅サイズを判断基準にして、CSS(スタイルシート)を切り替えている手法です。
  • メリット1 ワンソース管理!

  • 例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替え程度の小規模の更新作業であれば作業時間も減り、修正ができていなかったというミスのリスクも減ります。
  • ※レイアウト変更やコンテンツまるごと追加という中規模~大規模のメンテナンスなら話はまったく変わってきますが。
  • メリット2 SEOに有効的!

  • Googleは、サイトの構築手法の一つとしてレスポンシブWebデザインを推奨しているようで、「Google ウェブマスター向け公式ブログ: Google がお勧めするスマホに最適化されたウェブサイトの構築方法」では下記のように述べています。
  • PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、(中略)Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
  • ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。
  • メリット3 URLが統一されることでシェアがしやすく!

  • 例えば、レスポンシブWebデザインではなく、PC用ページとスマホ用ページを用意しているサイトがあったとします。
  • ユーザーXさんが、そのサイトをPCで閲覧中、TwitterでそのサイトのURL(PC用)を共有しました。
  • PCサイトを開き、特にストレスもなく閲覧ができました◎スマホでPCサイト開き、操作にストレスを感じてすぐ離脱× というようなことが起こってしまい、「PC用とかスマホ用とか分けないで…」となる可能性がありますが、レスポンシブWebデザインではブラウザの横幅サイズを判断基準にできるため、表示が自然と切り替えられ上記のようなことが起こりません。
  • メリット2で引用したGoogle公式ブログでも、PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり… と書かれています。
  • デメリット

  • 表示させていないだけで見えない部分で存在している為、スマホだと重くなる可能性がある
  • スマホやタブレットであえてPCサイトが見たい場合でも、見ることができない
  • ちゃんと設計しないと、タブレットのたて向きと横向きとで全然違うレイアウトになって、操作に混乱を招いてしまう
  • CSS3だけだとフィーチャーフォン(ガラケー)に対応できない