Bootstrapをさくさく自分好みに。専用カスタマイズサービス×12選

個人、会社を問わず素早くWebアプリケーションの開発がはじめられるとあって使われるようになっているのがBootstrapです。今回はそんなBootstrapのカスタマイズを素早く行っていけるWebサービスをまとめて紹介します！

StyleBootstrap.info

ナビゲーションバー、ボタン、フォームなどの色、ボーダー、フォントサイズを細かくカスタマイズできます。リアルタイムプレビューがついていますのでその場で雰囲気が分かります。

StyleBootstrap.info: Twitter Bootstrap theme generator

Initializr

Bootstrapのカスタマイズという訳ではありませんが、HTML5 Webアプリケーションを開発するためのベースをカスタマイズしながら作成できます。

Initializr – Start an HTML5 Boilerplate project in 15 seconds!

Beautiful Buttons for Twitter Bootstrappers

ボタンだけをカスタマイズできるサービスです。特にボタンの色だけを多彩にカスタマイズできます。

Beautiful Buttons for Twitter Bootstrappers

Twitter Bootstrap Button Generator

こちらのボタンのカスタマイズに特化しています。ボタンのテキスト、サイズ、色、アイコンなどを選んでボタンを生成します。ちょっとした作業の短縮になりますね。

Twitter Bootstrap Button Generator | PlugoLabs

BootTheme

WebベースでWYSIWYGエディタを使ってBootstrapをカスタマイズできます。ギャラリーには他ユーザが作ったテーマが掲載されています。

BootTheme : Web Designer and Theme Generator for Twitter Bootstrap

PaintStrap

AdobeのAdobe kuler、またはCOLOURloversからカラーテーマを生成します。奇麗なカラーテーマから作れるのでバランスが整ったデザインになるでしょう。

PaintStrap – Twitter Bootstrapテーマをカラースキームから生成

Jetstrap

ドラッグ&ドロップでUIが作れるサービスです。かなり本格的に画面を作り込むこともできます。

Jetstrap – The Bootstrap Interface Builder

Fancyboot

色やグリッドのカラム数に加えて利用する機能自体を絞り込むこともできます。特定の機能だけを使いたいといった場合やJavaScriptプラグインを絞り込みたい場合に使えそうです。

Fancyboot – Customize · Bootstrap

Lavish

任意の写真からカラースキームを読み取ってテーマ化します。好きな写真を選ぶことで、それに合わせたデザインに仕上がると思います。

Lavish – Generate your own Bootstrap color scheme

Bootstrap Live Customizer

Bootstrap全体のカラー変更、フォント、サイズなどをライブプレビュー付きでカスタマイズできます。どの要素がどの部分に当てはまるのかも分かるのでBootstrapのカスタマイズだけでなく、その構造理解にも使えそうです。

Bootstrap Live Customizer

Bootstrap Magic

ライブプレビュー付きのBootstrapカスタマイズサービスです。サイト全体もBootstrapで作られているので実例としても興味深いです。

Bootstrap Magic : Generate your own bootstrap theme quickly and easily

LayoutIt!

ドラッグ&ドロップでBootstrapの画面が作成できます。スタイルシートのクラス名も書かれていて、プレビューが分かりやすいです。

LayoutIt! – Interface Builder for Bootstrap

---

いかがですか。Bootstrapを使えばHTML5なWebアプリケーションが素早く構築できます。そのまま使っても良いですが、自社の雰囲気に合わせたカラーカスタマイズしたいというケースもあるでしょう。そんな時にこういったサービスを使えば素早く雰囲気が変えられるので、ぜひ使ってみて欲しいです。

もちろんデザインだけでシステムは動きませんので、Webアプリケーション化する際にはぜひhifiveを使ってみてください！

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive