田口 冬菜
田口 冬菜

necco Note

After Effectsで作った動画をGIFアニメーションにしてみた|箱猫サウナ動画

  • Motion Design

neccoでは休業期間のお知らせやイベントに合わせてモーショングラフィックスを作っています。

いままでモーショングラフィックスはMP4で書き出してSNSに投稿していましたが、MP4では自動再生・ループができず、少しモヤっとしていました。

このもやもやを解消してくれたのはGIFアニメーションでした。画質の劣化やいくつかの制限はありますが、GIF形式で書き出せば自動再生・ループ再生ができます。

After Effecsで作った動画をGIF形式で書き出す方法をいろいろ試してみたので、最終的に1番よかったと思う方法を備忘録として書いておきたいと思います。

GIF形式のメリット・デメリット

GIF書き出しをする前に、GIFアニメーションのメリットとデメリットを確認しておきます。

✌️ GIF形式のメリット

  • 自動再生ができる
  • かんたんにループアニメーションが作れる
  • MP4より軽い(例外もあり)
  • 透過処理ができる

🤔 GIF形式のデメリット

  • 再生時間が限られる(6秒ぐらいが一般的)
  • 画質や動きが劣化する

通常のMP4・MOV書き出しに比べて時間と手間が少しかかるので、GIFのメリット・デメリットを考えた上で形式の選択をしましょう。

After Effectsで作った動画をGIFで書き出す方法

After Effectsで作った動画はMedia Encoderを使ってMP4で書き出し、PhotoshopでGIFアニメーションに変換します。

  1. After Effectsで作った動画をMP4書き出し(Media Encoder使用)※
  2. PhotoshopでMP4を読み込む
  3. 「web上に保存」で書き出す

※今回はMP4で書き出しましたが、最終的に背景を透過させたGIFアニメーションを作りたい場合はMOVのマットなしで書き出しておきましょう。

1. After Effectsで作った動画をMP4で書き出す

After Effectsで作った動画は、Media Encoderを使ってMP4で書き出します。MOVでも問題はないですが、MP4の方が汎用性が高いのでそうしてます。

2. PhotoshopでMP4を読み込む

Photoshopでウィンドウメニューから「タイムライン」を選択しますし、MP4ファイルを読み込みます。

PhotoshopでGIF書き出しするときの設定

するとタイムラインのウィンドウが表示されます。

PhotoshopでGIF書き出しするときの設定

PhotoshopのワークスペースにMP4ファイルをドラッグ&ドロップすると、タイムライン動画が読み込まれます。スペースキーを押して再生してみるとちゃんと動いてます。

PhotoshopでGIF書き出しするときの設定

MP4で書き出した動画をPhotoshopで読み込む手順はこれで完了。あとは書き出すだけです!

[ Web上に保存 ] で書き出す

書き出しはメニューの [ ファイル ] → [ Web用に保存(従来)] を選択。

PhotoshopでGIF書き出しするときの設定

GIF書き出しの設定をします。

書き出しの設定はファイルの容量と画質・動きの劣化のバランスを見て探ります。

使用している色数、再生時間、動きの緻密さによって設定は違うと思いますが、今回は次の設定で書き出すといい感じになりました。(1,000pxの正方形、再生時間6秒、エフェクトやマスクあり)

  • カラー:256
  • ディザ:60%
  • 劣化:10

完成したGIFアニメーションはこちら。

Twitterで投稿してみると、ちゃんと自動再生・ループができています。

プラグインも試してみるといいかも

ここまで After Effects → Media Encoder → Photoshop の流れで書き出す方法を書いてきましたが、After Effectsから直接GIF書き出しができるプラグイン「GifGun」も気になってます。7日間のお試し利用ができるみたいなので、そのうち使ってみたいと思います。

まとめ

After Effectsで作ったモーショングラフィックスをGIFアニメーションする方法でした。MOV・MP4に比べて画質はどうしても劣ってしまいますが、短時間のループアニメーションなど場面によってはGIF形式の方が適していることもあります。GIF形式での書き出しに興味のある方は、よければ試してみてください。


📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか?

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

  • フロントエンドエンジニア
  • アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

株式会社necco ダウンロード資料へのバナー画像

(2024年11月時点)

田口 冬菜

田口 冬菜

Fuyuna Taguchi

三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma WebUIデザイン入門』(マイナビ出版、2022)がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。

SHARE

Other Note

necco Note
FigmaでLottieを作成する方法のアイキャッチ画像

FigmaでLottieアニメーションを作ってみよう!作成方法やメリット、注意点を解説