ロゴアニメーションの作り方｜After Effectsで実在のロゴを10秒の動画にする6つの場面（制作事例）

今回作ったロゴアニメーション（制作事例）

依頼主は、住まいの修理とメンテナンスを手がける「マリオリペア」さんです。

筆者は、マリオリペアさんの公式ホームページの制作を担当しました。

ロゴアニメーションは、そのホームページやSNSの動画の最初に流すためのものです。

項目	内容
依頼主	マリオリペア（住まいの修理・メンテナンス）
長さ	10秒
大きさ	横長 1920×1080／縦長 1080×1920
使った色	青 #004AF1、紺 #0E2349、オレンジ #FB7701（ロゴの色）
素材	ロゴの透過PNG 1枚（横1000px）
使ったソフト	After Effects 2026

動きの流れは、Facebookで見つけた海外のロゴアニメーションのリールを参考にしました。

青い画面でキャッチコピーが弾み、白い玉が跳ね、最後にロゴが組み上がる構成です。

参考にしたのは場面の流れだけで、文字や色、部品の動き方はマリオリペアさんのロゴに合わせて作り直しています。

After Effectsの操作は、筆者がAI（Claude）に頼み、スクリプトという命令の文章で組んでもらいました。

キーフレームの秒数や値は、そのスクリプトに書いた数字です。

手で作る場合も、同じ数字を入れれば同じ動きになります。

ロゴアニメーションの作り方は、6つの場面で考える

10秒のロゴアニメーションを、いきなり頭から作ろうとすると迷います。

先に場面を分けて、それぞれ「何が、どこから、どう出るか」を決めておくと、作業が一気に楽になります。

今回は、次の6つの場面に分けました。

前半の3つの場面は、ロゴが出る前の「つかみ」です。

後半の3つの場面で、ロゴを部品ごとに組み上げていきます。

最後の3秒ほどは、完成したロゴを止めて見せる時間にしています。

手順1：ロゴを11個の部品に分ける

ロゴアニメーションの作り方で、いちばん最初にやるのが部品分けです。

ロゴが1枚の画像のままだと、全体を動かすことしかできません。

文字を1文字ずつ飛ばしたり、屋根だけを描いたりするには、動かしたい単位で別々の画像にしておきます。

部品は、どれも元のロゴと同じ大きさ（横1000×縦319）の透過PNGにしています。

それぞれの部品を、元の位置に置いたまま切り出すのがポイントです。

After Effectsに読みこんで重ねるだけで、元のロゴに戻るので、位置合わせの手間がかかりません。

Photoshopで作るなら、ロゴを開いて、部品ごとに選択範囲を作り、レイヤーを分けます。

それぞれのレイヤーだけを表示して、カンバスの大きさを変えずにPNGで書き出せば、同じものができます。

今回は、色と形のまとまりを見分けるプログラムで切り分けました。

手順2：コンポジションを作って部品を並べる

設定	値
コンポジション	1920×1080、30fps、10秒
背景	青 #004AF1 の平面
部品の大きさ	スケール125%（横1250pxになる）
部品のアンカーポイント	部品の中心（スパナだけは根元）
モーションブラー	すべての動く部品でオン

部品のアンカーポイントは、それぞれの部品の中心に移しておきます。

拡大や回転が部品の真ん中を基準にかかるので、文字が自然に飛び出して見えます。

スパナだけは、根元を基準に揺らしたいので、アンカーポイントを下の端に置きました。

モーションブラーは、速く動くものにぶれを付ける機能です。

コンポジションとレイヤーの両方でオンにすると、文字が飛びこむ場面がぐっと映像らしくなります。

手順3：場面1から場面3、ロゴが出る前の「つかみ」

場面1：キャッチコピーを弾ませて落とす

テキストツールで「住まいの」「修理・」「メンテナンス」の3つを、別々のテキストレイヤーにします。

フォントはヒラギノ角ゴ W8、大きさは128pxです。

3つの言葉は、0.2秒ずつずらして出します。

時間	スケール	位置（縦）	動き
出始め	0%	70px下	言葉が小さい点から現れる
0.18秒後	112%	もとの位置へ	少し大きめまで広がる
0.32秒後	100%	もとの位置	ちょうどの大きさに戻る
1.25秒から	100%	260px下へ	少し傾きながら下へ落ちて消える

112%まで大きくしてから100%に戻すと、ぽんっと弾んだように見えます。

落ちるときは、言葉ごとに回転を少し変えて、ばらばらに崩れる感じを出しました。

場面2：白い玉を落として跳ねさせる

楕円ツールで直径100pxの白い円を作り、画面の上の外から真ん中へ落とします。

着地の瞬間にスケールを横140%・縦62%にしてつぶし、すぐに横88%・縦118%に伸ばします。

2回跳ねたあと、スケールを2500%まで一気に上げると、画面が白で覆われます。

場面3：青い玉で画面を青に戻す

白い画面の真ん中に、今度は青い円を出します。

いったん横66%・縦175%の縦長に伸ばしてから、2800%まで広げると、画面がまた青に戻ります。

白と青が入れ替わるこの2つの場面が、次のロゴの登場への合図になります。

手順4：場面4、カタカナを1文字ずつ飛び出させる

ここからがロゴアニメーションの本番です。

6つのカタカナの部品に、同じ動きを0.09秒ずつずらして付けます。

青い画面の上で見せるので、効果の「塗り」で白く塗っておきます。

時間	位置（縦）	スケール	回転
3.4秒（1文字目）	110px下	0%	マイナス14度
0.2秒後	もとの位置へ	145%（125%の1.16倍）	0度へ
0.34秒後	もとの位置	125%	0度

キーフレームの速度は、止まるほうの「影響」を80から90%にしています。

飛び出したあと、ふわっと止まるので、文字が軽やかに見えます。

最後に、オレンジの下線をワイプで左から描きます。

効果の「リニアワイプ」を付け、変換終了を4.15秒で100%、4.65秒で0%にします。

ワイプ角度は270度、境界のぼかしは30pxです。

手順5：場面5、アイコン・屋根・スパナを入れる

場面4では、カタカナだけを画面の真ん中に見せています。

場面5では、左からアイコンが入ってくるので、カタカナ・屋根・スパナ・下線をまとめて右へ131pxずらします。

ずらす量は、ヌルレイヤーに付けたスライダーで管理しました。

各部品の位置に「スライダーの値を横に足す」エクスプレッションを書いておけば、スライダー1つを動かすだけで全部がそろって動きます。

スライダーは4.9秒でマイナス131、5.65秒で0にしています。

部品	時間	動き
アイコン	4.9〜5.65秒	左へ950px離れた所から転がり込む（回転マイナス720度から0度）
屋根	5.45〜5.95秒	リニアワイプで左から描き、24px上から下りる
スパナ	5.85〜6.12秒	420px上から落ちる
スパナ	6.12〜6.58秒	根元を軸に、マイナス20度・12度・マイナス4度と揺れて止まる

アイコンは、2回転しながら止まるので、車輪のように転がって見えます。

スパナは落ちたあとに揺れが小さくなっていくように角度を打つと、重さが伝わります。

手順6：場面6、白に切り替えてロゴを本来の色にする

最後に、アイコンの位置から白い円を広げて、背景を白にします。

白い円のスケールを6.5秒で0%、7.0秒で3400%にすると、画面の端まで白で覆われます。

ここで1つ問題が出ます。

場面4から白く塗ってきた部品は、白い背景の上では見えなくなってしまいます。

背景が白に変わるのに合わせて、部品を本来の色に戻す必要があります。

最初は、効果の「塗り」の不透明度を下げて、本来の色に戻そうとしました。

ところが、書き出してみると、白い背景の上で部品が消えたままでした。

そこで、やり方を変えました。

1. 白く塗った部品のレイヤーを、そのまま下に残します。
2. 同じレイヤーを複製し、複製のほうから「塗り」の効果を外します。
3. 複製のほうの不透明度を、6.62秒で0%、6.78秒で100%にします。

白い版の上に本来の色の版が重なるので、白い円が広がるのと同時に、ロゴが本来の色で現れます。

複製は動きのキーフレームもそのまま引き継ぐので、位置がずれる心配もありません。

仕上げに、キャッチコピーの部品を6.95秒から7.4秒で、36px下から浮かび上がらせます。

不透明度も0%から100%にして、7.4秒以降はロゴ全体を止めて見せます。

横長と縦長の2本を書き出す

ホームページやYouTubeには横長、InstagramのリールやYouTubeのショートには縦長が合います。

同じ部品とタイミングのまま、配置と大きさだけを変えて、縦長版も作りました。

変えたところ	横長	縦長
コンポジション	1920×1080	1080×1920
部品のスケール	125%	95%
場面1の言葉	横に1列	縦に3段
言葉が落ちる順番	左から	下の段から
白い円・青い円の最大	2500〜3400%	2800〜4200%

縦長で3段に積んだ言葉を、上から順に落とすと、落ちる途中で下の言葉と重なってしまいました。

下の段から順に落とすように変えたら、重ならずにきれいに抜けていきます。

書き出しは、どちらもH.264のMP4にしました。

10秒で、横長は約3.4MB、縦長は約2.8MBです。

ホームページに置いても重くならない大きさです。

ロゴアニメーションを、見てもらえる動きにする3つのコツ

1. 部品は、元の位置のまま切り出す。
   重ねるだけで元のロゴに戻るので、位置合わせに時間を取られません。
2. 前半で「つかみ」、後半で「組み上げ」。
   いきなりロゴを出すより、玉や言葉で目を引いてからのほうが、ロゴに目が集まります。
3. 最後は止めて見せる。
   10秒のうち3秒近くは、完成したロゴを動かさずに見せる時間にします。

うまくいかないときは、ここを見てください

困ったこと	見るところ
文字が真ん中から広がらず、端から広がる	部品のアンカーポイントが、部品の中心にあるか確認します。
重ねてもロゴの形がずれる	部品のPNGが、どれも元のロゴと同じ大きさで書き出されているか確認します。
白い背景で文字が消える	「塗り」で白くした部品のままになっていないか確認します。 本来の色の版を上に重ねて、不透明度を上げます。
リニアワイプが右から描かれる	ワイプ角度を確認します。 今回は270度で、左から描かれました。
書き出しが途中で止まる	同じ名前のファイルが書き出し先にあると、上書きの確認で止まることがあります。 別の名前にして書き出します。

よくある質問

まとめ

ロゴアニメーションの作り方は、部品に分けることと、場面に分けることの2つが土台です。

あとは、位置・スケール・回転・不透明度のキーフレームだけで、10秒の動画になります。

まずは、自分のお店や会社のロゴを、部品に分けるところから始めてみてください。

カタカナを1文字ずつ弾ませるだけでも、ロゴの見え方が変わります。

ロゴアニメーションの制作も、ご相談ください

筆者は、ホームページの制作をお受けしています。

今回のマリオリペアさんのように、ホームページと合わせて、ロゴアニメーションを作ることもできます。

ロゴのデータが手元にない場合も、ホームページの画像からご相談いただけます。

ホームページ制作のご相談を見る

あわせて読みたい、After Effectsの作り方

• 回転するバウンスボールの作り方｜After Effectsで再現した10秒ループ
• 文字PVの作り方｜After Effectsで文字が飛びこむ動画
• After Effectsテキストアニメーションの作り方｜初心者向け7ステップ

After Effectsをこれから使うなら

この記事のロゴアニメーションは、After Effectsの単体プランか、Creative Cloudのプランで作れます。

部品分けにPhotoshopも使うなら、Creative Cloudのプランが便利です。

まずは無料体験で、ロゴの文字を1つ弾ませてみるのがおすすめです。

スポンサーリンク（PR）

After Effectsの無料体験を見る（PR）

After Effectsの料金を見る（PR）

Creative Cloudのプランを見る（PR）

※上記はアフィリエイトリンクです。

参考：CC & Design – Creative Communication & Design のリール（Facebook）。

場面の流れを参考にし、文字・色・部品の動きはマリオリペアさんのロゴに合わせて作り直したものです。

ロゴと動画は、マリオリペアさんの了承を得て掲載しています。