Bootcomp

瞬速デザインカンプ制作

Photoshop CC 2015に「Bootcomp」エクステンションを導入すればBootstrapの使用を前提としたサイトのデザインカンプ制作にかける時間を大幅に短縮することができます。

Bootstrapのデザインカンプを制作スタートする際に、まずグリットレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでデザインに必要なフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。

画像サイズのシェイプを作成してクリックするだけで最適な方法で画像挿入からレイアウトまでワンストップで行うことができます。挿入する画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。

見出しやボタンなど頻繁に使用するコンポーネントを１クリックで挿入することができます。これによりワイヤーフレームなどもあっという間に作成することがでます。

Bootcompは無駄を省いたシンプルな機能となっています。しかしその機能はデザインカンプの制作作業を強力にバックアップします。ここではBootcompの8つの機能をかんたんに解説します。

Boorstrapの各ブレイクポイント(xs,sm,md,lg)ごとに最適なフォーマットを１クリックで作成することができます。

シェイプを作成して１クリックするだけで最適な方法で画像挿入からレイアウトまで１ステップで行うことができます。

選択したパーツをガターサイズ(30px)分空けて複製することができます。

右方向と下方向にあらかじめ用意されたピクセル数を１クリックで移動することができます。

見出しや文章を１クリックで挿入することができます。Bootcompの行揃え機能は標準機能とは違い位置を保持したまま行揃えを変更することができます。

Bootstrapの標準コンポーネントのボタン4サイズを１クリックで挿入することができます。

ダミーテキストをクリップボードにコピーすることができます。10文字と100文字があります。

グリッドガイド(薄赤色の帯表示)の表示・非表示を切り替えます。

ダウンロードした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
Photoshopを再起動します。
メニュー[ウインドウ]/[エクステンション]/[Bootcomp]を選択します。以上で「Bootcomp」が表示され使用できる状態になります。