今風おされWebサイトが作れるBootstrap周辺の便利ツールまとめ【10/12更新】

かおりったー
Twitter社がオープンソースで公開しているCSSフレームワーク「Bootstrap」の関連情報をまとめました。サクっとモックアップを作りたい人、デザインを0から作るのが大変なときに、Bootstrap+αの色やその他のカスタマイズを簡単にできるジェネレータは便利そう!

レスポンシブデザインにも対応した大人気Webサイトフレームワークの関連ツールや情報をまとめました。

◆まずは公式サイト

レスポンシブデザインやトップバーやスティッキーなナビゲーションなど今時なUIに対応した、HTML/CSS/JavaScriptフレームワーク。最新版は2.1が公開されています。

◆ Bootstrapについて学ぶ!必読リンク

コンパクトに基礎を動画で学べる便利なサイト。最新版2.1にも対応しています。

Slideshareのプレゼンへのリンクです。概要がさくっとまとまっていてわかりやすい。

実践編として、とても参考になります。

◆ Bootstrapのテーマそのままじゃ味気ない!簡単に自分色に染めたい人へのツール

じゃあ、実際にBootstrapでサイトを作ろう!と思った時に便利なサービスをまとめました。
デフォルトのテーマのままでは味気ないからカラーテーマを変えたい、もっとコードスニペットを見てみたい、などなど。

「Bootstrap + 追加のJavaScriptライブラリ + カラーテーマ + テンプレート」のセット。Bootstrapをベースとした、もう一つのフレームワークですね。

自分で色指定ができます。

こちらはいくつかのテーマの中から好きなものを選んで、ダウンロードできます。

Bootstrapの設定を予めカスタマイズしてからダウンロードできます。

有料ですが、かっこいいテーマをダウンロードできます。$4からだし手っ取り早く&デザインがBootstrapすぎないサイトを作れるのは良いかも。

ボタンの色だけカスタマイズできればいいんだ!っていう方にはこちら。スライダーを動かすだけで素敵なボタンができます。サンプルのデザインもいくつか。

アイコン、色、タイプなどなどを選べるボタンのコードジェネレータ

各箇所のカラーを、一気に編集してCSSかLESSで吐き出せるツール。

Adobe kulerやCOLOURloversに公開されてる素敵なカラーパターンから選んでぴったりのBootstrapテーマを作れるジェネレータ。色彩センス不要なのがいいですね。

◆ UIをもっと手軽に or いろんなパターンで作れるツール

ログイン画面、管理画面、メールリストなどいろんなパターンのUIをデザイン&レイアウトしたコード片が公開されています。

Web上でドラッグ&ドロップでページのレイアウトができちゃうビルダー。

https://matome.naver.jp/odai/2133014895292814301
2012年10月12日