1. Twitterに投げたアニメコラGIFまとめ

解像度がまちまちなのは1000kB制限のためです。許してや城之内

• ゆるほも♂
  
  ①2015/10/31
  
  
  ②2015/09/08
  
  
  ③2015/08/28
  
  

• 卑モノ♂弟！ヴッ！まらくん
  ④2015/09/13
  
  
  ⑤2015/08/23　　　　　　　　　　　　　　　　　　⑥2015/08/06
  
  
  
  ⑦2015/07/26
  
  

2. アニメコラGIFの作り方

　アニメ映像のキャラクターの顔部分に、ガチムチキャラ等の実写系顔素材を合成したコラ動画の作り方をざっ♂くりと説明します（唐突）。一口に「コラ」といっても様々な形式がありますが、当記事では前章に挙げたような「髪型や輪郭を残し表情部分を実写素材に置き換えた形式」のコラについてのみ解説します。使用するソフトは

• 画像編集（静止画切り抜き用）：GIMP
• 動画編集（静止画結合用）：AviUtl

を想定していますが、他のソフトをお使いの方にも多少は参考になるかと思います。以下、前節に挙げた①を作る過程をたどりながら、各項目ごとに述べます。

＊項目に付したマークの意味

• [( ^ω^)]：基礎的な事項を表します。これくらい既知のエリア♂という方は飛ばして構わん、次いこっ！
• [(U)]：ハッテン♂的な事項を表します。少々細かくてめんどくさい内容ですので、興味の無い人はな・・・スルーが気持ち良いぞ♂

2.0. 序♂画像サイズとフレームレート[( ^ω^)]

　基本的にはAviUtlで連番出力した画像をGIMPで切り抜き、それらを再びAviUtlに取り込み実写系素材と合わせるという流れで作成します。そこで、AviUtlのプロジェクトファイルの初期設定として、画像サイズ及びフレームレートを正しく入力する必要があります。
　まず、画像サイズはアニメ映像の解像度と同じ値に設定しましょう。最近のアニメですと16:9、一昔前のアニメですと4:3のアス比になっていることが多いです。
　次に、コラを作る上での律速段階となる切り抜き作業の回数の問題に直結する「フレームレート」ですが、アニメではよく23.976fps（fps=frame per second:1秒あたりに描画される枚数）という値が採用されています（ただし稀に違うこともあるので、真空波動研などで一度確かめてみることを♂スメします）。中途半端な数値なのには理由があるみたいですがここでは触れません。だらしねーしｗ
　即ち、これからコラ動画を作る際、フレームレートの設定値を23.976fpsという値より　　

• 大きくした場合：まったく同じ画像をいくつも読みこんでしまい、できあがりを出力した際無駄にファイルサイズがかさむ
• 小さくした場合：画像を読み落としてしまい、できあがりがカクつく

という不都合が生じます。
　この値は、皆さんがニコニコ動画で見る、或いは作るMADのフレームレート(29.97, 30, 59.98, 60fpsなど)よりも一般に小さいということに注意が必要です。従って、アニメ動画をAviUtl拡張編集タインムラインに取り込む際、必ず
　
　拡張編集タイムライン上で右クリック　
　↓　
　新規プロジェクトの作成　
　↓　
　以下のように値を設定（他の数値は原則いじらなくてよい）
　・画像サイズ：アニメ映像と同じ値に設定
　・フレームレート：23.976fps

　という手順を踏んでください（Fig.1参照）。特に、MAD作者の方の場合、デフォルトの数値は普段MADに用いている値に設定されていると思われるので注意してください。また、画像サイズは後からでも設定→サイズの変更により自由に変えられますが、フレームレートは設定→フレームレートの変更でも（任意には）変えられないので、必ず確認してください。　


　Fig.1 AviUtl拡張編集初期設定画面　

2.1 コラしたいシーンの連番静止画像抽出

　まず、①で使ったゆるほも♂の元映像を拡張編集にブスリ♂し、再生位置をいじって該当箇所とプロジェクトファイルの1フレーム目を合わせます。ここでは、アニメ映像の22791フレーム目が開始位置となっています（Fig.2参照）。
　

　Fig.2 コラを施す箇所。Layer2には透明度100のテキスト「ループ」を置き、ループ箇所が見易いようにした。12フレームの動きが何回も繰り返されていることが分かる。今回はビリーの動作に合わせ2ループ分を用いる　
　
　カーソルを動かしていくと、ともこさんは12フレーム1周期のループで首を振っており、その間あかねさんは微動だにしていないということがわかります。では、この12フレームをあかねさんとともこさんのすべての顔に対し切り抜かなくてはいけないかというと、そんなことはありません。アニメでは作画作業の節約のためか、CG映像や一部の早い動きまたはぬるぬるした動きを除き、1モーションにつき2フレーム割いていることが非常に多いです。要出典♂この映像の場合も、3フレーム動作と1フレーム動画が一か所ずつ混じっていただけで他はみな2フレーム動作でした。従って、実際に切り抜き作業をしなければならない静止画は、　

• ともこさんの切り抜き：6枚（1ループ内の異なる画像の枚数）
• あかねさんの切り抜き：1枚（動かないので）

の計7枚だけです。このように、アニメ映像には画像のループや1モーション2フレームの原則があるため、実際の作業枚数は


程度で済むことが多く、いざぁ♂やってみると意外に手間がかからなかったりします。

＊後の説明を見て頂ければわかりますが、本記事で紹介する方法では、もしあかねさんが喋ったり表情が変わっていたりしても、切り抜き枚数は1枚ですみます。切り抜き枚数を決めるのは輪郭や髪型の異なるフレーム数であり、その内側の表情には一切関係がありません。
＊1モーション2フレームの原則は、あくまでキャラ個々に対してのみ成り立っています。他のキャラも動いている場合、そのキャラの動作の開始フレームが奇数フレームずれていることもあるので、単にフレームレートを半分にして全部静止画抽出すればいいということではありません。

2.2 GIMPによるキャラの顔切り抜き作業

該当箇所をAviUtlから連番BMP出力して不要なフレームをすべて削除したら、GIMPでの作業に移ります。最初のフレームをGIMPで開きます。

2.2.1 パスを用いた切り抜き[( ^ω^)]

　GIMPを起動し最初のフレームを開き名前を付けて保存（このときフレーム番号を付しておくと便利）したら、パスウィンドウとレイヤーパレットを表示しておきましょう。ツールボックスからパスを選択し、図のようにともこさんの顔の輪郭に沿ってアンカー（点）を大雑把に打ち込みます。アンカーは好きなタイミングで追加・削除できるのである程度テキトーにポチポチ打ち込んでしまって結構です。
　

　Fig.3 アンカーの打ち方。輪郭に沿って大雑把に打ち込む。適当に拡大して打つと気持ち良いぞ♂　

　パスからハンドルを出し、曲げてアンカー間を滑らかな曲線でつなぎます。この作業はなるべく画像を拡大して行い、輪郭にしっかりフィットさせましょう。終わったらレイヤーパレット内の画像を右クリック→アルファチャンネルを追加　で透過情報を扱えるようにします。
　

　Fig.4 パスのフィッティング。ここで正確に輪郭に沿わせる　

　これで顔をパスで囲めたので、パスツールから「パスから選択範囲を作成する」をクリック
　→「選択」ボタンを押して「選択範囲を反転」（Ctrl+Iでも可）
　→「選択」ボタンを押して「境界をぼかす」（この操作はお好みで。アニメ映像は輪郭がはっきりしているので別にしなくてもいいかも。ちなみに私は720p画像に対して3ピクセル程ぼかしをかけています）
　→DELキーを押して削除
　→「ファイル」ボタンを押して「エクスポート」（Ctrl+Shit+Eでも可）を選びpng形式で保存
　→上書き保存

の操作により切り抜き画像が得られます。


　Fig.5 顔部分の切り抜き　

　この一連の操作を、他のフレームのともこさんすべてとあかねさんについて行います。馴れれば1画像につき5分とかからなくなります。　

2.2.2 次フレームへの移行（パスの使い回し）

　以下のような操作をすると、次のフレームのxcfファイルに現在のパスを移すことができます。これにより面倒なアンカー打ち作業を省くことができて気持ちいいもの・・・気持ちいもの・・・！　

レイヤーパレットに次フレームの画像をドロップ　
→現在のフレーム（切り抜き済のフレーム）のレイヤーを右クリックして「レイヤーの削除」　
→「名前を付けて保存」を選び、フレーム番号の部分を次フレームの番号に書き換えるBB素材を自作したことのある人にはお馴染なんですよなｗ　

　パスはAltを押しながらクリックすることで全体の形を保ったまま移動できますので、適当に移動して大雑把に位置合わせし、同様に切り抜いてください。

2.3 実写素材とのケツ♂合
　
　切り抜いた画像をアニメ映像の該当フレームにドロップします。ドロップするレイヤーですが、とりあえず図のようにLayer2にあかね、Layer5にともこの画像を並べておきます（Fig6参照）。切り抜いた画像を元の位置に置くだけなので、当然ながら並べてもウィンドウ上の映像は変化しません。　　


　Fig.6 切り抜いた素材をドロップ。レイヤー7は透明度100の描写されないテキストで、ループ位置を見易くするためだけのもの。以下同様

2.3.1 実写素材（透過）の合成

あかねさんには、ビリー本人が全世界にロイヤリティフリーで配布したこちらの画像をコラします。

pic.twitter.com/1JQMcdVBr6

— Billy Herrington (@BillyHerring777) 2015, 10月 29

この画像の顔の部分を切り抜いたこちらの透過pngを使います。
<なんだテメェ・・・
こちらをあかねレイヤーの直下のレイヤーに入れ、右クリックメニューから上のオブジェクトでクリッピングを選択します（この状態にするとオブジェクトの文字の下に赤線が引かれます）。「上のオブジェクトでクリッピング」とは、直上レイヤーのオブジェクトの不透明部分の形に画像をクリッピングするという機能で、マスクフィルタと似たような動作をします（Fig.7参照）。


　Fig.7 本格的 ムチムチSUMOに「上のオブジェクトでクリッピング」を適用し、赤さんの透過画像の下に配置した例。赤さんの形に大ちゃん（女神）が切り取られる

　従って、「上のオブジェクトでクリッピング」状態のアニメキャラ切り抜きの直下のレイヤーに実写素材を置けば、実写素材をアニメキャラの切り抜きの形に合わせてクリッピングすることができます。（Fig.8参照）

　
　Fig.8 左は「上のオブジェクトでクリッピング」適用前、右は適用後。
　
　これでアニメキャラの顔の輪郭に沿って実写素材を合わせることができました。
　
＊下あごを輪郭の外に出す方法

　必須ではありませんが、くりぃむしちゅー池田などのあごに特徴を持つ実写素材を合成する際には役立つと思われる下あごの出し方を説明します。
　意味深に空けてあるビリー画像の下のレイヤーにビリー画像をコピペし、「上のオブジェクトでクリッピング」を解除したら、「クリッピング」フィルタで「上」の数値を上げてください。いい感じに顎が出れば完成です（後でも述べますが、下あごを出すことができるのは実写素材の顔だけを切り抜いた透過素材がある場合に限ります）。
　

　Fig.9 下あごを出す場合。要は、あごの部分だけの画像をさらに上から貼っている　　　　
　　
　　基本的な方法はこんな感じです。この方法の長所として考えられることを以下にまとめます。　　

• キャラクターごとに合成が可能
  　例えば、前章の⑦のような多くのキャラが独立に反復運動をしている場合、大抵キャラごとにループの開始時間や周期が異なっています。このような場合、全体画像を切り抜く方法だと大変手間がかかってしまいます。　
• 背景やキャラの表情の変化が作業に影響しない
  　 2.1でも言及しましたが、アニメキャラの顔は単なるマスクとして使っているので、表情や背景が変化してもいちいちフレームごとに切り抜く必要がありません。

2.3.3 実写素材（非透過）の合成

　続いてともこさんには、パンツレスリングの兄貴 バイク編にてビリーが電話を掛けているシーン（フレーム番号6663～6676の12フレームを再生＆逆再生でループ可能にした映像）を合成することにします。　
　<な～んだそ（の顔）りゃ（笑）！？

　基本的には先ほどの節で説明したことと全く同じやり方ですが、オブジェクトの座標はマスク位置に応じて変えなくてはなりません。ブチブチ動画を2フレームずつ切るのでは扱いづらいので、座標と角度に「瞬間移動」を適用し、マスク位置に合わせて中間点を打ってコラの位置調整を行ってください。今回は実写素材が動くので、顔が動いて位置がずれる場合は適宜中間点を追加して微調整してください。


　Fig.10 実写動画素材の位置合わせ。動画コラは普段めったに使わない「瞬間移動」が重宝される貴重な例のひとつ
　
　言うまでもないかもしれませんが、動画素材の場合、下あごだけクリッピングするのは実質不可能なので、下あごを輪郭の外に出すことはできません。もし、動かしつつ下あごを出したい場合は、sm9561087やsm21403701のような顔だけのブルーバック素材を作る必要があります。　

　これでめでたく完成です！！！♂♂♂

2.3.5 キャラの顔が奥行き方向へ傾いているときの合成[(U)]

　「上のオブジェクトでクリッピング」はコラに限らず音MAD作成でも当たり前のように使うほど便利な効果ですが、ひとつ重大な欠点があります。それはカメラ制御下では使えないという点です（よく考えたら当たり前ですが）。しかし、コラをするに当たって、アニメキャラの頷いたり顔を伏せたりといった動きに実写素材をぴったり合わせようとすると、どうしてもカメラ制御のもとでx軸またはy軸回転のパラメータを調整し3D的に処理する必要があります。　

　そこで、有用なスクリプトを一つ紹介したいと思います。　
　ゆうきさん（user/17252966）の一時保存読込EXTです。導入方法及び操作方法は上に貼った動画及びティムさん（user/1366031）の類似のスクリプトについての説明動画（sm15784672）を見て頂いた方が分かりやすいので割愛させて頂きますが、ざっくりと説明すると、「一時的に保存EXT」カスタムオブジェクトより上のレイヤー群からなる映像を、同じ開始時点にある「保存画像を読み込みEXT」カスタムオブジェクトに出力するという、フレームバッファの上位互換としての効果を発揮します。

　以下、このスクリプトを使った3D的コラの方法を、前章④の前半シーンのメイキングを通じて説明します。
　④の元映像のネギを持ったうまるちゃんの顔は、若干下を向いています。このうまるちゃんにコラを施すためには、実写素材を3D的に傾けなくてはなりません。
　

　Fig.11 ④の元映像。うつむき加減のうまるちゃんにコラをするには3D的な処理が必要 　

　そのためには、まず以下のようにオブジェクトを配置します。

• 最上段レイヤーに背景（図形）（色は(R,G,B)=(0,0,255)の青一色にしておく）
• 二段目のレイヤーにカメラ制御（対象レイヤー数は1としておく
• 三段目のレイヤーに実写透過素材（拡張描画）
• 四段目のレイヤーに「一次保存EXT」カスタムオブジェクト

　ここで実写素材のx,y軸回転をいじれば顔を傾けることができます。
　

　Fig.12 立体的に傾いたビリーの顔をBB映像にする

　そして五段目のレイヤーにアニメ本編、六段目のレイヤーにうまるちゃんの切り抜きを置いたら、その直下のレイヤーに「保存画像の読み込みEXT」を置き、一段目から三段目のレイヤーからなるBB動画として出力してクロマキーを適用して透過します。あとは、今までと同様に、「保存画像の読み込みEXT」に「上のオブジェクトでクリッピング」を適用して位置合わせをすればコラできます。今回のようにBBとして透過出力すれば、下あごを出すこともできます（この例は見た目の印象を考慮して下あごを出しませんでした）。
　

　Fig.13 一段目から三段目レイヤーで作ったBB動画を七段目レイヤーで出力して「上のオブジェクトでクリッピング」を適用する

　これで「上のオブジェクトでクリッピング」の恩恵を授かりつつカメラ制御を使うことが可能になりました。
　
2.4 GIFファイル出力[( ^ω^)]
　
　今までに述べたことは最終的な出力形式には関係が無く、GIFファイルに限らずMP4ファイルのMADなどにも適用できますが、お題目にGIFコラと明記してしまったので一応GIFファイル出力について軽く言及します。
　一言で言ってしまうと、「作り上げたAviUtlファイル全体に対して連番BMPファイル出力を実行し、それらをGIF編集ソフト（フリーで色々転がってます）にぶち込んで出力」して終わりなのですが、Twitterのように、アップロード先の規定により容量制限（Twitterの場合3MB）がかかっていることが殆どです。容量を減らすには、動画サイズを縮小する、ビット深度を小さくするなどの方法がありますが、一番支配的な因子は前者です（単純に無圧縮だとしたら解像度を1/4にするとピクセル数は(1/4)^2になるので容量は1/16になります）。Twitterなどはどうせ小さいツイート窓の中でしか再生しないので、まずはこちらを考えましょう。ビット深度は小さくし過ぎると色合いが悪くなるので、最低でも5bit（32色）くらいが限界でしょう。
ちなみに、BMP出力の前にAviUtlで

　設定
　→リサイズフィルタの設定（画像サイズを数値入力で指定することも可）
　→フィルタ
　→「リサイズフィルタ」にチェック
　
という操作をしておけば、画像サイズを縮小してから静止画を抽出することができます。
　GIF編集ソフトはどれを使っても大差ないと思いますが、GIMPでのGIF制作は仕上がりの質がアレな感じなので避け、適当なフリーソフトを落としたほうが良いでしょう。ちなみに、アニメと同じ23.976fpsで出力したいのなら、各フレームの表示時間は1÷23.976[1/sec]=41.7[ms]となります。ちなみに現在Twitterにはmp4が投げられるしそっちの方が許容容量でかいしエンコしやすいしでGIFの利点はループ再生に対応していることくらいしかなくなったおそうなったお（哀）

3. ひとこと♂

　だらだらと続く見苦しい駄文にお目通し頂き、ありがとうなトシ＆ヤーサーセンｗより効率的なコラ方法をご存知の兄貴はアドバイスして頂けるとありがたいです。
　この方法を用いて皆さんがコラgifに挑戦して下さったり、歪みねぇアニメコラMADを作って下さったりしてもらえれば感無量♂です。最後に私が愛してやまないコラMADを紹介して終わります。