アニメーションスタンプの表現の幅を広げる

最近、アニメーションスタンプ創作で大きな気づきがありました。
熟練のアニメーションスタンプ作家の皆様にとっては当たり前のことかもしれませんが、私にとっては大きな発見でしたので、ここに情報共有させていただきます。

アニメーションスタンプを創っている方、これから創ろうと思っている方に少しでもお役に立ちましたら幸いです。

意外と知られていない？！アニメーションスタンプの作り方

先日、ゆっくり動くアニメーションスタンプの記事を書きました。

そしてこの記事の中で、LINEスタンプは固定FPSでなくてもよさそう、という説明を書きました。

LINEアニメーションスタンプの条件として、以下の条件があることは皆さんよくご存知かと思います。

• フレーム数は5～20フレーム

• 繰り返し回数は、1～4回

• 再生時間は、1秒、2秒、3秒、4秒のいずれか（繰り返しも含め）

これが頭の中にあるから、最大フレーム数（20枚）を使う場合は、以下が表現の限界だと勝手に思い込んでいませんか（私はそう思っていました）。

１秒のアニメーション：5FPS×5枚、10FPS×10枚、20FPS×20枚
２秒のアニメーション：5FPS×10枚、10FPS×20枚
３秒のアニメーション：割り切れないから1秒×3回再生という意味？あるいは、最大の20フレームはあきらめて4FPS×12枚？
４秒のアニメーション：5FPS×20枚

特に「最大の20フレームを活用して3秒のアニメーションを創ることは不可能」などと思い込んでいました。

実は、LINEさんの「アニメーションスタンプ制作ガイドライン」でも、そのように勘違いしそうな説明が書かれているのです。

さらに、アニメーションスタンプ界隈でよく使われている（？）「アニメ画像に変換する君」というアプリが、固定のFPSを前提としているので、よく調べないでアニメーションスタンプの創作を始めると、固定FPSが当たり前！となってしまうわけです。

わたしも「アニメ画像に変換する君」を使っており、何の疑問もなく、上記の理解をしていました。

実はここに大きな勘違いがあったのです！

「アニメーションスタンプ制作ガイドライン」の記載

ところで、「アニメーションスタンプ制作ガイドライン」には以下のように書かれていることはご存知でしたか？！

注目すべきは、「APNG作成ツール（APNG Assemblerなど）」←ココ！

LINEさんの推しは「APNG Assembler」だったのです。

「アニメ画像に変換する君」ではないのです。
「APNG Assembler」なのです。

早速調べてみました。
この「APNG Assembler」は、フレーム毎の再生時間（遅延時間）を設定できました。
つまり、固定FPSでないアニメーションを創れるツールだったのです。

フレーム毎の再生時間（遅延時間）を設定できるって、どういうこと？

さて、フレーム毎の再生時間（遅延時間）を設定できるというのはどういうことなのか？

これを前回の記事にテキストで加筆したのですが、たぶん、何を書いているのかよくわからん！！という人が多かったのではないかと思います。

そこで、今回は、実際の事例を見ながら、どのような表現ができるのかを体感いただきたいと思います。

※noteは、APNGには対応していないみたいですので、「APNG Assembler」で創ったAPNGファイルをアニメーションGIFに変換して掲載しています。

固定FPSの限界

まずは、固定FPSの限界を復習しておきましょう。
使う画像は、数字の1～20までが書かれた20枚の絵です。
実際にキャラクタを動かせばよいのですが、どこからどこまでが1フレームなのかがわかりにくいので、あえて数字だけの絵を使いました。

以下のアニメーションは、すべて数字の1～20までが書かれた20枚の絵で出来ています。その違いをご覧ください。

最も滑らかな表現ができる20FPS×20枚＝1秒

これは激しく動くスタンプを滑らかに表現したいときに使う条件かと思います。1秒間を20枚で表現するので、かなり滑らかなアニメーションが創れます。
このアニメーションを2～4回繰り返す設定をすれば、2秒～4秒のアニメーションを創ることもできます。

最も長時間の再生ができる5FPS×20枚＝4秒

次は最も長時間の1シーンを創りたい場合の設定です。20フレームで4秒をカバーしなければならないので、20÷4=5FPSとなり、動きはかなり雑になります。

4秒の1シーン（繰り返さない1つのシーン）を表現できるのはよいのですが、どうしてもコマの間が広くなってしまいます。

可変FPSでできること

次に可変FPSでできることをみてください。
※おそらく「可変FPS」という単語（説明）は正確な表現ではないのですが、仮にフレーム毎の表示時間（待機時間）がバラバラなアニメーションを可変FPSと表現しています。

前半を5FPSで動かし後半を20FPSで動かす

前半２秒はゆっくり目の動きで10枚の絵を5FPSで動かし、後半0.5秒を10枚の絵で20FPSで動かした場合をご覧ください。

こんな感じで後半だけ滑らかに動かすことができます。

ちなみにこの例は、全体で2.5秒なのでLINEアニメーションスタンプに登録しようとしてもエラーになります。

静止画→急に動いて→静止画のパタン

次に最初に静止画を1秒見せて、そのあと2秒間激しく動き、最後の1枚を1秒間表示する、というケースです。大きく動かすわけではないのですが、途中で激しくかつ滑らかに動かして、アニメーションを止める、というケースです。

2～19フレームを20FPSで動かすと1フレーム当り0.05秒×18枚＝0.9秒となり、全体で2.9秒のアニメーションとなってしまいます。そこで19フレーム目だけ0.15秒にして、全体で3秒のアニメーションとなるように調整したものです。

これは、LINEアニメーションスタンプの規約に合致しているので、登録できるはずです。

このように固定値のFPSにしなければ、かなり柔軟性の高い作り方できます。たとえば、中途半端な枚数（例えば7枚の絵）でも、1秒、2秒、3秒、4秒ぴったりのアニメーションを創ることが簡単にできるわけです。

残念ながら「アニメ画像に変換する君」というアプリでは、このようなアニメーションを創ることはできません。
「APNG Assembler」などの、フレーム毎の表示時間（待機時間）を設定できるアプリが必要となります。

使い方は、特に難しくないので、この機会に使ってみてはいかがでしょうか。私は以下の記事を参考にしました。

実際のアニメーション例

カウンタのアニメーションだけだとイメージが伝わりにくいかもしれませんので、過去に創ったポップアップスタンプを例に、どのような改善ができるのかを見てください。

Before

まず、10FPS×20枚の絵で創ったアニメーションです。違いが分かりやすいように無限リピート再生させています。
※実際にこのアニメーションを含むポップアップスタンプを販売しています。

アニメーションスタンプの場合は、最後のフレームがそのままアプリ上に残りますので、ハシビロコウが消えた後、そのまま消えた絵を表示することができますが、ポップアップスタンプの場合、最後のフレームが表示された後、別に作成したPNG画像が表示されてしまうので、ハシビロコウが「消えた」ことを感じるには時間が短すぎるのです。

何とかして、爆発してハシビロコウが居なくなった後の表示時間を長くしたいのです。

このアニメーションは、10FPS×20枚の絵なので２秒間のアニメーションです。
ラインスタンプの規約では、1秒、2秒、3秒、4秒のいずれかの再生時間にすることができますので、再生時間の制約上は、まだ2秒の余裕があります。

この時間を余韻に使いたいわけです。

でも、固定のFPSで再生時間の長いスタンプを創ろうとすると、FPSを下げるしかありません。例えば、4秒のアニメーションを20枚の絵で創る場合は、20÷4秒＝5FPSとなります。

例えば5FPSにして最後の1秒を余韻に割り当てる場合、ハシビロコウのいない絵（最後の絵）を5枚複製して再生すれば、1秒間の余韻を表現できます。

でも、動かない絵柄のために5フレームも使ってしまうと、残りの使える絵柄は15フレームになってしまいます（全体で20フレームなので）。

さらに、忙しい様子を表現したい前半の動きが遅くなってしまいます。
いまは10FPSで創っているので、かなり忙しい様子が表現できていますが、これを5FPSにすると残念な表現になっちゃいます。

こんな感じで、固定FPSでアニメーションスタンプを創るのには無理があったのです。

このような場合、この記事で紹介した方法を使えば、簡単に解決できます。
まず、先ほどと同じ10FPS×20枚の絵を用意します。
そして、最後の1フレームだけ、遅延時間（再生時間）を1.1秒にするのです。
そうすると、1フレーム～19フレームで、0.1秒×19=1.9秒再生され、最後の20フレーム目が1.1秒再生され、合計3秒のアニメーションができるのです。

実際に上記の遅延時間（再生時間）で作成したアニメーションをご覧ください。

どうですか？！
最後に余韻のあるアニメーションができました。

すでに、余韻のないポップアップスタンプをリリース・販売してしまいました。ご購入いただいた皆様、urajoの無知をご容赦ください。

やはり「余韻が大事」だと思うので、今販売中のハシビロコウのポップアップスタンプを販売停止し、余韻付きにバージョンアップしたものを審査依頼しました。
※システム上は審査が受け付けられました。つまりAPNGの形式として問題ない、ということです。

ついでに他のクリエイター様よりご指摘いただいた「誤字・脱字」も修正させていただきました。
「やっらんねー」→「やってらんねー」です。汗

数日後には、承認され、リリースできるのではないかと思います。
すでにご購入いただいたユーザー様には大変申し訳ございません。
ご容赦ください。

※4/5 13:40追記
ハシビロコウのポップアップスタンプの改良版が審査通過したので、販売再開（正確には改良版の販売開始）しました。
以下から購入できます。

そして、本記事をご覧いただいているLINEスタンプクリエイターの皆様、
この方法を使えば、アニメーションの表現の幅が広がると思いませんか！！
ぜひ、すばらしい表現のアニメーションスタンプを創作してください。

おわりに

urajo2.0を宣言してから約1.5か月、アニメーション創作に関する知識とスキルが向上してきました。

残念ながら、これまでリリースしたアニメーションスタンプ、ポップアップスタンプの売れ行きはいまいちですが、この学びが今年の年末年始のあけおめスタンプ特集に活きてくるはず！！

最近、コスト対効果の大きい通常スタンプの創作に戻っていますが、また気が向いたらアニメーションスタンプもリリースしていく予定です。

（おまけ）記事中で使った絵柄のラインスタンプ

記事中で使った絵柄のラインスタンプを販売中です。お気に入りが見つかりましたら、是非、ご購入ください。

扉絵に使ったハシビロコウのスタンプもあります。

今回のアニメーションの作り方を反映した、ハシビロコウのポップアップスタンプです。アニメーションが終わった後の余韻をお楽しみください。

今回はアニメーションの作り方の記事でしたが、urajoは、LINEスタンプ副業の発展につながる有料記事も書いています。興味がございましたら、是非、ご購入ください。