Arrow
Arrow
ArrowArrow
Slider

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

一昔前まではWebサイトを閲覧するデバイスと言えばPCのみでしたが、現在ではそのPCに加え、タブレット、スマートフォンといった様々なディスプレイ・サイズのデバイスからWebサイトを閲覧するようになりました。このWebサイトを閲覧するデバイスの多様化により、特定のデバイスのディスプレイ・サイズに合わせてレイアウトを行った場合、他のディスプレイ・サイズのデバイスに対応しきれない問題が発生するようになりました。Web制作の現場では、当初対象とするデバイス毎にHTMLファイルを用意しながら対応しようと試みましたが、Webサイトの管理・メンテナンスが極めて困難なため、よりシンプルなシステムの提案が求められるようになりました。そうして生まれたのが、レスポンシブ・デザインです。現在ではデバイス毎にHTMLファイルを用意するのではなく、1つのHTMLファイルを使い、ブラウザの幅に合わせてレイアウトだけを調整するレスポンシブ・デザインというアプローチが一般的となってきています。その最大の特徴は、デバイスを問わず1つのHTMLファイルだけで複数デバイス対応が可能なため管理が極めてシンプルなことです。また、Googleがこのレスポンシブ・デザインを推奨している通り、各デバイス対応ページを同一URLで行えるため、SEOの視点からは大変有利であるといったメリットがあります。ただし、レスポンシブ・デザインでは何pxのディスプレイ・サイズを境(ブレイク・ポイント)にレイアウトを切り替えるのかを決定し、Webサイトの装飾的要素を指定するスタイルシートにレイアウト別のコードを既述する必要があるため、Web制作者にとってはサイト構築までの作業工程が大幅に増加し、これまで以上に綿密なサイト設計を行う必要があります。

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

○メリット

・1つのHTMLファイルで各デバイスの一括管理ができるので、管理が極めてシンプル
・各デバイス対応ページを同一URLで行えるため、SEOの視点から有利(Google推奨)
・対応デバイスが増えても、スタイルシートの編集だけで済むため対応が簡単

○デメリット

・スタイルシートの記述をブレイク・ポイント毎に切り分けるため綿密なサイト設計のノウハウを要し、作業工程が増加
・同一のHTMLファイルで多様なデバイスに対応させるため、特定デバイスにとって不要なコードを読み込む可能性有り
・デバイス毎に異なるコンテンツを表示するには不向き
オリジナル記事のURL : http://studiolazuli.com/blog/web/responsive-design.html