皆さん！こんにちは、こんばんは！

WEBデザイナーの原です！！

今回は前回のこちらの記事↓↓↓

【2023年】GIFアニメに変わる次世代型画像形式APNG導入へ！ #Part.1に引き続き、

アニメーション製作ツールを使ったAPNGの作り方についてご紹介したいと思います！！

APNGのおさらい

APNGとは前回の記事でもご説明した通り、1677万色（24bit）を使用するためGIFアニメーション等よりも高画質で透過情報、グラデーション、ジャギーの少ないアニメ~ション画像形式です。

APNGを作るのにアニメーション製作ツールを使う理由

これは個人的な見解でもありますが、Photoshop等を使ってアニメーション画像をコマ毎に調整して作るのに比べて

Adobe AnimateやAdobe Aftereffect等を使うとそもそもアニメーションを作るツールなので一枚づつコマを調整して画像を作る必要がなく、一枚のベクターデータのパスを動かしたり、レイヤー毎に動きをつけてアニメーションを作った後まとめて連続したPNG画像を書き出すことができるため推奨しています。

アニメーションを作ってみよう

ここからは簡単にアニメーションの作成方法についてご説明していきます。

“今回はAdobe Aftereffectを使って弊社のモーションロゴを作ってみます！！”

モーションロゴがあるとWEBサイトや企業PR動画等に用いた時に企業のイメージアップやブランドのコンセプトを伝えることもできますね！

ということで、やっていきましょう！

１.まずは、素材を用意しましょう

動かしたいイラストやアイコンをIllustratorやPhotoshopで作成します。

素材を作る際にどんな風に動かすのか、パーツを意識しながら作ると良いです。

この時、下の画像のように動かしたいパーツ毎にレイヤーを分けて、それぞれ名前をつけておきましょう。

保存の際、【PDF互換ファイルを作成】という項目にチェックを入れておいてください。 

※ここにチェックが無いと、AiのデータをAeで読み込むことができません。

２.Aeでプロジェクトを作成

Aeを開き新規プロジェクトを作成しましょう。

【環境設定】 ＞【 一般設定】 から、【初期設定の空間補間法にリニアを使用】 にチェックを入れてください。

※ここにチェックが入っていないと、オブジェクトのを動かした時に、勝手に補間されて想定外の動きをしてしまいます。

【コンポジション】＞【新規コンポジション】を選択します。

ちなみにコンポジションとは、素材を入れる箱のようなものと思っておいてください。

次に、FinderからAeのプロジェクトウィンドウにロゴデータをドラッグして読み込みましょう。

そうするとこのようになります。

ロゴのデータが読み込めたら、先ほど作っておいたコンポ１は削除して良いです。

Aiのデータを読み込んだ際のコンポジション設定は、自動的に直前の設定が反映されるので、そのために作成しました。

３.モーションをつけていこう！

ここからはモーションをつけていきます。

先ほど読み込んだロゴデータのコンポジションをダブルクリックして開きましょう。

そうしたらレイヤーを全て選択し、キーボードの『 p 』を押します。

すると、全てのレイヤーの位置パラメータを開くことができます。

そうしたら、時間インジケーター（青い三角のついた縦線）を一旦1秒時点に移動し、「位置」の隣のストップウォッチマークをクリックすると、選択しているレイヤー全てにキーフレームが作成されます。

ここでモーションの最終地点を仮に１秒時点に設定しておきます。

次に、10fか20f地点辺りに中間の動きを時間インジケーターを移動し、レイヤーを全て選択した状態で、左側の青い「◆」マークをクリックするとさらにキーフレームを作成できます。

ここでは、アニメーションの中間地点の動きをつけて行きます。

下の画像のように１レイヤーづつ適当にずらして行きましょう。

次に、インジケーターを０f地点に移動し、「◆」マークをクリックしキーフレームを追加します。

ここではモーションの初期状態の動きをつけて行きます。

全てのレイヤーを20f地点から直角になるように画面外に移動させるといい感じになります。

４.モーションの動きを調整しよう！

●イージングをかける

イージングとは、速度の緩急のことです。これを調節することで、ゆっくり止まったり、だんだん早くしたりすることができます。

キーフレームを全選択し、キーフレームを右クリックし【キーフレーム補助】＞【イージーズ】を選択しましょう。

●グラフエディターからオブジェクトの速度を調整

タイムラインウィンドウ右上のグラフアイコンをクリックし、グラフエディターを開きます。

開いたらグラフ下部のポイントを全て選択し左右のハンドルをそれぞれ目一杯右に移動し、下の画像のような形にするといい感じのメリハリがつきます。

●仕上げにモーションブラーをかける

モーションブラーとは、オブジェクトの動きに合わせてぼかしてくれる機能です。

レイヤーを全て選択した状態で下の画像の赤で囲んだアイコンをクリックし、そのまま黄色で囲んでいる部分の四角の中をクリックしてモーションブラーを適用させましょう！

これでアニメーションは完成です！！

完成したアニメーションはこのようになりました！いい感じにできました！！！かっこいいですね。ありがとうございます。

アニメーションを連続したPNG画像として書き出そう！

アニメーションができたら、連続したPNG画像として書き出します。

【ファイル】＞【書き出し】＞【レンダーキューを追加】を選択すると下のようなウィンドウが出てきます。

こちらの赤で囲んだ部分を【ロスレス圧縮】に変更します。

こちらの【ロスレス圧縮】をクリックし、【出力モジュール設定】を開きます。

開いたら形式を【PNGシーケンス】に変更し「OK」を押します。

次に、赤で囲んだ出力先をクリックします。

出力設定から連番の形式を設定します。

自動で名称が設定されているので、[#####]の部分は変えないようにしましょう。

こちらは#が数値を示します。[####]とすれば4桁の番号になります。

生成したPNG画像に自動で連番が付与されます。

そうしたら任意のフォルダに保存しましょう。すると連番で書き出すことができます。

連続したPNG画像をAPNG画像に変換する方法

連番のPNG画像が生成できたら、最後にまとめて１枚のAPNG形式に変換しましょう！

APNGに変換するにはAPNG変換ソフトを使用します。

今回は『EZGIF.COM』を使用します。

こちらは、GIFなどの画像変換や加工ができるサイトです。

APNGへの変換もできアプリのダウンロードの必要もないため比較的楽だと思うのでこちらを使っていきます！

まず、赤で囲んだAPNGの所を開きます。

次に、Select imagesから生成した連番ファイルをまとめて選択しアップロードしてください。

アップロードができたら【Upload!】をクリック！

アップロード後、連番画像下部に下の画像のような表示が出てきます。

ここのDelay timeを１に設定することで、各コマのDelay部分にコマを遅らせたい秒数をまとめて設定できます。

次にEffects部分の

「don’t stack frames（フレームを重ねて書き出さないようにする）」にチェックを入れます。

「Make a APNG!」ボタンを押すとプレビュー画像が下に表示される。
最後に「Save」ボタンを押し、PNGアニメーション画像を保存。

※「Make a APNG!」ボタンはプレビューを確認しながら内容を変更後、何度でも押すことが出来ます。
※Loop countの値を1とすると、1度だけアニメーションをする画像になります。

以上で、APNG画像が完成となります！！！！

まとめ

今回APNG画像でアニメーションを作るに当たって私自身Aeは初めて触ったのですが、アニメーションの自由度が高くモーションロゴの製作に適したツールだと思いました！もっと凝ったモーションロゴ等も作ると面白いですね！

APNGに関しては、WEBサイトのローディング画面や動きのあるFV等で重宝するのかなと思いました！

皆さんも是非、APNG・Adobe Aftereffectを使ってアニメーション画像を作ってみてください！！

長くなりましたが、最後までご静聴ありがとうございました！！ではまた！