Web制作者は知っておきたいwebサイトのレイアウト7選
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。
レスポンシブwebデザイン(Responsive Web Design)
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サイトによく見られる気がします。
また、最近では殆どがフレキシブルレイアウトになってるケースが多いです。
【楽天市場】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テーマです。
最後に
実際には一つのレイアウト手法だけではなく、複数のレイアウトを組み合わせてるサイトが多いです。
用語は知らなくてもどの様に考えて設計するかを理解してれば良いのですが、
用語も覚えておくと打ち合わせや同業の方と話しをする時何かと便利です。
Comment
コメント(4)
菊池崇
hiro
クロパンダ
hiro
コメントする
Trackback(12)
webサイトのレイアウト7選(Design spice) « ウェブデザイン 集客研究所
スマートフォン向け CSS Media Queries 導入テスト中 | Nutspress
2011-9-12~2011-9-16のお気に入り* « WebPocket
レスポンシブwebデザイン(Responsive Web Design)メモめも〜 | いあ、ただなんとなく
[Å] Dreamweaver CS6新機能「可変グリッドレイアウト」制作に役立つサイト/チュートリアルまとめ | アカメ女子のWebメモ
「レスポンシヴデザイン」と「モバイルファースト」って?モバイル端末への最適化手法について|ソシャマノートブログ | ソシャマノートブログ
SEOテキストサンプル | 授業進行状況ぶろぐW
気になったWeb制作エントリー 4/1~4/5|メモ|YOU ZOOM!
リキッドデザイン・レスポンシブ・メディアクエリ 違いわかりますか? | へっぽこ開発室
グリッドレイアウトのリンク集 | 蓮華のブログ
【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選
webデザイン学習者必見!絶対に押さえておきたいwebデザイン超良記事・良サイト10選