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

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

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

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

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

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ