デザイナーの小嶋です。
新年度が始まってもう１ヶ月経ってしまったので今更ですが、
今年のエイプリルフールで「APNG」なるものを初めて知り実際に作ってみました!

APNGをご存知ですか？

PNGを知っているという方は多いかと思います。
頭についているAとはアニメーションの略。アニメーションPNG (Animated Portable Network Graphics, APNG) といい、静止画像のPNG形式を拡張し、GIFアニメと同じ要領で動画を再生可能にしたものだそうで、つまり…

「—.pngなのに画像が動く！」ということですね。すごい！！

これがAPNGだ！

こちらがGIF

☝エイプリルフールサイトのメインビジュアル

ちなみに今年のエイプリルフールのネタは「シンギュラリティ」。
代表である山寺さんをはじめ社員たちもAIに置き替わり、各AIは自己の能力に最適と思われる進化を繰り返し最終的には独自進化して暴走するというものでした。アイディアを固めてデザイン・コーディング・公開まで3~4日しかないタイトスケジュールでした…!
※ザザッと砂嵐になる部分も含めて画像を作っています。

比べてみようAPNGとGIF

画像サイズが小さいので分かりづらいですが、GIFは画像劣化しているのに対し、APNGはどうでしょう。

APNG綺麗…！色の階層にムラがなくクオリティを保っています。

今回は元の画像からたくさん加工しているので、そこまで気にならない可能性はありますがメインビジュアルのように大きく画像を使う場合はかなり目に付きます。
「人は人の顔に目がいってしまう」という広告実験の結果もあるので今回のような顔を大きく取り上げるようなものやグラデーションのついたものにGIFを用いるのはなるべく避けたいものです。
また、背景を透過したGIFアニメーションの場合、色がついている部分の周囲に白いジャギーが出てしまい、黒や色つきの背景の上に乗せるとジャギーが目立ってしまい、出来上がりに難ありでした。もちろんこれはデザインの仕事においてなので、クオリティ重視でない場合は気軽につくれるGIFが良いとおもいます。

まだまだ少ないAPNG生成ツール

APNGはまだ普及率が低く「Photoshopからの書き出し」も「mac用のGUI」もないのです！

現状では、Win用GUI/webサービス/ターミナルを利用してAPNGを書き出す方法があります。
例えばPhotoshop等のアプリケーションを利用して連番画像を作成 → 上記の方法でAPNGを生成するという流れです。

後にご紹介しますが、私はwebサービスを見落としており「ターミナル」で生成しました！
ターミナル初心者なので少し難しかったですが、なんとかできました。
後から気づいた「webサービス」の存在を紹介しますね。
多少使いづらい印象ですが、サービスも限られているのでこちらを利用するのが便利なようです。
APNG Assembler 2.7

このツールを利用する場合はこちらの記事を参考にされると良いかもしれません。
[iOS8] Safari 8 で対応したAPNGの作成方法

思わぬ落とし穴！対応ブラウザが限られている！

現在APNG形式を再生できるのは Firefox / Safari / iOS Safari となっております。
Chromeが対応していないのが痛いところですが、サポートしていないブラウザでは、アニメーションの1コマ目が表示されます。

APNGのサポート状況

つくってみた！APNGで高解像度ループアニメーション！

私は前出のwebサービスを知らず、「ターミナル」を使って書き出しました…（ターミナル苦手だけど！）
ターミナル初心者の私もできたので、きっと大丈夫です！せっかくなので難易度は高いですが今回はこの方法をご紹介したいと思います。

=-=-=-=-=-=-=-=-=-=-=-=-=
※今回は「つくってみた！」というものなので、どのAPNG作成にも適用できる普遍的な記事の内容ではありません。

ICS MEDIAさんの記事で詳しく紹介されているのを見て、挑戦しましたのでとてもわかりやすいのでぜひご覧になってください。
MAC以外のやり方なども紹介されています。
=-=-=-=-=-=-=-=-=-=-=-=-=

【用意するもの】
・OS X
・ターミナル
・画像（アニメーションにするための連番画像）

【1】APNG Assembler 2.9をダウンロード
MACではGUIの提供がなかったので
APNG Assembler 2.9
からapngasm-2.9-bin-macosx.zipをダウンロードします。

【2】画像を用意する
今回はこのA~Dの4セットでループするアニメーションをつくります。
AIになってしまった山寺さんを表現するため、デジタル感を出しテレビの砂嵐のようにザザと画面がゆらいだり荒くなったりする画像を用意し
Aの画像とDの画像を同一にすることでループしても不自然にならないつくりにしました。

【3】フレームレートを決め連番画像を用意
フレームレートは、動画において単位時間あたりに処理させるフレーム数（静止画像数、コマ数）のことを指します。通常、1秒あたりの数値で表し、fps（英: frames per second＝フレーム毎秒）という単位で表します。

今回は分かりやすく10fpsにすることに決定。10fpsは1秒間に10枚の画像が必要になります。

【A】　→　0.2秒　→　2枚
【B】　→　0.1秒　→　1枚
【C】　→　0.1秒　→　1枚
【D】　→　2秒　　→　20枚

計…25枚

名前はなんでも良いですが、順番に「例：ABC（共通の半角英数字）000（連番）.png」のように名付けましょう。
今回は「image001.png」〜「image025.png」と命名していきました。

【4】同じフォルダに連番画像とAPNGAssemblerも入れる
このように1つのフォルダに連番画像とAPNGAssemblerを入れます。

【5】ターミナルでAPNGAssemblerを実行する

ターミナルを立ち上げ、先ほどのapngasmがあるフォルダまで移動します。

フォルダのある階層までの移動の仕方は簡単！
ターミナルに、連番画像とAPNGAssemblerが入ったフォルダをドラック&ドロップします。
そうするとそのフォルダまで移動したことになります。

【6】コマンドを入力

./apngasm 出力ファイル名　共通のファイル名*　フレームレート

ターミナルに上記のように表記します。
今回は下記のように書きました。

./apngasm animation.png　image*　1 10

出力ファイル名 → animation.png
入力ファイル名 → image* （アスタリスクを使うと連番ファイルを一括で指定できます）
フレームレート → 10fpsの場合は1/10秒、つまり「 1 10 」と記載します。

【7】出来上がり！
無事書き出されました！

環境が整っていなかったり、
サポートしているブラウザが少なかったり色々壁はあるものの
デザイナーの高画質欲を満たせました！

ぜひみなさんもAPNGにチャレンジしてみてください！

担当：小嶋