Bootstrapカスタマイズサービスまとめ

Bootstrapは簡単にwebサイトが作れるフレームワークとしてここ数年来人気があります。レスポンシブデザインの台頭でWeb制作の現場でも、より早い段階で実際に動かせるプロトタイプが必要となる場面が増えました。Bootstrapで少しカスタマイズして使いたいという方やガッツリカスタマイズしたい人さまざまだと思います。ここではBootstrapのカスタマイズを簡単にできるサービスを集めてみました。

1.Bootstrap Live Customizer

右側の画面でカスタマイズして、完成したら左側のGetボタンからダウンロードします。色の変更にはカラーバーのようなツールを使用するか、直接カラーコードをいれるかいずれの方法にも対応しています、お好きな方でつかってみるといいでしょう。(有料: $14　2016.2時点)

2.Lavish Bootstrap

画像からカラーパターンを取り出し、bootstrapのテーマに取り出したカラーを当てはめ、カスタマイズすることができます。主な用途はメインに使用する画像から合うカラーを取り出し、bootstrapをカスタマイズすることですが、メイン画像以外にもロゴマークなどからサイトの配色を決めるのにも使えそうです。

3.Bootswatchr

bootstrapの変数を変更し、見た目を変更することができる。画面右側にソースコードが出てくるので、ソースの変数のカラーコードを変更すると、右側のプレビュー画面表示されます。

4.BootStrap Magic

ブラウザ上でbootstrapのテーマを作ることができるサービスで、Bootstrap2.3.2からBootstrap3.1に対応。画面右側の＠gray-darkerなどの変数が書かれている箇所に16進数カラーコードをいれて、各部位の色を変更することができます。Bootswatchrに比べると、ソースではなくテキストボックスに入れる形なので、CSSやLESSの開発に慣れていない人でもとっつきやすい点が挙げられます。

5.StyleBootstrap.info: Twitter Bootstrap theme generator

Bootstrapの画面のパーツごとにカラーリング、文字の大きさ、隙間などを細かく調整できるサービスです。カラーテーマを作るのであればこれをベースにすると良さそうです。

6.Customize and download · Jasny Bootstrap

ビジュアル的ではなく、LESSでの変数やjQueryで使う機能などを設定した上でカスタマイズされたテーマをダウンロードできます。よりプログラマブルなカスタマイズが可能となっています。

まとめ

いかがでしたでしょうか。ますます登場の機会が増えてきているBootstrap。使用する際にカスタマイズが必須となってきています。開発工数短縮のためにも、素早くプロトタイプを作れることが求められてきている今日このごろ、今回紹介したようなカスタマイズサービスが重宝することでしょう。