LINEの
OrnamenterのアニメーションWebP作成機能では、LINEのアニメーションスタンプ向けのAPNG（アニメーションPNG）の出力をサポートしています。今回は、その手順を解説します。
LINEアニメーションスタンプの条件
Ornamenterでは、LINEアニメーションスタンプの条件に出来るだけ自動で合わせて出力できる様な機能を提供しています。Ornamenterのこの機能は「LINEアニメーションスタンプ画像1個分のAPNGを、サイズ・時間・フレーム数・容量制限に合わせて書き出す補助機能」です。
| 比較項目 | LINEの条件 | Ornamenter仕様 | 補足 |
|---|---|---|---|
| 対象ファイル | .png(APNG) | .png(APNG) | 拡張子はLINE指定どおり .png |
| 画像サイズ | 最大 320×270px | 元のシート比率を保ったまま 320×270px 内に自動リサイズ | どちらか一辺が上限に合う様に自動リサイズ |
| 最小サイズ条件 | 幅または高さのどちらかが 270px 以上。高さが長辺の場合は270px | 320×270内にフィットする最大サイズへ変換 | 極端な比率でなければ条件に合う設計 |
| 再生時間 | 1、2、3、4秒。最大4秒 | 選択範囲から最大4秒まで。秒数は整数扱い | 4秒を超える部分はスタンプ用APNGには入らない |
| フレーム数 | 5〜20フレーム | 5fpsで生成。1秒=5フレーム、4秒=20フレーム | LINEの上限20フレームに自然に収まる |
| ループ数 | 1〜4回、合計4秒以内 | 1ループ固定 | ループさせたい場合は、シーンをループ再生する様にアートワークを作成する必要あり |
| 1画像あたり容量 | 1MB以下 | 1MBを超えた場合、透明部分最適化、色数圧縮、共通パレット化を試行。超過時は失敗表示 | 容量を自動で詰めるが、複雑な絵柄では1MB超過の可能性あり |
| 背景 | 透過必須 | 透明背景のアニメーションとして出力可能 | 作品側で背景を透明にして作る前提 |
| カラーモード | RGB | PNG/APNGとして出力 | ICC等の厳密なプロファイル指定まではアプリ側で明示していないため、最終アップロード時の確認推奨 |
| 先頭フレーム | LINE STOREやスタンプショップではAPNGの1枚目が静止画として表示 | 「最終フレームを先頭の静止画に使用」オプションあり | 最後に感情が完成するアニメでも、静止表示を自然にできる |
| 余白 | 余白は不要。最大サイズ内で作成 | 自動トリミングではなく、作成したアニメーションを指定サイズへ変換 | 余白や見切れはOrnamenter上で調整 |
| セット内の必要数 | スタンプ画像は 8/16/24個、メイン画像1個、トークルームタブ画像1個 | 1つのアートワークから1つのスタンプ用APNGを出力 | セット全体の画像管理やZIP構成は別途必要 |
スタンプセット全体の個数、メイン画像、トークルームタブ画像、審査用ZIP、最終アップロード確認まではLINE Creators Market側で整える必要があります。
先ずはアートワークを新規作成
LINEアニメーションスタンプ用のアートワークを新規作成します。再生時間は、アニメーションスタンプの最大値の4秒にします。シート比率は、1:1にします。
再生時間は、5秒でも10秒でも良いのですが最終的には自動で最大4秒でカットされます。シートサイズも1:1の正方形である必要はありません。縦長でも横長でも自動で縮小するので問題ありません。
いづれにしても１つのアニメーションを完成させる必要があります。アニメーションスタンプは、最低でも８個をセットにしてLINEの審査に提出する必要があります。
アートワークを作ったら
アートワークが完成したら、アニメーションWebP画面を開きます。アニメーションWebP画面でAPNGの作成と外部への出力を行います。
アニメーションスタンプ用APNGの生成
アニメーションWebP画面で「WebP生成」アイコンをタップして、生成設定画面を表示します。アニメーションWebPを作成する際に「アニメーションスタンプ用APNGも出力する」にチェックを入れて生成します。この項目をオンにすると「最終フレームを先頭の静止画に使用」と言う項目が表示されます。
流れとしては、アニメーションWebPを生成する際に、おまけでアニメーションスタンプ用のAPNGを出力する感じになります。
APNGファイルの容量が1MB以内に収まらない場合、APNGの出力エラーになります。色数が多い場合にエラーになる可能性があります。ある程度は自動で調整していますが、最終的には出力する秒数を減らすか、ワートワークで利用している画像などの色数を減らす必要があります。
共有して外部へ出力
アニメーションスタンプ用APNGの出力が完了したら、アニメーションWebP画面の
共有アイコンをタップします。共有アイコンをタップすると先ずは、共有するファイルを選択する画面が表示されるので「アニメーションスタンプ用APNG(.png)」を選択します。
次に、共有先を指定する画面が表示されます。この時、「ファイルに保存」を選択するか、AirDropなどで御自分のMacなどを指定して下さい。「画像を保存」を選択してしまうと写真ライブラリに保存されるので注意して下さい。
LINE Simulatorで動作確認
外部出力したAPNG(.png)は、LINE Simulatorで動作確認しましょう。Ornamenterのアートワークは、30fpsなので滑らかな動作をしますが、アニメーションスタンプは、5fpsなのでかなりカクカクな動作になります。
LINE Creators MarketやLINE Simulatorに関しての説明は割愛させて頂きます。
今回は以上です。Ornamenterで出力したAPNGをLINE Simulatorで読み込んで動作確認までしていますが、実際にLINEのアニメーションスタンプの審査に提出したことはありません。LINE Simulatorに読み込めたのでAPNGファイルの条件はクリア出来ていると思います。
システムねこ 