Blueprint CSSはCSSフレームワークの先駆け的なソフトウェアだが、これを使うとグリッドなデザインを簡単に実現できるようになる。多様なブラウザにも対応し、かつきっちりとしたデザインが組めるとあって、便利に使われている。

グラフィカルにグリッド設計ができる

とは言え、最初は使いこなすのに苦労するかも知れない。これからBlueprint CSSを使ってみようと思う方はBoksを使ってデザインするのが良さそうだ。

今回紹介するフリーウェアはBoks、Blueprint CSSをグラフィカルに使いこなすソフトウェアだ。

BoksはAdobe AIRのアプリケーションで、Windows/Mac OSX/Linuxで動作する。グリッド設定を使って、ページの幅やカラムの数を指定できる。そしてクリックでDivタグを配置し、ドラッグで幅を調整してグリッドデザインを描くことができる。左右への移動は矢印キーで行う。

設定

Divタグにさらにクラス指定を追加したり、HTMLコンテンツを追加することもできる。項目は入れ子に設置することもできるので、細かくデザインされた組版のようなWebサイトをデザインすることができるはずだ。

デザインが終わったらプレビューをして設計を確認する。そのプレビュー内容を別なブラウザで確認し、問題なければ実際のサイトに入れ込めば良い。CSSフレームワークにはデザイン上の色々なノウハウが詰まっている。それらを活かすためにもBoksはきっと役立ってくれるはずだ。

プレビュー

via Boks - visual layout for Blueprint CSS [RefreshingApps.com]

Boks - A Visual Grid Editor

　http://toki-woki.net/p/Boks/