hereticanthem co.,ltd.

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

Google Code The Golden Grid

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

960 Grid SYSTEM

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

Fluid 960 Grid System

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

The Grid Design System

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

以下はWebToolsです。

YUI: CSS Grid Builder

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

Grid Designer 2

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

Grid maker v2

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

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