CSSフレームワークとしては最もメジャーなBootstrap。レスポンシブデザインにも対応しているだけでなく、“HTMLやCSSの知識が不要”と言われるほど簡単にWebサイト制作ができるのが大きな特徴。
実は、Bootstrapのテンプレートを簡単にカスタマイズできるサービスがあるのをご存知でしょうか。ただでさえ簡単にWebサイトを制作できると言われているのにもかかわらず、まだ簡単になるの?と驚く方もいらっしゃるかもしれませんが、国内外で専用カスタマイズサービスがいくつか提供されているのです。
本記事では、そんなBootstrapのテンプレートを簡単にカスタマイズできるサービスをまとめてご紹介いたします。
どこまで簡単になるの?Bootstrapサービス6選
1. BootTheme
こちらもWeb上から自由にカスタマイズできるサービスです。使い方は本当に簡単で、Topページから「APP」をクリックするとカスタマイズページに移動。ここで必要なパーツをドラッグ&ドロップで移動するだけで、カスタマイズが反映されます。もちろん、カラーの変更も数値、もしくはカラーパレットから同様にドラッグ&ドロップで完了。
恐ろしく簡単にカスタマイズできてしまうので、これであれば本当に知識がなくても大丈夫なのでは……と思うようなサービスです。ちなみに、ギャラリーには他のユーザーが作ったテンプレートが並んでいるので、そちらを参考にするのも良さそう。
2. Jetstrap
こちらも先ほどの「BootTheme」と同様に、ドラッグ&ドロップでカスタマイズすることができるサービスです。直感的にさくさくカスタマイズできるのはもちろんですが、用意されているパーツが立体的でイメージ通りに作りやすいUIが一番の特徴。
基本的に有料のため、無料で使う際はDEMOでの利用(TopページのOR TRY THE DEMOをクリック)となります。
3. Bootstrap Live Customizer
http://bootstrap-live-customizer.com/
ブラウザ上から細かなパーツも含めて、細かくカスタマイズできるサービス。パーツごとに細かくCSSを変更できるので自由度も高めです。さらに既に用意されているテンプレートもあるので、そちらを反映させればある程度の状態からカスタマイズすることもできるのでオススメ。
4. Bootstrap Magic
http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
こちらも同様にプレビューを見ながら細かくパーツのカスタマイズができるサービスです。Bootstrapのバージョンごと(3.1、3.0、2.3.2)に環境を変更しながらカスタマイズできるのもポイント。
5. LayoutIt!
ドラッグ&ドロップの簡単操作と、全体の構造が視覚的にも分かりやすいUIとなっているのが「LayoutIt!」です。Edit画面でカスタマイズした内容をPreviewで切り替えて、実デザインをすぐに確かめることができます。全体的な操作感も含めて総じて使いやすいサービスです。
6. Bootstrap Editor
http://www.venezia-works.com/bst/
これまで海外のサービスばかりでしたが、国内のBootstrapカスタマイズサービスが「Bootstrap Editor」です。やはり英語だと使い慣れない、という方は断然こちらをオススメします。ソースコードとビジュアルの両方を見ながらカスタマイズできるので、Bootstrap初心者には使いやすいのではないでしょうか。
ボタンに特化したサービスも
上記で紹介したサービスはWebサイト全体のカスタマイズが中心ですが、中にはボタンに特化したサービスもあるようですので、是非こちらも併せて参考にしてみてください。
Beautiful Buttons for Twitter Bootstrappers
http://charliepark.org/bootstrap_buttons/
Twitter Bootstrap Button Generator
http://www.plugolabs.com/twitter-bootstrap-button-generator/
まとめ
どのサービスもプレビュー機能や直感的に操作できる点が共通して挙げられます。ただでさえ簡単にWebサイトの制作ができるBootstrapですが、今回紹介したサービスを使えば、ますます簡単にカスタマイズすることができそうです。
カスタマイズした内容をそのままコピーやダウンロードすることで、反映できるのも嬉しいポイント。ほとんどが英語のみですが、比較的使いやすいものばかりですので、実際に触ってみて自分が使いやすいものを選んでみてもいいでしょう。