30分でできる！ はじめての「SVGアニメーション」に挑戦【デザイナー向け】

こんにちは。デザイナーの佐藤です。
今回のテーマは「SVGアニメーションに挑戦」です。Webデザインのお仕事をしている方の中にも、まだSVGやSVGを使ったアニメーションに触れたことがないという方はいらっしゃるのではないでしょうか。

実は、SVGアニメーションはAdobe Animate CCのアドオンを使用して簡単に作成できます。シグナル社内のデザイナー勉強会で好評だった初心者向けの作成手順を、みなさんにも公開します！

そもそもSVGとは？

SVG（Scalable Vector Graphics）とは、ベクター形式で画像を表示するフォーマットです。JPEGやPNGなどのビットマップデータとは違い、座標などの数値をもとに計算式によって画像を描画するため、次のような特性を持ちます。

・ファイルサイズが小さい
・拡大縮小しても画質が劣化しない
・アニメーションに利用すると、GIFアニメよりもなめらかな動きが表現できる

簡単なSVGアニメーションに挑戦！

SVGの概要を理解したところで、さっそくSVGアニメーションを作ってみましょう。と言っても、コードを自分で書けるようになる必要はありません。Animate CCの拡張機能「Snap.svg Animator」を利用すれば、画像を扱うようにアニメーションを作ることができます。

SVGアニメーション作成の流れ

STEP1-1

まずは、Adobe ExchangeからAnimate CCのアドオン「Snap.svg Animator」をダウンロードします。

Snap.svg Animator
https://www.adobeexchange.com/creativecloud.details.12329.html

STEP1-2

ダウンロードしたファイルを「このアプリケーションで開く」→「その他」→「Adobe Animate CC」で開きます。

STEP1-3

Animate CCを起動すると、スタートアップ画面に「SnapSVGAnimator（カスタム）」が追加されているはずです。このフォーマットを使用してアニメーションを作成しましょう！

STEP2-1

それでは、STEP1で準備したフォーマットで新規アニメーションを作っていきます。今回は、下記のパーツとアートボードのみ使用します。

①挿入
タイムラインの秒数設定や、モーションの設定を行います。
②タイムライン
秒数ごとの動きを細かく調整できます。
③ツールバー
Illustratorと同様、描画などはこのツールバーを使用します。

STEP2-2

3秒のアニメーションを作るための設定を行います。デフォルトではタイムラインが0秒になっているので、「3s」をクリック後、「挿入」→「タイムライン」→「フレーム」を選択します。

STEP2-3

楕円形ツールを使用して円形のオブジェクトを作り、選択ツールで選択した状態で、「挿入」→「モーショントゥイーン」をクリックします。

STEP2-4

いよいよ動きをつけます。タイムラインの赤いバーを移動させ、オブジェクトを移動させたい位置まで動かしながら1コマずつ作っていきます。

STEP2-5

作成していくと、このように複数の点（キーフレーム）ができてくるはずです。赤いバーをドラッグしたり、再生ボタンでプレビューしたりしながら、細かい動作を確認しましょう。

STEP3-1

「ファイル」→「パブリッシュ設定」を選択し、書き出し先を指定します。ファイル名を「index.html」と入力して「保存」ボタンを押した後、「publish」ボタンを押してください。

STEP3-2

このようにファイルが出来上がっているはずです。このファイルをサーバーにアップロードして、ブラウザから確認してみましょう。

問題なく動作すれば、このようなアニメーションが表示されます。

SVGアニメでWebサイトにオリジナリティをプラス

SVGアニメーションを活用すれば、ローディング画面にオリジナリティを出したり、キービジュアルの一部を動かして楽しい印象を与えたり、見出しや装飾用のテキストに動きをつけて目立たせたりといったことができます。

もし自分でアニメーションを作る機会がないデザイナーでも、モーションの構造（秒数・速度・移動経路・キーフレームなど）への理解を深めておけば、コーダーに指示する際に役立ちます。まずは、簡単なアニメーションから試してみてはいかがでしょうか。