アプリやwebサービスをデザインしていてAfter Effectを触る必要に迫られることが多くなってきたので、ここ数日で、海外ソース含め、UI向けのアニメーションの引き出しを増やすのに役立ちそうな方法・ソースをまとめました。
自分自身初学者なので最適な方法をみんなで模索していけたら幸いです。
SketchやPhotoshop, Illustratorは使い慣れてるけど映像系ツールはあまり使い慣れてない…という方が一番の対象です。
After Effectと友達になる（初級）
レイヤーの種類や操作方法、コンポジションの使い方、ファイル出力の仕方など、基本的な操作を覚える段階では、初心者向けのチュートリアルを一通りやると良さそうです。自分が気に入って、やり切れそうな分量のものならなんでも良さそうです。
AfterEffectsStyleは日本語で体系的にまとまっててとっつきやすいのと、School of MotionはUIデザイナーの視点に立って作られたチュートリアルなので、イラレ/Sketchのデータを読み込んだり、スマホ規格に動画を書き出す方法など、UIデザイナからするとグッとくる内容が厚めに取り上げられています。
引き出しを増やす（中級）
Youtubeに転がってるチュートリアルを見て（5~15分）、学んだネタを元に自分で一個習作を作ってみる（1時間）を繰り返すのが一番勉強になってます。以下、探して見てよかったチュートリアルです
Workbenchシリーズ
一つ5分程度で終わる & UIデザイナ向けのマイクロインタラクションネタがほとんどなので、一番おすすめで続けやすいです。ExpressionやPluginをガシガシ使ってきます。最近の投稿にはAEファイルも付いてます
Summitシリーズ
これもUIデザイナ向けのマイクロインタラクションネタが多いチュートリアルです。時間が長めですが、手取り足取り教えてくれます
名作をトレースする
UIトレースが流行っていますが、マイクロインタラクションを作る上でもトレースは有効そうです。
特に最初のうちはフレームレートに対する感覚がなかったりするので、キーフレームを打つタイミングを真似してみるだけでもとても勉強になります
AEファイルを公開してるプロジェクトはあまりないので、Dribbbleで自分が気に入った作品のgifをAEに落としてきて、なぞったりするといいと思います
ショートカットは早めに覚える
新しいツール覚えるときは、チートシートとかあったらすぐ印刷して机に貼ってしまう派です☺️
初心者だからこそ、ショートカットキーは覚えておくと時間の節約になります。「ショートカットキーがある＝よく使われる機能」な訳で、効率の良い操作方法を身体で覚えることができてお得です。
この辺りの記事が参考になります。
役立ちそうなプラグイン
最後に入れてみてよかったプラグインをいくつか
Flow
Ease-in, Ease-outのようなアニメーションカーブを、ボタン一つで幾つものレイヤーに適用できるようになります。
Sketch2AE
Google製。Sketchのレイヤーデータを一発でAEに持ってくることができます
Explode Shape Layers
https://aescripts.com/explode-shape-layers/
シェイプレイヤーをイラレのように簡単に作成することができます。AEはシェイプの作成がしずらかったりするので、入れておくと便利です。
