グリッドデザインをするときに役立つサイトやツール

Posted: Feb 19, 2009, 1:11 pm | Author: yutaro | Category: Old

grid
洗練されたサイトデザインをするときによく活用されるグリッドデザイン。見栄えもそうですが、ユーザービリティの面でも重要になってくることは確かです。そんなグリッドデザインを設計する際に使えるサイトやツール、グリッドデザインを知るためのサイトをいくつかご紹介。

Google Code The Golden Grid
Google Code The Golden Grid
横幅970pxの6カラムと12カラムのグリッドデザインを説明してサンプルファイルもダウンロード出来ます。

960 Grid SYSTEM
960 Grid SYSTEM
colissさんの記事『有名なページの幅960pxを基準にして、設計するグリッドデザイン』でもご紹介されていた960 Grid SYSTEM
960pxを基本としたグリッドシステムの資料がHTMLやPSD、PDFなどでダウンロード出来ます。

Fluid 960 Grid System
Fluid 960 Grid System
960pxを基本とし、AjaxやMOOTOOLSを活用したデザインはたまた、フォーム要素のレイアウトなどサイトを設計する上で使用する様々な設計を参考に出来ます。資料はこちらからダウンロード出来ます。

The Grid Design System
The Grid Design System
グリッドデザインに特化したサイト。WebだけではなくDTPのグリッドデザインをするにも参考になるサイト。特にTemplatesにあるInDesignやPhotoShopのテンプレートは実用的な参考資料になりそうです。975pxの6カラムや12カラムのPSDがダウンロード出来ます。

以下はWebToolsです。

YUI: CSS Grid Builder
YUI: CSS Grid Builder
このToolでそのままレイアウトを組めて、ソースを表示することが出来きます。HeaderやFooter、Sidebarも同時に追加することも可能になっていて良心的。

Grid Designer 2
Grid Designer 2
横幅やカラム数、カラムの間隔などをしていくことでグリッドの見え方を確認していけます。

Grid maker v2
Grid maker v2
PhotoShopなどでグリッドデザインを設計するときの下書き的な画像(PNG)を生成することが出来ます。カラム数、カラム縦幅横幅、カラムの色、ベースラインの幅や色を変更することができ、自分の見やすい形に変更していけます。

こんなサイトやToolを参考にしていくことで、もっともっとデザインセンスに磨きがかかっていけばうれしいですね。