mac)2019/2/13ブログTweetPocketこんにちは!マツイです。最近、WEB上で動きのあるイラスト動画が流れていてあれどうやって作られてるんだろと思って、ソースを除くとGIFでした。最近GIFアニメーションを多用しているサイトを多く見かけるので、GIFアニメーションで問題ないと思いたいですが、svgで書いてある場合もあるので、一概に全てgifでOK!という訳でもなさそうですね。Effectsで動きを作ってGIFへ変換しているように思います。GIFって以外に重いんですよね。MP4の方が軽かったりします。今回はひとまず、gifアニメーションを作るまでをご紹介したいと思います。Timerでトリムまずはmp4などで作った動画の尺を決めると思います。Timerで十分ですし、僕は一番これが使い方わかりやすくて楽でした。トリム方法はこちらが一番わかりやすかったです。基本動画などは、容量が重いので一旦圧縮して行きます。圧縮するにはこちらのサービスがオススメ。widthサイズまでここで指定ができるので非常に便利です。VideoSmaller3.GIFへの変換作業では、ffmepegでGIF変換をして行きますが記事はこちらがベストです。この記事読めば、GIF変換をコントロールできます。デザイナーの方など、ターミナルを使ったことない人には、難しいかもしれないですが、ターミナルを開いて指示通りやれば基本的には変換できます。Macで画面を録画してGIFに変換する方法4.さらにコンプレッサーで圧縮するGIFにすると画像が重くなるので、再度圧縮します。基本の目安1MB以下が理想ですが、なかなか難しいですよね。それと、解像度があまりにも低いと意味がないので、この辺はご自身と相談してください。オンラインで画像を圧縮。最高の画質および圧縮方式これだけ!動画のトリミングできるオンラインサービスも見つけました。こちらもUIもわかりやすく使いやすいです。CutterSVGアニメーションの理解も深めた方がよさそうです。SVGのプロパティを理解してアニメーションさせてみようPROFILE松井貴史1984年熊本生まれ。RUBYDESIGN.代表プロダクトに関わるUI設計が得意です。デザインだけではなく、現在エンジニアリング部分などにも領域を広げています。物と物をsnsで繋ぐマッチングサービスmonocrewを運営。小さなサービスができるまで2017/10/17福岡という街について2019/8/11サービスのランディングページ要素比較10選2019/1/14ブランドを食う旅2019/1/12019年の目標を書き出してみました。CAFE(無料相談会)開催のお知らせ2019/7/1犬の課題・知識を共有するためのサービスの事前登録を開始。2018/6/27ルビーデザインの今後のビジョン2019/1/29投資家が「お金」よりも大切にしていることを読んでCONTACTチームでのサービスデザインが得意です。ご相談は、お問い合わせフォームをご活用ください。