3分で分かる！「レスポンシブウェブデザイン」

こんにちは！ジェイです。

今回は、サイト制作の手法のひとつである、レスポンシブウェブデザインについて、
3分でご理解いただけるようお届けします。

WEBサイトを制作する際、大きくはパソコンとタブレット、そしてスマートフォン用の
レイアウト・デザインを考える必要があります。
その際に必ずといっていいほど話題に出てくるのがこのレスポンシブウェブデザインです。

レスポンシブウェブデザインとは？

パソコンやタブレット、スマートフォンといったデバイス毎で画面サイズは違いますよね。その画面サイズによって、レイアウト・デザインを変えてくれる手法が
レスポンシブウェブデザインです。

パソコンでレスポンシブウェブデザインを採用しているサイトの横幅を変えてもらうと
レイアウト・デザインが変わるので、イメージが付きやすいかと思います。

例）早稲田大学

ここから…

↓↓横幅を縮めると…

↓↓さらに縮めると…

こんな感じです。

デバイス毎にレイアウト・デザインを変える手法は以下大きく3つあります。

1.レスポンシブウェブデザイン
2.動的な配信
3.別々のURL

「1.レスポンシブウェブデザイン」はURLとHTML（※）がデバイスが異なっても同じです。かつ、レイアウト・デザインはデバイス毎に変えることがでできる、とう手法です。
一方、「2.動的な配信」「3.別々のURL」もデバイス毎にレイアウト・デザインを変えることができますが、「2.動的な配信」はHTMLが異なり、「3.別々のURL」はURLとHTMLが異なります。そのため、まずどのデバイスでアクセスされたのかを検知したのち、そのデバイス専用のHTMLを配信、WEBページを表示する、ということを行っています。

▼参考
https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=ja#select-config

※HTMLとはざっくりお伝えすると、サイトの文字や画像などの情報を記載したファイルです。サイトは大きくはこのHTMLとCSS（文字や枠、画像の大きさや色といった装飾を管理するファイル）で作成されています。（もちろん、その他色んな技術が使わることもあります。）

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

メリット

他の手法と違って、URLとHTMLが共通のため、以下のメリットがあります。

1.ユーザーがサイトをシェアしやすい。

URLがデバイスによって異なる場合、ユーザーがどのURLをシェアすればよいか、
迷いますよね。

2.サイトの更新が一度で済む

たとえば、サイト内の文字を変えたいという場合、HTMLの内容を変更する必要があります。HTMLがひとつだけのレスポンシブウェブデザインは、そのHTMLを変更するだけで、パソコンで見た時も、スマートフォンで見た時も変更が反映されています。HTMLが複数あるとHTMLの数分変更しなければいけないので手間ですよね。

デメリット

1.サイト表示に時間がかかる可能性がある

様々なデバイスに対応するため、サイトを作っているファイル内に色々な情報を
記述する必要があります。パソコン用の情報をパソコンよりも表示処理能力が低いスマートフォンで読み込むので、なかなか表示されない…といったことになる可能性があります。

2.複雑なサイトのつくりにはできないことが多い。

画像や文字をたくさん載せたい、複雑な動きをするデザインにしたい…といった要望に
レスポンシブウェブデザインは応えることができない、もしくは検討にかなりの時間と
費用がかかる場合があります。なぜなら、複数のデバイスを考慮したつくりにする必要がある
ため、パソコンでは表示できるけど、スマートフォンでは表示できない（表示が崩れる）と
いったことが往々にして発生するためです。

まとめ

レスポンシブウェブデザインにするか、はたまたデバイス毎の専用サイト（パソコン用サイト、スマートフォン用サイト）にするかはメリット、デメリットを考慮して考える必要があります。ここは専門の制作会社に相談してみてくださいね。

ちなみにGoogleはレスポンシブウェブデザインを推奨しています。
Googlgは検索エンジンでサイトを表示するうえで、そのサイトを読み込み、チェックするという作業をしています。レスポンシブウェブデザインはサイトがデバイス毎に分かれておらず、同一のため、Googleがその作業を楽にできる！だから推奨！というわけです。
だからといって検索エンジンの順位に影響がある（順位が上にあがる）ということではないのであしからず。

今回はここまで！