一度挫折した動くLINEスタンプに再挑戦した記録(2/2)
こんにちは、あめだまほっぺです。
前回、一度挫折した動くLINEスタンプ作りについて、作ろうと思ったきっかけや大まかな制作の流れ、挫折を乗り越えられた理由などをまとめました。
今回は、制作環境や細かな手順についての記録を残します。制作方法は、Web検索すると様々なページがヒットしますので、ここでは様々なページを調べて辿り着いた私の制作方法をご紹介します（もしかしたら一部非効率かもしれません）。それがどなたかのお役に立てれば嬉しいです。もしくは、LINEスタンプってこうやって作られているんだ〜と楽しんでもらえたら嬉しいです。
制作環境
全く同じ環境でなくても制作は可能ですので、参考までにご紹介します。
使用した機器
・iPad Pro
・Apple Pencil
・iMac
使用したアプリ、ソフト：主な用途
<iPad>
・Procreate（有料）：下書き、アニメーションの確認
・MediBang Paint for iPad（一部有料）：清書、色付け、PSDファイルの書き出し
Procreateだけでも問題ないのですが、MediBang Paint上に気に入っているペンがあったので、今回は2種類のアプリを使いました。ちなみに、静止画のLINEスタンプは、MediBang Paintのみで作成しています。
<iMac>
・Adobe Photoshop（有料）：トリミング、PNGファイルの生成
・アニメ画像に変換する君（無料）：アニメーションファイル（APNG）の生成、フォーマット確認
制作手順
1.アイディア出し
今回は紙に書き出しました。形になったアイディアよりも形にならなかったものの方が多いです。次回、スタンプを作る際の候補にしたいと思っています。
2.下書き、動きの確認の繰り返し
Procreateを使って、下書きをします。アニメーションとして再生・書き出しできる機能があるため、Procreateを使用しました。GIF形式での書き出しができるので、SNSにも投稿しやすいです。また、後ほど上から黒い線でなぞるため、区別できる色にするため水色の線で描きました。
1つのレイヤーが1枚の画像となります。最初と最後の絵を描き、その間の絵をひたすら描く作業の繰り返しです。いきなり、動作通りの順番で描いていくと、再生した時に不自然な動きになったり、間隔が異なったりすることがあったので、中間を埋めるように描く方法に切り替えました。
下図のSTEP1では、最初と最後の絵、STEP2は、間の画像が増えて3枚に、STEP3は10枚へ急増していますが、実際はSTEP7くらいの工程を踏んでいます。そして都度、アニメーションを再生して動きをひとつひとつ確認します。
3.清書
下書きの動きに問題がなかったら、清書をします。
今回は、MediBang Paintの線を使用したかったため、Procreateで描いた下書きをPNG形式で書き出し、MediBang Paintで取り込む作業をしました。
取り込み後、1枚1枚を黒い線でなぞります。下書きの時に描いていなかった顔のパーツも書き足します。
4.動きの確認、修正
下書きの時に動きを確認しているものの、全く同じ線ではないので、清書の線の状態で動作確認をします。Procreateで描いていればそのままアニメーションとして再生し確認すればよいのですが、アニメーション再生できないMediBang Paintで描いていたので、PSD形式にしてPCへ取り込みます（有料のカスタマイズ形式でエクスポート）。Photoshopで取り込み、書き出し機能の「レイヤーから書き出し」を使って、各レイヤーをPNGファイルに書き出します。（この機能がとても便利！）その後は、PC上で「アニメ画像に変換する君」を使ってアニメーションにして確認をします。そして、動きがおかしい場合や、線が歪んでたり気になるところを直します。（下図を見比べると修正した箇所がお分かりになるかと思います）
5.着彩
LINEスタンプは背景を透過しないといけないので、背景以外のキャラクターの色を塗ります。今回のキャラクターは、たまたま着彩が簡単でした。
6.文字入れ
文字が必要な場合は、絵が完成したあとに入れます。手描きで入れる場合もありますし、MediBang Paintのテキスト機能を使って入れる場合もあります。今回は、手描き感を出したかったので、テキスト機能で文字を入れた上を手描きでなぞりました。
7.塗り忘れチェックや細やかな修正
塗り忘れがあるとLINEスタンプの審査でリジェクトされ、承認までに時間がかかってしまうので、できるだけミスがないように確認をします。
8.ファイルの生成
PSD形式で書き出します。Procreate、MediBang PaintともにPSD形式での出力が可能です。ちなみにProcreateはアプリ自体が有料で、MediBang PaintはPSD形式での書き出しが有料です（他の機能を含む）。
9.余白のトリミング、画像ファイルの生成
PSDファイルをPhotoshopで取り込んだら余白をトリミングします。全ての画像が揃った状態で重なっているので、一番外側の画像に合わせてトリミングします。（これが便利！！）また、トリミングする際に、規定のサイズを満たしているかどうかも同時に確認できるので便利です。そして、レイヤーごとの書き出しをして、各レイヤーをPNGファイルとして生成します。
10.アニメーションファイルの生成
各PNGファイルを01.pngから順にリネームして、「アニメ画像に変換する君」で取り込みます。フレームレートとループ回数を指定して、最終的なファイルであるAPNGファイルを生成します。
LINEスタンプの規格に合っている場合は、フレームサイズ・総フレーム数・再生時間が緑色の背景で表示されます。サイズが大きかったり、再生時間が長かったりすると背景が赤色になるため、とてもわかりやすいです。
問題がなければ、APNGファイルを生成します。
11.LINE Creators Marketでアップロードする
ファイル形式など何か問題がある場合は、ここの時点でエラーになります。
無事にアップロードできれば、あとはスタンプ名や販売地域などの設定をして完了です！
動くスタンプを作るにあたって気をつけたこと
・シルエットだけでわかるような、できるだけ大きな動きにする
・アニメーションの楽しさを演出する
・世界観が崩れないように大きさや内容に統一感を持たせる
私が目指す動くLINEスタンプは、思わず使いたくなってしまうかわいいスタンプでした。せっかくの初アニメーションで、うまくいかないことも多くありました。動きが滑らかにならなかったり、思うような動きをイラストに描き起こせない…。思うようにならなかったアニメーションは多々ありますが、潔くお蔵入りにしました！
参考図書・参考動画
・アニメーションの本―動く絵を描く基礎知識と作画の実際
アニメーションの基礎をこの本で学びました。イラスト付きの解説でわかりやすく、動作をただ絵に起こすだけがアニメーションではないんだなということがわかりました。
・【ディズニー発】魅力的なアニメーションを実現する12の基本原則
これはアニメーションを始める全ての方におすすめしたいです！アニメーションの基礎を動画を無料で学べる嬉しいページです。上述の本に記載されている内容と重複する部分もあるので、まずはこちらの動画を見るだけでも違うと思います。感動すら覚えます！アニメーションを描かない方が見ても面白い動画だと思います。
・LINE Creators Marked 制作ガイドライン／公式動画
LINEスタンプを作るには必須のガイドラインです。作ったあとに規格外だったと気づいた場合はとてもショックです。予め読み、細かくチェックすることをおすすめします。また、公式動画は早すぎてやや分かりづらい面もありますが、参考までに見てみるのも良いかと思います。
さいごに
長くなりました…。ご紹介したように数々の工程を踏んで、動くLINEスタンプを作りました。5月7日からアイディア出しを始め、スタンプの申請が終わったのが5月14日でした。静止画のスタンプなら40個を1日で仕上げてしまうこともあるのですが、今回動くスタンプを8個作るのに1週間かかりました。もしかしたらもっと効率の良い方法があるかもしれません。今後作っていく過程で見つけたら、noteを更新したいと思います。
私一人では完成させることのできなかったLINEスタンプです。制作過程を公開し、楽しみにしてくれる方や応援してくれる方がいたからこそ出来上がった動くLINEスタンプをよかったらご覧になってください！
最後まで読んでくださり、ありがとうございました！
今回制作した、動くLINEスタンプはこちらです。
この記事が参加している募集
いただいたサポートは、2回目の個展の会場費や制作費に使わせていただきます。よかったらサポートをよろしくお願いします！