DesignWalker

ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか？

ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ！

今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。

Grid Style In Modern Web Design: Showcase and Resources

美しいグリッドデザインのサイトがたくさん集められています。

Grid Based Designs | inspiration gallery

グリッドデザインのウェブサイトを集めたインスピレーションサイトです。

960 Grid System

PhotoshopやIllustrator、Fireworksなどなど様々なファイル形式に対応したテンプレートが公開されています。サイトをデザインし始める時にはまずはこちらのテンプレートからはじめてみてはいかがでしょうか？

BlueTrip CSS Framework

グリッドデザインに対応したCSSフレームワーク。テンプレートとあわせてこちらのフレームワークも使えそう。

Blueprint: A CSS Framework

こちらもCSSのフレームワーク。

gridlayouts.com

このスクリプトを入れると、キーボードでctrl+shift+gを押すと設定したグリッドのバーが表示されます。

#grid

こちらのスクリプトはキーボードのgでグリッドが表示されます。

jQuery Masonry

このスクリプトを使えば、cssのFloatでガタガタにならず、綺麗にグリッドで並べてくれます。

Fluid 960 Grid System

jQueryとMoo Toolsバージョンが用意されているグリッドシステム。リキッドデザインにも対応しています。

Fluid Grid System

こちらもリキッドデザインに対応したグリッドシステムです。

Design a Clean Web Layout with the 960 Grid | Tutorial9

先にご紹介した960 Grid Systemを使った、デザインレイアウトのチュートリアル。グリッドデザインを始める人にはとても参考になるチュートリアルです。

nP: Grid Generator – build your own custom css grid

自分で好きなように数値を設定してpng形式でダウンロードできるグリッドジェネレータ

ZURB CSS Grid Builder

こちらもカラム数、カラムの幅、隙間の幅を設定すれば、CSSが書き出されます。

Variable Grid System

こちらもカラム数、幅などを設定してCSSがダウンロード出来ます。

The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approach

こちらは数値を入力するのではなく、バーをスライドさせるタイプです。

Gridmaker v3

数値を変えればリアルタイムでグリッドが変更されます。

Grid Calculator

こちらもバーをスライドさせるだけで、グリッドを変更させることができるツールです。

Grid Designer

ボタンをクリックしてカラムや横幅などが調整できます。