新説 Twitter BootstrapでWebサイト構築したいなあって人はこれ見とけばいいかもしれないよ的なまとめを作る試み

以前似たような記事を書いてからもうすぐ1年。その間Webデザインも様々なトレンドが駆け巡り、Bootstrapも周辺サービス、カスタムスタイルが新たにいくつも出てきました。以前と若干かぶるところはあるだろうものの、ご紹介しようと思います。

まずはいまさらかと思いますが概要から

BootstrapとはTwitterが作っているCSS フレームワークです。これを使うことで、凝ったことをしなくてもあっというまに整ったWebページを作ることができるという代物。マルチカラムもレスポンシブデザインも簡単にできるステキツールです。
公式ページとドキュメントはこちらから。

用意する

ではそんなBootstrapはどこで手に入るのでしょうか。

公式から手に入れる

まずは公式から。トップページからは素のままのBootstrapを手に入れられるほか、細かなカスタマイズをした上で手に入れることもできます。

他のところから手に入れる

でもこれいかにもBootstrapデスヨネ。カスタマイズできるといっても膨大なテキストボックスを相手にしたくないデスヨネ。というわけで他のところから手に入れてしまいましょう。

既存のテーマを手に入れる

テーマギャラリーで外せないのがこちら。
Bootswatch: Free themes for Twitter Bootstrap
前回もご紹介したのでくわしいことは省略。オーソドックスながら使い勝手も良いかと思います。
お次はこちら、「Tweet Metro」。
BootMetro
こちらも以前ご紹介したしましたね。なんちゃらスタイルライクのモダンなサイトを作ることができます。
そんなWindows8の登場に影響されてか、今後はフラットなテイストが来ると思います。それを前面に押し出したBootstrapベースのデザインフレームワークが「FlatUI」です。
Flat UI
f:id:yuu_xxxx:20130505220043p:plain
色は白地に青緑ベースで、モバイルも意識したようなゆとりのあるエレメントを備えたフラットデザインです。
変わり種だと、黄金比を取り入れたスタイルにしてしまう「Golden Bootstrap」というものもあります。
Golden Bootstrap
もっとも美しい比率とされる黄金比をサイトに取り入れて、さり気なく美しいWebサイトにしてしまいましょう。

自分で作る

気に入ったテーマが無いようですね。ならば自分で作ってしまいましょう。
まずご紹介するのは「paintstrap」。
PaintStrap - Twitter Bootstrapテーマをカラースキームから生成
ギャラリーもあるのですが、目玉はなんといってもお手軽な編集機能。
f:id:yuu_xxxx:20130505220617p:plain
Adobe kulerやCOLOURloversといったカラースキームを集めたサイトから気に入ったものを指定してカスタマイズすることができます。
次にご紹介するのは「Style Bootstrap」。
StyleBootstrap.info: Twitter Bootstrap theme generator
手打ちだけでなくカラーピッカーから選ぶこともできます。結構細かい調整ができるので、満足の行くまで調整しましょう。