動くLINEスタンプの作り方〜分かりにくい箇所まとめ〜

はじめに

2016年9月21日、『動く♪因幡の白兎・葵ちゃん1』をリリースいたしました。
 
また、10月初旬より、
静止画:8個、16個、24個、32個、40個
アニメーション:8個、16個、24個
からスタンプが申請可能となりました。
 
更に、今までNGだった写真を使ったスタンプも解禁となり、友達、家族の顔、ペットの写真スタンプなど、制作の幅がぐんと広がっています。
販売目的だけでなく、家族・サークル内の記念・自分だけが使う用などに制作するのもアリではないでしょうか?(ただし、LINEストア内に晒されることになりますので、プライバシーには注意してください)
このたび動くスタンプ制作してみて、分かりにくかった箇所をメインに補足解説していきたいと思います。
(今回は、ソフトの使い方、操作手順の解説ではありませんのでご了承ください)
※かなり長めです
 
 

 
 

1.とりあえず公式ガイドラインを熟読すべし

ひとまず初めにLINE公式のガイドラインを隅から隅まで読んでみてください。
 
制作ガイドライン
アニメーションスタンプ制作ガイドライン
【公式】動画LINE Creators Market:アニメーション(動く)スタンプの作り方
↑流れとしてはこちらがオススメ!
 

2.販売に必要なもの(画像)

動くスタンプ販売に必要なもの(画像)は、次の通り。
00-01
 
・メイン画像とは、販売の際スタンプ名の横に表示される動く画像です。動くスタンプの中からどれか選んで使用してもいい(厳密には縦横寸法が他のスタンプとは異なるので、そっくりそのまま使うことは出来ませんが…)ですし、メイン画像専用で制作してもOKです。
 
・アニメーションスタンプ画像は8個・16個・24個から選ぶことが出来ます。(最近までは必ず24個(動かないスタンプは40個)制作する必要があったので、ちょっとハードルが低くなりました)
 
・トークルームタブ画像とは、トーク画面でスタンプを選ぶときに選択する画像で、これのみ動かない静止画像となります。
(いずれの画像にも、LINEの方で自動で入れてくれるので、三角の再生マークを入れてはいけません。)
 
 

3. PNGとAPNGとは?

データファイルには色々な保存形式がありますね。LINEの動くスタンプで使われているファイルの形式は「PNG」と「APNG」です。
PNGとは、背景透過が可能な画像の保存形式です。下のように、背景が切り抜かれて表示できます。
ぶろぐ
 
APNGとは、「アニメーション・ピング」の略で、静止画であるPNGを連続的に表示することで動画を実現するもの。簡単に言うと「動くPNG」というところでしょうか。
 
 

4. 制作に必要なもの(ソフト)

動くスタンプを制作するにあたって、いくつかのソフトが必要となりますが、すべて無料で揃えることができるのでご安心ください。
 
1.PNGファイルを制作するツール
GIMP(無料 Win,Mac対応)
Adobe Animate(有料 体験版あり Win,Mac対応)
など多数。
フリーのペイントソフトはたくさんあるので、PNGに対応したお好きな物をご使用ください。私は使い慣れているAdobe Illustratorで制作しました。
 
2.PNGファイルを圧縮するツール
Pngyu(無料 Win,Mac対応)(※)
 
3.APNGファイルを制作するツール
APNG Assembler(無料 Win対応)
アニメ画像に変換する君(無料 Win,Mac対応)
等が最低限必要となります。
 
(※)最終的なAPNGファイルは1個あたり 300KB以下で制作する必要があるため、絵柄によっては容量オーバーすることがあります。そのときは、PNGファイルを圧縮してからAPNGファイルを制作します。
 
 

5.画像サイズの決まり〜余白の削除でつまづく人多数〜

『アニメーション画像サイズは最大W320×H270px』とありますので、これを超えない範囲で制作します。
なおかつ、最低サイズが縦横どちらかが270px以上でなければいけないともあります。この270pxとは静止画の状態(PNG)ではなく、“ スタンプを再生した時 ” のことです。
ちょっとわかりにくいので、蟻の動くスタンプを例にしてみます。
 
00-04
 
00-10
 

6. まずはPNGを作る

参考までに実際に私がillustratorで制作した際の手順をあげてみます。(その他のソフトをお使いの方はそれぞれお調べください)
 
まず、illustratorにてW320×H270pxのアートボードを20個制作し、ひとつずつイラストを書いていきます。
※必ずRGBで制作してください。
5個以上であれば、20個全部使わなくても大丈夫。
 
ただ、公式ガイドラインによると『静止画として表示される1フレーム目に、そのスタンプで伝えたい感情がわかるイラストが配置されるように、フレームの並び順を調整します。』との注意書きが。
動くスタンプの選択画面では1枚目のイラストが止まったまま表示されます。
送る方にも、送られる方にも分かりやすくなるよう、1枚目にはオチが分かるイラストを使用します。ここでは単純に、1枚目と最後を同じイラストにしておけばOKです。
こんな感じで完成。
 
00-07
 
Illustratorの場合、ファイルから「書き出し」→フォーマット PNG → □各アートボードごと にチェック入れる(使ったアートボードの範囲を指定)→ 保存
PNGオプション→解像度/スクリーン(72dpi)、背景/透明、アンチエイリアス/文字に最適 → OK
 
00-08
 
 
 
次に、出来上がったPNGファイルに余白があればトリミングする…のですが。
 
ここで出てくる『1つのAPNGに含まれるすべてのフレームのサイズを合わせてください。』と、その後の『※余白は一切付けないでください。』という注意書きに戸惑う方が(私も含めて)多いようです。
 
すべてのフレームのサイズを合わせつつ、余白を付けてはいけない・・・とは??
こういうことでしょうか?
 
00-02
 
 
下が正解です。
00-03
 
 
これらはPhotoshop等でトリミングします。

(Photoshopを使ったトリミングからAPNG完成までの流れは、公式ガイドラインの動画が一番わかり易いのでこちらをご覧ください!)

 

 
なにげにトリミングが面倒だったので、私の場合、スタンプのイラストの中どれか1枚だけでもW320×H270pxめいっぱい使うようにしました。これでトリミングを回避。やった〜
 
 

7.PNGを圧縮する

動くスタンプはパラパラ漫画の原理なので、イラスト枚数が多いほどなめらかな動きになりますが、その分APNGにした際、容量300KBをオーバーする危険性があります。
容量オーバーとなりやすいイラストの例としては、公式ガイドラインによると、「べた塗りでなく、グラデーションを多用したイラスト」、「アニメーションエリアの大半に動く背景があるもの」、「炎や集中線、キラキラする光や花びらなど、広い範囲で細かいアニメーション効果があるもの」とあります。
幸い『動く♪因幡の白兎・葵ちゃん1』は白がメインのイラストだったため、容量オーバーとなるスタンプはほとんどありませんでしたが、「あっとろし」という、集中線を使用したスタンプや、「鳥取だで」といった、全面に色がついたスタンプが容量オーバーとなり、イラスト数を減らしたり圧縮をするなど、苦労しました。
 
00-11
 
PNGを圧縮するには、フリーソフトPngyu(無料 Win,Mac対応)を使います。
 
圧縮の方法は上の公式ガイドライン動画をご参照ください。
 

8.APNGに変換する〜フレーム数とループ数の決まり〜

ひとつのスタンプの最大再生時間は4秒です。スタンプごとに異なる再生時間でもOK。しかし、選べるのは1秒、2秒、3秒、4秒、と1秒刻みのみとなります。
1つのAPNGあたりのPNGフレーム数は最低5〜最大20フレームです。『フレーム』とはコマのことです。
つまり、1つのスタンプにつき、最低5枚〜最大20枚のイラストが必要ということになります。
 
00-05
 
00-06
 
APNG変換の方法は上の公式ガイドライン動画をご参照ください。
 
APNGが出来上がったら、インターネットブラウザ「Firefox」を立ち上げ、「新規タブ」の画面にドラッグアンドドロップし、キチンと再生されているか確認。
また、実際のトークルームでどのように見えるかスタンプシミュレータも使ってチェックしておきましょう。こちらも画面にドラッグアンドドロップするだけでシミュレーションが可能です。
 

9.最後に

公式ガイドラインだけでは分かりにくいと思われる箇所をメインに説明しましたがいかがだったでしょうか?
自分でスタンプを作っているけれどつまづいている、良くわからないという方の少しでも参考になれば嬉しいです。