速い、軽い、キレイのスグレモノ

うるまでるびgインターネットマガジン編集部
本誌付録CD-ROM（A→GIF ANIME）に、うるまでるび作のオリジナルGIFアニメ・サンプルが収録されています。

ホームページでよく見かける動く画像、GIFアニメ。
特別なプラグインを使わずに、ほとんどのブラウザーで表示できるスグレモノだ。だれでも簡単に作れるのがGIFアニメの長所だが、せっかく作るからにはグッとくるアニメーションにしたいのが人情というもの。
今回は基本的な作り方のほか、「ウゴウゴルーガ」などで知られるアニメーション作家うるまでるびさんにGIFアニメのコツを聞いてみた。
ちょっとした工夫でできるGIFアニメの作り方をマスターしよう。

294 INTERNET magazine 1997/12

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+CD-ROM

GIFアニメってなに？
ホ

特別なプラグインがなくても表示できるアニメーションームページを見ていると、必ずといっていいう高価なソフトが必要なうえ、データが大きい

いほど、パタパタ動くアイコンやクルクルため表示するのに時間がかかっていた。
しかし、GIFアニメはシェアウェアやフリーソ回るプレートに遭遇するだろう。これがGIFアニメーション（以下「GIFアニメ」）だ。

フトで簡単に作れて、しかもたいていのブラウザウェブ上で動くアニメーションというと、ショーで表示できる。ゲームのようなインタラクティ

ックウェーブやフラッシュがあるが、これらはブブで凝ったものを作るにはショックウェーブが必

ラウザーにプラグインを入れておかないと、アニ要だが、ホームページでちょこっとアイコンを動メーションを表示することができない。しかも、かすくらいなら、GIFアニメでもかなり多彩な表ショックウェーブの場合は作成にディレクターと現が可能なのだ。

パラパラ漫画のようにGIFファイルを設置

どうやって作るの？
ず、GIFアニメの元になる画像を用意しよROM収録）。また、WebPainterなら、描いたう。写真なら、デジカメで撮影したものをイラストをそのままアニメーションにして保存す使えば簡単だ。また、イラストならWebPainterることができる（これらのツールの使い方は296（ ウィンドウズ版 ＆ マッキントッシュ版 ） や〜297ページで紹介）。

まPaintShopPro（付録CD-ROM収録。ウィン

こうして作ったアニメを1つのGIF形式のファドウズ版のみ）などのシェアウェアを使って描くイルとして、そのままホームページに載せればGIFことができる。

アニメが動くという仕組みだ。意外に簡単なので、そうして用意した画像をGIFアニメ用ソフトをぜひ挑戦してほしい。GIFアニメを集めたホーム使ってつなぎあわせるのだ。ウィンドウズならGIFページは多数あるので、参考にしてみるといいだ

Construction Set、マッキントッシュ用ならろう。

GifBuilder を使おう（両ツールとも付録 CD-●フリーのサンプルGIFアニメがあるサイト（サンプルによっては制作者の許可が必要なものもあるので、利用前に必ずサイト上で確認してください）

GIF Animation Designs by ProMotion

Animation Factory Home Page

Bill Gavin--Free Animated Icons

jhttp://www.webpromotion.com/
stock.html

jhttp://xoom.xoom.com/content/
eclipsedigital/factory/

jhttp://www.tiac.net/users/gstudi
o/an1.html

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/12295

Windowsfor+CD-ROM
付録CD-ROM収録先★GIF Construction Set
A→WIN→GIFconst★GifBuilder
A→Mac→GifBuilder★サンプル素材
A→GIF ANIMEGIF Construction Setでアニメーションを作ろう

ソフトとサンプル素材を入手しよう
ウィンドウズの場合はGIF Construction Setを、マッキントッシュの場合はGifBuilderを本誌付録CD-ROMからインストールしよう。
サンプル素材（うるまでるび作）も付録CD-ROMに収録してあるので、これを使って実際にアニメーションを作ってみよう。

1

GIF Construction Setを起 動 させて、「File」メニューから「New」を選ぶ。
ウィンドウの中の「Insert」ボタンを押すと、左のようなウィンドウ「Insert Object」が現れる。そこで「Image」を選び、アニメーションの素材となる画像を1点ずつ加えていく。

forMacintosh

3

1の 「 Insert Object」 か ら「Control」を選ぶ。「Delay」
でアニメーションが再生される速さが加減できる。設定したら一度再生してみて速さを調節しよう。

1の 「 Insert Object」 か ら「Loop」を選ぶ。「Iterations」
でループ（繰り返し再生）の回数を調節。再生してみてOKなら保存。

4

2

画像を保存するときに上のようなウィンドウが表示されるので 「 Dither this image to theglobal palette」を選んでOKを押す。

GifBuilderでアニメーションを作ろう

2「Option」
から「Loop」
を選 んで右のようなウィンドウが現れたら、「Forever」にしてOKを押す。こうしておくと、永遠にアニメーションが繰り返される。

1「Window」メニューから 「 Frame Window」
を選んで新規フレームを表示する。あらかじめ用意しておいた画 像 をまとめて選 択 し、ドラッグ＆ドロップしてフレームの中に入れる。

296 INTERNET magazine 1997/12

4「Window」メニューから「 Preview Window」 を 選 び 、「Animation」から「Start」を選ぶと、いま作ったアニメーションが再生される。

3「Option」メニューから「Default
Interframe Delay」を選んでループの速さを調節する。「as fast as possible」は「できるだけ早く」、「××/100seconds」は1コマの表示時間が「100分の××秒」という意味。

5

アニメーションができたら、「File」メニューから「Save」を選んで保存する。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

Win & Mac

forWebPaiterでイラストを描いてアニメを作ろう

ソフトを1入手しよう

れ1つでイラストを描いてアニメーションを作ることができるのだ。

GIF Construction Setなどを使っ

ちなみに、GIFアニメ以外の書き出して、連続画像をGIFアニメにする方法は可能フォーマットは、QuickTime、AVI、前ページのとおりだが、では、その元になるPICTシーケンス、Java（再生アプレッ

連続画像はどのように作ればいいのだろ

トも付属）、ActiveXなどである。

W e b P a i n t e r 2 . 0 のデモ版 はうか。PhotoshopやPaintBrushなど

WebPainter2.0はTotallyHip社のT o t a l l y H i p 社 のホームページを使ってもよいのだが、これらは連続フホームページでデモ版が配布されている。

（http://www.totallyhip.com/）

レームを編集するという点では使い勝手気に入ったら、同社から正規版を手に入からダウンロードできる（デモ版は保が悪い。そのようなときにお勧めなのがれることができる。正規版には大量のサ存ができないという使用制限がある。

TotallyHip社のWebPainter2.0だ。

ンプル画像が同梱されており、自分のホダウンロードするインストーラーのサ

WebPainter2.0はウェブに適したームページでそのまま流用することも可

イズは約3Mバイト）。ウィンドウズ

アニメーションを制作するためのソフト能だ。まだまだ完成度が高いとは言い切版とマッキントッシュ版の両方があウェアで、基本的にはマウスやタブレッれないものの、安価なわりに満足度が高る。ウェブサイトから製 品 版（ 8 9 .

トで1枚1枚のフレームを描きながらアく、気軽にアニメーションを作るのには95USドル）を購入することも可能。

ニメーションを作っていく。つまり、こ最適なソフトといえるだろう。

2作ってみよう31「File」メニューから「New」を選び、これから作るアニメーションの色数や画像サイズを設 定 する。GIFアニメを作 る場 合 は「FileType」から「Animated GIF Frames」を選ぼう。

62

各種ツールを使って絵を描いてみる。この段階では、普通のペイントソフトと変わらない。気軽に顔でも描いてみよう。

「Foreground/Background」ボタンを押すと、動くオブジェクトとは別に、背景を描くことができる。背景は全フレームの下に敷かれるバックグラウンド画像となる。

5

1〜4を繰り返し、数フレームのアニメーションを制 作 。
「Play」ボタンで再生してみる。また、「CelsStrip」には各フレームが縮小されて表示されるので、アニメーション全体を確認することができる。

7で き あ が っ た ら 、「 F i l e / E x p o r t 」 か ら「Animated Gif 89a」を選び、GIFアニメとして書き出す。HTMLに埋め込むタグも書き出してくれる（デモ版だと保存できない）。

「Cels」メニューから「AddCels」を選び、アニメーションのフレーム（WebPainterではCelと呼ぶ）を1枚追加する。立ち上げ時のCelは1枚なので、これで合計2枚になった。

4

ツールバーの電球ボタンを押すと、オニオンスキン（ほかのCelを透かして見る機能）がオンになる。先ほど描いた顔を透かして見ながら、少し変化をつけたフレームを描いていく。

8

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

書き出したGIFアニメーションをブラウザーで確認しているところ。

INTERNET magazine 1997/12297

GIFアニメーション作りに挑戦したいけど、何から始めていいのか分からない。作ってみたけど、どうも動きが納得できない。そんなアニメーション初心者のために、うるまでるびがツボを伝授。教科書の端に描いた「パラパラまんが」気分で、気軽にアニメーション作りに挑戦してみよう。

1

1秒あたりのフレーム数がポイント
アニメーションはたくさんの絵の集まりです。その1枚1枚を「フレーム」といいます。1秒が数枚から数十枚のフレームで構成され、その枚数は自由に決められます。
1秒あたりのフレーム数を表す単位はfps（Frames Per Second）といいます。30fpsなら1秒間に30フレーム、10fpsなら10フレームになります。
たとえば、10秒間のアニメーションを作ろうと思った場合、10fpsのアニメーションでは100フレーム、30fpsでは300フレームを描かなければならないことになります。つまり、fpsが小さいほど、描く枚数がが少なくて済む、つまり楽ができるということです。
だからといって、5fpsなどでは動きがぎこちなくなり、アニメーションとは呼べないものになってしまいます。その辺が見極めどころですが、手描きアニメーションには10〜15fpsというのがちょうどよい数字です。
ちなみに、日本のアニメーションはほとんどが10fpsか15fps、ディズニーは24fps、うるまでるびは12fpsで作られています。

2

はずむボールの上手な作り方
ものが動くときには重力や作用／反作用、慣性の法則など、中学や高校で習った物理の法則どおりの影響を受けます。アニメーションとは「ものを動かす」ことですから、スムーズな動きを表現しようと思ったら、この物理の法則にのっとって動きを作ればいいわけです。
たとえば、はずむボールを描きたいとします。ボールは重力の影響を受けて地面から離れるほど弾み方が弱くなります。どのくらいずつ弱くなるか、各フレームでどの位置にボールを描けばいいか、本当は難しい物理の計算が必要なのですが、もっと楽なやり方があります。
まず、地面と最高点を直線で結びます。次にその真ん中に印を付けます。今度は上半分の真ん中に印を付けます。さらに上4分の1の真ん中に…と「半分の半分」に印を付けていき、その場所に順番にボールを描いていきます。これをアニメーションとして再生すると、スムーズなボールの動きが完成します。この「半分の半分割り」はアニメーションではよく使われる技法なので覚えておいて損はありません。

298 INTERNET magazine 1997/12

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

profileうるまでるび
アニメーション作家。
うるま と でるびの2人組。
ホームページ
http://www.urumadelvi.co.jp/
で数多くの作品を発表している。

3

イーズを覚えようものの動きには始まりと終わりがあります。
たとえば、自動車で考えてみると、発進するときには徐々に加速し、止まるときには徐々に減速します。実は、このような加速と減速は腕を伸ばすときの伸ばし始めと伸ばし終わりや首が振り向くときの振り向き始めと振り向き終わりなど、どんな動きにも必ず存在するのです。
この加速と減速のことをアニメーション用語ではイーズアウト／イーズイン、またはスローア
ウト／スローインといいます。これをうまく表現してあげると、アニメーションはとてもスムーズになります。1秒あたりのコマ数を増やせばスムーズになると思っている方が多いようですが、実はコマ数を増やすより、このイーズを上手に表現するほうが効果的です。
下の図は車が止まるときのイーズインを説明したものです。この場合も「ツボ2」の「半分の半分割り」で対応できます。半分を3分の1などにしてもかまいません。割り方の細かさや、どのフレームを生かしどれを省略するかによって、その物の重さやスピードの印象を変えることができます。下図では（A）より（B）のほうが急ブレーキをかけたように見えます。

動きにもデフォルメをまんがが写真と違うところはデフォルメが施されているという点です。人間の顔を単純化したり、表情豊かにしたりすることで、写真とは違う「ま（A）4んがらしい」表現がされています。アニメーションでもデフォルメが有効な表現手段となります。しかも、絵だけではなく、動きにもデフォル（B）メを施すことで「アニメーションらしい」表現が可能となります。
「ツボ2」のボールを見てください。着地したときの力や弾もうとする力を表現するために、ボールを縮めたり伸ばしたりしてあります。本当は、やわらかいゴムボールでもない限
り、こんなに伸びたり縮んだりはしません。力のかかり具合を想像して動きにデフォルメを施すことで、楽しいアニメーションができあがるのです。
人間の表情変化にも、デフォルメを施すことで感情を豊かに表現することができます（上）。たとえば、びっくりした瞬間に目玉や舌が飛び出すようにすると、楽しい動きができあがります。アニメーションの場合、そこまでやっていいの？というぐらい大袈裟な動きのほうがかえってスムーズに見えたりするから不思議です。

アニメーションは、一枚一枚 を手 で描 く作 業 の積み重ねです。めんどくさいのは確かですが、でも思い出して5生き生きとしたキャラクター下さい。教科書の端っこに描いたパラパラまんがを。あれがすべてのアニメーションの基本

キャラクターを描くとき、どう描いたら生き生きとして見えるか。これも重要な問題です。それがまるで生きているように見えるためには、それなりのコツがあります。
下の図を見て下さい。同じキャラクターを描いたものですが、左より右のほうが生き生きして見えます。

これは左が真正面から描いているのに対し、右は少し斜めから見た構図にしているためです。左はまるで観光地にある水戸黄門の顔はめボードのように、パタンと倒れてしまいそうです。
一方、右はゴロンと転がりそうです。

です。それがコンピュータでできるようになり、しかもインターネットで誰にでも見てもらえる。そんな世の中がやってきたのです。ちょっとしたツボさえ覚えれば、人をうならせるアニ
メーションを作ることなんて簡キャラクターを生き生きと表現するためには少し斜めから描いたり、膨らんだ部分や皺の部分を上手に描いて、立体感のある表現をするというのがツボです。そのためには、キャラクターを横やうしろから見たらどうなっているのかを意識する必要があります。パタンと倒れそうではないキャラクターを描くことは1枚の絵を描くときにも重要なことです。

単です。前ページで紹介した
Web Painterなどを使って、ここで覚えたことを実践してみてください。自分の作ったものが動く。それだけでも感動があるものです。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1997/12299

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.