レスポンシブWEBデザインについて

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

PC用サイトとスマホ用サイトを用意する場合、↓図のように、ユーザーが閲覧しているOSやブラウザを判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的である。

f:id:sakamotosakamo:20161113164423p:plain

この人はパソコンで閲覧しているから⇒パソコン用のHTMLを表示
この人はiPhoneで閲覧しているから⇒スマホ用のHTMLを表示
というように複数のHTMLを割り振っています。

▼それに対してレスポンシブWEBデザインは

OSやブラウザを判断基準にしているのではなく、↓ブラウザの横幅サイズを判断基準にして、CSSを切り替えている手法。

f:id:sakamotosakamo:20161113164442p:plain

この人は1200ピクセルのブラウザで見ているから⇒○○という装飾
この人は480ピクセルのブラウザで見ているから⇒○○という装飾
といった感じで、1つのHTMLを使用します。

▼メリット.1　ワンソース管理

↑図の通り、1つのHTMLを管理します。
例えば、サイト完成後メンテナンスでテキスト修正や画像差し替え程度の小規模メンテナンスなら作業時間も減りますし、ミスのリンクも減る。

▼メリット.2　SEOに有効的

Googleは、サイト構築の手法の1つとして、レスポンシブWEBデザインを推奨している。

・PC用のページとモバイル用のページ単一のURLとすることができるため、Googleのアルゴリズムにとってはコンテンツを適切にインデックスできるようになる。

・ユーザーエージェントの異なるGoogleごとにページをクロールする必要がないためGoogleがより効率的にコンテンツを発見することができる。

f:id:sakamotosakamo:20161113164518p:plain

▼メリット.3　URLが統一されることでシェアがしやすく！

レスポンシブデザインではなく、PC用とモバイル用のページを用意しているサイトがあったとする。

PCで閲覧中にそのサイトを共有した場合、モバイルでその共有されたURLを閲覧した場合、捜査にストレスを感じ、離脱してしまう可能性がある。

というようなことが起こる可能性がある。
レスポンシブデザインでは、ブラウザの横幅サイズを基準に判断するため、表示が自然と切り分けられる。

▼デメリット.1　見えないだけで存在しているから重くなるかも

スマホで見た場合、PC版のスタイルシートも一緒に読み込んでいるため、それが影響してデータの読み込みが遅くなる可能性がある。

f:id:sakamotosakamo:20161113164539p:plain

▼その他デメリット.

・構築が複雑になる
・構築に時間がかかる
・費用が増える
・スマホやタブレットであえてPCページが見たい場合でも見ることができない
・ちゃんと設計しないと、混乱を招いてしまう
・ガラケーに対応していない

自分研究会