その場でワイヤーフレームがつくれる!「Adobe Comp CC」

web

WEBも!チラシも!打ち合わせの効率化アップ!!

comp

こんにちは。

WEBディレクターの青木です。

 

本日は、外出先でどこへでもモックやワイヤーフレームが作れるAdobeツールをご紹介します!

その名も「Adobe Comp CC」

 

よく打ち合わせの際、どんなWEBサイトにしたいのかヒアリングしています。

その時の相棒はMYスケッチブックを使って手書きでかくことが多いです。

 

しかし、実際に手書きだとリアルなサイトイメージがクライアントにも分かりづらく、大体のイメージがまとまったら、

「ワイヤーフレーム作って、後程送ります!」なんてこともしばしば・・・

一度戻って、作って、提出してとなると、効率も悪く、イメージと違うなんて言われることも・・・。

 

そのような非効率を削減するには、一番は「その時に一緒に確認していくこと」

そんな時に便利なのが、「Adobe Comp CC」

 

iPadやiPhoneで簡単にワイヤーフレームを作れて、なおかつWEBモックに当てはめて確認できるので、クライアントの一番理想とするものをお互い確認し合うことができます!

 

それでは、さっそく概要と使い方をご紹介していきます。

 

Adobe Comp CCとは?

・Adobe社から出されている無料アプリ

・直感操作でサクサク快適!

・WEB・スマホサイトだけではなく、チラシや名刺などアナログ用のサイズに合わせることが出来る

iPadやiPhoneでワイヤーフレームやデザインカンプを作ることが出来る

・WEBやスマホサイト用は自動モック対応なので、実際のPC/スマホ画面に当てはめることが出来る

・CCと付いている通り、「Adobe Creative Cloud」製品なので他の「Creative Cloud」ソフト・サービスと連携しているため、連携しているPCに「Photoshop CC」、「InDesign CC」、「Illustrator CC」形式で送ってPCで編集が出来る

・「Adobe Stock」やマイファイルから、画像の入れ込みができ、よりイメージに近づけることが出来る

 

Adobe Comp CCの使い方

▼アプリをインストールし、「Adobe Creative Cloud」のアカウントでログイン後、下記の画面が表示されます。

 

img_0576

 

▼その他の形式を選択すると、ここで用途に合わせたカンバスサイズが選べます!

 

img_0577

 

▼選択したら、真っ白なカンバスが表示されます。

 

img_0578

 

ここで、左上のボタンをご紹介します。

 

▼基本的には、手書き操作で図形等書き込めるのですが、ここから好きな図形を選んで、カンバス内に書き込むことが出来ます。

 

img_0580

 

▼テキスト内容を変えることができます

 

 

 

img_0581

 

 

 

▼画像を読み込むことが出来ます。

 

 

 

img_0582

 

▼作成したカンプやワイヤーをPhotoshopやillustratorに送信したり、自動モックアップを作成できます。

 

img_0583

 

▼グリッドやガイドの設定や単位・カンバスの変更が出来ます。

 

 

img_0584

 

さっそく、作ってみよう!!

 

▼より、リアルなものを作るだめに、お好みでグリットとガイドを設定します。

 

img_0579

▼手書き操作で直感的に作成出来ます。

 

 

img_0578

      ▼

      ▼

      ▼

▼手書き(ジェスチャー)でこのように、作成していきます。

作成方法は、ヒントもありますので、参考にされてください。

img_0585

▼作成した状態がこのようになります。

 

 

img_0588

 

▼よりイメージに近づけるために、画像を入れてみると・・・

 

img_0589

▼このような感じになります。

 

 

img_0590

 

▼さらに、実際にPC画面のイメージが分かるモックで確認することも出来ます。

 

 

 

img_0591

▼クライアントと打ち合わせで完成した、ワイヤーフレームをアカウントで連動されているPCへ送信すると、このように自動的に反映されます。

 

fullsizer

 

 

無料アプリのため、まずはインストールして始めてみませんか?

※使用の際は、「Adobe Creative Cloud」のアカウントが必要です

関連コラム