ドット絵アニメ『ひとりにしないで』メイキング
#猫の日 です。いいですね（なにが）。
というわけで今回は、昨年の #ネコの日 に作った猫ドット絵GIFアニメ『ひとりにしないで』のメイキングをおとどけします！
4コマまんがからGIFアニメへ
ところでnoteの記事タイトルにも使っている猫関連のドット絵は、もともと4コマまんが用に描いたものです。シンプルな背景に猫などのキャラクターをスタンプのように配置して、あとはちょこっとセリフをつけて手軽に4コマまんがを作ろう、といわけです。昔描いたのを参考にお見せします。
日付をみると、8年前の猫の日に描いたようですね。やってることに進歩がなくてもうしわけない！ なお、タイトル込みでの4コマ編成なので変則的ですが、そこは気にしないでください。
『ひとりにしないで』も、もとはこの4コマまんが用に考えたネタでした。でも4コマ（しかもタイトル込み）におさめるのは難しく、内容的にもループした方がいいだろうということでGIFアニメに挑戦することにしたのです。
1. キャラクタースタンプを用意する
最初の作業はキャラクターの用意です。4コマまんがで使うための場面やキャラクターをあらかじめ作りためてあったのですが、今回はちょうどいいのがありません。
スタンプとして流用しまくります。
今回のネタは「追うオス猫」と「追われるメス猫」の関係を描いたものなので、オスは歩く必要があり、メスは見た目でメスとわかるよう小柄で三毛猫にします（※三毛猫はほとんどがメス）。このどちらもスタンプがありませんので、新規に描きます。
茶トラ（オス）は左右反転させればいいのですが、ミケ（メス）は左右の耳の色の都合で左右両向きを用意します。ミケは歩きませんが、尻尾をパタパタさせる動きがあるので意外と多めになっています。
2. 背景を用意する
次にアニメの舞台となる背景を用意します。GIF形式の仕様で使用色を256色におさめる必要もあり、できるだけ情報量を減らしたいので青空の草原を舞台にしました。
なおサイズは、8倍すると640ドットになるのが都合がいいので幅は80ドットに、縦はモニターの縦横比などに近くできる48ドット（8倍すると384ドット）にしました。
手前の草原には縦線を加え、色同士の境界を潰しつつ草が生い茂る感じを出します。
この木は「ミケにとっての家のようなもの」を示したいので"屋根っぽく枝葉が覆いかぶさる木"がいいなと思い、脳裏に浮かんだ『ブブリムグレープの樹（FF11）』の枝部分を参考にしています。
3. 基準となるコマを作り全体像をみる
次に、お話全体の流れを決めるため、展開のキーになるコマを作っていきます。アニメの設計図、いわゆる「絵コンテ」みたいなものを意識します。
この時点で試しにGIFアニメにしてみるのもアリです。
だいたい、これで伝わりますね。むしろ「これだけでいいじゃん！」という声が聞こえた気がして動きをつける意欲が失せますが、きっと幻聴ですから負けてはいけません。
この8枚を8つのシーンとしてそれぞれに動きをつけていくことにします。
なお、このように縦に並べた画像を作る必要はないのですが、画像を並べて"流れ"を見ながら管理できるようにしないと、ここから先の作業はわけがわからなくなるおそれがあります。アニメの動作をテストしながらコマを足したり引いたりするので、コマごとの画像1枚1枚に番号をつけて管理する方法はあまりオススメできません。
画像を並べて管理できるツールが思い当たらない場合は、『Excel』や『Googleスプレッドシート』などの表計算ツールをレイアウトツールとして使うのもアリです。全貌を見ながら、足したり引いたり、順番をササッと変えたりできればそれでいいのです。
4. 動きをつける
お話の流れは絵コンテ的なもので"縦"に示したので、あとはそれぞれのシーンを動かすために必要なコマを作り、"横"に足していきます。
かなりたくさんのコマを作り足すので大変そうに見えるかもしれませんが、コマごとに位置を少しずらしてキャラスタンプをペッタンペッタンするだけなので、意外と単純な作業でサクサク進みます。
5. GIFにまとめてテスト…テスト…
あとは、これらの全コマ画像をGIFアニメ編集ツールに順番に読み込み、コマごとの表示時間を設定してアニメーション化します。冒頭でミケがキョロキョロするところなど、同じ画像を流用する場合もあります。
なお本作の場合、キャラクターの動き（各コマの表示時間）は0.3秒（早い動き）、0.5秒（中間）、1.0秒（遅い動き）を使い分けています。TVアニメのように「1秒間に何コマ表示するか」というかたちで決めるのではなく、ここまで紹介してきたようにまずは必要な場面を作り、あとからそれをどれくらいの長さで表示するか調整していきます。
なお、完成するまでは原寸（1倍）のままでアニメにしてテストを繰り返します。
1コマあたりの表示時間を調整したり、足りないコマを描き足したり、と何度も手を入れるので、大きく見せるための"拡大版"は動作が完璧にできてから作ります。
6. 拡大版を作成して完成！
テストを繰り返し、アニメーションに問題がないことを確認したら、最後に全コマ画像を大きくした"拡大版"を作って完成です！（完成版GIFアニメは下記の記事中にあります）
ところでこの作品、実は数年前に作りかけて一度やめたものなのです。当時は4コマまんがと同じ48x48ドットで作ろうとしていました。
当時のテスト版GIFアニメが残っていたので、見てみると……2つの問題に気付きます。
ひとつめの問題は、メス猫の方が見た目でメスとはわからないこと。もうひとつは、オス猫が帰るときに尻尾をあげていることです。
この作品で表現したいことは「ベタベタしすぎちゃダメよ……でも、ひとりはさびしい」くらいのことなので必ずしも雄雌の関係でなくてもいいのですが、尻尾をあげている方はダメ！ 猫が尻尾をあげるのはご飯をねだるときなど、ポジティブに興奮しているときだとされているからです。
メスにしつこくして、追い返されて喜んでるオス……これではHENTAIアニメになってしまいます。しかもまたやってくるし！ HENTAIは何度でもやってくる！ これはヤバすぎ、見方によってはホラーです。
というわけで、なにより大事なのは猫の修正をよく知り、うっかり忘れないことではないでしょうか。ぼくもまだまだ勉強が必要そうなので、これから近所へ猫ストーカーしに行こうと思います。
この記事が気に入ったらサポートをしてみませんか？