WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >イラスト

今回は、最近アニメーション画像の主流になりつつある「APNG（エーピング）」の作り方をご紹介します！

「APNG」とは？

昔は「アニメーション画像」というと「GIFアニメーション」が主流でしたが、最近は「APNG」という次世代の画像形式が取って代わっているようです。

LINEスタンプにも使われている形式なので、存在は知らなくても見たことはあるという人が多いのではないかと思います。

最大のメリットはGIFアニメよりも画質が良いというところです。GIFアニメは256色しか使えず、ジャギーが入ったり透過が上手くいかなかったりといった制限がありましたが、APNGは名前の通りPNGで作られており、1677万色を使用できるため、高品質なアニメーションを作ることができます。

もちろん、色数が多すぎればそのぶんデータが重くなってしまうので注意が必要です。

また、ほとんどの主要なブラウザでアニメとして表示されますが、未対応のブラウザであっても1フレーム目がPNG静止画として表示されるため、全く見られないということもないのが安心です。

詳しい説明は他のサイトで調べてもらえると分かると思うので、ここではその「APNGアニメーション」の作り方をご紹介します！
アニメーションの作成には専用のサービスを使用するため、元となる画像の制作は何のソフトを使用しても大丈夫です。ここでは主にPhotoshopを使用します。

APNGの作成方法

それでは、実際にAPNGを作成してみましょう。

イラストを用意する

まずは、寒そうな猫のイラストを用意します（季節外れですみません）。

ここから少しずつ変化するように要素を動かしたり追加・削除したりしたものを作っていきます。今回は吹き出しがゆっくり出てくるイラストにしました。

ここでは吹き出しの下の煙（？）が1つずつ出てくるくらいの簡単な動きにしましたが、「滑らかに動かす」「ゆっくり出現または消滅する」といった動きをつける場合はもっと小刻みに画像を作っていく必要があります。

変化の差が小さいほど滑らかに美しく動くアニメーションになりますが、画像数が多すぎるとデータが重くなってしまうため、ほどよい枚数で収められると安全です。

画像が用意できましたら、いよいよアニメーションにしていきます。

専用サイトにて作成

今回使用するのは「アニメーションPNG APNG作成」というWebサービスです。

https://ao-system.net/pnganima/

APNGを作成できるサービスはいろいろありますが、こちらのサービスは、以下の点で便利かつ安心です。

• フレームごとに表示時間を設定できる
• 処理はJavaScriptで完結するので、画像がサーバーにアップロードされない
  （セキュリティ面で安心）
• 個人利用、商用利用ともに無料
• 作成元が明記されている

ではさっそく作成していきます。

画像をアップロードする

左コンテンツの「画像ファイル1を選択」ボタンから順に、アニメーションに入れたい画像をアップロードしていきます。

ファイルをまとめてアップはできないのでちょっと大変ですが、1つずつ丁寧に確認しながらアップロードできるのは良い点でもあります。

スピードを設定する

画像が上がったら、次は動作スピードを設定します。
「持続時間一括設定(1000=1秒)」の項目に数値を入れて「持続時間一括設定」ボタンを押すと、左の画像名の横に同じ数値が表示されます。

このまま作成すると、すべての画像が同じくらいの時間表示されますが、画像の横の数値を個別に変更すれば、特定の画像だけ長く、または短く表示することができます。長く表示させたいものは、数値を大きくしましょう。

一番最後の画像が一番の見せどころとなるアニメーションが多いので、一番最後だけ表示時間を長くすると伝わりやすそうです。

サイズを設定する

デフォルトでは元の画像サイズのままでAPNGが作成されるようになっています。

縮小されたAPNGを作成したい場合は「任意」ボタンを押し、その右の数値を好きな数値に変えると、そのサイズに縮小されます。

ただ、縦横幅の比率を自分で計算しなければならないため、ここで縮小するよりも、最初から最終的に使用するサイズに画像を作っておいたほうが綺麗に作成できると思います。
ここは、やりやすい方法で縮小しましょう。

作成！

最後に「APNG作成」ボタンを押したら完成です！

問題なければ右の「APNGダウンロード」を押すと、自分のパソコンにダウンロードできます。

調整したい場合

スピードについては数値を見るだけでイメージできる人は少ないと思います。こちらのサイトでは、一度APNGを作成してからまた数値を調整し、再び「APNG作成」ボタンを押すことで、何度でも修正することができます。

お好みのスピードになるように調整し、満足のいくスピードになったところでダウンロードすれば良いので、効率が良いし安心ですね。

こうして調整して完成したのがこちらです。

今回作成したアニメーションは、基本スピード300、最後だけ2000に設定しています。

※上記の事情から少し縮小しています。

ご注意

実際にこちらを利用してみて、「APNG作成」ボタンを押したら右コンテンツがごっそり消えてしまった！という方はいらっしゃいますでしょうか。
はい、私です。

こちらのサイトは2カラムになっているため、画像の横幅が大きすぎると右コンテンツが段落ちしてしまうということが分かりました（汗）

スクロールすればちゃんと作成されているので、「段落ちすることがある」ということを知っていれば特に問題はありませんが、検証したところ「横幅560px」までなら右側に表示されるようなので、サイズに指定や希望がなくてビックリしたくない方は560px以内に収めると良いと思います。

無料サービスで気軽にアニメーションを作ってみよう

「APNG」は比較的新しい形式のアニメーションなので難しく感じてしまうかもしれませんが、画像さえ作成してしまえば、あとは便利なサービスを使って手軽に作れてしまいますので、ぜひ一度試してみてくださいね！