Twitter Bootstrapを使ってPookをリニューアルしてみた

PookのレイアウトをTwitter Bootstrapを利用してリニューアルしました。

Twitter Bootstrapはリッチすぎるとか、デザインの思考停止が起きるとかありますが、ウェブのデザインは数年前にヤフージャパンがトップページをリニューアルしたら、他のポータルサイトが同じようなデザインに改変されて、最近はてなさえも似たような感じになったように、横に習えが基本なので、こういったCSSフレームワークの恩恵は今後さらに大きくなっていくんじゃないかと思います。

とは言っても、個性は出さないと困る。なので、個性を出すために心がけたことを二つほど。

1. 横幅のサイズを変更する

Pookでは、もともと横幅640pxだったので、それとほぼ同じになるようにグリッドの数値を変更しています。

Customize and download - Twitter Bootstrapで、パラメータをカスタマイズしたものをダウンロードすることが出来ます。具体的には@grid〜を調整しています。

Grid system

@gridColumns	カラム数
@gridColumnWidth	カラムの幅
@gridGutterWidth	カラム間の幅

コードからコンパイルする

逐一パラメータを変更するたびにダウンロードをするのが面倒な場合は、ソースコードをtwitter/bootstrapから直接落としてきて、コンパイルします。

コンパイルのやり方は、ここに記載してあります。デフォルトの値はless/variables.lessです。自分はこのタイミングで、LESSを勉強しました。

2. プラグインを取捨選択する

Twitter Bootstrapが用意しているJavascript pluginだけを使うと、さすがにデザインの差別化は難しいので、ある程度、利用するものを絞ったほうが良いです。そして、どうしても自分が表現したいものがなければ、きちんとjavascript, cssを書いたほうが良いです。

Pookは、モーダル表示はTwitter Bootstrapのものではなく、独自に追加しています。Twitter Bootstrapのモーダルは、モーダルの中と後ろ両方ともスクロール出来るのが嫌だったからです。

何を作りたいかを決めてから

CSSフレームワークは強烈で、スピード開発には欠かせないものです。ただ、だからといってデザイン設計が必要なくなるというのは無いというのが自分の総論です。

CSSフレームワークで出来るレイアウトを考えるより、何をどう作りたいかをまず決めてから、CSSフレームワークを選択する、場合によっては選択をあきらめてきちんと作る、というプロセスがやはり一番良いのだと思います。ただし、今ではよほどのことがない限りCSSフレームワーク使ったほうが便利です。