海外サイト Medium で公開された 7 little tricks to achieve the best results in UI animation by Johny Vino より許可をもらい、翻訳転載しています。
アイデアをカタチにするツールはたくさんありますが、個人的に最高のアニメーションツールは引き続きAfter Effectsと言えるでしょう。ただし、利用できるプラグインが多すぎて、どれを使って良いのか迷ってしまうのが悩みどころ。
今回は、現役デザイナーがウェブサイトやアプリのアニメーション作成で実践しているプラグインやツールを、7つのシンプルな手順を追ってご紹介します。このガイドラインでは、デザイナーとデベロッパーが一緒にプロジェクトを進める効果的な方法をマスターできます。
No.1 SketchかFigmaでデザイン開始
- レイヤーにきちんと名前を付けているか確認しましょう。After Effectsに取り込んでしまうと、レイヤーを見つけるのが難しくなってしまいます。
- AEUXプラグインを利用することで、SketchまたはFigmaで作成したレイヤーをAfter Effectsにボタンひとつでエクスポートできます。
詳しい使い方については、以下の動画を参考にどうぞ。SketchとFigmaで作成したレイヤーをAEに手軽にエクスポートできるツール。
No.2 ファイルをAfter Effectsにインポートする
- AEUXプラグインをダウンロードし、「Build Comp」ボタンをクリックすると、全てのレイヤーがAfter Effectsにコピーされます。
- After Effects用プラグインのインストールには、ZXPインストーラーが必要となるので、事前にインストールを済ませておきましょう。
After EffectsやPremiere Proの拡張プラグインをインストールできる無料ツール。
No.3 プラグインをダウンロードし、ワークスペース用にデザインを開始する
先述の通り、After Effectsには強力な機能が豊富にありますが、UIアニメーションを実行するのに必要なものは2つのみです。レイアウトに関しては、以下は、制作スピードをあげる効果的な時短ツールです。
Flow （$30およそ3,300円）
After Effects上でアニメーションのカーブ曲線を自由に操ることができるツールで、インストールすることで独自のインターフェースパネルがAfter Effectsに追加されます。
Bodymovin（$20およそ2,200円）
After Effectsで作成したアニメーションをウェブ用に.jsonファイルとしてエクスポートできるツール。
Motion 3（$65およそ7,000円）
After Effectsにおける高品質なモーショングラフィックの作成ツールとして、世界中のプロフェッショナルが利用しています。35種類を超えるパワフルなツールと、数百のコントロールがを実現します。
After Effecsのキーフレームのペアをいくつか選択し、ボタンをクリックすることで、文字テキストを書き出し、レンダリング可能な青いサイドパネルを生成します。
No.4 滑らかな遷移アニメーションを作成する
これですべてのプラグインを使用する環境が整い、アニメーションの完成です。ここからがアニメーションの本番です。
- グラフィックアイコンをクリックすると、複雑になりすぎてグラフチャート図をカスタマイズできなくなります。ここはプラグインの利用が役立ちます。
- Flowプラグインは、グラフに直接触ることなくアニメーション曲線カーブを見事に描くことができる、シンプルなインターフェースが提供されています。
- Animation Composerプラグインのキーフレームを利用すれば、アニメーションを楽に作成できます。
あらかじめモーショングラフィック用のプリセットが揃っているので、お好みのプリセットをクリックし、文字テキストや画像、配色などを編集するだけで、美しいアニメーションを実現できるAfter Effects用プラグイン。
No.5 デベロッパー向けにアニメーションをエクスポートする
Airbnbが開発したアニメーションプラグインLottieを利用することで、デベロッパーは時間をあまり費やすことなく、手軽にアニメーションを作成することができます。
ウェブサイトやアプリに高品質なアニメーションを簡単い追加できるツール。After Effectsアニメーションをリアルタイムでレンダリングし、画像ファイルを扱うように手軽にアニメーションを使用できます。
- Settingをクリックし、デモファイルを追加する
- 出力先フォルダを選択肢、レンダリングを開始する
- 完了したらAfter Effectsでプレビューする
No.6 プレビューして共有する
完成したアニメーションをプレビューしたり、チームやクライアントと共有したいときは、LottieFilesツールにアップロードしましょう。モバイルテスト用にQRコードをスキャンし、プレビューすることも可能です。
Lottieでレンダリングした.jsonファイルをドラッグ＆ドロップすることで、プレビューやシェア用リンクを作成できます。
No. 6 UIインタラクション用の数値をエクスポートする
ここでは、Inspector Spacetimeプラグインを使用すると良いでしょう。Androidなどのアプリ向けにインタラクション値を自動的に作成できます。
- まず、キーフレームを1つないし複数選択します。
- ピクセルモードを選択します。
- エクスポートボタンをクリックすると、テキストとJSONファイルの両方が取得されます。
After EffectsでアニメーションGIFをボタンクリックひとつで作成できるプラグイン。
いかがでしたでしょう。本格的な5Gの普及が予想される２０２０年は、さらにアニメーションの可能性そして必要性がさらに高まっていくのではないでしょうか。正しいアニメーションの作成方法を学び、実践の現場に取り入れてみてはいかがでしょう。
参照元リンク : 7 little tricks to achieve the best results in UI animation by Johny Vino – Medium
