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

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

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

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

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

スポンサーリンク

Bootstrap 3 Illustrator Template

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

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

Bootstrap 3 Illustrator Template   HeyDesigner

 

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

image

 

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

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

image

image

Bootstrap3 Vector UI Kit

次は部品です。

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

image

 

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

image

 

WTS的まとめ

この2つがあればBootstrapのレスポンシブを完全攻略できるはず!

最近グーグルはスマホ対応しているサイトを上位に表示するように修正を加えましたので、レスポンシブをマスターしてしっかりとスマホ対応していきたいですね。