📌 この記事のポイント

• 最初の1本は、丸が集まる5秒アニメで十分

• 使う操作は位置・イーズアウト・開始のずらしの3つ

• 講師の完成例も、動かしたのは「位置」だけ

• 動かす前に「どう感じてほしいか」を一言書く

• 完成させてから、文字やボタンに広げる

2026年9月23日更新

After Effectsの最初の練習は「丸が集まる5秒アニメ」がちょうどいい

After Effectsの最初の練習は、複数の丸が中央に集まる5秒ほどのアニメーションを1本完成させるのがおすすめです。使う操作は、位置のキーフレーム、イーズアウト、開始時間のずらしの3つだけ。機能を覚えるより先に「動きを作って仕上げる」経験ができます。

この課題は、2026年9月12日に開催したオンラインイベント「NOT DESIGN EXPO」で、モーション講師のカギーさんが実演したワークがもとになっています。お題は「人と人とのつながりを、丸の動きで表現する」。この記事では、その実演を、初めての方が読みながら手を動かせる手順に組み直しました。

完成形と、この課題で身につく3つのこと

この課題の完成形とは、上下左右に離れた丸が、少しずつ時間差をつけて中央へ集まり、柔らかく止まるアニメーションです。講演では「温かさ」「親しみ」「一体感」という印象を目指して作られていました。

操作はこの3つだけですが、組み合わせると「機械的な動き」と「人らしい動き」の違いを体で覚えられます。

準備｜作業する画面と丸を用意する

準備とは、動画の土台になる「コンポジション」と、動かす「シェイプレイヤー」を作ることです。静止画のアートボードに、時間の設定が加わったものと考えると分かりやすいです。

コンポジションの設定例

設定の考え方は、Adobe公式のコンポジションの基本でも確認できます。

丸をひとつ描く

1. レイヤーを何も選択していない状態にする

2. 楕円形ツールで、画面の左側に丸を描く

3. タイムラインに「シェイプレイヤー」ができたことを確認する

レイヤーを選んだまま描くと、図形ではなくマスクが作られることがあります。詳しくはAdobe公式のシェイプとマスクの作成を参照してください。

講演の設定と、この記事の設定の違い

講演でカギーさんが作ったコンポジションは、1080×1080pxの正方形でした。この記事では、パソコンの画面で見やすい1920×1080pxを例にしています。どちらで作っても、この課題で練習することは変わりません。SNSに投稿したい場合は正方形、Webサイトのキービジュアルを想定するなら横長、というように、使う場面に合わせて選んでください。

また、講演の完成例は、紫色の背景に紫系の丸を置いたシンプルな構成でした。色を増やしすぎると動きより色に目が行くので、最初は背景と丸の2色くらいで始めると、動きの違いを見比べやすくなります。

手順1｜位置に2つのキーフレームを打つ

キーフレームとは、ある時点での位置や大きさを記録する印です。始まりと終わりの2つを記録すると、その間の動きをAfter Effectsが自動でつないでくれます。

1. 丸のレイヤーを選び、キーボードの「P」を押して「位置」を表示する

2. 現在時刻を0秒に合わせ、位置の横のストップウォッチをクリックする

3. 現在時刻を1秒に移動する

4. 丸を画面の中央付近へ動かす（2つ目のキーフレームが自動で入る）

5. スペースキーで再生して、丸が移動するか確かめる

キーフレームの間隔を短くすると速く、長くするとゆっくり動きます。0.5秒と2秒で比べると違いがよく分かります。操作の詳細はAdobe公式のキーフレームの設定にまとまっています。

手順2｜イーズアウトで「止まり方」を整える

イーズアウトとは、最初が速く、止まる直前にゆっくりになる動きのことです。一定の速さで動いてピタッと止まる「リニア」に比べて、柔らかく自然な印象になります。

1. 位置のキーフレームを2つとも選ぶ

2. 右クリックから「キーフレーム補助」→「イージーイーズ」を選ぶ

3. 「グラフエディター」を開き、速度グラフで止まる直前が下がっているか見る

4. 再生して、到着の直前にゆっくりになったか確かめる

カギーさんは講演で、速度グラフを見せながら「集まる直前で遅くなる」形に調整していました。細かなグラフ操作はまだ覚えなくて大丈夫です。止まる直前がゆっくりになっているかだけを見てください。速度の調整については、NOTのキーフレームとイージングの教科書でも詳しく解説しています。

手順3｜丸を増やして、開始をずらす

開始をずらすとは、複製した丸の動き始めを、少しずつ遅らせることです。全部の丸が同時に集まると機械的に見えますが、時間差をつけると人らしいまとまりが出ます。

1. 丸のレイヤーを選び、複製（Mac：command＋D／Windows：Ctrl＋D）する

2. 複製した丸の開始位置を、上・右・下など別の場所に変える（0秒の時点で動かす）

3. 到着位置も少しずつずらして、丸が並ぶようにする

4. 2つ目、3つ目のレイヤーバーを、タイムライン上で少し右へずらす

講演では、次の丸を0.5秒後、その次を0.7秒後に動かす例が挙がっていました。間隔を均等にしないことで、揃いすぎない自然さが出ます。

うまく動かない時は、1つ前の手順に戻る

途中でうまく動かなくなったら、無理に先へ進まず、1つ前の手順に戻るのがおすすめです。例えば、丸を複製した後に動きがおかしくなったら、複製する前の1つの丸で、位置とイーズアウトが正しく設定できているかを確認します。1つの丸がきちんと動いていれば、複製した丸も同じように動きます。

講師の完成例も、動かしたのは「位置」だけ

カギーさんの完成例で使ったのは、位置のパラメーターだけでした。After Effectsの基本的な動きは、位置・スケール・回転・不透明度の組み合わせで作りますが、この課題では位置にイージングをつけ、開始をずらしただけです。

さらに細かな工夫として、紫系でまとめた丸の色を少しずつ変え、人らしさを出していました。

完成したら、「ファイル」→「書き出し」→「Adobe Media Encoderキューに追加」でMP4に書き出せます。書き出しの手順はAdobe公式のレンダリングと書き出しの基本を確認してください。

完成したら試したい3つの比べ方

比べ方とは、同じ丸の動きで設定を1か所だけ変え、印象の違いを確かめる練習です。1本完成させた後にこの比較をすると、なぜその設定にしたのかを自分の言葉で説明できるようになります。

比べる時は、2つのコンポジションを並べて再生するか、動画に書き出して見比べると分かりやすくなります。カギーさんの講演でも、同時に集まる動きは機械的に見えるので、少しずつずらして人らしさを出した、と説明していました。

動かす前に書く「1行メモ」

講演では、ソフトを開く前に約5分かけて表を埋めていました。初めての方は、次の1行だけでも書いてから手を動かしてみてください。

「（見た人にどう感じてほしいか）」ので、「（どう動かすか）」にする。
例：温かく、仲間が集まる感じにしたいので、離れた丸がゆっくり中央に集まるようにする。

この1行があると、完成した後に「なぜこの動きなのか」を説明しやすくなります。

書き出す前のチェックリスト

• 丸が画面の外にはみ出していないか

• 最後に集まった状態が、1秒ほど落ち着いて見られるか

• 動き始めの間隔が、空きすぎていないか

• 5秒の中で、動きが終わってから止まっている時間が長すぎないか

• 1行メモに書いた印象になっているか

限界と注意点

• 講演の設定値は例です。 0.5秒後・0.7秒後といった数値は正解ではなく、印象を比べるための目安です

• After Effectsは有料のソフトです。 2026年9月時点で、単体プランは年間プラン（月々払い）で月額3,280円（税込）、月々プランで月額4,980円（税込）です。最新の料金はAdobe公式のプラン比較で確認してください

• 書き出しの操作は講演では実演されていません。 この記事の書き出し手順は、Adobe公式ヘルプをもとに補っています

• Figmaで試す方法もあります。 カギーさんは、After Effectsが難しければFigmaのモーション機能で試してもよいと話していました。違いはFigma MotionとAfter Effectsの違いを参考にしてください

After Effectsの練習についてよくある質問

この課題はどのくらいの時間でできますか？

講演では、考える時間に約5分、制作に約10分を使っていました。初めての方でも、準備を含めて30分〜1時間ほどが目安です。

丸はいくつ用意すればいいですか？

3〜4個がおすすめです。多すぎると調整に時間がかかるので、まずは少ない数で「ずらす」効果を確かめてください。

Figmaでも同じ練習はできますか？

できます。カギーさんも、After Effectsが初めてならFigmaのモーション機能でもよいと話していました。キーフレームとイージングの考え方は共通です。

次に何を練習すればいいですか？

同じ操作を、文字や矢印に使ってみるのがおすすめです。見出しを登場させる、ボタンの矢印を動かすなど、普段のデザインにつながる題材を選ぶと続けやすくなります。

After Effectsを持っていなくても練習できますか？

Adobeの体験版を使う方法や、Figmaのモーション機能で同じ考え方を試す方法があります。体験版の条件は変わることがあるため、使う前にAdobe公式サイトで確認してください。

完成したアニメーションは、どこで使えますか？

SNSへの投稿や、ポートフォリオの作品として使えます。Webサイトで使う場合は、MP4で書き出して埋め込むか、動きの見本としてエンジニアに渡す方法があります。