GIFアニメーション作成講座

GIF [ ジフ（またはギフ） ] はGraphics Interchange Formatの略で、アメリカの大

手パソコン通信ネットワーク・ CompuServeで開発された画像フォーマットです。イン

タレースGIFやトランスペアレントGIF（透明化GIF）などの種類があります。

GIFアニメーションというのは複数枚のGIF画像を一枚ずつ順番に表示することによって

なお、データの圧縮に利用されているアルゴリズム・LZW方式は現在米ユニシス社が

アメリカ合衆国、イギリス、フランス、ドイツ、イタリア、カナダ、日本などで特許を取得し

ています。そのため、ユニシス社ではLZW方式のアルゴリズムを利用したソフトウェア、

ないしはハードウェアの開発者、さらにソフトウェアの利用者であるWebサイトの運営者

にまで特許料の支払いを要求しているというのが現状です。

　もちろんこのサイトも例外ではなく、特許料を支払わなくてはいけないということは言う

　ま、このようにいろいろ問題はあるのですが、とりあえず

作成のフリーソフトD-Pixedを使ってGIFアニメを作る方法をご説明します。

【著作権者】D-EXCLAMATION Software、土井淳（DOIchan!）　氏 <doichan@bigfoot.com>

http://www.bigfoot.com/~doichan/

　バナー等に使われる点滅画像[文字（ロゴ）]の作り方です。

　はじめに、ペイント系やドロー系ソフトを使って画像を作成

します。（画像１）。作成し終わったら、画像を任意の名前で保存します。

　次に、点滅させたい部分の色を別の色に置き換えた画像を作

り、別名で保存します。保存形式はとりあえずBMPで（画像２）。

　続いて、この２枚のBMPファイルを１枚の画像にまとめます。ここでは、Windows標準

のペイントを使って説明を進めます（BMP形式の画像フォーマットをサポートしているお

　ペイントを立ち上げまてファイルメニューから開くを選び、先ほどの画像１を開きます。

メニューから変形>キャンバスの色とサイズとたどり、ダイアログが表示されたら幅の数

　キャンバスのサイズが変更されたら、メニューバーの編集からファイルから貼り付け、

続けて先に保存した画像２を選択してください。画像２が選択された状態で画像１の上

に重なって表示されるので、選択された状態のままの画像２を、画像１の右端に画像２

の左端がぴったりくっつくように右方向へドラッグします。

　ここまでが料理でいうと下ごしらえということになります。

　D-Pixedが立ち上がったらメニューからファイルから絵を開くをクリック、開くファイルを聞か

れるので先ほどの画像３を選択します。すると減色処理の方法を聞かれますので、[単純近似]

にポイントしてOKをクリックします。ここで、一度ファイルをGIF形式で保存しておきます。メニュ

ーからファイル>名前を付けて保存を選んでください。ファイルに絵を保存というウィンドウが表

示されたら、[ファイルの種類]のプルダウンメニューから[GIFイメージ]を選択して保存をクリック

します。　次に、画面の上のほうにある[ツールバー]（パレットやペンの絵がかかれたボタンが

１列にならんだやつ）の中のルーペの絵の描かれたボタンを押してください。[ルーペウィンドウ]

が表示されると思います。[ルーペウィンドウ]が表示されたら、[メニューバー]の[ユーティリティ]

に移動、ユーティリティの下の[アニメーションテスト]をクリックします。

　アニメーションテストというウィンドウが表示されるので、パターンの大きさの幅のボックスに

画像１の幅の数値を入力します。すると、画像３が画像１と画像２に分割され、左上隅に[１]、

[２]というような数字がついた状態で表示されるので、[１]、[２]各画像をそれぞれ１回ずつクリッ

　アニメーションという文字が書かれたすぐ下のボックスに[パターン：１]、[パターン：２]というふ

うに表示されたと思います。続いて、[繰り返す]というチェックボックスがオンになっていることを

確認して、タイマ：というボックスに移動してください。ここで一枚の画像の表示時間を設定しま

す。数字１０００（ｍｓ）が１秒です。文字の点滅の場合、５００くらいが適当かと思います。画面

上のほうにあるスタートボタンを押すとアニメーションのプレビューが見られますので、確認しな

　時間の調整が終わったら、画面下の方にある動画GIF出力をクリックして適当な名前を付け

てファイルをGIF形式（拡張子.gif）で保存してください。

　以上で、文字の点滅のGIFアニメは完成です。下の画像が完成したアニメです（画像４）。

　キャラクターを描く場合はドット絵という技法が役に立ちます。ドット絵は、家庭用、アーケード

用を問わず、ゲームの画面で目にしている方も多いと思います。例として、RPG（ロールプレイ

ングゲーム）・ドラゴンクエスト等に見られる２頭身キャラがあげられます。

　ひな型とは、「ものをつくる際、そのもとになる物、手本」という意味ですが、ここではたこ焼き

やたい焼きを焼くときの型みたいなものだと思っていただければわかりやすいかと思います。

1 前向き（正面）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　キャラクターを作る場合、頭と体のバランスが重要になります。特に前向きは、そのキャラクタ

ーがどういう個性をもっているか（職業や種族）を端的に表現できるということ。そして、前向き

は後ろ向きのもとになるということを頭に入れておいてください。

　(画像５）正面の場合、一枚の絵を反転させて歩き等のアニメーションを

作りますが、このとき縦の中心線がずれないように気をつけてください。

　　　　　　　　　　(画像７） 画像５と画像６を並べて一枚の絵にします。このとき、左右どち

らかの絵を縦方向に１ドットずらすとアニメーションにした際に自然な動き

ここから先はD-Pixedでの作業です。　作業の手順は先ほど「 1)画像の点滅 」で説明し

　なお、キャラクターが歩いているように見せる場合の「タイマ」の数字の設定ですが、４００～

　(画像８）動きの確認のため、実際に動かしてみます。

　ロゴの画像（画像A、画像B）とキャラクターの画像（画像C、画像D）を用意します。

　　ここではロゴの両側にキャラクターを入れる場合について説明します。

　ロゴとキャラクターの位置関係を考慮して、バナーの大きさを決めます。キャラクターの位

置が画面の端により過すぎると窮屈な感じになるのでキャラクターの左右に数ドットずつの余

裕を持たせるようにします。図１のようなひな型を作って、それに部品（画像）を貼り付けていく

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（図４）。

　　　　　　　　　　　　　　　　　　　　　　　　図４と図５を一枚の絵にまとめます（図６）。

　図６をD-Pixedで加工して、キャラクター入りバナーの出来上がりです（図７）。

お詫びです

D-Pixedでは、2.16以降のバージョンでは
GIFフォーマットを扱うことができなくなったとのことです。
したがってぱたぱたアニメは作れるのですが、
アニメーションGIFの出力ができなくなっています。
自分がうかつでした。申し訳ありません。

現在、他のアニメGIFを作成するフリーの
ツール（アニメーションGIFメーカー等）との連携による
作成法を調べておりますのでお許しください。

なお、ホームページビルダーとの連携によるGIFアニメの
作り方が土井淳（DOIchan!）氏のサイト
http://www.bigfoot.com/~doichan/
内SOFTWARのD-Pixedのほうに解説してありますので、
ホームページビルダーをお持ちの方は参考になさると
よろしいかと思います。

他のフリーツールについては調べてみますので
まことに申し訳ないのですが、少しお時間をください。