Web制作者は知っておきたいwebサイトのレイアウト7選

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。

  1. レスポンシブwebデザイン
  2. エラスティックレイアウト
  3. リキッドレイアウト
  4. フレキシブルレイアウト
  5. 固定幅レイアウト
  6. グリッドレイアウト
  7. 可変グリッドレイアウト

レスポンシブwebデザイン(Responsive Web Design)

PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、
ディスプレイの幅に合わせてデザインを最適化する方法。
CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。

responsive web design

メリット

一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。
また今後デバイスの種類が増えてもそれに対応できます。
それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。

デメリット

Media Queriesの知識だけでなく、レイアウトや画像を柔軟に対応できる様にしたり、
場合によってはコンテンツの表示・非表示を選択したり綿密な設計が必要になります。

作り方は下記のページが参考になります。
ASCII.jp:スマホ対応の新潮流「レスポンシブWebデザイン」とは?

Sample Site

Media Queries
Media Queriesを使ったサイトを集めたアーカイブサイトです。

NaomiAtkinson

30 Creative Examples of Responsive Web Design | Inspiration
30のレスポンシブwebデザインのサイトが紹介されてます。

Inspiration

The best responsive web design examples and resources | Mayfield Digital Blog
サンプルサイトだけでなくレスポンシブwebデザインに関する記事のリンクも紹介されてます。

mayfield

エラスティックレイアウト(Erastic Layout)

要素の単位をemで指定します。emは1文字分の幅なので文字の大きさを変えた時に
それに伴いレイアウト幅も変更されます。

エラスティックレイアウト

メリット

文字の拡大縮小に伴いレイアウト幅も同様の比率で変化するので、
同じレイアウトを常に提供する事ができます。

デメリット

emという使い慣れない単位を使うので、設計は難しいです。
また、外部のスクリプトなどは一般的にpxが使われてるので、
それらを使用する時は変換するかそのまま使うか考えなければなりません。

Sample Site

Elastic layouts — Tyssen Design
中断のリストからサンプルサイトに飛びます。
色々なサイトを巡ってみて感じたのですが、エラスティックレイアウトは減少の傾向にある様です。

Tyssen Design

リキッドレイアウト(Liquid Layout)

要素の単位を%で指定します。ブラウザサイズによって相対的・可変的に幅が変わります。
ブラウザサイズに合わせた情報量を提供する事ができます。

リキッドレイアウト

メリット

ブラウザサイズが大きいユーザーにはより多くの情報を伝える事ができます。
逆にブラウザサイズが小さいユーザーには横スクロールバーを出す事無く情報を伝えることができます。

デメリット

無制限に可変可能にしてしまうとリーダビリティの低下に繋がります。
上限や下限も合わせて指定する事が望まれます。(フレキシブルレイアウト参照)

Sample Site

ECサイトによく見られる気がします。
また、最近では殆どがフレキシブルレイアウトになってるケースが多いです。

Amazon.co.jp: DVD

amazon

【楽天市場】Shopping is Entertainment!

楽天

フレキシブルレイアウト(Flexible Layout)

ベースはリキッドレイアウトと同じで要素の単位を%で指定しますが、最小幅と最大幅も指定します。
リキッドレイアウトのデメリットを改善したレイアウトです。

フレキシブルレイアウト

メリット

リキッドレイアウトと同様に、ブラウザサイズが大きいユーザーにはより多くの情報を、
ブラウザサイズが小さい(最小値を下回らない)ユーザーには横スクロールバーを出す事無く適切に情報を伝えることができます。
また最大値と最小幅を指定してるため可読性やレイアウトの崩れをコントロールできます。

デメリット

IE6などのmin-width、max-widthに対応してないブラウザにはスクリプトなどで対応する必要があります。

Sample Site

35 Awesome Fluid and Elastic Layout Examples, Templates and Tutorials | Design Shack
フレキシブルレイアウトのサイトとテンプレートが紹介されてます。

Design Shack

固定幅レイアウト(Fixed Layout)

要素の単位をpxで指定します。レイアウト幅が不変の固定されたレイアウトです。

固定幅レイアウト

メリット

幅が不変なので、どのブラウザサイズでも制作側の意図した通りのレイアウトで表示されます。

デメリット

メリットの全く逆で幅が不変のため小さいブラウザサイズで見ると横スクロールバーが出たり、
あまりに大きいブラウザサイズで見ると大きな空白が生じます。

Sample Site

固定幅レイアウトは一般的によく見られるのでサンプルは割愛します。

グリッドレイアウト(Grid Layout)

架空の縦横線を下地とし、そこに出来たブロックごとに文字や画像などの要素を配置するレイアウトです。
整った安定感のあるレイアウトになります。
またグリッドを使用して設計されたレイアウトの単位を変える事で、
エラスティック、リキッド、フレキシブル、固定幅レイアウトのいずれかになります。
グリッドレイアウトシステムと言ったりもします。
追記:正確にはレイアウトの一種と言うよりはレイアウトの原則となります

グリッドレイアウト

メリット

整然とした配置ですので情報を伝えやすいです。
またグリッドをベースに組み立てていけば良いので設計が非常にしやすいです。

デメリット

多くのサイトで使われてるのでどこかで見た様なレイアウトになる可能性が高いです。

グリッドシステム

サンプルではなくグリッドシステムを紹介します。
グリッドシステムの利点については下記のサイトが参考になります。
レイアウト作りを簡単にしてくれるCSSグリッドシステム

960 Grid System
12カラムの場合は1カラム60px、両マージン10px。
16カラムの場合は1カラム40px、左右マージン10px。

960GridSystem

978 Grid System for Web Design
12カラムで1カラム54px、両マージン15px、両サイドマージン0。
その他に1218Grid System、748Grid System、300Grid Systemもあります。
Demoでウインドウサイズを変更するとそれぞれ見れます。

978GridSystem

The 1140px CSS Grid System · Fluid down to mobile
12カラムの可変グリッドシステムです。
固定幅の場合は1カラム55px、左右マージン20px。

1140GridSystem

可変グリッドレイアウト(Fluid Grid Layout)

グリッドレイアウトとリキッドレイアウトを合わせたレイアウトです。
グリッドベースのpxを%に変えることでグリッドの仕組を可変レイアウトに利用できます。
また最近ではウィンドウサイズに合わせてグリッドベースのコンテンツが再配置されるレイアウトもここに含まれる様です。

可変グリッドレイアウト

メリット

ブラウザサイズに合わせて整った要素が再配置されるので、
どのユーザーにも正確に情報を伝えやすいです。
画面遷移無しで再配置されるので他サイトとは違うユーザー体験ができます。

デメリット

まずグリッドデザインで設計しないとならないので設計がワンステップ多いです。
また再配置されるレイアウトの方はスクリプトを使用するのでそれを使うための知識が必要です。

Sample

Fluid 960 Grid System | 16-column Grid
16カラムの可変グリッドシステムです。

960FluidGridSystem

Web Design Trend Hunting – Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial | Inspired Magazine
ウインドウの幅に応じてコンテンツが再配置される可変グリッドシステムのサイトが紹介されてます。

inspired magazine

Liquid Magazine – Unique Fluid Grid Layout Preview – ThemeForest
可変グリッドシステムのwordpressテーマです。

LiquidMagazine

最後に

実際には一つのレイアウト手法だけではなく、複数のレイアウトを組み合わせてるサイトが多いです。

用語は知らなくてもどの様に考えて設計するかを理解してれば良いのですが、
用語も覚えておくと打ち合わせや同業の方と話しをする時何かと便利です。

B!

Comment

コメント(4)

2011年9月3日@ 11:58 AM

菊池崇

すばらしい、まとめありがとうございます。少し気になった点を、可変グリッドレイアウト(Fluid Glid Layout)の見出しですが、「Glid」ではなく「Grid」ですね。それから「Grid Layout」はレイアウトの1種ではなくてレイアウトの際の原則になります。エラスティックレイアウトでも何でも「Grid Layout」を利用します。

2011年9月3日@ 3:17 PM

hiro

>菊池さん
ご指摘ありがとうございます!修正しました。
確かにグリッドレイアウト単体では存在せず、そこからいずれかのレイアウトに変わるものですからね。

ちなみにascii.jpなどに書かれた菊池さんの記事よく読ませてもらってます。
コメント頂けて嬉しいです。

2011年12月6日@ 11:45 PM

クロパンダ

非常に分かりやすくまとめてあってすごくためになりました
ただ、「色々なサイトを巡ってみて感じたのですが、エラスティックレイアウトは現象の傾向にある様です。」の現象は減少ではないのでしょうか?

2011年12月8日@ 9:29 AM

hiro

>クロパンダさん
そうですね、「減少」の間違いです…
修正しました。
ご指摘ありがとうございました!

コメントする

Trackback(12)

webサイトのレイアウト7選(Design spice) « ウェブデザイン 集客研究所

2011年9月2日@ 1:42 AM
[...] Web制作者は知っておきたいwebサイトのレイアウト7選(Design spice) Share this:TwitterFacebookLike this:Like一番乗りで「Like」しませんか。 Webレイアウト ← フォトショップで簡単に画像の切 [...]

スマートフォン向け CSS Media Queries 導入テスト中 | Nutspress

2011年9月12日@ 9:19 PM
[...] Firxed、Liquid、Responsiveの長所と短所を知っておくとわりとデザインに入りやすいです。 6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす Web制作者は知っておきたいwebサイトのレイアウト7選 [...]

2011-9-12~2011-9-16のお気に入り* « WebPocket

2011年9月17日@ 1:35 PM
[...] Web制作者は知っておきたいwebサイトのレイアウト7選 [...]
MORE

レスポンシブwebデザイン(Responsive Web Design)メモめも〜 | いあ、ただなんとなく

2011年10月5日@ 3:11 PM
[...] Web制作者は知っておきたいwebサイトのレイアウト7選 PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方 [...]

[Å] Dreamweaver CS6新機能「可変グリッドレイアウト」制作に役立つサイト/チュートリアルまとめ | アカメ女子のWebメモ

2012年6月17日@ 10:43 AM
[...] » Web制作者は知っておきたいwebサイトのレイアウト7選│Design Spice [...]

「レスポンシヴデザイン」と「モバイルファースト」って?モバイル端末への最適化手法について|ソシャマノートブログ | ソシャマノートブログ 

2012年7月5日@ 8:17 AM
[...] ※開発に関して詳しいことは下記記事などをご覧ください。 レスポンシブwebデザインで制作する時のポイント Web制作者は知っておきたいwebサイトのレイアウト7選 [...]

SEOテキストサンプル | 授業進行状況ぶろぐW

2013年1月6日@ 9:38 AM
[...] Web制作者は知っておきたいwebサイトのレイアウト7選 [...]

気になったWeb制作エントリー 4/1~4/5|メモ|YOU ZOOM!

2013年4月14日@ 6:35 PM
[...] Web制作者は知っておきたいwebサイトのレイアウト7選 [...]

リキッドデザイン・レスポンシブ・メディアクエリ 違いわかりますか? | へっぽこ開発室

2013年6月29日@ 12:33 AM
[...] Web制作者は知っておきたいwebサイトのレイアウト7選 [...]

グリッドレイアウトのリンク集 | 蓮華のブログ

2014年5月27日@ 12:03 AM
[...] Design Spice Web制作者は知っておきたいwebサイトのレイアウト7選 https://design-spice.com/2011/08/31/web-layout7/ [...]

【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選

2015年7月1日@ 12:03 PM
[…] Web制作者は知っておきたいwebサイトのレイアウト7選 […]

webデザイン学習者必見!絶対に押さえておきたいwebデザイン超良記事・良サイト10選

2015年12月30日@ 6:41 PM
[…] ③ Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice WEBサイト制作でよくお世話になるレイアウトをまとめて解説してくれている記事です。 これは押さえておいて損はあ […]