【送料無料】腕時計 ウォッチ alvina pen1801 collier argent 9251000 38 gr femme oxydes de zircon dugena SBTM199 MILANOがすぐ見つかる!

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

Posted on 8月 31, 2011

レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました 。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レ […]

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

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

安い【送料無料】腕時計 ウォッチ alvina pen1801 collier argent 9251000 38 gr femme oxydes de zircon dugena SBTM199 MILANO

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

メリット

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

デメリット

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

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

Sample Site

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

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

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

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

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

メリット

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

デメリット

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

Sample Site

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

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

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

メリット

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

デメリット

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

Sample Site

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

Amazon.co.jp: DVD

【楽天市場】Shopping is Entertainment!

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

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

メリット

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

デメリット

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

Sample Site

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

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

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

メリット

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

デメリット

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

Sample Site

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

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

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

メリット

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

デメリット

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

グリッドシステム

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

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

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

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

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

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

メリット

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

デメリット

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

Sample

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

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

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

最後に

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

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

Add Comment

  1. 2011年9月2日 @ 1:42 AM

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

  2. 2011年9月3日 @ 11:58 AM

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

  3. 2011年9月3日 @ 3:17 PM
    hiro

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

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

  4. 2011年9月12日 @ 9:19 PM

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

  5. 2011年9月17日 @ 1:35 PM

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

  6. 2011年10月5日 @ 3:11 PM

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

  7. 2011年12月6日 @ 11:45 PM

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

  8. 2011年12月8日 @ 9:29 AM
    hiro

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

  9. 2012年6月17日 @ 10:43 AM

    […] » Web制作者は知っておきたいwebサイトのレイアウト7選│Design Spice […]

  10. 2012年7月5日 @ 8:17 AM

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

  11. 2013年1月6日 @ 9:38 AM

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

  12. 2013年4月14日 @ 6:35 PM

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

  13. 2013年6月29日 @ 12:33 AM

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

  14. 2014年5月27日 @ 12:03 AM

    […] Design Spice Web制作者は知っておきたいwebサイトのレイアウト7選 http://design-spice.com/2011/08/31/web-layout7/ […]

  15. 2015年7月1日 @ 12:03 PM

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

  16. 2015年12月30日 @ 6:41 PM

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

{yahoojp} {design-spice.com} nice-myp10-gui-zd-4139