非デザイナーのためのデザインツールまとめ

f:id:yusukekuni:20130501194042p:plain

今や定番となったデザインテンプレート「Twitter Bootstrap」
Webデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSS フレームワークで、デザイナーじゃなくてもいい感じのビューがサクッと作れてしまう便利ツールですが、さらに便利に、簡単にしてくれるツールをまとめ。

Twitter Bootstrap
本家はこちら

Bootswatch
Bootstrapの様々なテーマをダウンロードして使用できる。
カスタマイズされたもので始めたいときにはいいかも。

Editable for Bootstrap
Bootstrapを拡張していい感じの編集フォームが作れます。

FuelUX
BootStrap に追加できるコンボボックス、データグリッド、ピルボックス、検索、スピナー等のコンポーネントパック。

Bootsnipp
Bootstrap用スニペット集。
様々なパーツをコピペだけで作れて便利。

Initializr
HTML5+Bootsrtapのテンプレートが一瞬でダウンロードできます。
もちろんレスポンシブデザインにも対応。

番外編
HTML5 Boilerplate
HTML5やCSS、JavaScriptに関するベストプラクティスをまとめたテンプレートデータ。
Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できる。

HTML5 Bones
非常にシンプルな最小構成のHTML5テンプレート。
クロスブラウザ用のNormalize.cssとIE8以下用にHTML5をレンダリングさせるためのhtml5shivのみ含まれている。

HTML KickStart
Twitter Bootstrapは使いたくない、ちょっと違う感じで作りたいって時はこのテンプレートもありかも

The Responsinator
様々な端末サイズでレスポンシブデザインの動作確認ができる。
見たいページのURL入力だけでとてもシンプル。

その他
他にも便利なツールがたくさんあります。
Twitter Bootstrap はじめに見るべき１０サイトまとめ
 1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
ウェブサイトの制作に必ず役立つブックマークレットのまとめ

最後に、クリエイティブを作る前に見ておくと自信がつくかも！？