いいとこすぎて移住しちゃいました / LAMP壱岐
いいとこすぎて移住しちゃいました / LAMP壱岐
2012.07.05

必読!5分でわかるレスポンシブWebデザインまとめ

野田

二度目まして。デザイナーの野田です。
レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。
今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。

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

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。

現在はPCやスマートフォンなど、デバイス毎に各HTMLファイルを複数用意し最適化することが、一般的な制作方法となっています。
「レスポンシブWebデザイン」では、1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整します。

つまり、こういうことになります。

1つのHTMLファイルで、各デバイスに異なったレイアウトを表示

レスポンシブWebデザインのメリットとデメリット

「レスポンシブWebデザイン」についてのメリットとデメリットをまとめたのでご覧ください。

【メリット】

■1つのHTMLファイルで複数デバイスに対応できるので、制作後はメンテナンス等が容易になり、作業工数の軽減になります。

■全てのデバイスの情報が同一の為、各デバイスによる設計がバラバラにならず、情報整理がおこないやすくなります。さらに、情報整理がおこないやすくなることによって、本当に必要なコンテンツが見えてきます。
(お客様の視点からみても、1つのワイヤーの中から情報を選抜するということで、気持ちよく情報整理がおこなえます)

■PCとスマートフォンなど異なったデザインとして考えず、決められたデザインやUIで制作がおこなえます。

■各デバイスのURL統一化

【デメリット】

■大きく分けて、モバイルとPCは利用シーンが異なるため、絶対的なものだとは言えません。

■制作後の作業工数の軽減にはなるが、多くのデバイスに対応させるため、設計やデザインをおこなう際にはとても慎重におこなう必要があります。

■1つのHTMLファイルを使用するため、PCとモバイルを異なるレイアウトにした場合、見えない部分に必要のない要素が読み込まれてしまい、ページの読み込みが重くなる可能性があります。

■デバイスごとに細かい配慮をすることが難しい。
特に新しい解像度のデバイスが登場することにより、標準規格が変更され、サイト全体の仕組みを変更しなければならない可能性があります。