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

野田


必読!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とモバイルを異なるレイアウトにした場合、見えない部分に必要のない要素が読み込まれてしまい、ページの読み込みが重くなる可能性があります。

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

レスポンシブWebデザインで気をつけなければならないこと

さぁ!「レスポンシブWebデザイン」でこれからは制作しよう!
こんなときに、必ず気をつけなければならないことがあります。
まず、上記にある【デメリット】の理解です。
【メリット】のみを考えて制作してしまうと、いざ制作することになったときに余計に時間がかかってしまったり、最悪な場合は制作も進まない状態になってしまいます。

また、基本的な「レスポンシブWebデザイン」の理解です。
世の中には、各デバイスの画面サイズに対応をおこなっているWebページが多く存在します。
しかし、すべてが同様のレイアウトで制作されているわけではございません。
ディレクター・デザイナー・コーダーの三者がいた場合、違いが分からずに提案・デザイン・構築をおこなってしまったら、修正や構築にとても時間がかかってしまいます。

各デバイスに対応しているレイアウトはいくつかございますので、代表的な例をご覧下さい。

レスポンシブwebデザイン

今回ご紹介させていただいている、1つのHTMLファイルを、CSS3(Media Queries)で制御し、異なる画面サイズに応じてページのレイアウト・デザインを調整されます。

レスポンシブwebデザイン 各デバイスに応じて、不要な要素は非表示にし、レイアウト変更などの最適化をおこないます。

リキッドレイアウト

画面サイズに応じて、要素が横幅100%相対的または可変的に調整されます。
「リキッドレイアウト」のメリットは、テキストや画像などだけではなく、ボックスとしての要素が、PC・タブレット・スマートフォンに関わらず、伸縮して伝えられることです。

リキッドレイアウト ※ 詳しく知る「レスポンシブWebデザイン」では、各デバイスに応じて要素を非表示にしたり、多すぎるテキスト情報などを非表示にすることができます。リキッドレイアウトでは、テキスト等は下記のように、常に画面サイズに合わせて相対または可変で表示することができます。

フレキシブルレイアウト

リキッドレイアウトととても似ており、こちらも要素が相対的または可変的に調整されます。しかし、フレキシブルレイアウトでは最小幅と最大幅も指定するので、大きな画面サイズの場合は、周りに余白が生まれます。PCで見たときだけ幅の固定をしたい場合などに使われるレイアウトです。

フレキシブルレイアウト ※ 基本はリキッドレイアウトと一緒 リキッドレイアウト同様、テキスト等は下記のように、常に画面サイズに合わせて相対または可変で表示することができます。

可変グリッドレイアウト

今回は紹介していないのですが、グリッドレイアウトのもつ、ブロックごとに文字や画像などを配置するレイアウトに加え、リキッドレイアウトによる可変レイアウトを利用したレイアウトです。
ブラウザサイズに合わせて決められたサイズのボックス要素が再配置されるので、情報サイトなどに多く使われています。
効果的に見せることはできますが、その分小さい画面サイズの場合に縦長となってしまい、見づらいと思うユーザーも少なくはありません。

可変グリッドレイアウト コンテンツ内にあるボックスが、画面サイズに合わせて再配置されます

レスポンシブWebデザイン+○○レイアウト

各デバイスに対応しているレイアウトの代表的な例をご説明しました。
それぞれのメリットやデメリットを理解し、レスポンシブWebデザインと合わせて制作することで、さらに良い魅せ方ができると思います。
「レスポンシブWebデザイン」に限らず、Webサイトの制作を考える際には、参考サイトなどを見て考えるということも多いと思いますが、どのようなレイアウトをおこなっているかなどの基本的な部分を理解し、把握することが一番大事だと感じます。

レスポンシブWebデザインで制作されているWebページ

そろそろ、レスポンシブWebデザインは分かったから、サイトが見たいと思っているころでしょう。
それでは、いくつかご紹介させていただきます。

※ ここで問題です。
今回の記事の復習ということで、下記でまとめているWebページはどのレイアウトで制作されているものかをご自分で考えてみてください。
1つのレイアウトだけではなく、複数のレイアウトを組み合わせて制作されているWebページもございます。
頭を柔らかくして考えてみてください。

画面サイズ変えるとご覧になれます。

スタジオパーク

スタジオパーク

http://www.nhk.or.jp/studiopark/index.html

Starbucks

Starbucks

http://www.starbucks.com/

Baby-G

Baby-G

http://baby-g.jp/

Oliver Russell

Oliver Russell

http://oliverrussell.com/

Food Sense

Food Sense

http://foodsense.is/

最後に

今回は、実際に制作するまでの基本的な「レスポンシブWebデザイン」に関して書かせていただきました。しかし、多くのデバイスに対応させるためには必要不可欠なことだと思いますので、「レスポンシブWebデザイン」を制作する際に少しでも皆様のお役にたてればいいかと感じます。
次回は、頑張って「レスポンシブWebデザイン」の制作方法について書ければいいなと考えています!

よろしくお願い致します!

野田
この記事を書いた人
野田

アートディレクター

2012年入社

この記事を読んだ人におすすめ