見出し画像

【マーケター必見👀】LINEでもアニメーション画像は送れる！APNG画像 x Flex Message実装術

チーターデジタルCXコンサルチーム

こんにちは、チーターデジタルCXコンサルティングチームの山岡です。

様々なLINEメッセージの中でも、動きのあるメッセージだったり、スタンプも動きのあるもののほうがつい目がいきますよね。アニメーション効果が加わることで、ユーザーの関心を引きやすくなります。
LINEではGIF画像が使用できないため、アニメーション効果を持たせるためにはAPNG画像が最適です。APNG画像は高画質で透過効果をサポートし、アニメーションを滑らかに表現できます。
また、APNG画像は動くLINEスタンプと同じファイル形式なので、この知識を活用すれば動くLINEスタンプの作成も可能です！
今回は、APNG画像の作成方法と、Messaging APIの機能の中でも特に注目されているFlex Messageに組み込む手順をわかりやすくご紹介します。

APNG画像とは…

複数のPNG画像を1つのファイルに格納し、アニメーションとして再生できる画像形式です。GIFと比較して以下の利点があります。

  • 高画質：より鮮明なアニメーションが可能。

  • 透過効果：背景が透明なアニメーションが可能。

  • 色数：より多くの色を表現でき、視覚的に魅力的なコンテンツが作れる。

APNG画像の作成手順

アニメーションの作成には、Adobe AnimateやAfter Effectsなどがよく使用されていますが、今回はかんたんなパタパタとコマが変わる「フレームアニメーション」をAdobe Photoshopで作っていきます。（同じ要領で無料ツールのCanvaやPiskelなど、様々なツールで作成可能です。）

1. アニメーション制作
今回はこちらの風船を上下に動かすアニメーションを作成します。アニメーションのコマとしては2コマなので、2種類画像を用意します。

2. PNG画像の書き出し
アニメーションに必要なコマ数画像が用意できたら、各コマをPNG形式で書き出します。ファイルの名前はアニメーションする順番で連番にしておくと、次のAPNG変換時の作業が楽です。

3. APNG画像への変換
書き出したPNG画像をAPNG形式に変換します。以下のようなオンラインツールが便利です。

  • ezgif.com

  • Aconvert

  • APNG Assembler

  • アニメ画像に変換する君

今回はWEB上でサクッと変換できるezgif.comを使用します。上部メニューの「APNG」タブから、先ほど作成した２枚のPNG画像をアップロードし、「Upload files!」をクリックします。

アップロードが完了したらアニメーションの速度を設定します。今回は1コマ1秒ずつ表示したいので「Delay Time」の値を100と入力します。（1/100 秒単位）
設定ができたら「Make APNG」をクリックします。ページ下部に完成したAPNG画像が表示されるので右下の「SAVE」をクリックでファイルをダウンロードして完成です。

APNG画像が完成したら、アニメーションが正しく再生できているか確認しましょう。画像プレビューアプリでは動作が確認できないので、WEBブラウザで開いて確認します。
また、画像のデータサイズが300KBを超えるとLINE Flex Message上でアニメーションが再生できないので、最終的な容量には気を付けて作成しましょう。

Flex Messageへの組み込み

APNG画像が完成したら、LINE Flex Messageに組み込みます。

1. 画像のアップロード
作成したAPNG画像をストレージサービスにアップロードし、公開URLを取得します。

2. Flex Message JSONの作成
Flex Message Simulatorを使用して以下のようにプロパティを設定し、JSONを作成します。「animated」プロパティの値を「true」にしないとアニメーションが再生されないので、必ず設定しましょう。

最後に…

今回はかんたんなパタパタとコマが変わる「フレームアニメーション」でしたが、Photoshopで作るパーツ画像によってはバロメータやもっと動きのあるアニメーションが作れます。また、アパレル業界であればスライドショーのようなアニメーションでイチオシのカットをカタログのように紹介することも可能です。

このように、APNG画像はユーザーの注目を集め、情報をより効果的に伝える手段となり、様々な用途で活用できるでしょう。ぜひこの作成ガイドを参考にして、魅力的なLINEメッセージを作成してみてください！

Author

山岡 梢 （Kozue Yamaoka）
Creative Specialist / Creative Consultant
Japan Services Div. CX Consulting Team - CHEETAH DIGITAL

分析・クリエイティブ・製品・最新技術など…マーケティングに役立つ情報を発信中！
＞ チーターデジタルBLOGはこちら
＞ 過去セミナー動画やeBookなどのコンテンツはこちら