img_post_6955_eyeCtch

簡単にカンプやワイヤーフレームが作れるComp CCのご紹介

 

技術者Mioです。

みなさんはこんな経験ないでしょうか?

提案書作成の際に打ち合わせをして、ホワイトボードや手書きのレイアウトデータを
持ち帰ってパワーポイントやエクセルに清書するという地味な作業。

修正が入ると、また赤の入った印刷データなどを元に再度清書して提出という繰り返し。。。

そんな時、大活躍するのがこの「Adobe Comp CC」です。

これはAdobeから提供されているカンプデータの作成を目的としたアプリで、
iPadやiPhone、Androidで利用が可能です。

このアプリのすごいところは、
簡単な操作でサクッとカンプデータが作れるんです!
カンプデータだけでなく、ワイヤーフレームやモックアップにも利用できる万能アプリです!

実際に使い方を見てみましょう!

1.起動&形式の選択

まず、起動するとサンプルデータがいくつか表示されます。
初回起動ではチュートリアルが開始するので、そちらをなぞるだけで使い方は網羅出来てしまいます!

では、作成する形式を選択してみましょう。
画面左の「+」をタップします。

img01

さまざまな形式が用意されていますが、ここでは「Web」を選択してみます。
独自の形式を作成したい場合には「新しい形式」から作成することも可能です。

img02

形式を選択すると下記のようなワークスペースが表示されます。

img03

2.オブジェクトを置いてみる

それでは実際にオブジェクトを配置してみましょう。

img04

メニューバーから、「シェイプ」アイコンをタップすると色んなシェイプオブジェクトが表示されます。
使いたいシェイプをタップすると、画面に配置されます。

img07

配置されたオブジェクトは、幅を伸ばしたり、色・透過度を変えたり、重なり順を変えたり後から調整が可能です。

3.テキストを入力してみる

次にテキストを配置してみましょう。

img05

「テキスト」アイコンをタップして、「見出し」を挿入してみます。

img08

見出しが配置されました。ダミーテキストが入るのは地味に嬉しいですね。
もちろん、テキストボックスをダブルタップすると、入力モードに切り替わり、任意の文章へ変更可能です。

こちらもテキストボックスの幅や、テキストの色、重なり順等を変更可能です。
テキストボックス横にあるメーターを操作すると、フォントサイズを変更することが出来ます。

4.ジェスチャーで色々配置してみる

そして、このアプリで一番楽しいのが「ジェスチャー機能」です!
これまでご紹介したような、メニューからのオブジェクト配置が、手書きで出来るんです!

例えば、複数行のテキストボックスを配置したい場合、下記のように四角と横線を指でなぞります。

img09

すると…

img10

この通り、複数行のテキストボックスが配置されました!
(多少歪んでても汲み取ってくれます。すごい!)

他にもジェスチャーで出来ることがいくつかあります!
メニュー右上の「設定」の「描画ジェスチャーのヘルプ」を選択すると、ジェスチャーの種類を確認することが出来ます。

img18

img19

5.画像を埋め込んでみる

では、今度は画像素材を埋め込んでみましょう。
まずはジェスチャーで画像用のオブジェクトを配置し、次に「グラフィック」ボタンをタップします。

img11

埋め込む画像はデバイス上のものだけでなく、「Adobe Cloud」のアセットデータにアクセスしたり、「Adobe Stock」からカンプデータを選んで挿入することも可能です。
今回は「Adobe Stock」を利用してみます。

img13

任意の単語で検索すると、こんな感じで関連する写真が表示されます。
今回はテストデータなので、ライセンス取得は行わず、プレビュー保存のみにします。

img14

すると、先程配置したオブジェクトに画像が埋め込まれました!

6.データ共有してみる

最後に、作ったデータを共有してみましょう。共有できる形式は以下の通りです。

・InDesign CC
・Photoshop CC
・Illustrator CC
・PDF
・画像

手順はとっても簡単!
メニューの「送る」アイコンから、形式を選択するだけ。

img15

試しに「Photoshop CC」へデータを送ってみました。
同期してあるアカウントのPhotoshopにこんな感じで表示されます!

img16

送られたデータはオブジェクトごとにちゃんとレイヤー分けされているので、
Photoshop上で画像の編集や、配置の微調整なんかが出来ちゃいます。

尚、他のiPhoneやiPadにも「Comp CC」をダウンロードしておくと、同じアカウント内でデータの共有が可能です。

img17

これがあれば、もう清書せずに直接アプリ上でワイヤーを創ることが出来るようになります。
もちろん、後で再考したい場合にはクラウド経由でデータを送って、自分のPCで造りかえることも可能です!

しかも、Adobeアカウントさえあれば、だれでも「無料」で利用できます!

ジェスチャーでアイテムを配置するだけでも楽しいので、
是非ワイヤーフレームや、カンプデータ、モック作成時に活用してみてください!

CONTACT US

株式会社プロフェッサはWEB制作会社です。
ウェブサイト制作やシステム開発など、ウェブに関するご相談は下記よりお気軽にどうぞ


Previous Post

Next Post