ブロックワークス

2009.02.12

960pxのグリッドを基準にサイトレイアウトをする考え方「960 Grid System」

Webサイトのレイアウトを考える上で参考になりそうなサイトを見つけました。

960pxを短冊のように分割し、そのグリッドに合わせてレイアウトするその名も「960 Grid System」というサイトです。まずは文章で説明するより絵で見てみてください。

960grid

img_001

img_002

みての通り、一見変哲もないサイトですが、実は960gridのルールに沿って作られていることが分かります。

[60px][20px余白][60px][20px余白]の繰り返しに、両脇に10pxを入れた960pxで成り立っています。

多種多様な情報をいかに見やすく、分かりやすく配置していかということを考えると、960gridのような考え方でデザインしてみるのもいいかもしれませんね。

レイアウトのベースとなるテンプレートファイル(psd、FireworksPNG、omnigraffle、visio)も無料でダウンロードすることができるので、これをベースにレイアウトしてみるのもいいかもしれませんね。(自分は使うと思います。)

自分のサイトでも早速…と思いましたが、記事毎に配置している画像が深い意味もなく490pxにしてしまったので、どうしたものか悩み中ですw

Tumblr

    • http://blockworks.tumblr.com/post/16913195233http://blockworks.tumblr.com/post/16906726187http://blockworks.tumblr.com/post/16906602535http://blockworks.tumblr.com/post/16906563925http://blockworks.tumblr.com/post/16811807634http://blockworks.tumblr.com/post/16811801252http://blockworks.tumblr.com/post/16811778984http://blockworks.tumblr.com/post/16811750816http://blockworks.tumblr.com/post/16803132288http://blockworks.tumblr.com/post/16796499625http://blockworks.tumblr.com/post/16796443705http://blockworks.tumblr.com/post/16796378357http://blockworks.tumblr.com/post/16796357802http://blockworks.tumblr.com/post/16796330880http://blockworks.tumblr.com/post/16796315058http://blockworks.tumblr.com/post/16796296794http://blockworks.tumblr.com/post/16794338318http://blockworks.tumblr.com/post/16763550597http://blockworks.tumblr.com/post/16763523184http://blockworks.tumblr.com/post/16763506593http://blockworks.tumblr.com/post/16763501649http://blockworks.tumblr.com/post/16762842307http://blockworks.tumblr.com/post/16762828554http://blockworks.tumblr.com/post/16762824640