株式会社グローバルゲート公式ブログ
AfterEffectsを使ってリリックビデオの作成に挑戦
こういう感じでした。
ということで（？）、この感動を忘れないうちに、AfterEffectsを使ってボーカロイド楽曲でよく見られるリリックビデオの作成に挑戦したいと思います。
AfterEffectsとは？
AfterEffects（以下Ae）は、Adobe社が提供するモーショングラフィックス・映像合成ソフトです。
映像の中で文字や図形、写真、動画などを自在に動かすことができ、映画のタイトルアニメーションからCM、YouTube動画のオープニングまで幅広く使われています。
動画編集用アプリケーションにはPremiere Proというアプリケーションもありますが、Premiereが「映像編集（カット・つなぎ・音声）」に特化しているのに対し、AfterEffectsは「動きのある表現（アニメーション）」を作ることが得意です。
今回はその特徴を生かして、音楽に合わせた歌詞アニメーションを作ってみようと思います。
リリックビデオとは？
リリックビデオとは、楽曲の歌詞を映像の中で表現するタイプのミュージックビデオです。
単にテロップとして文字を表示するだけでなく、歌詞そのものが映像演出の一部として動き、魅せるのが大きな特徴です。
特にボーカロイド楽曲の世界では、リリックビデオの表現が非常に発展しています。
文字がリズムに合わせて跳ねたり、フェードしたり、画面の奥行きに合わせて流れたり──
まるで歌詞が楽曲と一緒に“演奏”しているかのような動きを見せます。
音楽のテンポやメロディーにシンクロすることで、視覚的にも聴覚的にも心地よい一体感が生まれ、
歌詞の意味や感情がより深く伝わります。
こうした「文字そのものを演出として扱う」表現が、リリックビデオの最大の特徴です。
リリックビデオの例
誰かの心臓になれたなら/ユリイ・カノン
ダーリンダンス/かいりきベア
0/Ado
楽曲を用意する
それでは、やっていきましょう。
まずは楽曲を用意します。
今回は、AI音楽生成サービスのSunoを使って楽曲を用意しました。
Sunoでは歌詞を入力し、曲のテイストを入力することで楽曲を自動生成してくれます。
https://www.globalgate.co.jp/data/202511/bin69095737a0a6e.mp3
歌詞をChatGPTで作成し、ロック調のバラードと指定したところこのような楽曲ができあがりました。
出来が良すぎて震えてしまった
生成された音声データはダウンロードできますので、保存しておきます。
※無料ユーザーは商用利用不可、MP3形式のみダウンロード可能です
AfterEffectsの起動
AfterEffectsが未インストールの場合はCreative Cloudアプリよりインストールしてください。
AfterEffectsを起動すると次の画面になります。
「新規コンポジション」をクリックします。
新規コンポジションでは画面サイズやフレームレート、動画の長さを設定します。
今回はフルHD（1920*1080）、30fpsで作成します。
デュレーション（動画の長さ）は楽曲の長さと合わせます。
音声データの読み込み
メニューの「ファイル → 読み込み → ファイル」から、Sunoで作成した音声ファイルを選択します。
音声ファイルがプロジェクトタブに追加されますので、このファイルをタイムラインタブにドラッグします。
歌詞を入力する
「レイヤー → 新規 → テキスト」でテキストレイヤーを作成し、歌詞の1フレーズを入力します。
これを全歌詞分繰り返します。
疲れた…。
もしかしたらマクロやスクリプトがあるかもしれませんが、今回は手作業でレイヤー作成＆入力を行いました。
文字を一文字ずつ動かす
リリックビデオの見せ場となるのがここからです。
基本の動きとして、一文字ずつ文字がフェードインして現れるモーションを追加してみます。
テキストレイヤーを選び、「アニメーター → 不透明度」を選択します。
フェードインは透明からはじまるので「不透明度」を0%にします。
フェードイン開始位置を設定します。
タイムラインのインジケーターをフェードイン開始位置に移動させ、「開始」横の時計アイコンをクリックします。
フェードイン終了位置を設定します。
タイムラインのインジケーターをフェードイン終了位置に移動させ、「開始」の数値を100％にします。
アニメーターは1つのレイヤーに対して複数の設定ができますので、フェードインは一文字ずつ、フェードアウトはまとめてという設定を行った結果が次のようになります。
これだけでもボカロっぽい感じがしますね。
単純な図形のモーションを加える
文字だけだと少し寂しいので、 図形のモーションも作成してみます。
円が拡大してフェードアウトしていくモーションを作ってみます。
「レイヤー → 新規 → シェイプレイヤー」で図形を配置するためのレイヤーを作成します。
そのシェイプレイヤーを選択し、楕円形ツールで円を描きます。
このシェイプレイヤーを複製してたくさんの円を配置してもいいのですが、今回はリピーターという機能を使ってみたいと思います。
レイヤーを展開し、「追加」の横の▶をクリックして「リピーター」を選択します。
リピーターは同じオブジェクトを指定個数複製する機能で、同じ設定を持ったオブジェクトを多く配置する際に役立つ機能です。
コピー数やトランスフォーム（複製時の位置やサイズの調整）を設定して次のような配置にしました。
この円が拡大し、フェードアウトして消えるモーションを追加します。
リピーターの元となった楕円形オブジェクトのトランスフォームの「スケール」と「不透明度」にキーフレームを追加します。
この結果、次のような円が広がって消えるモーションが作成できました。
エフェクトを追加する
AfterEffectsはアニメーションだけでなく多くのエフェクト機能も備えています。
暗い背景に映えるグロー（発光）エフェクトを試してみます。
シェイプレイヤーを作成して線を描き、そのレイヤーを選択して「エフェクト → スタイライズ → グロー」を選択します。
エフェクト用のパネルで数値を調整すると…
曲線に発光の効果が追加されました！
回転とグローのアニメーションを組み合わせてみると次のようなモーションが作成できます。
背景イメージを追加する
せっかくなのでボカロ楽曲風にイラストを背景に追加しましょう。
（本来ならイラストに合わせて歌詞のモーションを考えたほうがいいので、この工程は最初にやるべきだと思います）
ChatGPTで何枚かイラストを作成し、簡単にクロスフェードで移り変わるイラストを配置します。
できあがり！
というわけで、できあがったリリックビデオがこちらです！
文字や画像へのモーションをつけていく作業は往年のFlashを思い出しました。
まとめ
ということで、今回はAfterEffectsを使ったリリックビデオの作成に挑戦してみました。
AfterEffectsを使うのははじめてでしたが、Flashを連想するような操作感で、かつて学んだ技術が十数年の時を経て役に立つとは感慨深いものがありました。
ただ、動画の出来栄えに関しては、せっかくいい楽曲ができたのにクオリティが低くなってしまい、悔いが残ります。引き続きAeの学習を続けていきたいと思います。
AeによるアニメーションはLottieを使えばWebサイトに組み込むこともできますので、動画作成以外でも活用機会のある技術です。
私自身も、Webサイトの表現の一つとしてAeの活用方法を探求していきたいと思います。
余談
今回作成した（と言ってもChatGPTとSunoに任せましたが）楽曲はBUMP OF CHICKENのrayを目標にしました。
バンプは最高だ。
【関連記事】
