• Subscribe to RSS

CCクラウドとXDの活用で、ワークフローがグッと向上!【#AdobeMAXJapan 2019レポート】

2019.12.07

いわせ

アシスタントアートディレクターの岩瀬です。Adobe MAX Japan 2019に行ってきました!MAXの目玉の1つは何といっても「セッション」ですが、今回はその中から、「案件に合わせてツールを自在に組み合わせ Xd+PS+Ai 最新ワークフロー」のレポートをお伝えします!

デザイナーが活躍するワークフロー

登壇者はcrema designの「黒野明子」さん!
具体的な事例と共に、最適なワークフローを紹介してくださいました。
今回の連携の「かなめ」はCCクラウドとXD!

th_20191203_165056.jpg th_20191203_174127.jpg

CCクラウドが大幅進化!

黒野さんはセッション冒頭で「昨年もこのセミナーにきてくださった方ー?」と質問されたのですが(数人手を挙げた)、理由が「全体の概要があまり変わってなかったから」だそうです。

けれど、声を大きくして話されていたのは、昨年のMAXから比べると、XDとPhotoshop・Illustratorの間でCCライブラリの互換性が大幅に進化して、ツール間のデータの互換性がアップしているらしいのです。

つまり…!「どのツールで作業を開始しても、別のツールに引き継ぎしやすくなってきた!!」と力説され、今回のセッションでアップデートされているとのこと。

個人的にとても嬉しいのは、XDのCCライブラリがフォルダ分けを認識してくれるようになったことですね。以前はPhotoshopなど、別のソフトで設定されていても無視されてしまっていたので使い勝手がすごく悪かったんですよね…。

th_20191203_165235.jpg th_20191203_165356.jpg

ケース1:各所→デザイナー

WEB制作に限らず、デザインには色々な人たちが関わるもの。そして使用ツールも様々です。CCライブラリを使うとやりとりが楽になるだけではなく、全員が最新バージョンのデータを使用できますね。あと、場所が集約されるので迷いません。大量のファイルが集約された時に動作が重くなるイメージがありますが、それも少しずつ改善されていくんだと思います。

th_20191203_165609.jpg th_20191203_165625.jpg

例えば…イラストレーター、カメラマン → デザイナー

IllustratorやPhotoshopからCCライブラリにアップロードしてもらえればOK。まだFrescoから直接CCライブラリへのアップができないらしく、この場合は一度Photoshopを経由すると良いとのことでした。

Frescoのファイルは自動的にCCクラウドにアップされるので、何か特別な操作は必要なさそうです。そのうちFrescoから直接CCライブラリへアップできるようになるんでしょうか。
詳しくはAdobeのヘルプページへ。。。
https://helpx.adobe.com/jp/fresco/using/fresco-and-photoshop.html

th_20191203_171244.jpg

ケース2:デザイナー→各所

CCクラウドに素材が集約されていればみんなが同じ情報にアクセスできますが、次のケースの場合はどうしたらいいでしょうか。

会社の方針でクラウドが使えない場合

ライブラリをPhotoshopかIllustratorから書き出して直接渡すというフローがあるそうです。CCライブラリタブから「.cclibs」を書き出し、メールやUSBメモリなどに保存して相手に渡し、取り込んでもらいます。

クラウドが使えない、って結構辛い!と思って聞いていました。CCクラウドが実装された頃は動作が不安定でしたが、いつの間にかなくてはならない機能になっていました。。。書き出しの操作方法は、例によってAdobeのヘルプが詳しいです。「Creative Cloud ライブラリの操作」の「ライブラリの書き出しまたは読み込み」
https://helpx.adobe.com/jp/creative-cloud/help/libraries.html

th_20191203_172413.jpg

相手がMicrosoft Officeをメインで使用している場合

CCライブラリはMicrosoft Officeからも参照できます!相手にプラグインをいれてもらいましょう。
https://helpx.adobe.com/jp/creative-cloud/help/libraries-addin-microsoft-office.html

th_20191203_172549.jpg

XDが活躍するとき

XDはみんなで作っていくツール、PhotoshopやIllustratorは自分が集中して作り込むことに特化したツールだと黒野さん。XDは点をつなげていくような役割なんですね。

XDは基本無料で、誰でも使える。WindowsでもMacでも使えるので、導入の敷居が低いです。そして色々なプラグインも用意されています。

th_20191203_165511.jpg th_20191203_165741.jpg

UIキットを活用しよう。

例えば、ディレクターの人にワイヤーフレームをXDで作ってもらうのはどうでしょう。テンプレート(UIキット)がたくさん配布されているので、それをベースにサクッと作れる。そして、出来上がったワイヤーをクラウド経由でデザイナーに共有すればいいので楽!

Wires jp 2.0
https://www.behance.net/gallery/67284971/Wires-jp
th_20191203_165811.jpg

例えばこんな時は?

テキスト修正の手間を減らしたい!

スプレッドシートから情報を参照できるプラグインを使えば、コピーライターが何度もテキストを変更してくるケースにも対応しやすくなります。コピーライターと相談して、スプレッドシートを更新してもらえるようにすれば修正が簡単に!

使用したプラグイン
Google Sheets for AdobeXd
https://googlesheetsforadobexd.impekable.com/

これは同じ社内でも使えるなと思いました。テキストでチャットしてもらって貼り付け…じゃなくて、指定したGoogle Sheetsを更新してもらえばいいだけなので、とても楽!

th_20191203_170052.jpg

過去のデザイン資産を再利用したい

XDで.aiと.psdの編集ができます!直接読み込んで、必要なファイルをコンポーネントに登録すると再利用がしやすいですね。ただ、フォントがうまく読み込めないので、適宜置き換えをする必要があるようです。

無責任なコメントですが、フォントエラーなく読み込めるようになるといいなぁ。。。過去のデザインだとどうしても発生してしまうと思うのですが。。

スタイルガイドをドキュメント化したい

zeroheightというプラグインをXDで使用すると、簡単にスタイルガイドを作ることができます。
https://zeroheight.com/

画面の流れを検討したい

XD標準機能でもプロトタイプは作成できるのですが、Overflowというツールを使用すると、遷移図が楽に作れます。その遷移に名前をつけることもできます。こちらは標準機能とは違った感触がありそうなので、使い分けたいですね。
https://overflow.io/

th_20191203_173847.jpg

XDの得意なこと、不得意なこと

Xdはカラーマネジメントができない!という盲点があります。その分、ブラウザ経由で素材を送ることができたり、SVGが圧倒的扱いやすいといった強みがあります。他のツール、たとえばカラーマネジメントのできるPhotoshopと組み合わせることで、最適なアウトプットが提供できるようにフローを整えるのも大切です。なんでもXdで完結すればいいというわけではない!

XDがカラーマネジメントできないというのを知らなかったので、驚きました。動作速度を大切にしているXDらしい割り切り方だなぁと思いました。

感想

色々な人が共創するときに、「共通の作業場=CCクラウド」がどれだけ効果的かと、それを「仲介できるツール=XD」の親和性を再認識しました。また、普段作業していると忘れがちな「実際に使用するシーンを想定した見せ方をするのが効果的だよね」というのをXDだとどう再現できるのか、といった一歩先の表現方法も印象的でした!

関連リンク

こちらに当日使用されたスライドがアップされていました!
https://twitter.com/crema/status/1201797210708426753