動くLINEスタンプのAPNGの作り方

動くLINEスタンプ作成
アニメーションスタンプ制作ガイドライン
早速、APNGを作成してみよう。

動くLINEスタンプ(アニメーションスタンプ)の制作が2016年6月から一般に解放されました(LINE Creators Market)。

アニメーションスタンプは、APNG というフォーマットで作成する必要があります。フリーソフト「9VAe きゅうべえ」を使って、アニメスタンプ用 APNGを作成してみました。

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

「アニメーションスタンプ制作ガイドライン」によると以下の画像を準備する必要があります。アニメーション画像として24個の APNG を作らなければいけません。

1つのAPNGは最低5フレームなので、繰り返しがなければ120枚の絵が必要です。

9VAe きゅうべえは、中間の絵を描かなくてもよいため、内容によっては絵を描く枚数を1/10に減らせます。

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

準備する画像

種類 個数 画像サイズ フォーマット
メイン画像 1 W240×H240 APNG
トークルームタブ画像 1 W96×H74 PNG
アニメーション画像 24 W320 x H270(最大)、長辺どちらかが270px以上あれば、横長や(ex:W270 x H100)や、縦長の画像(ex:W100H x H270)の制作も可能。枠いっぱいに画像を作成すること、余白不可 APNG

アニメーション画像の条件

項目 アニメーションの条件
再生時間 最大4秒。1、2、3、4秒のいずれか
1秒のコマ数 再生時間が4秒の場合、2~5コマ/秒
再生時間が3秒の場合、2~6コマ/秒
再生時間が2秒の場合、3~10コマ/秒
再生時間が1秒の場合、5~20コマ/秒
カラーモード RGB
データサイズ 1個 300KB以下、全体のZIPファイルは20MB以下

今までフリーソフトを使ってAPNGを作成しようとすると、複数枚のPNG画像を用意し、ツールをつかってAPNGに変換する必要がありました。9VAe きゅうべえを使えば、動きを調整し、アニメの動作を確認してから直接APNGを作成することができます。

早速、APNGを作成してみよう。

9vae ani01

サンプルとして、OpenclipartのSVGイラストから9VAeで作成したbarrelFishを使いました。

Openclipart のSVGイラスト

このアニメの作り方

実際に試してみる場合は、「ヘルプメニュー」>「かおであそぼう(練習用)」>「変身」などでサンプルアニメを読み出して、APNGに変換してもよいでしょう。

アニメーションは、イラストを読み込んで、9VAe きゅうべえで動きをつけます。

画像サイズやフレーム数は後から調整できるので気にする必要はありません。

画像出力せずに動きをすぐ確認できるので作成効率があがるでしょう。

アニメーションが完成したら、動くLINEスタンプ用の APNG を早速作成してみましょう。

下の画面は、9VAeでアニメーションが完成した状態です。

※ 説明画面はWindows版です。Mac/Ubuntu では同じメニューバーがディスプレイの一番上にあり、9VAe きゅうべえのウィンドウをクリックすると表示されます。

1.アニメを左上に寄せる

9vae line image01

  1. まず、アニメーションの余白をとるために、最初のページの下Aをクリックし、「ページの指定 ここから」をクリックします。
  2. 最後のページBをクリックし、「ページの指定 ここまで」をクリックします。
  3. これでアニメーション全体の図形が選択され、2重線の選択枠で囲まれます。選択されたページには赤い四角形がつきます。
  4. 余白削除のために、2重線の選択枠Cをドラッグし、図形全体を画面の左上に移動させます。余白がわかりやすいページで移動させてもかまいません。Shiftキーを押しながら、上下左右キーを押せば微調整ができます。

2.ページサイズを変更

9vae line image02

  1. ページメニューAから「ページ設定」をクリックし、余白がなくなるように画面の幅、高さの数値を設定します。
  2. プレイボタンBをクリックし、正しく余白が削除されているか確認してください。

3.APNG出力

あとは、APNGを出力するだけです。

  • この場合横長なので、幅を最大値 320
  • フレーム数20以内なので、再生時間を2秒、秒間のコマ数10

に設定します。

  1. ファイルメニュー>「連番/APNG出力」をクリック
  2. 保存先のフォルダ、保存名を設定し、「保存」をクリック。

すると下のような設定画面が表示されます。
9vae line image03

  1. 今回は横幅Ａに「320」を設定します。「縦横比を保つ」にチェックすれば、高さは自動的に設定されます。
  2. 出力レートは、秒１０コマに設定
  3. 出力秒数は、２秒に設定
  4. APNGループ回数Ｂは「１」にするとよいでしょう。ループ回数を２以上に設定する場合は、出力レートや秒数を減らす必要があります。初期値０では無限ループになります。
    「背景を透明にする」には必ずチェックを入れてください。
  5. 「出力開始」ボタンＣをクリック
  6. 「連番出力を１つのAPNGファイルにまとめますか？」という質問が出ます。ここで「はい」をクリックしてください。APNGが出力されます。
  7. もし「いいえ」をクリックすると、指定した保存先に２０枚のアルファマスクつきPNGが連番出力されます。これをAPNG Assemblerなど他のツールで処理することもできます。画像にエフェクトをかけたり、より細かい設定を行いたい場合は連番出力を使うとよいでしょう。