Skip to content

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

by : 2014/07/15

個人、会社を問わず素早く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

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

From → まとめ, HTML5

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。