【After Effects】古い映画風カウントダウンアニメーション作成方法

2025年7月5日

After Effectsで古い映画風カウントダウンアニメーションの作成方法は以下の通りです。この手順を見ても具体的にどうしたらよいかわからない方がいるかもしれません。その場合は、画像付きで説明している当記事を最後までご確認ください。

背景用平面レイヤーの作成
2つの円形シェイプレイヤーの作成
ペンツールで十字線を描く
1. ペンツールを使って、画面中央から上側に垂直に画面外まで伸びる線を描く
2. 線レイヤーにリピーターを追加
3. リピーターのプロパティで、コピー数を4, 位置を0.0, 0.0, 回転を0 x+90.0°に変更
カウントダウン用アニメーションの作成
1. 秒数が表示された1秒間のテキストレイヤーの作成
2. 1秒後に1秒間だけ表示される1秒カウントダウンしたテキストレイヤーの作成
3. 2 をカウントダウンが終わる 0 まで繰り返す
ワイプ用アニメーションの作成
1. 長方形レイヤーを作成し、レイヤーパネルの一番上に配置
2. 長方形レイヤーの不透明度を低くする
3. 長方形レイヤーにエフェクト: 放射状ワイプを適用
4. アニメーションの開始時点に移動し、トランジションにキーフレームを打つ
5. 1秒後に移動し、トランジションを 100% にする
6. その1f後に移動し、トランジションを0%にし、その1秒後にトランジションを 100% にする
7. 8をカウントダウンが終わる 0 まで繰り返す

まず、コンポジションと同じサイズの平面レイヤーを作成してください。この平面レイヤーは背景用です。この記事では以下のようにコンポジションを作成しています。

幅 (Width)	1080 px
高さ (Height)	1920 px
フレームレート (Frame rate)	30 fps
デュレーション (Duration)	0:00:05:00 (5秒)

ここでは省略していますが、背景用平面レイヤーにエフェクトを加えるなどをしてもよいと思います。その場合は背景用平面レイヤーを作成後すぐに実施しておくとよいでしょう。

円形シェイプレイヤーを作成してください。この円形シェイプレイヤーは外側の円で、以下のように設定しています。お好みの値で大丈夫です。

塗り (Fill)	なし
枠線 (Stroke)	1 px
サイズ (Size)	750.0, 750.0

もう1つ円形シェイプレイヤーを作成してください。こちらは内側の円になり、以下のように設定しています。こちらもお好みで大丈夫です。

塗り (Fill)	なし
枠線 (Stroke)	2 px
サイズ (Size)	700.0, 700.0

ペンツールを使って、画面中央から上側に垂直に画面外まで伸びる線を描いてください。その際はアクションセーフをオンにしておくと、画面中央がわかりやすいのでおススメです。

線レイヤーにリピーターを追加します。線レイヤーを選択した状態で追加メニュー (Add) をクリックし、リピーター (Repeater) を選んでください。

リピーターのプロパティで、コピー数を4, 位置を0.0, 0.0, 回転を0 x+90.0°に変更してください。この設定により、画面中央から線が上下左右に伸びるようになります。

次に、カウントダウンアニメーションを作成します。まずテキストレイヤーを作成します。このレイヤーはカウントダウンの最初の秒数にしてください。たとえば 5秒前からカウントダウンにするのであれば 5 にしてください。ここでは 3秒前のカウントダウンにしています。テキストレイヤーは1秒間だけ表示するようにしておきましょう。

カウントダウンを JavaScript で制御する方法もあります。カウントダウンの秒数が大きい場合は、以下の別記事の内容を参考にするとよいでしょう。