活動漫画館式動画講座

この動画講座はグラフィックスワールド誌2002年10月号に掲載された記事をWEB用に修正したものです。

文＝のすふぇらとぅ★

GIFアニメ制作ツール

GIFアニメを作るには、GIFアニメ制作ソフトが必要です。GIFアニメ制作ソフトは、オンラインソフトからパッケージ製品までさまざまな種類があります。これらは「描画」と「アニメーション化」の機能がセットになっているものが多く、それを使えば簡単な線画のアニメーションなら誰でも楽に作成できます。ただし、「描画」と「アニメーション化」の2つの機能がセットになっていてるものは、一見お得に感じますが、機能に満足できない場合が多いです（テレビ＋ビデオ、消しゴム＋鉛筆、シャンプー＋リンス…のように）。
GIFアニメ制作ソフトの場合は、描画機能が物足りないものが多いですね。PCで絵を描いている人なら、使い慣れたお絵描きソフトと比べれば「最低限の描画機能は揃っているが、いざ本格的に作品を作ろうとすると何か物足りない」そんな感想を持つことでしょう。
 僕の場合、GIFアニメーション制作は、作業全体の9割以上が作画、1割未満がアニメーション化（時間の割付け）なので、描画機能が物足りないGIFアニメソフトを使って作画するよりも「Painter」や「Photoshop」などの、普段使い慣れた描画機能が豊富なソフトで作画した方が良いと思ったんです。
活動漫画館のGIFアニメは、アニメーション化に「GifBuilder」描画には「Photoshop」を使っています。僕はMacユーザーなので、この組み合わせが一番ベストだと判断しました。Photoshopは簡易版でも充分ですよ。アニメーション化にImageReadyを使うのは高機能すぎて処理が遅く、直感的な操作が困難です。Windowsであれば、「描画ソフト」と「アニメーション化ソフト」は、オンラインソフトでも何通りも組み合わせがあると思います。探してみましょう。

STEP.1 制作前に決めておく事

GIFアニメを制作にするに当たって、作業効率やクオリティを高めるために、仕上がりをどのような形式にするかを決めてから作業に入った方がいいです。僕はGIFアニメをグレースケールで作っていますが、これは、色数に制限のあるGIFアニメでは、カラーで作っても良い画質のアニメーションは期待できないから。しかし、グレースケールであれば、同じ色数でもグレーの階調に色を配分できるので、写真のような精密な画質も可能になるんですよ。
例に上げている画像は、未発表の作品ですがこれをサンプルにして説明して行こうと思います。

●画像サイズ（180×96ピクセル）
このサイズは、見る人に映像面積が広く感じさせるように横長のサイズにしています。200×150ピクセルぐらいの縦横比の方が描きやすいかもしれないし、640×480の標準的なサイズでも良いんですが、面積に比例してファイルサイズも大きくなるのでWEB公開用に小さくしてます。

●総フレーム数（800フレーム）
Mac用のGIFアニメソフト「GifBuilder」の限界フレーム数は800フレーム前後です。（820フレーム以上のアニメーションを保存しようとするとシステムエラーがでる）。ImageReadyだと1000フレーム以上のアニメを作る事も可能です。Windows用のGIFアニメソフトでも1,000フレームまで作れるものもありますよ。フレーム数が多くなるとファイル容量も大きくなることに注意しましょう。

●総時間数（1〜3分）
1秒間に10フレーム再生されるアニメなら、800フレームで80秒、静止画をうまく挿入すれば3分以上の作品にすることも可能です。GIFアニメでは、1フレームごとに再生時間を変更できるので、場面によってはインターバルを調節して再生速度を速くしたり遅くしたりすることも可能。1つのコマを数秒表示し続けることもできます。上手く使い分けると、メリハリのある作品を作れるので、ストーリーを思いついたら、絵コンテを描いてみて、作品全体の総時間数がどれくらいになるかを把握しましょうね。その方が気分的に楽だから。

●画像の色数（16色＝4ビットカラー）
GIFアニメでは、256/128/64/32/16/8/4/2色の8段階の色数を設定できます。僕の場合は、16色（4ビット）なんですが、これはグレーの階調が美しく見えるギリギリのレベルだから。これ以上低く設定するとグレーの階調が飛んでしまい不自然になり、これ以上高く設定すると、ファイルサイズが大きくなり過ぎてしまいます。

●インターバル時間（6以上）
GIFアニメは、各コマごとの表示時間を変えることができます（基本は100分の10秒）。この数字が小さいほど速く再生されますが、Windows版のInternet　Explorerや一部のブラウザでは最高速度は6（100分の6秒）が限度らしいので、それ以上速く設定しないよう気をつけましょう。

※画像の最適化（不動部分をカットして容量を軽くする）は、再生速度にばらつきが出るらしいので使ってません。

STEP.2 下描き

アニメーション制作は、辛くて地味な作業の連続です。無計画に作業を進めて、途中で予定が狂った時は、計り知れないほどの精神的ダメージを受けることになるので、予めストーリーを文章化したり、絵コンテを描き、総フレーム数（コマ数）、総時間数などを予測しておいた方がいいです。この段階で綿密な計画を立てておけば、その後の作業がスムーズに進められるので、レイアウトや台詞、秒数、キャラクターの動きなど、思いつくことをできるだけ詳しくメモしておきましょう。


制作前に書いたアニメの創作メモ。絵コンテほど丁寧に書く事は滅多に無いです。自分が見て分かればよろしい。

 予め描いておいた絵コンテを参考に、下描きをします。紙に下描きしておいて、スキャナで読み込む方法でも良いですが、800フレームもの作品を作る場合は、ワンカットずつスキャンをするとしても手間がかかりすぎるので、Photoshopのレイヤー上に直接描いていきます。

この時の画像サイズは、［720×384ピクセル（完成時の縦横4倍のサイズ）］。画像解像度は［72ピクセル／インチ］、画像モードは［グレースケール］に設定。できるだけ画像のデータ量が軽い作業環境で、できるだけ大きく描くようにしてます。


清書じゃないからね。気楽に描きましょう。

STEP.3 原画

下描きが描けたら、そのレイヤーの一つ上に新規レイヤーを作成し、白で塗りつぶします。そして、レイヤーの濃度を80％ぐらいにすれば、下描きが透けて見えるので、この上から清書していきましょう。僕は鉛筆ツールの一番細いのを使って描きます。線がガタついてしまいますが、ペンやエアブラシなどエッジにブラシのかかるツールだと、後でキレイに塗りつぶせないんですよ。ガタつきは、後で縮小すれば気にならなくなるので大丈夫です。大事な事は、塗り潰す面の輪郭線はちゃんと閉じておくこと。隙間が空かないように線と線をつなげましょう。

このカットは動画19枚の予定です。「のんちゃん」「Pちゃん」「カタツムリ君」「背景」のように分けて描きます。まずのんちゃんの一連の動作の中で、要となるコマ（１、５、９、13、17）を描き、レイヤー名も動画の番号1、5、9、13、17と変更しましょう。どのようなタイミングで動かすかは描く人によって違います。僕はいつも中割り三枚ぐらいで描くのですが、中割り１０枚の人もいるし、追い描きの方がやりやすい人もいるので、一概に何が良いとは言えません。コツなんて無いよ。

1 5 9
13 17
仕上げたら1、5、9、13、17コマ目のレイヤーにそれぞれ1、5、9、13、17と名付ける。

STEP.4 動画

次に中割と呼ばれる手法で、原画と原画の間のコマ（動画）を描いていきます。各レイヤーは、下から順に、下書き→1→5→9→13→17の順で並んでいると思います。

まず、1と5の原画を元にその間を補間する3の動画を描きます。5のレイヤーを［通常］から［乗算］に変更し、二つのレイヤーが透けて重なる状態にします。次に5の上に新規レイヤーを作成。この新規レイヤー名を3に変更し、白で塗りつぶし、不透明度を80％変更。こうすれば、トレーシングペーパーを置いたように1と5の絵を透かした感じになりますね。


▲１と５の上に新たに３のレイヤーを作成し、白で塗りつぶす。不透明度を80％に変更しました。

この状態で虫眼鏡ツールで拡大し、1と5の線の中間の線を3のレイヤーに描いていきます。この描き方は慣れていないと凄くイライラすると思うんですが、ちょっとぐらい間違っても大丈夫ですよ。
3の画像が完成したら、次は1と3、3と5の中間の動画「2」と「4」を同じ方法で描きます。描き終えたレイヤーは番号順に並べ換えます。

ここまで読んだ皆さんは、思ったより辛い作業であることに気付くでしょうね。実際、この作業が辛くてアニメーション制作に断念する人が多いんです。Flashや3Dのアニメーションと違って、この動画過程が手作業であることが、GIFアニメの最大の難所なんですよ。だけどGIFアニメの魅力とはまさにここにあります。根気と努力で緻密な動画を描き上げてこそ、完成時の喜びも大きいし、見る人を引きつける魅力にもなり得るのです。この方法だと、自動で中割りしてくれるツールでは絶対に描けない細かな表情や複雑な動きが描けるので面倒でも頑張って描きましょう！
さて、1〜19までの中割り動画を全て描き終えたら、一連の動画をチェックしてみよう。STEP.9で紹介する方法に従って、各コマを順番にコピーしGifBuilderにペーストし、再生してみます。うまく計算通りに動いてるでしょうか？

STEP.5 影つけ

辛い作業はまだまだ残っています。キャラクターなどに陰影がつく場合は、その陰影も動かさねばならないのです。陰影が不要な人もいると思うんですが、陰影があるかどうかで、キャラクターの存在感が大きく変わるし、光源や光の強弱を利用した演出も可能になるので僕は描くようにしています。陰影は原画・動画と同じ要領で影の輪郭を先に描いていきます。


▲Photoshopのブラシ選択時の設定画面

まず、色を［黒30％］、鉛筆ツールオプションを［乗算］、ブラシの太さ［直径2ピクセル］を選択します。鉛筆の太さを2ピクセルにするのは、1ピクセルだと塗り残しができやすくなるからです。ツールを乗算にするのは、先に描いた動画の輪郭線に上書きしてしまわないため。
のんちゃんの影の階層は基本的に「薄い・中間・濃い」の3段階しかないです。薄い部分は白なので塗る必要は無し。中間と濃い部分の輪郭を同じ色（黒30％）で描き込んでいきます。この作業も地味で辛いけど、頑張って下さい！


▲動画に影の輪郭線を同じ色（黒30％）で描き込む

STEP.6 色塗り

色塗りと言っても活動漫画館の作品はモノクロなのでグレーを塗るんです。もしも前工程の動画および影の輪郭を描く作業を丁寧に行っていれば、色塗りの作業は比較的楽です。逆に雑にやっていたのであれば修正に手間がかかってしまうことでしょう。
塗り潰し作業では、塗る部分がしっかりと線で囲まれている必要があって、どこかで線が途切れていると塗り色が隣の面にまで進入してしまいます。もし、線が途切れていることに気付かずに作業を進めてしまうと、後で修正するのが困難なので、作業前にもう一度チェックしておいた方が良いでしょうね。

塗りは、影の輪郭線と同じ［黒30％］［乗算］に設定し、濃い順に塗っていきます。まず、一番濃くする部分に黒30％を2回流し込み、次に中間の濃さの部分に1回流し込みます。流し込みの回数で濃淡を描くというワケ。もっと影の階層を増やしたいのなら、3回、4回と流し込みの回数を増やせば良いんです。
←濃い部分は2回、薄い部分は1回、色を流し込む。

この行程は陰影の線付けと同じ黒30％で行う必要があります。これは同じ色にすることで塗りつぶし時に輪郭線も一緒に乗算して消すためです。何かの間違いで黒30％になってなかった時は、下の失敗例のようになるので注意しましょう。もしもこの方法を使わなかったら、予め色の数だけ境界線を変えて描かねばならないし、後で濃度を変更することも難しい、また、色の管理も大変になるんですよ。これは、白黒の濃淡のみで表現するモノクロアニメだから可能な方法です。楽ですよ！

←失敗例。影の輪郭線と塗りは同じ色（黒30％）にしなければならない。

STEP.7 背景その他

真っ白な背景だと奥行きがなく、カメラワークによる演出も限られてしまいます。それに臨場感を出すためにも背景は必要だと思うんです。背景はたった1枚の絵だけど、スライド、拡大縮小させれば、パンやトラックアップなど映画のような演出もできるのでしっかり描き込みましょう。
このカットの背景は画面がパンすることを想定して、別書類に一回り大きく背景を描いておきました。画像サイズは元のサイズより左右が長い［900×384ピクセル］です。180ピクセル長い分だけパンさせることができます。


▲パンする背景を一回り大きなサイズで描く。

このカットにはのんちゃん以外にもPちゃんとカタツムリ君が登場します。彼らも動くので、のんちゃんの動くタイミングに合わせて動画を描きます。
脇役は別のレイヤーに描いて後で合成した方が良いでしょうね。修正があった時に楽だから。
もしも脇役達がのんちゃんほど動かない場合でも、レイヤーの合成時にのんちゃんと同じコマ数が必要になるので、静止画でもレイヤー複製し19コマ揃えておきましょう。


▲別レイヤーに描き込んだ脇役達（動画段階）

　　　　　　　　　　
　　　　　　　　　　▲のんちゃんと同じ工程を経て完成

STEP.8 合成

先に、のんちゃんとPちゃんとカタツムリ君の動画（それぞれ19枚）を全て合成します。そして不要な余白部分を自動選択ツールを使って削除。消し忘れが無いか入念にチェックしましょう。


▲動画の余白部分を削除する

次に、別の書類に作成した背景をコピー＆ペースト。ペースト先のレイヤーは背景より左右の幅が小さいですが心配しなくても大丈夫。はみ出た部分はPhotoshopでは画像の枠の外に記憶されています。一番下の動画「1」で背景の位置を合わせたら、そのレイヤーを「2〜19」の全ての動画の下に挟み込むように複製。最後に動画と背景をワンセットずつ「下のレイヤーと統合」で合成します。


▲背景レイヤーと動画レイヤーを統合する

普通なら、ここで完成となる訳ですが、このカットはパン（PAN）を予定しているのでもう少しだけ頑張ってみます。パンとは、分かりやすく言えば画面をスライドさせることにより、カメラ（観客の目）が対象物を追っているように錯覚させる効果です。絵コンテには「カットはじめにパンしつつ」と書いてますが、僕はプロの撮影ノウハウは持っていないので勘で行います。
まず、19枚のレイヤーを全てをリンクします。そして移動ツールを使い、画面全体を背景の右端が見えるまで移動させましょう（リンクされたレイヤーは一緒に移動させることができる）。これでパンのスタート位置にカメラがセットされたことになります。


▲全てのレイヤーをリンク		 　

▲移動が済んだレイヤーは
　リンクを切る

次に、一番最初のレイヤー「1」を選択し、カーソルで右へ５回移動させ「1」のレイヤーのリンクだけを切る。これで１コマ完成です。こうすれば、未選択のレイヤーを同時に移動させることができるし、移動が済んだレイヤーはリンクを切っておけば動かない。「2」以降はこれと同じ動作を繰り返しましょう。

←セリフを入れて完成

STEP.9 アニメーション化

とりあえず動画は完成しましたが、この時点ではまだPhotoshopの画面の枠外にパンさせた背景の不要部分が残っているので「すべて選択」で画像全体を選択し、［イメージ→切り抜き］で画面からはみ出た部分をカットしておきましょう。


▲はみ出た部分を切り取る

次に、レイヤーパレット内の全てのレイヤーをリンクさせます。この原画は縦横4倍のサイズで描いていたので、4分の1の大きさに縮小しなければならないのです。

［編集→変形→数値入力］で、拡大・縮小の幅と高さを25％と入力し「OK」します。これで最初に規定したGIFアニメのサイズ「180×96ピクセル」に変換されました。


▲25％に縮小し、180×96ピクセルの画像に変換する

【GifBuilderでの作業】

GifBuilderを起動したら［オプション→カラー→グレースケール］［オプション→深度→4bits×pixel］［オプション→ループ］と設定します。

次にPhotoshopのレイヤーから1コマずつ順番にGifBuilderへコピー＆ペーストしていきます。最新版GifBuilderは何故かコピー＆ペーストできない仕様になってますが、どうしたんでしょう？まあドラッグ＆ドロップでもOKなんですが・・。

全ての絵を順番にペーストし終わったら、次は再生速度の設定です。速度は1フレームずつ設定することも可能ですが、同じ数値を毎回入力するのは面倒なので、基本的な数値を全てのフレームに入力しておいて、速度を変えたいフレームのみを後から個別に入力する事にしましょう。その方が楽だから。

まずフレームウィンドウ内で「全て」を選択し［オプション→フレームの速度→○／100秒］と、この動画全体の基本的な再生速度を入力しましょう。次に速度を変えたいフレームをダブルクリックして個別に変更していきます。


再生速度を設定。最高速度は6までと考えた方がよい


▲このパレット上でも数字をダブルクリックすれば
　フレーム速度を設定できる。

これで、GIFファイルを保存すれば、GIFアニメの完成です。お疲れ様でした。

完成したシーンの連番画像

■最後に・・

どうでしょうか。思ったより簡単でしたか？　それとも難しかったでしょうか？　ちなみにこのカットは完成するまでに２日かかりました。手間どりましたが、思った通りに動いたのでよかった。

この活動漫画館式動画講座の作成にあたり、C.グラフィックスワールド2002年10月号に寄稿した
テキスト及び画像の転載を心良く承諾して下さいました担当者様に深く感謝いたします。

GIFアニメ版「GIFアニメ講座」もどうぞ。