NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2011.01.05

グリッドデザインに使えるお役立ちツール

姐さん

title

今回はグリッドデザインを正確に、すばやく設計するときに便利な、オンラインツールをご紹介します。

Grid Designer

グリッドデザインをするとき、Photoshopのガイド機能などを使ったりすると思いますが、こちらのサイトでは実際にカラム数、カラム間の幅、全体の幅などを自由に設定でき、実際のブラウザでどのように見えるかを目視しながら設計することができます!

01

「Columns:カラム数」「Pixels:全体の幅」「Gutters:カラム間の幅」「Margins:両横のマージン」

「Typography」で実際に文字を流し込んだ時のイメージも確認できます。

02

ブラウザで確認したレイアウトのHTML、CSSをコピーすることもできます。

03

コピーしたソースを使うもよし、キャプチャを元にガイドをひくもよし、グリッドデザイン設計の時間短縮にぜひお役立てください。