グリッドデザインに使えるツールいろいろ

ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか? ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ! 今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。

Grid Style In Modern Web Design: Showcase and Resources

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

Grid Style In Modern Web Design: Showcase and Resources

Grid Based Designs | inspiration gallery

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

Grid Based Designs | inspiration gallery

960 Grid System

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

960 Grid System

BlueTrip CSS Framework

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

BlueTrip CSS Framework

Blueprint: A CSS Framework

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

Blueprint: A CSS Framework

gridlayouts.com

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

gridlayouts.com

#grid

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

#grid

jQuery Masonry

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

jQuery Masonry

Fluid 960 Grid System

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

Fluid 960 Grid System

Fluid Grid System

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

Fluid Grid System

Design a Clean Web Layout with the 960 Grid | Tutorial9

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

Design a Clean Web Layout with the 960 Grid | Tutorial9

nP: Grid Generator – build your own custom css grid

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

nP: Grid Generator - build your own custom css grid

ZURB CSS Grid Builder

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

ZURB CSS Grid Builder

Variable Grid System

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

Variable Grid System

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

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

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

Gridmaker v3

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

Gridmaker v3

Grid Calculator

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

Grid Calculator

Grid Designer

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

Grid Designer

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です