APNGファイルについて、自分が知っている色々まとめてみました。お役に立てたら幸いです。また2023年4月時点の内容があります。都度、サービスや仕様など変わったらブログ更新予定ですが、古い情報もあるかもしれませんのでご了承ください。
改めて注目されているAPNGファイル
PNGファイルは、Portable Network Graphicsの略称です。
そして、APNGファイルは頭にPNGにAが付いたファイルです。
Aは、Animatedの意味です。APNGファイルは、Animated Portable Network Graphicsの略称なんです。PNGファイルにアニメーションは付いたファイルなので、PNGファイルはもともと画質が良いファイルでしたが、その画質をアニメーションにも生かせるので、GIFファイルは画質が下がったりするので、改めて、APNGは注目されているようです。
LINEのアニメーションスタンプを制作する際、APNGファイル形式が求められるので以前から制作したことがあったのですが、LINE広告のアニメーションでもAPNGファイル形式が求められるようになり、改めて、このファイルが注目されているようです。
viaduct_k
IllustratorやAftereffectsなどを使い主にストックイラストやストック動画制作を行っています。
とにかく安くAPNGファイルを自作するには
当方も初めてLINEアニメーションスタンプを作りたいと思った時、あまりソフトウェアを持ち合わせておらず、手持ちのIllustratorだけでどうにか作れないものかと考えました。
APNGファイルは、要は、PNGファイルを紙芝居ようにして繋げたのがAPNGファイル！
アニメーションの始まりはパラパラ漫画などの紙芝居を繋げて作られたのが始まりです。結局、アニメーションは静止画の集まりなわけです。（後続で紹介するフリーソフトを使うと、紙芝居を１つのアニメーションにしてくれるので、パラパラ漫画を作れば良いのだと分かりました）
そのため、Illustratorで紙芝居を作り、それを繋げるという手法で当時LINEアニメーションスタンプの制作をしました。Photoshopでも同じかなと思います。
少し動かしてPNGファイルを書き出して、また少し動かしてPNGファイルを書き出すの繰り返しです。（Illustratorなら大量のアートボード作って、まとめて出力もできるかなって思います）
文字をスライドさせるだけのアニメーションであれば、ちょっとづつ右に動かして、真ん中で静止するので、アニメーション中の静止のファイルは１つをコピーして、最終的に綺麗な連番にすれば何枚も出力しなくて良いかなと思います。（下記のようにちょっとづつ文字を動かして大量のPNGファイル作ります）
アニメ画像に変換する君
紙芝居のPNGファイルができたら、それを繋げるのは、Windowsでは「アニメ画像に変換する君」というフリーソフト（無料）がありますので、こちらを使います。
アニメ画像に変換する君の使い方などは過去のブログでも紹介していますので、下記からこちらもアクセスしてみてください。
アニメ画像に変換する君のフレームレートの値を変えることで、多少見た感じの調整などもできるかなと思います。
手作り紙芝居はカクつく
人間の手で1枚づつ、移動させたり、パーツを動かしたPNGファイルの紙芝居を「アニメ画像に変換する君」に放り込みます。フレームレートなどで微調整しますが、まぁまぁ、カクつきます。
カクつかせない方法は、とにかく、ちょっと動いたら、次のファイルと、たくさんの紙芝居を作ることです！
７枚のPNGで３秒程度のLINEアニメーションスタンプを作ろうとしましたが、繰り返しを入れることでごまかしても、カクつくし、早いので目の回りそうなスタンプが出来上がりました（汗）下記に、結構頑張って紙芝居を作って滑らかにさせたLINEアニメーションスタンプありましたので、参考までに。
翌年以降は、Adobe製品のAftereffectsを使ってLINEアニメーションスタンプを作るようになったのですが、３秒程度のアニメーションスタンプで、自動的に２０枚のPNGファイルが出てきます。とても滑らかなアニメーションスタンプになりました。
Aftereffectsで作った滑らかなLINEアニメーションスタンプはこちらから見れます。エフェクトも付けてとても綺麗なアニメーションできました。
スポンサーリンク
アニメーション用ソフトウェアには勝てない
翌年以降は、Aftereffectsを使ってAPNGファイルを作るようになりました。簡単ですし、紙芝居の量が多いので、とても滑らかなアニメーションになります。
簡単にファイルの書き出しの設定部分だけ書いておきます。
AftereffectsはPNGシーケンスで書き出すことで紙芝居ファイルができます。LINEアニメーションスタンプの場合、アルファチャンネル付きを求められるので２つ目の項目を設定をします。それ以外は指定が無ければアルファチャンネル付きにする必要ありません。
AdobeAnimateは下記のメニューからPNGシーケンスを出力できます。あるいは、Adobe Encoderを立ち上げるメニューからも出力でき、LINEアニメーションスタンプは基本背景透過のアルファチャンネル付きにしたいので、その場合、こちらから出すのが良いのかもしれないです。
ファイル→書き出し→ムービーの書き出し
ファイル→書き出し→ビデオ／メディアを書き出し
LINEアニメーションスタンプのアルファチャンネル付きはチェックを入れる。
できたPNGファイルは「アニメ画像に変換する君」を使ってAPNGファイルにします。Aftereffectsを手に入れて、よしこれでAPNG簡単に作れると思って、結局PNGのシーケンスファイルを出力して、アニメ画像に変換する君でAPNGファイルに変換すると分かって、結構びっくりしました。アニメ画像に変換する君ってとても優秀ですね・・・。
APNGファイルの再生方法
「アニメ画像に変換する君」を使えば、APNGファイルのアニメーションが見れますが、作ったAPNGファイルを他の人にチェックしてもらいたいと思った時どうしたらよいでしょうか？
やり方は簡単で、APNGファイルを掴んだ状態で、グーグルなどのWEBブラウザに放り込めばOKです。（GoogleとMicrosoft Edgeでは放り込んで挙動することは確認しました）少し読み込んで、APNGのAnimationがブラウザ上で確認できます。
LINEアニメーションスタンプだと、提出前に、アップする画面からもチェックできますが、ツールを要しない方にチェックして頂く場合は、この方法になるかなと思いました。
LINE creative Lab
LINE広告でAPNGを作りたい、かつ、何でも良いから、価格を抑えて（なんなら無料）作りたいなら、「LINE creative Lab」がおススメです。
無料で作れるLINEが作ったツールです。こちらのツールからAPNGのLINE広告も製作可能で、かつ、テンプレートがあるので、とても便利です。
欠点を出すなら、テンプレートから主に作ると思うのですが、無料なので、他の広告と同じようなアニメーションになってしまい、オリジナルな感じがしない。または、テンプレートでは表現できないアニメーションにしたい場合、厳しいなど・・・。無料でAPNGでLINE広告作りたいなら、これで十分だと思いますが。
紙芝居を作るのが無理ならできる人に頼む！
APNGファイルを制作するには、紙芝居を作ることで、誰でも制作することは可能ですが、手作り紙芝居は、どうしてもカクついて、不自然なアニメーションになりがちです。少し動かしてを繰り返して、作るので、素人が作ると逆に不快なアニメーションになってしまいます。
Aftereffectsなどのアニメーションソフトウェアはソフトの費用やら、技術の習得などがあります。そのため、出来る人にお願いするのが一番早いのではというのが、個人的な感想です。元々、APNGファイルはLINEのアニメーションスタンプを作る際求められたファイル形式なので、出来る方も多いと思います。
なるべく価格を抑えたいなら、ココナラが一番早いです。登録無料なので、まずは登録して、お願いできる人を探すのはいかがでしょうか？LINEアニメーションスタンプを作りますという方はたくさんいますので、そういった方なら、APNGファイルの制作は可能だと思います。
または、クラウドワークスもおススメです。
まとめ
LINEはコミュニケーションツールとして、誰もが使っているアプリケーションなので、ここに広告として表示させれば、目にして、アクセスしてくれる可能性も高く、とても注目すべき広告だと思います。
APNGファイルは、実は、PNGファイルの紙芝居を繋げただけのファイルで、IllustratorやPhotoshopなど、PNGファイルを出力できるソフトがあれば、自作でどうにか作ることも可能です。また、「アニメ画像に変換する君」というフリーソフトがあるので、お金をかけずに制作も可能ではあります。
しかし、Aftereffectsなどのアニメーションソフトから出力したPNGファイルのシーケンスファイルのように大量にPNGファイルを手動で作るのは至難の業というか、辛い作業ですし、結局、カクついて、不快なアニメーションになる可能性があります。ゲームの新作映像などで、カクついた映像が流れると、開発段階だからこんな感じなのかなって意見が多く飛び交います。それだけ、滑らかなアニメーションが求められ、人の目もそういった綺麗なアニメーションに慣れてしまっているので、自作のカクカクしたアニメーションは不快な感じがして、逆効果になる可能性もあります。
自作して、難しそうなら、出来る人にお願いするも検討してみてください！
このブログがお役に立てたなら、シェアして貰えると嬉しいです！
