apngとは？

最近よく見かけるapng素材
「pngは知ってるけどaがついてる…？」と思う、画像系ファイルを触る機会が少ない方はいると思います
そんな方に向けてapngとは何か、同じアニメーションファイルのGIFと何が違うのか、どうやって作成するのか解説していきます

apngとは？

端的に言うとapngとは「アニメーションするPNG画像」のことです

png画像を複数集めてコマアニメーションを作成し、アニメーションファイルとしてpng保存したらapngになります
同じタイプのファイルで「GIF」がありますが、使える色数が少ないGIFより鮮やかな色使いができ、滑らかに動くapngを使う素材が最近は多いように感じます

TRPGでは、オンラインでセッションをする場合装飾・演出やギミックで使えるので、知っておいて損はない保存形式です

アニメーションのざっくりとした作り方

アニメーションの作り方は「ぱらぱら漫画」を作る感覚で作ります
デジタルだと簡単に複製したり不透明度を下げて下の絵を透かしながら描けるので便利です

描き上げたイラストを「連番で出力」するか「apng形式で出力」しましょう
連番で出力をした場合は、連番画像をapngに変換するソフトを利用してアニメーション画像を作ります

png画像をapngに変換する方法は別項目に記載しています

apngとGIFの違い

png画像をapngに変換する方法

そのまま連番でpng画像を出力してもapng画像にはならないし、イラスト系ソフトを使ってもアニメーション画像を出力できるとは限りません(調べた範囲では、ファイアーアルパカは不可、クリップスタジオはアニメーションファイル(apng・gif)の出力が可能、GIMPはプラグインが必要ですがアニメーションファイル(apng・gif)の出力が可能のようです)

じゃあどうするのかというと、連番保存したpng画像を読み込んでアニメーション画像を作成するソフトを別途用意する必要があります

自分は「アニメ画像に変換する君」を利用しているのでここではそのソフトのダウンロードの仕方と使い方を解説します

「アニメ画像に変換する君」をダウンロードする

このサイトの「アプリケーションのインストール方法」からダウンロードサイトに飛ぶので、そのサイトからダウンロードしてください

直感的に使えて余計な機能がすくないのでおすすめです

「アニメ画像に変換する君」の使い方

用途は「webページ用アニメーション」を選択してください
LINEアニメーションスタンプでも作成可能ですが、LINEスタンプの規格(サイズ)でしか作成できないなどの制限がかかるので、制限が実質ないwebページ用アニメーションの方が作成しやすいです

フレームレート(FPS)は画像を表示する速度のことで数値が低いと遅く、数値が高いと早く表示されます

ループ回数はチェックボックスになっていますが、チェックを付けるとループ状態(永続的に動く画像)になります
チェックを外すとループ回数を選択できるようになり、設定した数値分画像の表示を繰り返します

ループ回数を「4」に設定したら、画像の表示を4往復繰り返したのち一番最後にいれた画像の静止画になります

画質設定は3つ項目がありますがセッションでは「APNGファイル出力」しか使わないと思うので、「WedPファイル出力」と「HTMLファイル出力」のチェックをはずしてください

「容量の最適化」については、画質を下げることで容量を小さくしてくれる機能なのでお好みで設定してください(今までに解説で使用しているapng画像は全て最適化しています。画質を下げると言っても結構きれいに下げてくれるので、容量が気になる場合はチェックを付けるのを推奨します)

圧縮方式は好きなのを選んでください
というのも画質に大差はなく、書き出しにかかる時間が違うだけなのでそういう書き方になっています
一応圧縮については

<圧縮率低・書き出し速度早>zilb→7zip→Zopfli<圧縮率高・書き出し速度遅>

の順になっているそうで、圧縮率はZopfliが最も高いそうです
動作確認はzilbでして、実際に画像を使う場合はZopfliで保存するというのを公式サイトでは推奨しているようです

自分は書き出し速度を重要視してzilbを利用しています(ファイルを軽くしたい場合はtinypngを合わせて利用しています)

あとはプレビューを見ながら微調整して完成です
プレビュー画面のアイコンは、は「再生」・■は「停止」・は「最初に戻る」です

表示倍率はプレビューの表示サイズが変わります
大きい画像を編集していて小さく表示して全体を確認したい場合は低い数値の％(最低25％)を選択し、小さい画像を編集していて大きく表示して細かい場所の確認がしたい場合は大きい数値の％(最高200％)を選択します

再選択は再選択なので特に記載はしません
(さっきまで編集していたデータは消えるのでそこだけ注意が必要です)

確認が完了したら「アニメ画像を保存する」をクリックしてファイル名を入力して保存したら完成です

まとめ

正直言うとTRPGで必ず使うわけではない(特にオフセでは全く必要のない知識)ので解説が必要か考えましたが初めてapngという保存形式の素材を見つけて「何これ…」と自分は困惑したので、変なファイルではないよということと知ってると便利だよというので解説することにしました

アニメーション画像は視線誘導に便利なので(※動いているものに対して人間の目は注目するようにできている)注目して見てもらいたいものを、うるさすぎない程度に動かすといいでしょう

あと、ここに更新が大きく遅れた事をお詫びします