Blueprint CSS と仲良くなるツールあれこれ

ごくたまにですが、自分の本編講演が始まる前に簡単なツールの紹介をすることがあります。小難しいことを話す前にキャッチーな話題に触れて講演に少しでも注目してもらおうと考え、時間がうまく調整出来たときにしています。昨年９月に開催された CSS Nite LP7 では、Blueprint という CSS フレームワークを紹介しました。

Blueprintは、様々なレイアウトパターンを class 属性を変更するだけで作ることが出来ます。カラムの数、コンテンツエリアの横幅、ボックスの移動、そしてフォームの作成など手軽に操作が可能です。柔軟性に長けているだけあってコードの量やファイルの分け方が独特なので、納品物として出せない場合がありますが、HTMLでプロトタイプを作りたいという方には良いツールです。

CSS フレームワークと呼ばれるツールセットは他にも幾つかありますが、Blueprintは関連ツールが豊富にあるのが利用するひとつのメリットといえます。例えばタブや可変グリッドレイアウトは、別途 CSS を追加するだけで実装することが出来ます。こうしたプラグインだけでなく、Compass のような Blueprint と Sass を利用した開発環境もあります。

デザイナーやコードを書く人向けの便利なツールもあります。Photoshop と Illustrator 用のテンプレート。ビジュアルデザインを Blueprint を意識して作りたいという場合に便利そうです。また、Blueprint Grid CSS Generator や BlueCalc を使えば、フォームに数字を書き込むだけで最適なグリッド CSS を生成します。もっと視覚的にグリッドレイアウトを作りたいのであれば Plumb がお勧めです。グリッド上に箱を並べるだけで HTML を生成してくれます。

ワイヤーフレーム／プロトタイプ制作は案件ごとに違うことを試みていますが、可能であれば完成品に最も近い HTML で行うのが理想だと考えています。スピードはまだ手描きにはるかに劣りますが、Blueprint をはじめとしたツールが充実することで、そのギャップもさらに縮むでしょう。柔軟で早く作ることを目的としているので、完成時に使われていないコードをいかにシェイプアップするのかが今後の課題です。全部捨てということはありえませんが、二回作っているような感覚に陥っているのであれば使うのは損ですしね。

ページを量産することも考慮するのであれば、CMS と Blueprint のような CSS フレームワークを組み合わせて作り上げるとさらに効率が上がります。WordPress では Blueprint Theme というのがありますし、他の CMS も「CMS名 Blueprint」で検索すれば幾つか出てくるので参考にしてみてはいかがでしょうか。