SketchやFigmaは非常に使い勝手に優れたUIデザインツールで、普段の業務で使っている人も多いのではないでしょうか。
しかし、SketchもFigmaもアニメーションデザインは得意としていないので、アニメーションのデザインは他のツールを使用していたり、そもそもアニメーションデザインまでできていないというケースはたくさんあります。
そんな方におすすめなのが、AEUXです。AEUXを使えば、SketchやFigmaで作ったデザインを簡単にAfter Effectsにエクスポートしてアニメーションデザインを作ることができます。
今回は、AEUXとはどんなツールなのか、AEUXのメリットや使い方などをご紹介したいと思います。
INDEX
AEUXとは？
AEUXとは、SketchやFigmaのデザインデータをAfter Effectsにエクスポートできるオープンソースソフトウェアです。
最近ではアニメーションなども作ることができるプロトタイピングツールが注目を集めていますが、新しいツールを取り入れることは金銭面と学習面のコストがかかってしまいます。
Adobe XDならAfter Effectsにデータをエクスポートすることが可能ですが、SketchやFigmaを使っている人がすべてのデザインデータをXDに乗り換えるのはあまり簡単なことではありません。
しかし、AEUXを使えばSketchやFigmaで作ったデザインデータをレイヤーや画像を保持したままAfter Effectsにエクスポートすることができるため、よりシームレスなワークフローを作り上げることができます。
AEUXを使うメリット
まだAEUXの素晴らしさがピンと来ない方のために、AEUXを使うメリットをご紹介します。
細かなオプションを指定できる
SketchやFigmaからAfter Effectsにデータをエクスポートする時に、新しいコンポジションとしてエクスポートするか、現在のコンポジションにエクスポートするか選択することができます。
ちょっとした修正であれば現在のコンポジションにエクスポート、新しい画面は新しいコンポジションとしてエクスポートするなど、状況によって使い分けることができますね。
エクスポートする際に、Sketchにおけるグループをプリコンポーズしてエクスポートすることができるので、複雑なデザインデータも階層化して管理することができます。
また、解像度などもワンクリックで指定することができ、細かい所まで手が行き届いているツールに仕上がっています。
動的なデザインの重要性
アプリやWebは、インタラクティブに動作することの重要性がより高まってきています。
滑らかな使い心地や、直感的なUIはユーザーにプロダクトを気に入ってもらうための重要な要素となり、デジタルプロダクトのデザインにおいて欠かせない存在となっています。
アニメーションを伴うちょっとしたマイクロインタラクションのデザインなど、細かな使いやすさがプロダクトの人気に与える影響は馬鹿にできません。
Sketchではアニメーションを伴うデザインを制作することができないので、Sketchで作ったデザインデータをそのまま使ってAfter Effectsでアニメーションデザインを行えるのは非常に魅力的です。
レイヤーを保持してエクスポートできる
AEUXを使わなくても、それぞれのパーツをエクスポートしてAfter Effectsで読み込めばアニメーションを作ることは可能です。
しかし、レイヤーを保持してエクスポートできることがAEUXを利用する最大のメリットとなります。
AEUXでエクスポートすると、レイヤーの配置されている座標の情報も記録されているので、わずか数クリックでSketchのデザインデータをAfter Effects上に移動させることができます。
Sketchでデザインを作り、After Effectsでアニメーションを作ることによって、それぞれ最適なツールを使ってデザインを制作することができ、作業効率を大幅にアップすることができるでしょう。
無料で利用できる
AEUXはオープンソースソフトウェアなので、すべて無料で利用することができます。
デザインツールは1つ1つがそれなりの料金がかかってしまうので、手軽に有料ツールを増やすのはなかなか難しいという方も多いでしょう。
アップデートも頻繁に行われているので、今後利用できるツールの種類が増えたり、機能も増えていくと思われるので、「ちょっと使ってみる」という使い方が簡単にできるのは無料ソフトウェアならではのメリットでしょう。
After Effectsは使いやすい
アニメーションデザインのためのツールは様々ありますが、長い年月をかけてアップデートされてきたAfter Effectsは他のツールと比べてもかなり使いやすいです。
After Effectsを使ったことがある人であれば、UIデザインのアニメーションくらいすぐに作れてしまうでしょう。さらに、複雑なアニメーション制作であっても、それこそAfter Effectsが真価を発揮する場面です。
After EffectsはCreative Cloudのコンプリートプランに登録している人であれば無料で使うことができるので、使ったことが無い方も一度触ってみてみることをおすすめします。
Sketchからエクスポートする
SketchからAfter Effectsへデータをエクスポートする方法は、下記の動画で紹介されています。わずか数クリックでAfter Effects上にデータをエクスポートすることができていますね。
Figmaからエクスポートする
FigmaからAfter Effectsへデータをエクスポートする方法は、下記の動画で紹介されています。Figmaの場合は、URLをコピペすることでデータを出力し、After Effectsへ取り込みできるようになっています。
まとめ
最近では、動的なプロトタイプが作れるツールがたくさん登場してきていますが、下記のようなデメリットで導入に踏み切れていないケースも多いと思います。
- ツールの料金が高い
- 操作方法を覚えるのが大変
- イマイチ機能が足りていない
After Effectsであれば、一度使ったことも多く、操作方法もAdobe製品を使った事がある人であれば比較的スムーズに使いこなすことができます。さらに、After Effectsは動画制作ツールの中でもとても人気が高く、機能性も非常に優れたツールなので、機能が足りないという悩みはほとんど生まれないでしょう。
普段UIデザインを制作している方も、ぜひAfter Effectsを使ってちょっとしたアニメーションのデザインを作ってみてください。
