APNGがGIFより綺麗らしいから作ってみた

みなさまお久しぶりです、ひよこベアです。突然ですが、タイトルにもある『APNG』ご存じでしょうか？私はつい最近まで知りませんでした。実は身近なところで見かけている方も多いものですよ。

さて正解は・・・・

https://conoha.mikumo.com/stamp/?btn_id=top--banner_stamp

ということで『うごくLINEスタンプ』です！今やほとんどの人がLINEを使っているので、自分自身がスタンプを買っていなかったとしても、誰かが送ってきたものやLINE内広告で見かけていますよね。

そんなAPNG、LINEスタンプでもお分かりの通りGIFに比べると格段に綺麗なのですが、作られてすぐはなかなか浸透しなかったようです。というのも、APNGを作ったのはブラウザのFirefoxを開発したmozillaなのですが、これをWebの標準化団体W3C（Webの表示に関する決まりやルールを取りまとめている団体）が認めなかったから。詳しく知りたい方はこちらの記事をどうぞ。各ブラウザの関係性にも触れられており面白い記事でした。

初期は不遇な扱いを受けていたAPNGでしたが、徐々に各ブラウザが対応し始め、2020年にMicrosoft Edgeが最新バージョンで完全対応したことにより主要ブラウザでAPNGを対策なしで見られるようになりました。2020年にはAPNGは基本的にどのブラウザでも見られるようになっていたわけです。（現在の対応ブラウザはこちらから確認できます）

とはいえ、画質にこだわらなければ、GIFの方が色数少ないのでデータは軽くなります。動く画像をよく使うのは広告バナーなので、軽い方が優先された結果GIFがまだまだ多用されているのかなと感じました。

ということで色々準備を揃えてAPNGを作ってみることにしました。

APNGを作る準備

APNGの作り方もGIFと同じくパラパラ漫画方式で、少しずつ動きを変えた画像を一枚につなげることでアニメーションにしていきます。まずは、今回使用したソフトの紹介から。

• Adobe Illustrator
• Adobe Animate
• アニメ画像に変換する君

Adobe Illustrator（イラレ）

まずは動かす基になるイラストを準備します。動かすパーツごとにレイヤーを分けて、あとで扱いやすいように準備しておきましょう。今回は、モリンガさんがチーム内で自由に使えるようにと作ってくれたひなたんのデータで作成していこうと思います。とてもかわいい。

Adobe Animate（An）

こちらは、パラパラ漫画の基になる画像を作成するためのソフトです。フォトショのタイムラインをGIF作成で使うのですが、タイムラインの機能がバージョンアップして、イラレの機能も入ってる、みたいなソフトかなと感じました。私も初めて使うので、後ほど少し解説も含めつつ紹介していきます。

アニメ画像に変換する君

ちょっと変わった名前ですが、こちらのソフトでAPNGを作成することができます。Mac App Store、Microsoft Store (Windows用)からそれぞれダウンロード可能です。

記事内では略称が分かりにくくなるため、Illustratorをイラレ、AnimateをAnと表記します。すべての準備ができたら早速作っていきましょう。

APNGを作ろう

イラストデータを作成する部分は割愛させていただき、Anを開くところからスタートです。

新規作成→WEB・低を選択して開きます。

• ※フレームレート（fps）について
  映像はパラパラ漫画方式で動画になっており、一秒間に使った画像の枚数をフレームレートと呼びます。アニメーションは一般的に24fpsなので、そのままの設定にします。
• ※プラットフォームタイプについて
  HTML5 CanvasとAction Scriptがありますが、ざっくり説明するとAction Script=旧式、HTML5 Canvas=新式という感じなので、HTML5 Canvasを選んでおくとよいかと思います（参考記事）。

真っ白な画面が出てきました。こちらで今回使用するツールを紹介しておきます。

• a　タイムライン　一連の流れをここで設定していきます
• b　レイヤー　非表示・ロック・名前変更など、他のAdobe製品と同じように使えます
• c　インジケーター　これがある時点のレイヤーが画面上で表示されます。動きを確認したい時に使用します
• d　フレーム　フレーム挿入に関するボタンが集まっています。
• e　トゥイーン　トゥイーン挿入に関するボタンが集まっています。詳細は後ほど
• f　ループ・再生　設定したフレーム・トゥイーンの動作確認で使用します。
• g　選択ツール・自由変形ツール　レイヤーの選択・変形時に使用します

イラストをAnに移して動かす準備をする

イラレで作成したデータをコピーしてAnにペーストすると、上記のようなポップアップが出ます。後でレイヤーごとに動かすため、二つ目からのチェックをすべて入れてOKにします。かわいいひなたんが現れました。移したイラストデータは一見１枚の絵に見えますが、これをレイヤーごとに分けていく作業を行います。

先にイラレでレイヤー分けしたところをクリックすると、選択した部分に外枠が出ます。すべて選択した状態で、修正 ＞ タイムライン ＞ レイヤーに分配　を選択すると、ひとまとめだったレイヤーが元の状態に分かれてくれますので、分かりやすくなるように名前を入れました。レイヤーに分割が上手くできない場合は、ショートカットでグループ解除した後にすべて選択した上で再度レイヤーに分配を試してみてください。

動かす設定を入れる

名前を付けたら、先ほどと同じようにレイヤーを全選択します。2秒で作成しようと思いますが、タイムライン上部の2sと書かれている部分の下部から一つ前の枠まで（今回の場合47フレーム地点）を選択、その後タイムラインパネル上の「フレームを挿入」ボタンを押すことで、レイヤーを動かすための土台「フレーム」が挿入されました。

次に、フレームの最終枠をドラッグですべて選択し、「キーフレーム」を挿入します。先ほど2秒ピッタリより一つ前の枠でフレームを入れましたが、ここでキーフレームを入れることでちょうど2秒になります。キーフレームは新しい動きを入れたい時や、区切りを入れるときに使用します。

すべてにフレームを挿入したら、レイヤーにモーションを付けるためにシンボルへ変換します。修正　＞　シンボルに変換　で設定できますので、動かすパーツの右手、左手をそれぞれ設定します。

ここからひなたんの手を動かす設定をしていきます。動作を付けるトゥイーンには、クラシックトゥイーン・モーショントゥイーン・シェイプトゥイーンがあるのですが、それぞれの説明や操作方法については、こちらのページで解説されていますので気になる方はご覧ください。個人的には、今回のような回転させる動きの場合、クラシックトゥイーンが動かしやすいかなと感じた為クラシックトゥイーンでの設定方法を説明していきます。

動かしたい範囲でキーフレームを入れ、１つの枠を作成。枠の後のキーフレームを選択し、動いた後の動きになるように自由変形ツールで角度を調整します。

パーツの左上を中心として動いてほしいので、画像の白い丸を左上に動かして、レイヤーを回転させます。動く前の、元になるキーフレームの基準も同じ位置に合わせておきます。

レイヤーの位置を変更したら、１つ目のキーフレームから2つ目のキーフレームまでを選択し、タイムライン上部のクラシックトゥイーンをクリックします。すると、自動でパラパラ漫画のようにレイヤーを動かしてくれます。

フレームはコピーができるので、フレーム最後のキーフレームを右クリック ＞ フレームをコピー　でコピーし、同じくらいの間隔でキーフレームを入れます。自由変形ツールで基準点を左上に調整すれば、ひなたんの腕が自然に上下するようになりました。タイムライン上部の再生で動きを確認することができますので、自分の思った動きかどうか確認してみてください。

今回の設定だと、指定時間が短すぎてひなたんの手が高速で動いてしまったので、ゆっくりになるようにフレーム数を増やします。伸ばしたいフレームの次にあるキーフレームを一度クリックしたあと、ドラッグで動かすことで、任意の位置まで動かすことができます。この時、他のキーフレームと同じ場所を指定してしまうと、キーフレームが置き換わってしまうので注意が必要です。

残りの時間でもう一度手が動くように設定し、同じように逆の手も指定していくと・・・

パタパタするひなたんが完成しました！こちらを複数枚の画像に書き出していきます。

画像を書き出してAPNGにする

書き出しをすると連番の画像がフレームの数だけ生成されるので、先に書き出し先のファイルを作っておきましょう。後でAPNGにするとき選択が楽になります。それが完了したら、ファイル　＞　書き出し　＞　ムービーの書き出し　を選択します。作成しておいたファイルを保存先に選択し、ファイルの種類はpngシーケンスに設定します。

保存先を決定するとポップアップが出現します。インクルードでは、ムービーサイズとイメージサイズを選択できますが、背景付きで書き出したい場合はムービーサイズ、イラスト単体で書き出したい場合はイメージサイズを選択してください。

画像の書き出しが完了したら、APNGに変換する作業に入ります。先に紹介していた「アニメ画像に変換する君」を開いて、右側のエリアに書き出した画像をすべてドロップすると、プレビュー画面になるのでスピード感の確認をしましょう。左側のアニメーション設定ではフレームレートの調整ができるので、自分の思うようなスピードに調整でき、ループするかも選べます。画質設定ではデフォルトでAPNGの他にWebpとHTMLファイルで書き出せるようになっているので、必要に応じてチェックを外してください。問題なければそのまま「アニメ画像を保存する」でpngとして保存すれば終了です。

完成！

説明が長くなってしまいましたが完成しました！ひなたんを見たことがない方にも可愛さが伝わるような手の動きがポイントです。そして一番の魅力として、ベクターデータでの作成なのでイラストの境界線がはっきりしつつ鮮明で綺麗なまま書き出されています。gifで作成しようとすると、画像サイズにも影響されますが、イラストの輪郭がにじんでしまうので、綺麗に書き出せるのがAPNGの一番の魅力だなと感じました。

・・・といいつつ、WordPressがAPNGに対応していなかったため、残念ながら画面キャプチャの映像になっております。実際のAPNGはもっときれいなのでご安心ください。

今回はシンプルな動きだけでしたが、色んな動きができそうなのでもっと動くものも作ってみたいなと思いました。操作もそこまで複雑なものではなかったので、興味のある方は作成してみてください。
それではまた次の記事で。