「イメージと違うからやり直し！」を防ぐ「Adobe Comp CC」の使い方

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

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

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

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

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

Adobe Comp CCとは

App Store
Google Play

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

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

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

Adobe Comp CCを使いこなす方法

step1.

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

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

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

step2.

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

step3.

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

step4.

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

step5.

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

step6.

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

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

step7.

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

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

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

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

step8.

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

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

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

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

step9.

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

まとめ

「Adobe Comp CC」を使用すれば、デザイナーとクライアントの間で認識が異なることで発生する無駄な時間やコストなどが発生する心配がありません。

また、ミーティングの段階でデザインのおおまかな部分をすり合わせることができれば、実際に制作を行う際もスムーズに作業を進めることができます。

さらに、ノンデザイナーの方でも直感的に使用することができるツールですのでデザイナーにイメージを共有する際にも重宝するでしょう。