960 グリッドシステムを取り入れる
今更ではありますが、960px グリッドデザインについて！
960 という数値
- 多くの数字で区切ることができるので、グリッド設計に適しています。
- 最近のモニタは 1024×768 以上の解像度が標準となってきているため 960 は、心地の良いサイズ。
グリッドデザイン
- 単純な手法なので、取り入れやすい。
- コーディングがしやすくなるので、幅広い表現が可能となります。
僕は基本的に、以下の2つのグリッドを元に、サイトのデザインを構築しています。
16 columns ~ margin left: 10px ~ margin right: 10px の利点
- 160px, 580px, 160px の3カラムを作ることができます。
コンテンツとなる 580px は、2, 5 分割することができます。 - 220px, 700px の2カラムを作ることができます。
コンテンツとなる 700px は、2, 3, 6 分割することができます。
次は、このサイトのグリッド！こちらもきれいな数値です。
12 columns ~ margin left: 15px ~ margin right: 15px の利点
- 同サイズの3カラムを作りたい場合に使用します。
2, 3, 4, 6, 12 分割することができるので、汎用性があります。
ホワイトスペースが重要となるデザインですので、マージンを広めにとる必要があります。
場合によってマージンを 20px にすることも可能です。
きれいなサイズは他にもいくつか有りますが、僕の場合は、この2つのグリッドにあてはめることができない場合は、横幅を 980px にサイズアップします。
グリッド！グリッド！となりすぎて、制作しようとしているサイトのコンセプトを見失わないようにすることが重要です。
グリッドデザインにすることをあきらめることもまた、デザインですね。
About this entry
- Title: 960 グリッドシステムを取り入れる
- Published: 2011年9月25日
- Category: Web サイト制作
- « Previous post Next post »
No comments