Vtuber用GIFアニメの作り方

 あまりに長くなるので、Vtuber用GIFアニメの作り方は別ページにしました。ここまで見に来て下さる方はかなりマニアックですね。ありがとうございます。

ここで紹介するやり方はかなり面倒くさいので、クリスタユーザーの方は、こちらのページ（CLIPSTUDIO TIPS）をご参考の上、アプリ内だけで完結させた方が労力は少なく済むと思われます。一枚一枚画像を出力したりアップロードしたりせずに済みます。

なのになぜか面倒臭いやり方でやったのが今回の挑戦です。物好きだなぁとチベスナの目で眺めていただければ幸いです。

①キャラの画像作成

Vtuberにするキャラの画像を作成します。

ここでの『キャラの画像』は、後で動かすことを考えて、ただの立ち姿にしておくのが無難でしょう。上半身だけでもOKです。仕組みがわかって慣れてから変わったポーズに挑戦すればいいのです。

そして大事なのは、パーツのレイヤー分けです。

最低でも目（まゆ毛も）と口は、線画も含めて別レイヤーにします。頭や髪の毛も、後で動かすかもしれないな―と思ったら、レイヤーを分けておきましょう。

基本の立ち姿――ニュートラルポーズが出来たら、差分の作成に移ります。

差し当たって「瞬きのみ」と「瞬き+口パク」の二種類のGIFがあればいいので、ここでは目と口の差分を作成します。

ニュートラルポーズが目を開けた状態なら『閉じている目』を別レイヤーで作成します。

後で混乱しないように、レイヤー名もきちんと内容に則したものにするといいですよ。

そして口も、ニュートラルが閉じた状態ならば、開いた口も作成するわけですが・・・

せっかくなので中割り――中加減の状態の口も作りましょう。よりリアルな口パクになります。

中割りは口を開ける途中と閉じる途中、両方で使います。

目と口の差分レイヤーの表示/非表示を切り替えて、JPGかPNGで6パターンの画像を出力します。

同じサイズ、同じ位置で出力して下さいね。

背景も、キャラに使ってない色で塗り潰してください。動画編集の時に重要です。

そしてファイル名も「目開口閉」「目開口中」のように、差分がわかるものにしましょう。

➁出力した画像でGIFアニメを作る

前回と同じく、出力した画像を一枚一枚、バナー工房さんにアップロードしてGIFアニメを作ります。

➁‐１『瞬きのみ』のGIF アニメを作る

まずは瞬きのみのGIFを作ってみましょう。この二枚の画像を使います。

「目閉口閉」と「目開口閉」です。

しかしちょっと待ってください。やみくもに突撃するとこういう失敗をすることも。

目がパチパチ忙しい・・・

目を閉じる頻度をきちんと考えて作りましょう。

重ね合わせる枚数は「10枚以内」、「ループする」、点滅間隔（全体設定）は「0.1秒」に設定し・・・

下のようにアップロードします。「目開け(1.9秒)、目閉じ(0.1秒(全体設定に従う))」に設定しました。

そしてページ下部にある「GIFアニメを作る」ボタンをクリック。

キャラが瞬きしているGIFアニメが出来ました！

➁‐２『瞬き＋口パク』のGIFアニメを作る

次は『瞬き＋口パク』のGIFアニメを作成します。

目に関しては先程と同じ「目開け(1.9秒)　目閉じ(0.1秒)」ですが、「目開け(0.1秒)×19　目閉じ(0.1秒)」にします。口パクと組み合わせるので間隔は0.1秒に統一します。

口に関してはこういう並びになります。

「口閉じ(0.1秒)　中割(0.1秒)　口開け(0.1秒)　中割(0.1秒)　口閉じ(0.1秒)　中割(0.1秒)　口開け(0.1秒)　中割(0.1秒)　口閉じ(0.1秒)　中割(0.1秒)　口開け(0.1秒)　中割(0.1秒)　口閉じ(0.1秒)　中割(0.1秒)　口開け(0.1秒)　中割(0.1秒)　口閉じ(0.1秒)　中割(0.1秒)　口開け(0.1秒)　中割(0.1秒)」

訳わかりませんよね。要するに、今回の場合「口閉じ・中割・口開け・中割」の4要素で一周するので、綺麗にループさせるには要素の合計は4の倍数にしてやる必要があります。

今回は20個、秒数の合計も2.0秒になっているところがミソです。目と口とは、同じ秒数合計にしましょう。秒数が合わなければ目の瞬きの間隔を変えましょう。

文章だとわかりづらいので、目と口を組み合わせた表（ExcelでもGoogleスプレッドシートでも）を作るといいと思います。

数字はGIFアニメ作成時にアップロードする順番を表しています。１番目に「目開口閉」を、２番目に「目開口中」を、三番目に「目開口開」をアップロードする、ということです。

さあ、実際にバナー工房さんで『瞬き+口パク』GIFアニメを作成してみましょう。今回は『20枚以内』『ループする』『0.1秒』に設定します。

表の順番通りに画像をアップロードします。今回は全部「全体設定に従う」（←0.1秒）でOKです。

スプレッドシートの表でもわかるように19枚目まで「目開口閉」「目開口中」「目開口開」「目開口中」の順番で繰り返しアップロードします。

20番目のみ「目閉口中」にして、『GIFアニメを作る』ボタンをクリックします。

出来ました！『瞬き＋口パク』のGIFです！

これで「瞬きのみ」「瞬き＋口パク」の二種類のGIFアニメが出来ました。

ここまで来て気付いた方もいらっしゃるでしょうが、最初に出力した画像のうち二枚、使用していないのがあります。『目閉口開』と『目閉口閉』です。この現象に関しては後述します。

➁-3 ちょっと高度な動きのGIFを作ってみる

仕組みを理解したら、瞬きの感覚を「パチ…パチ・パチ」にしてみたり、怒りや悲しみなどの表情を増やしたり、髪の毛や頭を動かしてみたりするのもいいかもしれません。

ただし、覚悟して下さい。めちゃくちゃ面倒臭いです！ここでは髪の毛と頭を動かすGIFの作り方を紹介します。

➁-3-1　髪の差分を作る

まず、このキャラの立った髪（厳密に言うと違うのですが、面倒くさいので『前髪』と呼ぶことにします）を左右に振った差分を作ります。この前髪のレイヤーは最初から分けて作ってある前提でお話しします。

前髪レイヤーを二つ、複製します（前髪のレイヤーが三つになります）。

コピーレイヤーの一つを選択し、回転させます。中心は、髪の付け根辺り、線画の途切れた場所にしました。目印が無い場合は印を作っておきましょう。

「+」マークのところが回転の中心です。ここを中心にして、右方向へほんのちょっとだけ回転させます。あまり回転する角度が大きいとガクガクするので2°～3°がいいでしょう。そしてレイヤー名も「前髪・右」等に変えておくといいですよ。

同じようにもう一つのコピーレイヤーも、今度は左に２°～３°回転させます。レイヤー名を「前髪・左」等に変えるのも忘れずに。

注意しなければならないのは、口と違って前髪や頭は、ニュートラルポーズが中割になる事です。

これで三つの前髪差分レイヤーが出来ました。

➁-3-2　頭の差分を作る

今度は頭の差分を作りましょう。

さっきの前髪や目や口の差分レイヤーと、頭全体のレイヤーを格納した「頭正面」のレイヤーフォルダーを作ります。

この頭レイヤーフォルダーを、さっきの前髪と同じように二つ複製します。そしてまた、ひとつのコピーレイヤーフォルダを右に2°～３°回転させ、同じようにもうひとつのレイヤーフォルダを左に回転させます。回転の中心は、首と繋がってる辺りです。

複製し回転させたレイヤーフォルダの名前も「頭右」「頭左」に変えておくことを忘れずに！

➁-3-3　画像出力する前に表を作る

頭の振りと、前髪、目、口…差分の組み合わせは全部で何通りになったのでしょうか。

頭３通り×前髪３通り×目２通り×口３通り＝54通り

頭を振って前髪揺らして瞬きして口パクしているGIFアニメを作ろうとしたら、54枚も画像を出力しなきゃならないの！？と驚いたことでしょう。しかしそんな必要はありません。

思い出してください。さっき『口パク＋瞬きGIF』を作った時、6枚の画像を用意したけれどそのうち２枚は使わなかったことを。今回もそういう、使わない画像が結構あるはずです。データ容量と時間の無駄遣いになるのでそういうのは最初から出力しないようにしましょう。

どの組み合わせの画像を出力するかは、またさっきと同じように表に書き出してみるのが一番わかりやすいです。差分パーツをそれぞれどういう動きにするか考えながら書き出してみましょう。

さっきも少し言及したように、頭と前髪はニュートラルポーズが中割になっています。また、「閉・中割・開・中割・閉…」と均等に動く口と違って、「中割・右（×n）・中割・左（×n）・中割・右（×n）…」というのが自然な動き方になります。

これは、私がこのたび作ったキャラの『頭振り+前髪揺れ+瞬き＋口パク』GIFの表です。慣れないうちは、この表をこのまま利用してください。

この表にある通りに差分レイヤーの表示/非表示を切り替えて、GIFアニメを構成する画像を出力します。ファイル名も表と同じ『正正開閉』『右右開中』とするといいと思います。

正正開閉　正正開開
右右開中　右右開開　右右閉閉　
右正開中
右左開中　右左開開　右左開閉
左右開中　左右開閉　左右閉開
左正開中
左左開閉　左左開中　左左開開

16通りの画像出力で済みました。それでも結構多くて面倒ですが、54通りも出力することを考えればだいぶ省エネになっています。

➁-3-4　バナー工房さんに画像をアップロードしてGIFアニメを作成する

出力した画像をバナー工房さんのサイトでアップロードします。さっきの表、あれはまだ必要なので見える所に置いておいてください。

さっきと同じように、『20枚以内』『ループする』『0.1秒』に設定します。

下にスクロールして、表の順番通りにアップロードしていきます。

１番目に「正正開閉」という名前の画像ファイルをアップロードするんですよー。２番目は「右右開中」、３番目は「右右開開」です。こんな具合に表を見ながら画像をのべ20枚アップしましょう。

間違えると何枚目にアップした画像がおかしいのかがわかりづらいので、慎重に確認しながらアップして下さい。それが済んだら『GIFアニメを作る』をクリックしましょう。

はい、頭・前髪を揺らしながら瞬きと口パクをするキャラのGIFアニメが出来ました！

差分作成も出力もアップロードも、めちゃくちゃ面倒でややこしいと思いますので、試してみる時はどうか覚悟を決めてから臨んでください。

でもこれで、GIFアニメで作るVtuberがよりリアルに動くようになりますよ。

Vtuber作成の続きは『#２　GIFアニメでVtuber（もどき）をつくってみた！』の『2　GIFアニメを動画編集ソフトに読み込む』をご覧ください。