このページの内容に関連のある記事を左のサイドバーに一覧表示してあります。
GIFアニメの作り方
- 詳細
- 最終更新日 2011年10月27日(木曜)21:17
Webサイトでよく見かける、動く画像の広 告・・・この広告を作るのにはやり方が色々あるのですが、その中でも比較的簡単で作りやすいのがGIFアニメ。このGIFアニメ、作り方は意外と簡単で、 しかも作成するソフトも無料でダウンロードできるものもあり、ホームページやブログのデザインをちょっとこったものにしたい場合に、手軽に取り組める手法 です。このページでは、そういうGIFアニメの簡単な作り方、をご紹介いたします。
■GIFアニメってどんなの?
こんなのです→
画像のサイズは、作成する過程で自由に決められます。また、右のアニメは文字が出てきたらそれでおしまい、ですが、作り方によっては、同じ動きを何度も繰り返すこともできます。
■GIFアニメ作成ソフトのダウンロード
GIF アニメを作るソフトは色々あります。ホームページビルダーに付属でついているWebアニメーターというのが有名ですが、それだけではありません。それほど 高性能な機能を必要とするソフトではないので、ホームページ作成ソフトに付属でついていたり、画像編集ソフトに付属していたりすることが多いようですが、 中にはフリーのソフト(無料でダウンロードして利用できるソフト)もあります。
今回の解説では、この「無料ソフト」を利用します。以下のサイトからダウンロードしてください。
フリーのGIF/MNG-LC アニメーション作成ソフト Giam
このソフトは、特別なインストールをしなくても、ダウンロードしたファイルを解凍するだけで利用できます。(詳しくはこのサイトの解説をご覧ください)
■GIFアニメ作成の手順
GIFアニメは、言ってみれば「パラパラマンガ」のパソコン版です。いくつかの異なる画像を用意しておいて、何秒かごとにパラパラとめくっていく・・・というつくりになっています。で、このGIFアニメを作るためには、おおむね以下のような手順で作業します。
- まずは出来上がりを想像してどんなアニメにしたいか?を考える。
- 考えたアニメに必要な画像を用意する。
- 用意した画像を、ダウンロードしてきたGIFアニメ作成ソフト「Giam」で編集してGIFアニメにする
最後の3.のGiam上での作業はいたって簡単です。それよりもむしろ、1.や2.の段取りの部分が大変。
GIFアニメ作成では、1コマ1コマの画像を1枚ずつ用意していくので、あらかじめ最初から最後までのアニメのストーリがきちんと決まった上で、必要な画像を必要な枚数だけ用意する必要があるのです。
この部分・・・アニメストーリの段取りと画像の用意・・・は、がんばって自分でやってください。はじめに紹介した「ウィークリー伊豆」という文字の出てくるGIFアニメは、以下のような複数の画像を作って用意してから作りました。
追記:1枚1枚の画像の編集からGIFアニメの制作まで全部できるフリーソフト「Photoscape」というソフトを使ったGIFアニメの作り方を、こちらのページで解説していますのでよろしかったらこちらもどうぞ^^→「GIFアニメの作り方3」(お読みになるのにはユーザー登録(無料)が必要です)
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
ね?本当にパラパラマンガと同じ原理、でしょ? | |
■Giam上での作業
具体的な操作方法は、Giamのサイト上の説明にお任せします。ここではいくつかポイントを・・・
用意する静止画像のサイズは統一しておくこと
上記の例でも分かるように、パラパラマンガと同じだということは、1枚1枚の画像の大きさが違うと、思ったとおりのアニメになりません。画像編集ソフトなどであらかじめサイズを統一しておきましょう。
各コマ(1枚の画像)を表示しておく時間を設定できます。
100 分の1秒単位で、1枚1枚の画像を表示しておく時間を設定できます。映画のフィルムなどの動画が基本的に1秒間に15枚~30枚の静止画を使っているの で、スムーズな動きのGIFアニメを作るのなら、1秒間に15枚程度の画像を用意する必要があります。が、現実にはそんなに大げさに作りこむことはなく て、だいたい0.2秒~0.5秒で1枚くらいです。
作った動きを繰り返す回数を指定できます。
紹介した「ウィークリー伊豆」のサンプルは、繰り返し回数0回(繰り返さない)という設定ですが、たとえば3回繰り返す、という設定もできますし、「永遠に繰り返す」という設定もできます。作るアニメの内容などに合わせて設定してみてください。
■出来上がった画像の扱い方
出 来上がったGIFアニメのデータは、ホームページやブログに表示させるためには、普通の静止画のイラストや画像とまったく同じ扱いです。たとえばブログな ら、写真をアップロードして、記事に挿入、というような作業とまったく同じように作業していただければOKです。(このあたりがGIFアニメの手軽で作り やすい理由のひとつですね。FLASHアニメーションなどの動画データだと、ブログやHP上に表示するだけで、たくさんのタグを記述しなければなりません ので、ね)
■手軽で簡単・・・だけど多用しすぎないように
GIFアニメはこのように、手軽に、そして比較的簡単に作れちゃいます。自分のブログやホームページを、目を引くものにするのに効果的な方法なので、ともすると夢中になって作ってホームページに貼りまくる方もいらっしゃいますが、やりすぎにはご注意を!
例 えば30秒近くもある力作を作ってホームページへ載せたとしても、それを30秒間最後までじ~っと見てくれる方というのは、そう多くはありません。長すぎ たり、ごちゃごちゃしすぎたり、いろんなところにたくさん貼り付けすぎたりするGIFアニメ(と、そのホームページ)は、やりすぎるあまりに、見ている人 の反感を買ったり、あるいは最後まで見てもらえずに別のサイトへ行ってしまわれたりする場合も多々あります。
趣味でつくるサイトなら、好きなだけ楽しく作りこめばOKですが、仕事や商売のサイトでコレをやりすぎると、「苦労したわりに収穫がない・・・どころか、かえって逆効果」なんてことにもなりかねません。
GIFアニメのような手法は、あくまで「ホームページを作るうえでの手段の一つ」と位置づけて、よく考えて製作するようにしましょう。
このページの内容に関連のある記事を左のサイドバーに一覧表示してあります。












