LINE広告アニメーション画像の作り方を徹底解説！ファイル形式「APNG（エーピング）」とは？

LINE広告は2022年10月に新たなクリエイティブフォーマットとしてアニメーションの広告フォーマットをリリースしました。（以下、「アニメーション画像」と表記）

アニメーション画像は画像（小）※と同じく、トークリストの最上部に表示されるフォーマットです。簡易的な動きをつけられるため、静止画の画像（小）よりも更に目を引きやすいことが特徴です。

※画像（小）＝Small Image Ad。本記事ではLINE公式の最新資料にならって「画像（小）」と表記します。

画像（小）は作ったことがあってもアニメーション画像は試したことがない方、そもそも入稿形式のAPNG（エーピング）に馴染みがなく作り方がわからないという方も多いのではないでしょうか。

本記事はそんな方に向けてアニメーション画像の制作方法を解説していきます。加えて簡単に制作できるツールや入稿エラーにならないようにするコツなどもご紹介します。

アニメーション広告の概要について学びたい方は以下のブログも併せてお読みください。

LINE広告「アニメーション画像」とは？メリットや仕様、使い方をご紹介

アニメーション画像の入稿要件

まず最初にLINE広告のアニメーション画像の入稿要件を見ていきましょう。

ファイル形式はアニメーションPNG、通称「APNG（エーピング）」と呼ばれるものです。拡張子は静止画のPNGと同じ「.png」であり、厳密には動画ではなく静止画の延長のような保存形式です。一般的に静止画アニメーションといえばGIFが浸透していますが、近年は画質が良く容量も軽い保存形式としてAPNGが注目され始めています。

入稿規定にあるフレーム（画像）数は静止画のコマの数、ループ数は一連の動きを繰り返す回数を指します。また最初と最後のフレームには必ず広告要素を含む必要があります。

次の項目ではAPNGの制作方法がわからないという方に向けて、作り方を解説していきます。

APNGの制作方法

APNGの作り方にはさまざまな手段がありますが、本記事では３つの制作方法をご紹介します。

①LINE広告公式の「Creative Lab」で作る

バナー制作に慣れていない方に最も推奨したいのがこの方法です。LINE広告が公式に公開しているクリエイティブ制作ツール「Creative Lab」は、2023年3月からアニメーション画像にも対応できるようになりました。
LINE公式参考：アニメーション画像の作成ができるようになりました！

使用するにはLINE広告アカウントの取得が必須ですが、無料のテンプレや動きのバリエーションがたくさん用意されており、作成した広告をそのまま運用中のビジネスアカウントに送信することもできるため、運用者にとっては非常に利便性の高いツールです。制作の手順は以下になります。

1.LINE広告アカウントにログインした状態で「Creative Lab」にアクセスし、「アニメーション画像」を選択

2.「テンプレート」タブからイメージに合ったテンプレートを選択

3.必要に応じてテキスト・色・フォントなどを編集

左の「図形」や「スタンプ」から素材を使用したり、左上の「画像」から手持ちの素材をアップロードすることもできます。

4.画像右の「▶︎」ボタンからエフェクトを選んで動きを追加

左下のレイヤーについているチェックマークのON／OFFの切り替えによって、特定のものだけ動かすことができます。

5.右下の「アニメーション画像を送信」から対象の広告アカウントに送る

送信すると広告アカウントの「画像」の一覧に追加されます。

6.保存する場合は「ライブラリ＞マイクリエイティブ＞送信したクリエイティブ」からダウンロード

送信前はクリエイティブをローカルに保存することができませんが、一度送信するとダウンロードが可能になります。

他にも画像のトリミングや画像（小）の作成などさまざまな機能を兼ね備えているので、LINE広告アカウントを運用している方はぜひこの機会に触ってみてください。
使い方については以下のブログでも詳しく解説しています。

LINE広告「Creative Lab」の使い方｜バナー広告をカンタンに作成

②各コマの画像を作ってAPNGに変換する

バナー制作に慣れている方であれば、各コマの画像を個別に書き出してAPNG化する方法もよいでしょう。今回は「アニメ画像に変換する君」アニメ画像に変換する君」というアプリケーションをダウンロードして作成していきます。

１.各フレームの画像を作ってpng形式で書き出し

フレーム（画像）数の規定に沿って５〜２０枚の範囲内で作成します。２つの画像を交互に表示させるなど５枚以下の場合は画像を複製して5枚以上にすれば問題ありません。ファイル名は末尾に数字などをつけて連番にしておきます。

２.「アニメ画像に変換する君」に画像を全てアップロード

画像をアップする前に左側の設定を入力しておきます。用途は「Webページ用アニメーション」、フレームレートは5〜20、ループ数は「無限ループ」のチェックを外して1〜4の数値にします。

３.アニメーションの動きと上部の数値を確認する

フレームサイズがW600×H400pxになっているかどうか、総フレーム数が5〜20、ループ回数が1〜4、再生時間が4秒以内におさまっているかを確認します。再生時間が４秒を超えるなどのミスがあった場合は、設定した数値を調整したり画像を入れ直せば自動でプレビューに反映されます。

４.保存して書き出し

「画質設定」タブのWebPやHTMLのファイル出力チェックを外し「アニメ画像を保存する」ボタンから保存します。容量が重くなりそうなときは「容量最適化」にチェックを入れ、zopfliもしくは7zipを選ぶと軽くすることができます。

このレベルの簡単な画像であれば、WindowsのペイントやCanvaのような無料のツールでも作ることができます。テンプレにはない動きを表現したり、オリジナリティのあるアニメーション画像を作りたいときに試してみてください。

ちなみにAPNGはローカルで開くと静止画になってしまうため、動きを確認したいときはブラウザ上で開くようにしましょう。

③有料の専門的な制作ツールで作る

動画制作ツール「LetroStudio」はAPNGの作成にも対応しており、MP4をAPNGに変換できる機能なども兼ね備えています。またPhotoshopやAfter Effectsの操作に慣れている方は以下の方法もおすすめです。

上２つの方法だと直接APNGとして書き出すことができないため、オンラインのツールなどを通して変換しましょう。また制作の際はループ数や秒数などの入稿規定にも気をつける必要があります。

上で紹介したツールはいずれも有料ですが、他にも豊富な機能をたくさん兼ね備えているので、必要に応じて導入を検討してみてください。

アニメーション画像制作のポイントと参考

制作する上でおさえておきたいポイントは、ユーザーの注意を引く工夫を凝らし、パッと見たときに内容がわかりやすいクリエイティブにすることです。面積が小さいゆえに情報量が多いと見にくいため、要素を少なめにして伝えたいことをシンプルにまとめるとよいでしょう。

画像（小）／Small Image Adに関しては以下のブログをお読みください。

LINEトークリストへお手軽に配信！Small Image Ad 導入のメリットとポイント

LINE広告公式では効果の良かったクリエイティブとして以下の４つを紹介しています。見せ方に悩んだときは参考にしてみてください。

「Creative Lab」のテンプレートを使えば回転やズームなどの動きも容易につけることができますが、１から画像を用意するケースでは動きを逆算しながら作る必要があります。一見難しそうに思えますが、各フレームを分解してみると案外単純な構造であることがわかります。広告でよく見かける動きを５つピックアップして制作例を貼りましたので、フレームを作る際に参考にしてみてください。

左右に動く

拡大・縮小

回転する

揺れる

色が変わる

１つの動きをマスターしたら次は複数のモーションを組み合わせてみると、更にリッチなクリエイティブを作ることができます。APNGはLPやサイト上に配置する素材をちょっと動かしたいときにも使えるため、LINE広告以外の場面でも活用してみてください。

入稿前のチェックリスト

エラーや審査落ちを防ぐために、入稿前に以下の４点をチェックしておきましょう。

☑️ユーザーへの配慮が足りない表現になっていないか？

画像の切り替えが早すぎてテキストが読めないもの、激しいフラッシュで不快感を与えるもの、真っ白で要素が何もないシーンが含まれているものは審査否認になりやすいので気をつけましょう。なおテキストやデザインに関する審査基準は通常のLINE広告と同様になります。

☑️フレーム数やループ数、秒数を守れているか？

フレーム数は守れていてもループ数が守れていなかったり、その２点がOKでも合計4秒をオーバーしていると入稿エラーになります。正しいフレーム数やループ数、秒数で作れているか見直しましょう。

☑️ファイル容量が300KB以下か？

容量が300KB以下におさまらないときはフレームの数を減らしてみたり、1つ1つの画像の容量を圧縮サイトなどで最低ラインまで軽くしてからAPNGに変換してみてください。先ほどご紹介した「アニメ画像に変換する君」の圧縮機能を使用するのも１つの手です。

高解像度の写真や描画の複雑な画像を画面全体に使うと、300KB以下におさえるのがどうしても難しいケースがあります。どうにもならないときは画像の面積を減らして切り抜きにしたり、イラスト素材などに置き換えると軽量化できるかと思います。単純な図形やテキストに比べると写真は重くなると認識しておいてください。

☑️最後のフレーム選びは適切か？

入稿要件として最初と最後のフレームには必ず広告要素を含む必要があります。特に最後のフレームはループが終わったあとにそのまま静止画として表示されるので、止まった状態でも違和感のないフレームを持ってくるのが好ましいです。

まとめ

LINEは日本国内でのMAU（月間アクティブユーザー数）が9,500万以上※と言われており、幅広いユーザーをカバーしているプラットフォームです。その中でもトークリスト最上部のみに配信され、動きで目を引くことのできるアニメーション画像は高い成果を期待することができるでしょう。LINE広告を運用しているもののまだ試したことがないという方は、この機会にぜひチャレンジしてみてください。
※LINE社調べ LINEアプリ月間アクティブユーザー2023年3月末時点