LINEは2016年6月1日、LINE Creators Marketでもアニメーションスタンプが販売できるようになると発表しました(参照:「スタンプを動かそう! アニメーションスタンプの制作ガイドラインを発表」)。アニメーションスタンプは別名「ウゴスタ」とも呼ばれ、ユーザーにも人気のあるスタンプで、SNSをはじめ話題になっています。

発表と同時に公開された「アニメーションスタンプ制作ガイドライン」にはファイル形式としてAPNG形式(アニメーションするPNG形式)が指定されてます。APNGファイルの作り方はあまり知られていないので、本記事では制作ガイドラインに沿ったAPNGファイルの作り方を徹底解説します

作成したアニメーションスタンプ

▲制作ガイドラインに沿って作成したAPNGファイル。APNG形式をサポートしているブラウザ「Firefox」で見るとアニメーションが再生されます。アニメーションが停止したら再読み込みで再び再生されます。

スタンプシミュレーターで確認している様子

▲LINE Creators Marketの「マイページ」に用意されているスタンプシミュレーターで作成したアニメーションスタンプを確認している様子。スタンプシミュレーターの使い方に関しては、記事の後半で解説します。

アニメーションスタンプの仕様

アニメーションスタンプには次のような仕様があります。項目が多く感じるかもしれませんが、本記事で解説する方法で作成すればクリアできるので安心してください

必要なもの

必要数サイズ(pixel)ファイル形式
メイン画像1個幅240×高さ240APNG
アニメーションスタンプ画像24個幅320×高さ270APNG
トークルームタブ画像1個幅96×高さ74PNG

アニメーションスタンプ制作ガイドライン

▲メイン画像(「アニメーションスタンプ制作ガイドライン」より引用)

トークルームタブ画像

▲トークルームタブ画像(「アニメーションスタンプ制作ガイドライン」より引用)

デザイン

  • カラーモードはRGB
  • 画像サイズは幅320×高さ270px以内(幅、高さのどちらかが270px以上あれば、横長や縦長の画像の制作も可能)
  • 背景は透過
  • アニメーションのない余白部分は削除
  • APNGファイルの最初のフレーム画像がLINE STOREまたはスタンプショップの販売時や静止時に表示される

再生時間(1つのAPNGファイルあたり)

  • 最大再生時間は4秒
  • 最大フレーム(コマ)数は5~20フレーム
  • 1〜4回ループ可能(再生時間4秒を超えない範囲内)
  • 再生時間の単位は1、2、3、4秒のいずれかとなり、端数(1.5秒)単位は設定できない

データ容量(1つのAPNGファイルあたり)

  • 300KB以下

※詳しくは「アニメーションスタンプ制作ガイドライン」をご覧ください

アニメーションスタンプの作り方の手順

制作ガイドラインに沿ったAPNGファイルは次のような手順で進めます。各ステップで気をつけるポイントがあるのでチェックください。

アニメーションスタンプの作り方の手順

  1. アニメーションを作成
  2. アニメーションの連番画像をPNGファイルに書き出し
  3. 連番画像を「アニメ画像に変換する君」でAPNGファイルに書き出し

次のページでは、いよいよアニメーションスタンプの作り方を解説します。通常のAPNGファイルの作り方に加え、制作ガイドラインをクリアするためのポイントをまとめているのでチェックください

※すでにPNG形式の連番画像がある場合は、「4. 連番画像を「アニメ画像に変換する君」でAPNGファイルに書き出し」へ進んでください。