Fluid 960 Grid System で Quick & Rapid な Web U/I 構築

コンピューティング 作ってみた Webサービス U/I

頻繁に Web サービス構築を行うプログラマには UI 作成は結構めんどい

凄腕 Web サービスビルダーの皆さん、毎日の Web サービスの構築、ご苦労さまです。私ゃ凄腕というより細腕なのでサービス構築はせいぜい数ヶ月に1回程度ですが、デザインの才に不自由な野良プログラマとして一番アタマが痛いのが U/I (User Interface)部分の作成だったりします。たとえサービス内容に自信があっても、見た目があまりにショボかったり操作性が酷すぎると使ってもらう前にユーザさんが素通りしてしまうかもしれないと思うと、公開時には一定水準以上の U/I を備えておきたいと思うのがビルダーの人情ってもの... ですよね?

Fluid 960 Grid System はイイ!!

そんな訳で私は最近、Web サービスのプロトタイピングにはグリッドレイアウト指向な CSS フレームワークを使うようになりました。Blueprint や 960 Grid System あたりが定番かと思いますが、前者のほうが記述が簡素かなと思い、こちらをいつも有り難く使わせて頂いてます。ブラウザ毎の表示差異を吸収してくれて、CSS 素人がハマりがちなレイアウティングもカッチリ決めてくれるとあって、もう手放せません。先日リリースした「東京放射線量警報機」でもそうしています。

さて、リリースから2週間程経った頃、「最低限水準」だったこのデザインをもう少し何とかしたくなりました。のっぺりしたページを、もっと直観的にレイアウト構成が分かり、見た目にもメリハリが効いた感じにブラッシュアップしたくなったのです。そんな所まで面倒を見てくれるフレームワークは流石にないだろーなーと思っていた所、Fluid 960 Grid System という代物を見つけました。960 Grid System をベースに、ボックスやフォーム・テーブル・リストのスタイル定義、およびメニューバーやアコーディオン等の簡単なギミックの JavaScript を加えたプロダクトです。これは素晴らしい!! 早速これを採用してリデザインした結果、こんな感じになりました。

Before

After

(ささやかな)カスタマイズ

どうでしょうか。デザイナさん謹製のクールでゴージャスなページ、という風にはいきませんが、ゴリッとした実用本位っぽいデザインになっているかなと思います。もともとサービスの性格上、あまり浮ついた印象にはしたくなかったので、その辺も狙い通りではあります。カスタマイズしたのはヘッダまわりとカラースキームくらいです。色に関しては素人が適当に指定してもちぐはぐな域を出ないだろうと思い、「制御パネル」などと Google 検索して出てきた機械類の画像を、 ColorSuckr のような色検出ツールに食わせてカラースキーム生成してみました。

謝辞

というように Fluid 960 Grid System で幸せになった私ですが、今後はこれを発展させるような形で、各種要素のデザインパターンやカラースキームを Web 上で指定して CSS・画像・JavaScript・サンプルHTML一式がダウンロードできるようなサービスでも作って、恩返しできたらなぁなどと考えています。Thanx so much, Fluid 960 Grid System !!