BootstrapのIllustratorテンプレート2つ　レスポンシブをきっちりデザインしたい人へ

レスポンシブCSSフレームワークとして大きなシェアを持っているTwitter Bootstrap(ブートストラップ)。このWorkToolSmithでもベースに使用しています。

きっちりした、指定しやすいグリッドと、手軽に使えるUIがイイカンジです！

ただレスポンシブデザインは形が大きく変化するので、変化時のカラム設計がわかりづらいという点があります。デザインを決めるためには形をしっいかりと把握する必要があります。

今日はBootstrapのデザインで非常に役立つIllustrator向けテンプレートを紹介。

Bootstrap 3 Illustrator Template

まずはグリッドのテンプレート。

HeyDisignerさんが公開してくれています。 > http://heydesigner.com/

こちらのページに入り、右のBootstrap 3 Illustrator Templateリンクをクリック。移動したページからダウンロードします。

Illustratorファイルには以下の様なテンプレートが入っています。PC(lg)～スマホ(xs)までの変化、縦画面、横画面、画面の表示領域も入っていて非常にわかりやすい！

素材を作ったあとに当てはめたら「あれ？見えないほど小さくなっちゃった！」みたいなミスが防げます。

Bootstrap3 Vector UI Kit

次は部品です。

Bootstrapに標準で入っているボタン、テーブル、ナビなどなどあらゆるコンポーネントをIllustraotr形式で提供してくれます。 > http://bootstrapuikit.com/

Illustratorファイルにはズラッと多数のコンポーネントが並びます。これを先ほどのグリッドにぺたぺたと貼り付けていけばすぐにデザイン設計ができます。