レスポンシブ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ファイルにはズラッと多数のコンポーネントが並びます。これを先ほどのグリッドにぺたぺたと貼り付けていけばすぐにデザイン設計ができます。
WTS的まとめ
この２つがあればBootstrapのレスポンシブを完全攻略できるはず！
最近グーグルはスマホ対応しているサイトを上位に表示するように修正を加えましたので、レスポンシブをマスターしてしっかりとスマホ対応していきたいですね。
