LINEアニメーションスタンプ（動くスタンプ）作ってみた

お正月の間にLINEのアニメーションスタンプ（動くスタンプ）を作成&リリースできたので、どんな感じだったかを書いてみます

# 販売までの流れ

スマホでGIFを作る
 ↓
パソコンでGIFをAPNGに変換
 ↓
Line Creators Marketにスタンプを登録
 ↓
スタンプの販売申請
 ↓ 2,3日待つ
（承認がおりたら）販売開始

# 使ったアプリ/ソフトと作った画像

## 使ったアプリ（スマホ）

 - [dotpict](https://play.google.com/store/apps/details?id=net.dotpicko.dotpict)
 - [GIFShop](https://play.google.com/store/apps/details?id=com.gif.gifmaker)

## 使ったソフト（パソコン）

- MacのFinder
- Macのプレビュー
- [アニメ画像に変換する君](https://github.com/ics-creative/160609_animation-image-generator/blob/master/help/ReadMe.md)

## つくった画像

- スタンプ用画像 270x270 APNG 8枚
- ストアの画像 240x240 APNG 1枚
- トークでスタンプを選ぶときの画像 96x74 PNG

# 詳細な手順

## スマホでGIFを作る

![GIF-200105_215537.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/3144930c-1633-a9de-b6b7-9d64bc80bb94.gif)

こんな感じのGIFをつくりました

使ったアプリは以下の2つ

 - [dotpict](https://play.google.com/store/apps/details?id=net.dotpicko.dotpict)
 - [GIFShop](https://play.google.com/store/apps/details?id=com.gif.gifmaker)

dotpictでアニメーションのフレームをドット絵を描いて、GIFShopでフレームをつなげて動画にしました

フレームを描くというと難しそうに聞こえますが、最初の絵ができたら、くらげの位置をずらしたりといった操作はdotpictの機能を使えばわりとかんたんにできます

アプリでの作業風景はこんなかんじです

![20200109_1020_56784__01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/826c86dd-01b5-fa4b-6b1e-2ec92fb3a542.jpeg)

![Screenshot_20200109-102213.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/2c5fe448-6c87-d585-ffb3-9e03c4ca7ca1.jpeg)

## パソコンでGIFをAPNGに変換

使ったソフト

- MacのFinder
- Macのプレビュー
- [アニメ画像に変換する君](https://github.com/ics-creative/160609_animation-image-generator/blob/master/help/ReadMe.md)

手順は以下の通りです

1. スマホのGIFをパソコンに転送する
2. GIFのフレームを抽出してそれぞれ1枚の画像にする
3. FinderでGIFをPNGに変換（拡張子を変えるだけ）
4. プレビューで画像サイズを規定の270x270にする
5. アニメ画像で変換する君でPNGをAPNGに変換

この過程は半分くらい自動でできるようにしたので、スクリプトを別記事で公開します

わたしはパソコンでGIFから再度フレームを抽出しましたが、
スマホからフレームの画像を送る
→パソコンでPNGに変換
→パソコンでAPNGを作成
というやり方でも問題ないです

スマホでアニメーション作成を完結させたかったので、自分は上記のような手順になりました

アニメ画像で変換する君をAPNG作成で使った理由は、LINEのスタンプの規定をチェックしてくれるからです
LINEのアニメーションスタンプには、

- サイズ 270x270
- フレーム数 5-20
- 秒数 1,2,3,4秒のいずれか

という規定があって、規定を満たしていないと申請できませんが、このソフトは規定にあってるかあってないかを、アニメーション作成の段階で見せてくれるのでわかりやすいです

# APNGで困ったところ

上記の規定以外にも気をつけることがあって、それが守られていないと、スタンプがアップロードできなかったり審査が通らなかったりします

## サイズ変換

**ポイント: 動画にする前に、フレームの段階でサイズを270x270にする**

APNGを作ったあとにプレビューで「サイズ調整」をかけるやり方だと、Finderのサイズで270x270になっていてもLINEが受け付けてくれません
スタンプをアップロードしようとしても「適切なAPNGではありません」と出ちゃいます
なので、動画にする前にフレームのサイズを揃えましょー

## .apngという拡張子はない

**APNGファイルの拡張子は.pngです**

わたしはこれがわからず、ちゃんとAPNGになってたのに、Finderでみたら.pngってなってて「動画になってないじゃん！」となってキレてました

## .gifを.pngにするだけだとだめ

FinderでGIF動画の拡張子を.gifから.pngに書き換えるだけだと、やっぱりアップロード時に「適切なAPNGではありません」と怒られます
なので、アニメーションソフトを使って動画にしましょう

## 1番目のフレームは、スタンプが伝えたいことを表してるフレームにする

アニメーション的に最初にもってきたいフレーム
≠ スタンプでの1番目のフレーム
わかりづらいので、例で説明します

![GIF-200101_194548.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/7af25fa8-d572-ca6a-3cf4-3cc59e7fa19a.gif)

このくらげをスタンプにする場合、アニメーション的にはこの画像を1フレーム目にしたいですが

![dotpict_20200101_185510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/e4aac553-ee6e-b75c-c0ca-67ad0d8b6b9c.png)

スタンプ的には下のいずれかを最初にします

![dotpict_20200101_185344.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/7ebe4a3d-4653-deb1-c2fa-3671482f597f.png)

![dotpict_20200101_185413.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/2f55c378-fed4-5ba5-4036-238f8316fbb5.png)

![dotpict_20200101_194445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/491cf690-f318-ea15-9be8-a4fc2c279b33.png)

スタンプはループしたあとに静止画を表示して、そのとき表示されるのが1フレーム目です
なので、1フレーム目はそのスタンプが伝えたいことがわかる画像にします
1フレーム目を選ぶときは、「動かないLINEスタンプだったらどの画像にするか」を考えるとよいとおもいます

## メイン画像も動くやつにする

アニメーションスタンプを売るとき、ストアで表示する用の画像もアニメーションにします

わたしは静止画でいいと勘違いして、くらげの1枚絵をアップロードしようとしたら怒られました

## その他エラー

画像サイズとか動画の秒数とかフレーム数がおかしい場合、アップロードした時点でたとえば「サイズは270x270にしてください」みたいな具体的なエラーが出ます
「適切なAPNGではありません」と言われた場合は上記の項目をみてみてください
（他にもあるかも）


# スタンプがLINEに承認されるまでの時間

スタンプをストアで売るためには、以下のステップがあります

1. スタンプを登録する
2. 審査してもらう
3. （審査に通過したら）販売開始

わたしの場合、
12/30 21時 審査リクエスト
→1/1 14時 承認
→1/1 16時くらい ストアで見れるようになった
という感じで、他のスタンプでも審査リクエストから承認までに2日あいてました
リジェクトはまだされたことがないです

この辺はスタンプの数とかにもよるのかなあと

注意点として、審査が通ったあとにストアで販売するためにはアクションが必要です
承認されましたよメールが来たら、スタンプ登録をしたページに行って、「リリース」ボタンを押します
押すまではストアに載らないです

# 宣伝

ドット絵なくらげのスタンプ売ってます
よかったら買ってね

![Screenshot_20200109-133437.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/0a904dfa-b745-332a-6016-0a9ddd52deb8.jpeg)

https://store.line.me/stickershop/product/10416113

![Screenshot_20200109-133502.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430849/da3f8a82-ae46-9c8f-5798-5db41d522ab3.jpeg)

https://store.line.me/stickershop/product/10370366