BootstrapといえばWeb業界では知らない人がいないくらいメジャーなフレームワークですが、あなたは使ったことがありますか？私は急ぎの案件や、予算が少ない案件などにお世話になることが多いです。予めレスポンシブ対応済なので、特に難しいことを考えずともスマホ対応のサイトが作れるのは本当に便利です。
ただこのBootstrapに合わせてデザインカンプを作ろうと思うと、Bootstrapのブレイクポイントに合わせて作らないといけないので、少し考える必要が出てきます。ブレイクポイントはすぐにわかるとしても、そこにマージンやらパディングやらを考慮していくと、ちょっと面倒くさい作業なんですよね。
そこで今日はそんなBootstrapのデザインカンプをPhotoshopであっという間に作る方法をお伝えします。簡単に言うと、Photoshopの拡張機能を使って、Bootstrapの下書きを用意したり、見出しやテキスト、さらには画像見本までをボタン一つで挿入できるという仕組みです。
Bootcompの便利機能
その前に便利な機能をまとめておきましょう。
- フォーマット作成
- 画像挿入がワンプッシュ
- コンポーネントを挿入
- 選択範囲をシェイプに変換
- パーツを複製
- マージン移動
- 文章挿入
- ボタン挿入
などなど・・・。まるで便利機能の玉手箱です！
Bootstrapの導入方法
- ダウンロードしたBootcompのzipファイルを解凍します。
- 解凍されたフォルダ内のBootcomp.cshをダブルクリックしてPhotoshopに読み込みます。
- 次に同じ階層にあるBootcompフォルダを下記ディレクトリに移動します。
【Windows】 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
【Mac OS】 Library/Application Support/Adobe/CEP/extensions
CEPフォルダがない場合はCEPフォルダとextensionsフォルダを作成して試してみてください。- Photoshopを再起動します。
- メニュー[ウインドウ]/[エクステンション]/[Bootcomp]を選択します。 以上で「Bootcomp」が表示され使用できる状態になります。
Bootcompの使い方
これは実際に動画を見ていただくのが一番わかりやすいので、まずは一度ご覧ください。
試しにBootstrapウィンドウにあるデスクトップのアイコンをクリックしただけで、こんな画面が自動的に作成されます。
たった1クリックでBootstrapでキーとなるグリッドがひかれました。その他にも便利機能は目白押しなのですが、それはぜひ実体験でお試しください。
Photoshop CC 2015 エクステンション Bootcomp