【初心者でも簡単】アニメーションPNGの作り方 - レンタル撮影スペース「STUDIO TOKI」

こんにちは！
火曜日担当のWEB・デザインチームです。

前回はGIF動画の作成方法でした。今回はアニメーションPNGの作成方法を紹介します。

GIF動画とアニメーションPNGの違いは？

GIFは動画容量が軽く、読み込みが早いことが特徴ですが、最大256色しかないので、表現を細かくする場合は不向きです。
アニメーションPNGは24bit のフルカラーで扱えますので、表現が綺麗に仕上がります。GIF動画のデメリットだった色は改善されますが、サポートされているブラウザが限られています。
しかし、このデメリットはJavaScriptライブラリapng-canvas.jsを使用すれば、解決できます。では、アニメーションPNGを作っていきましょう。

対応ブラウザ

アニメーションPNGの作り方

まず、Adobe Photoshopなどで【①動かしたい画像】を配置します。次に完成した動きをイメージして【②画像を動かします。】

画像が完成したら、画像を保存します。保存方法は【③png】で保存をしましょう。
※Photoshopの場合は【ファイル】→【書き出し】→【Web用に保存（従来）】→【書き出し形式:PNG-24、透明部分:チェックあり】⇒【保存】しましょう。

コマ単位の画像が完成したら、Ezgif.comの①オンラインサービスにアクセスします。
サイトにアクセスしたら、【②APNG】をクリックします。クリックしたら、先程作成した【③写真を選択します。】
選択したら、【③Upload】をクリックします。

【Upload】が完了したら、elay部分に、コマを遅らせたい【①秒数を1/100秒単位】で調整します。
調整が終わったら、【②don’t stack frames】にチェックを入れましょう
チェックしたら、【③Make a APNG】をクリックします。

ボタンを押して数秒後、プレビューが画像の下に表示されますので、【①save】をクリックしたら、アニメーションPNGの完成です。

HTML内の記述方法

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テスト</title>
</head>

<body>
<img src="./ezgif.com-apng-maker.png" alt="">
</body>
<script>
    APNG.ifNeeded().then(function () {
        var images = document.querySelectorAll(".apng-image");
        for (var i = 0; i < images.length; i++) APNG.animateImage(images[i]);
    });
</script>

</html>

完成品

まとめ

今回はアニメーションPNGを作っていきました。GIFよりも更に高品質なアニメーションですが、スイスイと作成出来ました。
Webサイトの高品質なものを見せることは、ずっとある課題なので、この機会に知れて良かったです。