デザイン業務でクライアントとやり取りをし、どのようなデザインにするのか共有した上で制作に着手しているデザイナーは少なくありません。

この場合に、ミーティングでどのようなデザインイメージにするのかを話し合い実際に制作をしていざ納品をした後で、クライアントから「イメージと違うからやり直してほしい」とい言われた経験はありませんか？

時間を設けてミーティングを行って、数日〜数週間、時には数ヶ月かけて制作したデザインを「やり直し」と言われてしまうと、時間やコストが無駄になるだけではなく自分のモチベーションも下がってしまいかねません。

今回は、このようなトラブルを回避するためにオススメの「Adobe Comp CC」の使用方法をご紹介します。

スマートフォンやタブレット端末上でも使用できるため、外出先でも気軽にワイヤーフレームを作成することが可能です。

Adobe Comp CCとは

1.png
App Store
Google Play

Adobe Comp CCとは、iPadやiPhoneなどのモバイル上でワイヤーフレームやカンプなどを簡単に作成することができるツールです。
Adobe Creative Cloudのツールですので、Adobe StockやPhotoshop、Illustratorなどのツールと連携して使用することができます。

簡単なジェスチャーで画像やテキストなどを配置することができるため、例えば出退勤時や営業先など、パソコンを使用することができない場合でもワイヤーフレームを作成することができます。

クライアント先で打ち合わせをしながら、その場でワイヤーフレームを簡単に作成することもできます。実際にホームページなどを作成して納品した後に「イメージしていたものと違う」というリスクを減らすことができます。

Adobe Comp CCを使いこなす方法

step1.

2.png
ここでは、スマートフォン上で新規カンプを作成する方法をご紹介します。

まずアプリを起動したら、新規登録またはログインをしてください。

PhotoshopやIllustratorなどのツールと連携して使用できるので、Adobe Creative Cloudのアカウントでログインすることをオススメします。

step2.

3.png
「新しいデザインを開始します」という画面が表示されますので、作りたい形式を選択します。

step3.

4.png
カンプの作成画面が表示されます。
まずガイド線を引くため、画面右上の歯車アイコンをタップしてください。

step4.

5.png
メニューが表示されますので「グリッドとガイド」をタップします。

step5.

6.png
ピンク色に変化している範囲がガイド線の内側となりますので、好みのサイズに設定し「完了」をタップします。

step6.

7.png
続いて、ヘッダーや画像、テキストなどを配置する位置を決めます。
画面上で指で適当に線を引くと自動で四角のオブジェクトに変化しますので、ある程度の位置・大きさを描画してください。

なお、画像を配置する場合は四角を描画したら中にバツ印を、テキストを配置する場合は中に3本のラインを引きます。

step7.

大まかなワイヤーフレームができたら、装飾を行ってよりイメージを共有しやすいように整えます。
画像の入れ込み、テキストの置換やフォントサイズ、カラーの変換など、各種装飾も簡単に行うことができるため、実際のデザインに非常に近いものに仕上げることが可能です。

8.png
オブジェクトに変化した部分は、画面下のメニューをタップするとCreative Cloud内に保存されている写真や画像に置き換えたり、フォントやカラーを変更したり、複製や削除も可能です。

画像を置き換える場合は、まず画像のオブジェクトをタップします。
すると画面下のメニューが画像用に変化します。

メニューの一番左をタップすると、デバイス内に保存されている写真や画像から置換する画像を選択できるほか、デバイス上で直接写真を撮影したりAdobe Stockからサンプル画像を選択したりなども可能です。

step8.

9.png
テキストを編集する場合は、まずオブジェクトをタップします。

するとオブジェクト横に縦のスライドバーが表示されますので、上下にスワイプしてフォントサイズを調節してください。

同時に画面下のメニューがテキスト用に変化しますので、フォントカラーを変更したりフォントを変更したりもできます。

テキストはサンプル内容が表示されていますが、オブジェクトをダブルタップすると書き換えることもできます。

step9.

10.png
作成が終わったら、画面上部の共有アイコンをタップしてください。
PhotoshopやIllustrator、PDF、画像として送信することができるほか、リンクを作成して共有することも可能です。