レスポンシブレイアウト・リキッドレイアウト・フレキシブルレイアウト・可変グリッドレイアウト

Pocket

元ネタはこちらから>>
必読!5分でわかる流行のレスポンシブ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
http://www.starbucks.com/

Starbucks

■Baby-G
http://baby-g.jp/

Baby-G

■Oliver Russell
http://oliverrussell.com/

Oliver Russell

■Food Sense
http://foodsense.is/

Food Sense

 

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください