2025年9月19日

森島

【iOS/Android対応】起動画面ロゴアニメーションをAfter Effectsで作成→Lottieに変換

Webデザイン / スマホアプリ

facebook
twitter

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。
スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。

今回は、After Effects（以降AE）でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。
AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。

1 作業フロー
- 1.1 注意点：グラデーションが使用不可
2 [手順1] Illustratorでロゴデータを調整
3 [手順2] After Effectsでアニメーションを作成
4 [手順3] Lottie形式で保存
5 [手順4] アプリ（iOS/Android）に組み込み

作業フロー

アニメーション作成からアプリに組み込みまで、大まかに4つの工程が必要になります。

Illustartorでロゴデータを調整
After Effectsでアニメーションを作成
Lottie形式で保存
アプリ（iOS/Android）に組み込み

AE上でシェイプを作るできますが、通常ロゴはaiデータなので、Illustratorからシェイプを読み込む工程を挟んでいます。
アプリで使用するアニメーションファイルは、LottieというJSON形式で保存されています。テキストベースなので、WEB上に配置しても使用できます。

注意点：グラデーションが使用不可

Lottieの注意点としては、グラデーションが使用できない点です。
現状Lottie形式で書き出してアプリに組み込むと、単色の表示になってしまいます。
AE上では線形グラデーションの機能が存在するのですが、この標準的なグラデーション表現はLottieでの書き出しには対応していません。レギュレーションがあるロゴだと、事前調整が必要になるかと思います。

アルファマットを使用した透明グラデーションならLottie形式でも書き出せますが、用途がWEBで、ブラウザ上で表示する場合の限定的なものです。単色カラーに、透明のグラデーションを重ねることで、グラデーションがかかっているように見せることができます。

アプリの場合は、背景が透過の動画ファイルを配置する方法を検討してください。

では早速、作り方を解説していきます。

[手順1] Illustratorでロゴデータを調整

Illustratorでロゴデータを作ります。アニメーション用に手を加えますので、元データをつぶさないようにaiファイルを複製して使ってください。

拡大縮小程度の動きであれば調整することはほとんど無いのですが、パス自体の形状が大きく変わるようなアニメーションを想定しているようであれば動きごとにパーツを作成し、レイヤーに含めておくと作成の時に負担が少ないです。

例えば、冒頭のロゴのアニメーションであれば、丸いパスとピンと、2つのシェイプを用意し、途中で表示非表示を切り替えて形状が変わったように見せています。
その他、背景など不要なパーツは削除し、aiデータとして保存します。

[手順2] After Effectsでアニメーションを作成

AEを起動します。
新規プロジェクトを立ち上げ、素材を準備していきましょう。

aiファイルを読み込む

プロジェクトウィンドウに、aiデータをドラッグして読み込ませておきます。
読み込みのウィンドウが表示されます。データの読み込み形式は「フッテージ」のままでOKです。

新規コンポジションを作成

次に、プロジェクトウィンドウのアイコンから、新規コンポジションを作成します。
コンポジションは、Premiereのシーケンスのようなものです。アニメーションの様々な設定を格納する箱と思ってください。

「フレームレート」と「デュレーション」を設定して、OKを押せば作成されます。

フレームレート	24fps か 30fps
デュレーション	3秒 ※「0:00:03:00」と入力

フレームレート

フレームレートは、1秒間に何枚のフレームを使用するかの設定です。フレームが多ければ多いほど滑らかになりますが、多すぎればデータが重くなります。

ロゴアニメーション程度の簡単なアニメーション
⇒ 24fps
滑らかさを重視する場合
⇒ 30fps

デュレーション

デュレーションは全体の尺の長さです。今回は3秒に設定します。
「時間:分:秒:フレーム」の表記になるので「0:00:03:00」としてください。

タイムラインに素材を配置

タイムラインのウィンドウを確認すると、今作成したコンポジションが開いた状態で表示されています。ここに素材を配置しながら、アニメーションを設計していきます。
まず、先ほど読み込んだaiデータを配置してください。

aiデータをタイムラインにドラッグして、レイヤー名にカーソルをあてて右クリック。
[作成]＞[ベクトルレイヤーからシェイプを作成]を選択します

レイヤー名の左部の矢印アイコンでレイヤーが開閉します。
追加されたレイヤーを開いてみると、aiデータに含まれていた全てのシェイプが同一レイヤーに含まれています。これを、パーツ単位でレイヤーを分けて整理していきましょう

全てを含んだレイヤーを複製し、パーツが重複しないように中身を削除していきます。
少し手間に感じますが、この時点で分けておくと、アニメーションを作る時に、それぞれのレイヤーが扱いやすくなります。まとめて扱いたいパーツは、ひとつのレイヤーにまとめてしまってOKです。

レイヤーを開いてみると分かるのですが、AEは、レイヤーに「コンテンツ」と「トランスフォーム」が含まれる構造になっています。

コンテンツ ⇒ パスや塗りなどのオブジェクトに関する要素
トランスフォーム ⇒ 位置やスケールなどの情報

アニメーションは基本的に、このトランスフォームの値を操作して動作させます。このトランスフォームの中の情報は、レイヤーにかかるものですので、レイヤーを分割した方が扱いやすいというわけです。
レイヤーが整理できれば、準備は完了です。

アニメーションを作成する

アニメーション作成の基本は、レイヤーを開いて、トランスフォームの中の、位置やスケールなどの数値を変更すれば動きが加えられます。

まず、動きを加えたい項目の左側にあるストップウォッチのアイコンをクリックすると、タイムラインにキーフレームのポイントがつきます。これがアニメーションの始点になります。

タイムラインの青い縦線（インジケーター）を動かして、終点も追加しましょう。レイヤー名の左にある◇ボタンを押すと、キーフレームが追加できます。動かしたい項目の数値を操作するとアニメーションが動きます。
キーフレームは、始点と終点以外にも増やすことができます。また、ドラッグで移動できます。再生して動きを確認しながら調整していきましょう。

イージング

イージングをつける場合は、キーフレームを複数選択し、右クリックのメニューから、[キーフレーム補助]を選択します。

位置プロパティ

位置プロパティはX軸とY軸がまとまっているので、右クリックで「次元に分割」をすると、X軸とY軸それぞれで入力できるようになります。

[手順3] Lottie形式で保存

アニメーションの編集が完了したら、Lottie形式で保存しましょう。保存には「Bodymovin」というプラグインを使用します。Adobe Creative CloudのデスクトップツールからDLしてもOKです。

◆Bodymovin　https://exchange.adobe.com/apps/cc/12557

インストール後に、AEのウィンドウメニューから、[エクステンション]＞[Bodymovin]と選択して、プラグインを起動します。

ウィンドウにコンポジションの一覧が表示されているので、Lottie形式で書き出したいものに「Selected」のチェックを入れます。保存先を選択し「Render」を押して実行します。

保存したLottie（JSON）ファイルをテキストエディターで開くと、アニメーションやオブジェクトの情報がテキストになっています。

"v":"5.9.0","fr":24,"ip":0,"op":41,"w":1920,"h":1080,"nm":"main","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"star","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.023],"y":[1.007]},"o":{"x":[0.167],"y":[0.167]},"t":17,"s":[905]},{"t":23,"s":[714.3]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0],"y":[1.011]},"o":{"x":[0.167],"y":[0.167]},"t":17,"s":[388]},{"t":23,"s":[245.7]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.396,-6.719],[0,0],[0,0],[6.718,-1.396],[0,0],[0,0],[1.396,6.719],[0,0],[0,0],[-6.719,1.396],[0,0],[0,0]],"o":[[0,0],[0,0],[6.718,1.396],[0,0],[0,0],[-1.396,6.719],[0,0],[0,0],[-6.719,-1.396],[0,0],[0,0],[1.396,-6.719]],"v":[[63.603,70.48],[68.492,94.008],[92.02,98.897],[92.02,111.284],[68.492,116.173],[63.603,139.701],[51.215,139.701],[46.326,116.173],[22.799,111.284],[22.799,98.897],[46.326,94.008],[51.215,70.48]],"c":true},"ix":2},"nm":"パス 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl", //以下略…

"v":"5.9.0","fr":24,"ip":0,"op":41,"w":1920,"h":1080,"nm":"main","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"star","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.023],"y":[1.007]},"o":{"x":[0.167],"y":[0.167]},"t":17,"s":[905]},{"t":23,"s":[714.3]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0],"y":[1.011]},"o":{"x":[0.167],"y":[0.167]},"t":17,"s":[388]},{"t":23,"s":[245.7]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.396,-6.719],[0,0],[0,0],[6.718,-1.396],[0,0],[0,0],[1.396,6.719],[0,0],[0,0],[-6.719,1.396],[0,0],[0,0]],"o":[[0,0],[0,0],[6.718,1.396],[0,0],[0,0],[-1.396,6.719],[0,0],[0,0],[-6.719,-1.396],[0,0],[0,0],[1.396,-6.719]],"v":[[63.603,70.48],[68.492,94.008],[92.02,98.897],[92.02,111.284],[68.492,116.173],[63.603,139.701],[51.215,139.701],[46.326,116.173],[22.799,111.284],[22.799,98.897],[46.326,94.008],[51.215,70.48]],"c":true},"ix":2},"nm":"パス 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl", //以下略…

[手順4] アプリ（iOS/Android）に組み込み

アプリへの組み込み方法を簡単に解説していきます。

スプラッシュ画面でアニメーションさせたい場合

OS関係なく、アプリではスプラッシュ画面に静止画しか置けないという制約があります。そこで、スプラッシュの次に画面を用意し、その画面でアニメーションを再生し、スプラッシュ画面でロゴが表示されているように見せかけましょう。

iOS

まずは、iOSへの組み込みから紹介します。
手順としては3つです

[その1] ライブラリを導入

Lottieを使用するには、Lottie for iOSというライブラリが必要です。CocoaPods または Swift Package Manager（以降SPM）で導入できます。今回はSPMの場合を紹介します。

Xcodeのメニューから、[File]＞[Add Package Dependencies]を選択すると、パッケージ追加のウィンドウが開きます。検索フォームに以下のgitのURLを入力して追加します。

[URL] https://github.com/airbnb/lottie-ios.git

パッケージを選択して、「Add Package」して追加を完了させてください。

[その2] Lottieファイルを読み込む

次に、LottieのJSONファイルをプロジェクトに追加します。ファイルツリーにマウスドラッグすればOKです。

追加したファイルを選択すると、画面の右側にFile Inspectorが開きます。その中に、Target Membershipという項目があるので、アプリのプロジェクトが含まれていることを確認してください。これでJSONファイルがアプリのバンドルに含まれ、実行時に読み込めるようになります。

[その3] Lottieファイルを配置する

最後に、画面にLottieを配置します。
ViewControllerを開いて、以下を参考に必要な部分を追加しましょう。

import Lottie

class ViewController: UIViewController{
	
	@IBOutlet weak var animationContainer: UIView!
	private var animationView: LottieAnimationView!

	override func viewDidLoad(){
		super.viewDidLoad()

		//JSONファイル名
		animationView = LottieAnimationView(name: "data_no_grad") //""の中はファイル名
		animationView.frame = animationContainer.bounds
		animationView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
		animationView.contentMode = .scaleAspectFit
		animationView.loopMode = .loop

		animationContainer.addSubview(animationView)
		animationView.play()

	}
	
}

import Lottie

class ViewController: UIViewController{

@IBOutlet weak var animationContainer: UIView!

private var animationView: LottieAnimationView!

override func viewDidLoad(){

super.viewDidLoad()

//JSONファイル名

animationView = LottieAnimationView(name: "data_no_grad") //""の中はファイル名

animationView.frame = animationContainer.bounds

animationView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

animationView.contentMode = .scaleAspectFit

animationView.loopMode = .loop

animationContainer.addSubview(animationView)

animationView.play()

}

追加したら、IBOutletをViewと接続しましょう。Storyboardを開いて、UIViewを配置します。UIViewで右クリックして、表示されたOutletをマウスドラッグし、接続します。

この一連の流れで、iOSへの組み込みは完了です

Android

次に、Androidへの組み込みです。こちらも手順は3つです。

[その1] ライブラリを導入

AndroidのLottie for AndroidをGradleで追加します。
app/build.gradleに依存関係を示すソースを追加します。

dependencies {
    implementation(libs.lottie)
}

dependencies {

implementation(libs.lottie)

}

[その2] Lottieファイルを配置

/app/src/main/res/raw
この階層のフォルダにLottieファイルを追加します。rawフォルダが無ければ作成してください。

[その3] Viewに配置

レイアウトのxmlファイルで、以下のコードを使用して配置します。

<com.airbnb.lottie.LottieAnimationView
	android:id="@+id/lottieLogo"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	app:lottie_autoPlay="true"
	app:lottie_loop="true"
	app:lottie_rawRes="@raw/logo" //logoはファイル名
/>

<com.airbnb.lottie.LottieAnimationView

android:id="@+id/lottieLogo"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:lottie_autoPlay="true"

app:lottie_loop="true"

app:lottie_rawRes="@raw/logo" //logoはファイル名

この一連の流れで組み込みは完了です

今回は、AEでロゴのアニメーションを作成し、アプリに組み込む一連の流れをご紹介しました。
アプリへの組み込みは、バージョンや使用する言語によってエラーが出たり、細かな調整が必要な場合があります。
その際は、ChatGPTなどのAIにサポートしてもらうのがおすすめです。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

【iOS/Android対応】起動画面ロゴアニメーションをAfter Effectsで作成→Lottieに変換

作業フロー

注意点：グラデーションが使用不可

[手順1] Illustratorでロゴデータを調整

[手順2] After Effectsでアニメーションを作成

aiファイルを読み込む

新規コンポジションを作成

フレームレート

デュレーション

タイムラインに素材を配置

アニメーションを作成する

イージング

位置プロパティ

[手順3] Lottie形式で保存

[手順4] アプリ（iOS/Android）に組み込み

スプラッシュ画面でアニメーションさせたい場合

iOS

[その1] ライブラリを導入

[その2] Lottieファイルを読み込む

[その3] Lottieファイルを配置する

Android

[その1] ライブラリを導入

[その2] Lottieファイルを配置

[その3] Viewに配置

関連記事

コーポレートサイトのアクセシビリティ、どこまで対応すべき？

はじめてのShraePoint 実践的活用事例3選【業務効率化・DX】

【Premiere Pro】動画素材の音声を自動で文字起こしする方法