After Effectsで作れるGIFアニメとは? 書き出し方法も解説|東京のWEB制作会社・ホームページ制作会社|株式会社GIG

After Effectsで作れるGIFアニメとは? 書き出し方法も解説

2018-05-01 勉強会

こんにちは!2018年4月に入社し、GIG勉強会の記事執筆を任されました編集のじきるです!これってGIGのコーポレートサイトのブログなんですよね?たぶん、けっこう大事なコンテンツですよね?僕みたいな新入社員が書いちゃっても大丈夫なんですか?

大丈夫!!!書いちゃいますよーーー!!!

入社して数日経ちますが、GIGはすごく自由な会社だなって思います。例えば、服装は完全自由です。パーカーにサンダルの社員もいます。先日スーツで会社に行ったら、「あれ?なんでじきるスーツなんか着てるの??」と18回くらい聞かれました。スーツを着てると浮く会社、それがGIGです。

今回登壇してくれたのは、デザイナー兼エンジニアのみやっちさんこと、宮本信二さん。Adobeの映像制作ソフトウェア「After Effects」でGIF動画を作る方法について、実演を交えながら分かりやすく解説してくれました。

宮本 信二(みやもと しんじ):1987年広島県生まれ。デザイナー兼エンジニア。大阪の専門学校を卒業後、3年間東京で美容師として働く。その後ITに転換し、デザイン制作会社や大手人材サービス会社で社員経験を経て、7月よりGIGに入社。 過去のインタビューはコチラ

  当日使用したスライドは以下からご覧いただけます。 

After Effectsで作ったGIFアニメ例

宮本さんは実際にその場でAfter Effectsを用いて、企業ロゴのGIFアニメーション制作を実演しました。

宮本:
例えば画像の透明度を数フレームかけて0→100にするだけで、簡単にスタイリッシュなGIFアニメが作れます。これをサイトトップに置くだけでもカッコいいですよね。

After Effectsで作った動画データ(.movファイル)をPhotoshopで開いて、Web用のGIFアニメとして保存すれば完成だそうです。

またAfter Effectsは、同じくAdobeの動画編集ソフトウェアであるPremire Proと相性が良く、両方を使うことでよりハイレベルなGIFアニメを作ることもできるとのこと。 

フレームレートとは?

続いて宮本さんは、GIFアニメ制作の際に必ず考えなければならい「フレームレート」について教えてくれました。

宮本:
フレームレート(fps)とは、1秒間の動画に使われる画像の枚数のことです。

宮本:
fpsの値が高ければ高いほど、滑らかな動画になります。しかし同時に必要となる画像の枚数も増えるので、容量が大きくなり、また手間がかかります。

宮本さんはその後、映画やアニメのフレームレートについても解説してくれました。

  • テレビ映像:29.97fps
  • 映画:24fps
  • 日本のテレビアニメ:12~24fps

仮に2時間のアニメ映画が24fps(1秒間に24枚の画像)だった場合、

24fps × 60秒 × 120分 = 17万2800枚

の絵が必要になります。アニメ映画って恐ろしいですね……!! 

宮本:
またWeb用のGIF動画の場合、特に容量の問題が大きく絡んできます。ある程度軽くしないとサイトが重くなってしまうので。

宮本:
アニメの滑らかさと容量のバランスを見極め、人が気持ち良いと感じる最適なデザインができるよう日々試行錯誤しています。 

LTの後は恒例のピザパーティー!

勉強会が終わり、皆さんお待ちかねのピザパーティー!! ピザやお酒代は全て会社持ちです!夕飯代が浮くので、一人暮らし組には非常にありがたいシステム。GIGに入社して良かった……!!

お酒やジュースを持って乾杯!皆さんしっかりカメラ目線です。素晴らしい、わかってらっしゃる。ピザパーティーでは年齢や役職は関係なく、それぞれ仕事や趣味について熱く語り合いました。社員同士の仲がものすごく良いです!

GIGでは、一緒に働く仲間を募集しています

現在GIGでは「一緒に学びながら、成長していきたい!」と意欲のある仲間を募集しています。

詳しくは下記サイトをご覧ください。

話を聞いてみたい方も歓迎です。お気軽にご連絡ください!

内田 一良(じきるう)

早稲田大学および同大学院卒。株式会社GIG メディア事業部長。日本最大級のフリーランス・副業メディア『Workship MAGAZINE』のほか、数々のメディアのプロデュースを担当。メディア運営、コンテンツ制作、SEO、SNSに詳しい。AI、ウイスキー、ストリートダンスが好き。