うごくLINEスタンプを作った話
はじめに
LINEのアニメーションスタンプ※ループあり
を作りました!
静止画スタンプは6年前に一度作ったことがあったのですが……6年前!?
時の流れって怖いですね。
アニメーションスタンプは今回が初挑戦です。
とりあえず、動かそう!
と思った瞬間から見慣れないソフトたちが次々と登場しまして、調べながら手を動かす日々でした。
それでも調べても出てこない情報が多く、最終的には自分で試すしかありませんでした。
この記事は、そんな手探り作業の議事録です。
「それっぽくできた」レベルの情報なので、途中で嘘をついていたらごめんなさい。
ただ、データはきちんとアップロードできています。そこだけはお約束します……!
使用ソフト
Blender
Photoshop
Adobe Bridge
Pingyu
APNG Assembler
Blenderで20枚のアニメーションをレンダリング
レトロゲーム風のピクセル感を出したかったので、出力解像度は公式ガイドラインに記載されているW320×H270に設定。
レンダリング範囲は1〜20フレームで、上限ピッタリの20枚を出力しました。
制作の流れ
以下、公式制作ガイドラインと公式動画に沿って作業しています。
全工程に共通する注意点として、画像の出力時は上書きせず
必ず別フォルダに保存することをおすすめします。
後述しますが、やり直しが発生したとき泣きます。
STEP1｜Photoshopでトリミング
全フレームに共通する余白をトリミングします。
その前に、レイヤー→重ね順→逆順にしておくと、レイヤーからファイルに書き出した際の自動命名の順番がきれいに揃うのでおすすめです。
注意 : 公式動画だけ見ていたら、縦または横を270px以上にするという項目を見落としていました。
例えば元データの不透明部分が179×264pxの場合、264pxの方が270pxに近いので、横(179px)だけトリミングして、縦は270pxのままで出力します。
また、作り終えてから気づいたのですが、LINEのトーク画面では受信したスタンプは左寄せ、送信したスタンプは右寄せで表示されます。
横幅が小さいスタンプと横幅最大のスタンプを連投すると、並んだときに若干違和感があるかもしれません…これは次回への反省です。
STEP2｜Adobe Bridgeで並び順&リネーム
公式動画はバージョンが古くUIが少し異なります。
Bridgeのショートカットをデスクトップに置いて、出力データをエクスプローラーからドラッグ&ドロップするのが一番楽でした。
画像の並び順については、下のサムネイルとループの仕様についてで詳しく書きます。
STEP3｜Pingyuでファイル容量を調整
APNGに変換すると容量が増えることがあるため、APNG Assemblerを同時に開きつつ、Pingyuで圧縮しながらAPNG Assemblerで書き出すのがおすすめです。
Pingyuでは圧縮後の合計容量が表示されないので、エクスプローラーでファイルを全選択して左下に表示される合計サイズで確認してください。
注意 : 容量削減と引き換えに画質が劣化します。
出力先は必ず別フォルダに変更しておきましょう。
元に戻すにはBlenderのレンダリングからやり直しになるので、別フォルダ保存は本当に大切です(2回目)
STEP4｜APNG Assemblerでデータ作成
Playback SettingsにあるSkip the first frameは使用しないでください。
画像が21枚扱いになってしまい、LINEスタンプの上限(20枚)を超えます。
なぜ使いたくなるのかは…次のセクションを読めばわかります。
サムネイルとループの仕様について
ここが一番調べても出てこなかった部分です。
同じところで詰まっている方のお役に立てれば!
基本の仕様
ファイル名は関係ない
スタンプ個別のサムネイル設定は存在しない
サムネイルと再生停止時の画像は、連番の先頭と末尾で決まる
ループの途中をサムネイルにしたければ、そのコマから再生が始まるように並び替える必要がある
つまり、こういうことです。
正しい対処法
スタンプのサムネイルにしたいコマ ←APNGの先頭フレーム
｜
続きのアニメ
｜
再生停止時に表示したいコマ ←APNGの最後尾フレーム
自分がやらかした認識ミスの記録
例として「20枚中19枚目の画像をサムネイルにしたい」ケースで説明します。
試行1 : 19枚目のファイル名を01.pngにリネーム
→ ファイル名は無関係。APNG内の順番で決まるのでサムネイルは変わらない。
試行2 : 01.pngにリネームしてAPNG Assemblerで1番目に配置
→ 先頭に置いた画像がサムネイルになるのは正しい。
ただ、APNG作成時に「先頭フレームをスキップ」しないと、サムネイル用に置いた画像がアニメーションにも混入してしまう。
かといってSkip first frameをオンにすると21枚扱いになって上限オーバー。
試行3 : 19枚目を複製して01.pngと19.pngの2枚を用意
→ 複製すると21枚になり、上限オーバー。
今回作成したスタンプの場合
ハートが大きくなるアニメーションで、「デカいハートの状態」をサムネイルにしたかったのですが…
仕様上、「デカいハートを縮こめてからまた錬成する」という若干シュールなループになってしまいました。
サムネイルを優先するか、再生時の見栄えを優先するか。悩ましいところです。
個人的には、アニメーションスタンプって、トーク画面を開きっぱなしで静止画として見る機会の方が多い気がして…
なので、今回は見栄えよりサムネイルを優先して続行しました。
次にループアニメーションを作るときの自分へのメモ
動きの少ない「溜め」のコマを先頭と最後尾用に用意する
モチーフ(今回はハート)を小さくしすぎない
さいごに
「よし、スタンプにするぞ!」と意気込んでも、いきなり見知らぬソフトを複数触ることになって、途中で挫折してしまいがちですよね。
時間をかけて作った作品だからこそ、アップロードまでちゃんと持っていってほしい…
そんな気持ちで、初めてのnote記事を書いてみました。
少しでも皆さんのお力になれれば幸いです!
無事販売することができました!
