CSS3のMedia Queriesで実装するレスポンシブWebデザインについて考える
更新日：カテゴリ：Webデザイン
フィーチャーフォンからスマートフォンやタブレットが主流になりつつある中で、「レスポンシブWebデザイン」という言葉をよく耳にするようになりましたね。そもそもレスポンシブWebデザインってなんなの？というところから、実装した方がよいサイトはなにかなど考えてみました。
レスポンシブWebデザインとは？
レスポンシブWebデザインとは、HTMLのソースファイルをPCやスマートフォン、タブレット毎に用意するのではなく、CSS3のMedia Queriesで、ディスプレイの幅に合わせてデザインを最適化させたサイトのことです。
デバイス毎に、レイアウトの切り替えをできるのが特徴です。
レスポンシブWebデザインのメリットとデメリット
メリット
制作時間がカットできる
PC、スマートフォン、タブレットなど、複数のデバイスにあわせてHTMLファイルを用意する必要がないのでコーディング時間がカットできます。
修正が楽
一つのHTMLファイルを修正すればいいので、楽に修正できます。
デバイス毎にファイルを変えていたらこうはいきません。
デメリット
デザイン設計に時間がかかる
「iPhoneが縦のときはどうしよう、横の時は・・・」「Androidのあの端末のときは・・・」「iPadのときは・・・」「あのタブレットのときは・・・」など、とにかく設計がキモになってくるので、時間がかかります。
スマートフォンやタブレット用のサイトに比べ、重くなりやすい
基本PCのソースが基準となるため、読み込む画像はもちろんPC用です。それをスマートフォンやタブレットで表示させるのだから、必然的に重くなります。
また、スマートフォン用にサイドバーを非表示にしたとしても、レンダリング自体はされるので同じく重くなります。
リキッドデザインとの違い
似たようなものでリキッドデザインがあります。
リキッドデザインとは、ブラウザの横幅を変更した時にコンテンツの表示サイズも変更されるデザインのことで、様々なPCブラウザの横幅に対応するために考えられたデザインです。あくまでもPCブラウザで、スマートフォン、タブレットなどのデバイスは考慮していません。
対して、レスポンシブWebデザインは、スマートフォン、タブレットにも最適化されるようにレイアウトまで変更が可能（サイドバーを非表示にしたり等）なので、よりユーザビリティを考えた設計と言えるでしょう。
つまり、まとめるとこう。
リキッドデザイン
ディスプレイサイズに応じて、デザインのサイズも可変する。
レイアウトは変わらない。
レスポンシブWebデザイン
ディスプレイサイズに応じて、デザインのサイズも可変する。
レイアウトも可変する。
レスポンシブWebデザインが実装されている参考サイト
まとめ
いろいろとレスポンシブWebデザインについてまとめてみましたが、気軽に導入できるものではないなと思ってます。
個人的には以下のようなサイトにはあまりオススメできないかと。
- 画像や写真がふんだんに使われているサイト
- 階層が深く、中規模〜大規模なサイト
- レスポンスの速さが求められるサイト
逆に、ブログやニュースサイトなどの、基本テキストベースで画像をあまり使わないサイトや、階層の浅い構成のサイトなどには導入するメリットは大きいように感じます。
デザイナーの自己満足にならないよう、サイトの特徴にあわせて導入しましょう。
