動画作成作成ソフトを使ってSVGアニメーションを実現する方法(デザイナー向け)

ベクターアニメーション作成ソフトのAdobe Animate、ビデオエフェクト作成ソフトのAdobe After Effectsを用いると、コードを書かずに直感的にアニメーションを作成し、SVGアニメーションとして出力できます。コードをほとんど書くことなくSVGアニメーションを出力できるので、デザイナーに向いている手段の一つと言えます。

AnimateでSVGアニメーションを書き出す(Snap.svg Animator)

ベクターアニメーション作成作成ソフトのAnimateと拡張機能「Snap.svg Animator」を組み合わせてSVGアニメーションを出力する方法です。

Animateでアニメーションを作成後、拡張機能Snap.svg Animatorを用いることで、HTML、SVGとSVGアニメーションを実現するためのJavaScriptコードが出力されます。これをブラウザーで開けば、SVGアニメーションが再生されます。

詳しい使い方については、記事「拡張機能Snap.svg Animatorを使ってAnimate CCからSVGを書き出そう」を参照ください。

After EffectsでSVGアニメーションを書き出す(Bodymovin)

ビデオエフェクト作成ソフトのAfter Effectsと拡張機能「Bodymovin」を組み合わせてSVGアニメーションを出力する方法です。Animateの場合と同じように、SVGアニメーションに必要なファイルが書き出されます。

詳しい使い方やインストール方法については、ウェブデザイナーろくぜうどん氏の記事「デザイナーでもできる、 After Effects からのSVGアニメーション書き出し – LOGzeudon」にまとまっていますので、参照ください。

動画作成ソフトによるSVGアニメーションの特徴

Animate、After Effects共に、SVGアニメーションはJavaScriptによって実現されています。したがって、高い表現力と幅広いブラウザ対応が実現可能です。ただし、動画作成ソフトによって生成されたJavaScriptはカスタマイズしづらいので注意が必要です。

はじめよう、SVGアニメーション

SVGアニメーションを実現する方法は複数あり、ブラウザーを限定できる簡易的なアニメーションにはCSS、クロスブラウザー対応が必要な場合や、パスを使ったリッチなアニメーションにはJavaScriptが効果的。また、JavaScriptライブラリや動画作成ソフトを使うとより効率的に作成できることを紹介しました。

高解像度なディスプレイが主流になり、フラットデザインとも相性のよいSVGアニメーションの需要はますます高まっていくことでしょう。是非この機会にSVGアニメーションを学んでみてください。

最後に、SVGとSVGアニメーションの勉強役立つ資料を紹介します。

※ 本記事は、2017年6月15日(木)の勉強会ヒカラボでの発表「SVGアニメーションで始めるマイクロインタラクション」を記事としてまとめたものです。