Adobe Creative Cloudユーザー必見!Cacooとの連携で加速するデザインワークフローとは?

仕様やUI(画面)は現行バージョンと異なる可能性があります。
Cacooの最新版についてはこちらからご確認ください。

Cacooユーザーの方はご存知のとおり、Cacooは誰でも簡単にきれいな作図ができるオンラインのドローイングツールです。

Webサイトやモバイルアプリなどに利用される、製品レベルのグラフィックスを制作されているデザイナーの方でも、その前段階のワイヤーフレームやモックアップの制作段階でCacooを使い、レビューやフィードバックなどのチーム内のコラボレーションに活用している方はたくさんいます。

Cacooはだれでも直感的に使える簡便さを強みにしていますが、その反面、製品レベルの最終的なグラフィックスを制作するのには向いていません。グラフィックスの制作では、多くのデザイナーの方がAdobe社の製品を利用されていると思います。

今回の記事で紹介するの「CacooのAdobe Creative Cloud(以下、Adobe CC)連携機能」です。製品レベルのグラフィックスをチームで制作しているデザイナーの方にぜひ活用してほしい機能のひとつです。

※この記事は、Adobe CCをすでに利用されていることが前提となります。Adobe CCの利用については、Adobe社のサービスの説明などを参考にしてください。

Adobe CC連携機能の紹介

CacooのAdobe CC連携機能は、Cacooのどのプランでもご利用いただけます。

Adobe CC連携機能を使うと、Adobe CCにアップロードされたファイル(アセット)を画像としてCacooエディターに取り込めます。ここで重要なのが『ファイルをPNGなどに保存しなおす必要が全くない』ということです。

つまり、Adobe IllustratorやAdobe PhotoshopなどのAdobe社のツールで制作されたグラフィックスを、変換などの手間をかけずに直接Cacooに取り込むことができます。

以下では、Adobe CCのアセットをCacooに取り込む際の手順をご紹介します。

Adobe CCからのアセットの取り込み

  1. 編集画面上のツールバーで、画像挿入アイコンの右のメニューを開き、[Adobe Creative Cloud Assets から画像を挿入]を選びます。

    Adobe CCメニューAdobe CCメニュー

  2. ポップアップが表示されます。Adobe CCにログインしていない状態では、最初にAdobe CCへログインする必要があります。

    Adobe CCログインAdobe CCログイン

  3. Adobe CCへログイン後、Adobe CCのアセット(ファイル)ブラウザーが開きます。この中から、Cacooに取り込みたいアセットを選択します。取り込むアセットを選択したら、[Open]をクリックします。

    Adobe CCアセットAdobe CCアセット

  4. Cacooのエディタに、選択したアセットが画像として取り込まれます。

    エディターへの取り込みエディターへの取り込み

このように、Adobe CC連携機能を利用することで、とても簡単にCacooにAdobe社のツールのファイルから画像を取り込むことができます。

なお、アセットはひとつのビットマップ画像として取り込まれます。Cacoo上で、もとのファイルにあっとレイヤーやシェイプなどの要素で分解することはできません。もとのファイルを修正するには、それぞれのAdobe社のツールを利用してください。

 

Adobe CCとCacooを連携してみる

 

Adobe CC連携機能の活用例

チーム内コラボレーションでの利用

チーム内でグラフィックス制作をしている場合、おそらくはグラフィックスを制作しただけでは完了ではなく、ディレクターやクライアントへのレビューやフィードバック、開発メンバーへの共有などのワークフローが必要になると思います。

CacooのAdobe CC連携機能を使えば、Adobe社のツールで制作した成果物を共有することができ、誰でも簡単にコメントや修正依頼の書き込みをCacoo上で行うことができます

共有する相手は、Adobe社のツールはもちろんのこと特別なソフトウェアをインストールする必要もありません

さらに、Cacooはグラフィックスソフトウェアの特別なスキルがなくても利用できます。例え、相手がグラフィックツールに慣れていないとしても、あなたが制作したグラフィックスを使ったコラボレーションワークをすぐにできます。

簡易モックアップとしての利用

以前の記事で紹介したリンク機能を使うと、Cacooの図を簡易的なモックアップとして利用することもできます。

例えば、Adobe社のツールで制作したアプリの画面デザインを取り込み、画面遷移が発生する箇所に要素を配置し、それにリンクを設定することで、画面遷移を再現した簡易的なアプリモックアップを作ることもできます。


今回は、Adobe社のツールを使ってグラフィックスの制作をしているデザイナーの方を対象に、Adobe CC連携機能を使ったCacooの活用方法をご紹介しました。

Adobe社のツールもCacooも両方を使っているけれど、この連携機能を利用したことが無かった方はぜひ一度お試しください!

 

Adobe CCとCacooでコラボレーションワークをする

 

チームのアイデアを、いつでもどこからでも視覚的に共有しよう