【最新版】APNGの作り方を画像付きで解説!メリットや注意点とは?

| | |

APNGの作り方

「GifやPNGは知っているが、APNGはあまり馴染みがない」という方は多いのではないでしょうか。

実は、APNGはLINEスタンプやWebサイトにも使われているアニメーションのファイル形式で、お手持ちのPCやタブレットで作成できます。

本記事では、APNGの作り方を画像を用いて具体的に解説します。
APNGの活用事例や注意点もぜひご参考にしてください。

おすすめお役立ち資料

letrostudio-ebook34-bookmock

【初心者向け】デジタル広告&SNS担当者のためのバナーデザインガイドブック

「バナー広告」を例に挙げ、最低限知っておきたいデザインの知識についてはこちら

資料をダウンロードする(無料)

APNGとは?

APNG(Animated Portable Network Graphics)はアニメーション画像形式のひとつで、PNGファイル形式をベースに開発されました。

今までは「動く画像」と言えばアニメーションGIFが主流でしたが、APNGではアニメーションGIFよりも高品質な画像でアニメーション表示ができるため、今後はAPNGが次世代の新しい画像形式になるとも言われています。

APNGは複数の画像フレームを1つのファイルに格納し、アニメーションとして再生できます。
APNGは、Webページでのアニメーションやアプリ内でのアニメーションを作成するために使用されるケースが多いです。

APNGを使うメリット

APNGのメリットは、背景が透過されておりかつ、1677万色(24bit)を使った色彩表現により、高品質なアニメーションを使用できる点です。

動画を掲載しても良いのですが、APNGの方が表示までの速度が速い上、
Chrome、Safari、edge、firefoxなどの主要ブラウザに対応しています(2023年4月時点)。

APNGに対応していないブラウザであっても、アニメーションの1枚目の画像をPNG形式で表示できるため、画像が表示されないリスクもありません。

APNGとGifアニメーションの違い

Gifアニメーションとは、Graphics Interchange Format の略で簡易的なアニメーションファイルを指します。
動画のように見えますが、パラパラ漫画のように画像を動かしており、データ容量が軽く、ブラウザ・デバイスを問わず再生できるのが特徴です。
一方、Gifアニメーションは表現できる色数が少なく、背景透過も得意ではありません。

APNGはGifアニメーションの品質をカバーし、解像度が高く、ジャギー(デジタル化された画像や動画に発生するギザギザ)も少ないファイル形式となっています。

APNGの作り方

「Adobe After Effect」を使う

Adobeソフトの「Adobe After Effect」を使ってAPNGを作成する手順をご説明します。

1. まずは、APNGに使用する画像素材を用意しましょう。

例えば、会社やサービスのロゴをアニメーション化させたい場合は、Adobe illustratorを使って作成するのがおすすめです。

After Effectで作業するために、あらかじめロゴの文字を動かしたい要素別でレイヤーを分けておきましょう。

After Effect

完了次第、「ファイル>保存」で素材作りは終了です。
保存する際、illustratorオプションにて「PDF互換ファイルを作成」を選択してください。
※After Effectで読み込めるようにするため

After Effect

2.After Effectを起動し、データを取り込む準備をしましょう。

あらかじめ、環境設定>一般設定から「初期設定の空間補間法にリニアを使用」のチェックを入れてください。

After Effect

プロジェクトを新規作成し、コンポジション>新規コンポジションを選択します。
コンポジションとは、データを入れる箱のようなイメージで、解像度やフレームレートなど映像の仕様を最初に設定する場所でもあります。

コンポジション設定は、取り急ぎデフォルトのままで問題ありません。

After Effect

3. Ai(イラストレーター)のデータをAfter Effectに取り入れましょう。

ファイルを開き、画面左下の「プロジェクトウィンドウ」にAiデータをドラッグ&ドロップしてください(種類はコンポジションを選択)。
すると、コンポジションにロゴデータが表示されます。

After Effect

コンポジション部分をダブルクリックすると、以下のようにレイヤーごとに分かれたAiデータが表示されます。

After Effect

4.レイヤーごとにモーション(動き)を付けていきましょう。

モーションの付け方は千差万別なため、一つ一つの解説は割愛しますが、ここでは具体例をご紹介します。

まずは、動かさないレイヤーをロックして固定し、他のレイヤーを全選択してください。
一番上のレイヤーをクリックした後、選択したい範囲の一番下のレイヤーをshift+クリックすることで効率的に全選択できます。

その後、キーボードの「p」を押すと、全レイヤーの位置(position)が表示されます。
青い下向きの三角(時間インジケーター)を1秒地点に移動させ、時計マークをクリックしてください。

After Effect

次に、青い下向きの三角(時間インジケーター)を20fまで移動させ、レイヤーの左端にある菱形をクリックすると、キーフレームが作成されます。

キーフレームとは、After Effectの基本要素のひとつで、動きを付けるための機能です。

コンポジションの中の文字を適度に動かしてみましょう。
Shiftを押しながら移動すると、水平・垂直に動かせます。

After Effect

次に、青い下向きの三角(時間インジケーター)を0fまで移動させ、再度菱形をクリックしてキーフレームを作成してください。

After Effect

キーフレームをshift+クリックしながら全選択し、右クリックでキーフレーム補助>イージーイーズを選択します。
これによりスピードのメリハリを付けられるようになります。

After Effect

5. アニメーションを保存し、PNGに書き出しましょう。

ファイル>書き出し>レンダーキューに追加を選択し「ロスレス圧縮」を選択してください。

After Effect

「ロスレス圧縮」をクリックすると出力モジュール設定が開かれるので、形式を「PNGシーケンス」に変更してOKにしてください。

「出力先」をクリックし、名称を変更して保存し、「レンダリング(書き出し)」しましょう。
※「#####」の箇所は変えないでください。

After Effect

6.最後に、連番にしたPNGファイルをAPNGに変換しましょう。

最後に、先ほど保存した全PNGファイルをアップロードし、APNGに変換・保存すれば完了です。

※PNGからAPNGへの変換については、複数の企業からフリーソフト等が提供されています。ご自身の会社のセキュリティのルールなどにあったものを選んでください。

APNG制作のおすすめツール「LetroStudio」

「APNG作るのは難しそう」と思った方に、ぜひ知っていただきたいのが、動画制作ツール「LetroStudio」です。

MP4形式の動画クリエイティブを、簡単にAPNG形式に変換することができます。APNG形式に変換する際、ファイルサイズやフレーム(画像)数、ループ数、秒数等の細かな設定をした上でダウンロードすることが可能です。

また、APNG形式に変換する元動画自体の作成も、誰でも簡単にパワーポイントのような操作で制作することができます。

法人におけるAPNGの使い方

APNG形式はLINEの動くスタンプに使われるケースが多いですが、法人の活用も進んでいます。

LINEトークリスト広告のクリエイティブ

LINEのトークリスト広告とは、LINEのトーク画面上部に表示される広告です。

効果が高い画像(アニメーション)4つのポイント

出典:効果が高い画像(アニメーション)4つのポイント|LINE

画像だけ表示するよりもCTRが高くなりやすく、トーク画面を見ているユーザーの注意を引くことが可能です。

とはいえ、スマートフォンの画面のさらに小さい場所に流れる広告であるため、CMやYouTube広告だと細かすぎて見づらいかもしれません。
そこで、APNG形式を使った簡単なアニメーションを流す企業が増えています。

では、どのようなアニメーションが効果的なのでしょうか。

下記のAPNG動画は、動画制作ツールLetroStudioが提供する、LINEトークリスト広告用のテンプレート例です。商材が上から下に流れていく動画で、「1人1回限り」というコピーにも目が行くデザインとなっています。

下記のAPNG動画も、同じく「LetroStudio」のLINEトークリスト広告用のテンプレート例です。イラストが動くことで思わず目を引くクリエイティブとなっています。

動くプレスリリース

Mercari Design Blog

出典:数字で見る「YOUR CHOICE」APNGで動くプレスリリースを作ってみた!!|Mercari Design Blog

株式会社メルカリはAPNG形式を使い、動くプレスリリースを公開しました。
文字だけでは伝わりづらい数字をアニメーション化することで、一目で情報が入ってくるプレスリリースとなっています。

GIFではイラストの境界線が拡大時にジャギーや画質の荒さが目立ちます。そのため、メルカリのフラットなイラストレーションはGIFと相性が悪く、高い再現性を持つAPNGが採用されたそうです。

APNG形式を使う際の注意点

Internet Explorer非対応である点

APNGは、Internet Explorer(IE)でサポートされていません。IEを使用しているユーザーには、APNGアニメーションが正しく表示されず、アニメーションの1枚目の画像が表示されます。

ファイルサイズが増加する点

APNGは、同じアニメーションをGIFよりも高品質で表示できる一方、そのファイルサイズが大きくなることがあります。特に複雑なアニメーションや多くのフレームを含む場合、ファイルサイズが膨らむ傾向があり、ウェブページの読み込み速度に影響を与える可能性があります。-

まとめ

本記事では、APNGの作り方について解説しました。

APNGはGifアニメーションと比較して、画質や背景透過度が高く、色彩も豊かなファイル形式です。広告やWebサイトにも積極的に起用し、競合との差別化を図っていきましょう。

本記事でご紹介したAPNGの作り方を見て、「ハードルが高そうだな」と感じた方はいませんか。

実は、AdobeやiPadをさわれない方でも簡単にAPNGを作る方法があります。
動画制作ツール「LetroStudio」は既に持っている動画をAPNGに変換する機能を搭載しています。ただ変換するだけでなく、ファイルサイズや秒数なども細かく指定できるため、デメリットでもあるファイルの重さも軽減可能です。

LetroStudio APNG

また、LetroStudioでは、LINEをはじめとした各SNS広告にピッタリのテンプレートを幅広く用意しており、パワーポイントのような直感的な操作で、動画広告や静止画バナー広告を制作できます。

特にLINE広告向けには、LetroStudioとLINEがLINE広告の実績とノウハウを統合して提供するLINE広告専用の動画クリエイティブパッケージ「エルスタ」も提供中です。LINE広告に最適な規格の対応はもちろん、成果につながりやすい200を超える動画テンプレートが実装されており、動画広告の企画・構成面から制作・編集までを一気通貫で支援できます。

「LINEトークリスト広告向けのAPNGを簡単に作りたい」「SNS広告向けの動画を量産したい」という方は、ぜひ一度お問合せください。