Gifアニメーションをカンタンに作成する方法(for mac)

Gifアニメーションをカンタンに作成する方法(for mac)

こんにちは!マツイです。最近、WEB上で動きのあるイラスト動画が流れていてあれどうやって作られてるんだろと思って、ソースを除くとGIFでした。最近GIFアニメーションを多用しているサイトを多く見かけるので、GIFアニメーションで問題ないと思いたいですが、svgで書いてある場合もあるので、一概に全てgifでOK!という訳でもなさそうですね。


GIFにすると以外に容量が重くなる

作成手法は、たくさんあると思いますが、adobe社が出しているAfter Effectsで動きを作ってGIFへ変換しているように思います。ただ、GIFって以外に重いんですよね。MP4の方が軽かったりします。ですが今回はひとまず、gifアニメーションを作るまでをご紹介したいと思います。


1.Quick Timerでトリム

まずはmp4などで作った動画の尺を決めると思います。トリムはimovieやAfter Effectsでも実現可能かと思いますが、トリムするにはQuick Timerで十分ですし、僕は一番これが使い方わかりやすくて楽でした。


トリム方法はこちらが一番わかりやすかったです。
QuickTime Playerでは動画の切り取りと結合ができる


2.mp4を圧縮

基本動画などは、容量が重いので一旦圧縮して行きます。圧縮するにはこちらのサービスがオススメ。widthサイズまでここで指定ができるので非常に便利です。
VideoSmaller


3.GIFへの変換作業

では、ffmepegでGIF変換をして行きますが記事はこちらがベストです。この記事読めば、GIF変換をコントロールできます。ただ、デザイナーの方など、ターミナルを使ったことない人には、難しいかもしれないですが、ターミナルを開いて指示通りやれば基本的には変換できます。
Macで画面を録画してGIFに変換する方法


4.さらにコンプレッサーで圧縮する

GIFにすると画像が重くなるので、再度圧縮します。基本の目安1MB以下が理想ですが、なかなか難しいですよね。それと、解像度があまりにも低いと意味がないので、この辺はご自身と相談してください。
オンラインで画像を圧縮。最高の画質および圧縮方式

これだけ!

動画のトリミングできるオンラインサービスも見つけました。こちらもUIもわかりやすく使いやすいです。
Online Video Cutter

SVGアニメーションの理解も深めた方がよさそうです。
SVGのプロパティを理解してアニメーションさせてみよう

松井 貴史

松井 貴史

事業会社のパートナー。デジタル領域のUXUI改善運用/webシステム開発。デザイナー✖️個人開発者。オンラインゲームSAKETUMA開発。メーカーのプロダクトデザイナー→旅館・ホテル専門webデザイナー→サービスデザイナー

類似記事

今更聞けないソースコードをブログに表示させる方法

今更聞けないソースコードをブログに表示させる方法

iMacデスクトップPCとMacBookProを繋いでデュアルモニターを実現する

iMacデスクトップPCとMacBookProを繋いでデュアルモニターを実現する

やりたい事をやるために時間の断捨離をしたら、仕事にも使えるベストプラクティスだった。

知っておくだけでも得をする「どんな領収書でも経費で落とす方法」

知っておくだけでも得をする「どんな領収書でも経費で落とす方法」