読者です 読者をやめる 読者になる 読者になる

forus TECH

IT系技術メモ&本まとめ、ライフハック etc

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

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
HTML5CSSJavaScriptに関するベストプラクティスをまとめたテンプレートデータ。
Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できる。

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

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

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


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


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

デビッド・ケリー 「自分のクリエイティビティに自信を持つ方法」