Webサイトをより魅力的かつ印象的なものにするために、メインビジュアルとして大胆に使用されるものから、マイクロインタラクションのような細部で使用されるものまで、アニメーションが採用されるケースが増えています特に、SVGデータにCSSやJavaScriptで動きや効果を与えて作成される「SVGアニメーション」は、スケーラブルながら軽量であり、様々な効果を加えられるなどの利点が多く、近年のクライアントワークに積極的に取り入れている手法のひとつです。

本記事では、プログラムやコードを書けない方でも手軽かつ効率的にアニメーションを作成できるオンラインツール「SVGator」を使用した作成方法をご紹介します。

SVGator とは？

SVGator

SVGatorはプログラミング、コーディングスキルがなくても、効率的にWebサイト上で使用可能なアニメーション素材を作成することができるとてもありがたいオンラインツールです。SVGatorという名前ではありますが、SVG以外の書き出し形式にも対応しています。

プラン

Freeプラン（無料版）とProプラン（$20/月）の2種類のプランがあります。
https://www.svgator.com/pricing

本記事で紹介するアニメーションはFreeプランで作成可能です…が！Proプランにアップグレードすることで開放される機能や書き出しオプションが増えるので、気に入ったらぜひProプランも使ってみてください。

SVGアニメーションを作る

今回はキャラクターが無限に歩行するアニメーションを作ります。（※下記はGIFです）

①SVGデータの用意

アプリ内で用意されている描画ツールを使用して素材を作成することもできますが、今回は以前書いた記事「Animateを使用してスプライトアニメーションを作成する」で爆誕した”テストぼうや”をSVG形式に変換したものを使います。

<SVGデータ作成時の注意>

SVGデータはFigmaでもIllustratorでもお好みのアプリで作成して問題ありませんが、どのアプリを使用する場合でもグループ名やレイヤー名などに全角文字は使用しないでください。SVGatorに限ったことではないですが、データ内に全角文字が含まれると、レイヤー名等が文字化けしてしまい作業時にレイヤー管理が困難になってしまいます。

②SVGデータをSVGatorにインポートする

ブラウザでSVGatorにログインし [↑Upload file] のボタンをクリックします。

[+New Project] を選択してもOKです。この場合は何も無いまっさらな状態から作りはじめるか、コンピューター上のファイルをインポートするかを選んで開始します。

アップロードが完了すると作成画面に遷移します。
今回の作業では主に [Elements (要素リスト)]、[キャンバス]、[タイムライン] の3つを使用して作業を進めます。

インターフェイスの詳しい説明は公式ドキュメントをご覧ください。

③アニメーションの長さを設定する

[タイムラインルーラー] 上の [3s] にカーソルを合わせ、青い線を [1s] の位置までドラッグしアニメーションの長さを1秒に変更します。

[タイムラインズームスライダー] を操作してタイムラインを拡大表示しておくと編集作業がしやすくなります。

④各要素へアンカーポイントを設定する

画面左側にある [Elements (要素リスト)] または、キャンバス上で各要素を選択し、アニメーションの起点となる [アンカーポイント] を設定します。

これは必須の作業ではないですが、これをやっておくと後々操作が楽になります。この素材であれば「アンカーポイント＝関節部分」だと考えていただくと分かりやすいかもしれません。

⑤各要素へアニメーションを設定する

<両脚と両腕>

画面左側にある [Elements (要素リスト)] または、キャンバス上で [boya-leg-left] 要素を右クリックし、 [Animate (アニメーション追加)] => [Rotate (回転)] の順に選択します。

画面下部 [タイムライン] 上に [Rotate (回転)] が追加され、最初のキーフレーム（水色の◆）が作成されます。

[再生ヘッド (白いライン)] をタイムラインの [0s] と [1s] の中間の位置まで移動させてから、

[Elements (要素リスト)] または、キャンバス上で [boya-leg-left] 要素を選択し、図の位置にカーソルを合わせて [↺] のカーソルが表示されたら要素を下図の方向へ回転させます。

タイムラインが下記のようになっていればOKです。

※初心者あるある（私あるある？）なのですが、[再生ヘッド (白いライン)] を移動し忘れた状態でキーフレームを設定してしまうミスをしたりするので、動きがおかしいなどがあれば、 [再生ヘッド (白いライン)] の位置を確認してみてください。

同様の要領でその他の [boya-leg-right] [boya-hand-left] [boya-hand-right] 要素にも [Rotate (回転)] のアニメーションを設定します。
最終的に [0.5s] 時点ではキャンバス内での各要素の配置とタイムライン上のキーフレームが下図のようになるとよいでしょう。

続いて、無限に歩くアニメーションにしたいので、最初のキーフレームと最後のキーフレームがきれいに繋がるようにします。各要素の最初のキーフレームを [⌘]キー（Windowsの場合は[Ctrl]キー）を押しながら選択し、 右クリックで [Copy (コピー)] します。

[再生ヘッド (白いライン)] を [1s] の位置まで移動し、右クリックで [Paste (貼り付け)] をすると、[1s] に [0s]と同じキーフレームが追加されます。

キャンバス内での各要素の配置と、タイムライン上のキーフレームが下図のようになるとよいでしょう。

[▶ (再生)] ボタン] を押してここまでの動作を確認してみます。

<胴体と顔>

画面左側にある [Elements (要素リスト)] または、キャンバス上から [boya-body] 要素を右クリックし、 [Animate (アニメーション設定)] => [Scale (拡大・縮小)] の順に選択します。

[再生ヘッド (白いライン)] をタイムラインの [0s] と [1s]の中間の位置まで移動させ、

キャンバス上で [boya-body] 要素を選択し、図の位置にカーソルを合わせて [↕(本当は斜め)] のカーソルが表示されたら要素を上下にほんの少しだけ潰すように変形させます。

両腕・両脚のときと同様に、最初のキーフレームと最後のキーフレームがきれいに繋がるようにしたいので、[boya-body] 要素の最初のキーフレームを最後のフレームにコピーしておきます。

キャンバス内での各要素の配置と、タイムライン上のキーフレームが図のようになるとよいでしょう。

[boya-body] と同様の要領で [boya-face] 要素にも [Scale (拡大・縮小)] のアニメーションを設定しておきます。

[▶ (再生)] ボタン] を押してここまでの動作を確認してみます。

<全体を調整する>

※この作業はやってもやらなくてもよいのですが、やっておくと動きに面白みが出ます。

画面左側にある [Elements (要素リスト)] から [testboy] 要素を右クリックし、 [Animate (アニメーション追加)] => [Rotate (回転)] の順に選択し、他の要素と同様の要領で [testboy] に対してアニメーションをつけます。

最初のフレームで右方向に傾かせ、中間のフレームで並行にし、最後のフレームを最初のフレームと同じにしておくとよいです。

キャンバス内での各要素の配置と、タイムライン上のキーフレームが図のようになるとよいでしょう。

[▶ (再生)] ボタン] を押してここまでの動作を確認してみます。

ここまででこんな感じになります。

今までのものを並べると少しずつ動きに味が出ているかなと思います。

SVGアニメーションを書き出す

①オプションの設定

画面右上の [Export (書き出し)] ボタンをクリックして [SVG (web)] を選択します。

[Export Options (書き出しオプション)] 画面が開いたら各オプションの設定をします。

オプション変更後の動作を確認したい場合は [Refresh preview (プレビュー更新)] ボタンを押すと、プレビューが更新されます。

②各オプション

各オプションの説明は下記のとおりです。有料版のオプションには★を付けています。

File

Export as （〜として書き出す）	書き出すファイル名を指定。
SVG format （SVGの形式）	Animated … アニメーションとして書き出す Static … 静的なSVGとして書き出す
Export IDs	Unique … 各オブジェクトにユニークなIDが割り振られる Element’s name … 各要素につけた名前がIDになる

Animation

Animation type※ （アニメーションのタイプ）	Java Script … JavaScriptとしてアニメーションを書き出す CSS Only … CSS としてアニメーションを書き出す
Animation start （アニメーションの開始）	On load … ロード時に再生 On Mouse Over … マウスオーバー時に再生★ On click … クリック時に再生★ On scroll into view … スクロールして可視範囲に入ったら再生★ Programmatic … プログラムで制御★
strong>Use player （プレイヤーの使用）	Embedded … SVGファイルに埋め込み External … 外部プレーヤー使用
Direction （アニメーションの進行方向）	Normal … 通常 Reverse … 反転 Alternate … 最初に通常どおりに再生され、次に逆方向に再生される Alternate reversed … 最初は逆方向に再生され、次に通常どおり再生される
Iteration （再生回数）	Count … 任意の再生回数を入力する Infinite … 無限
Fill mode （アニメーション再生中・再生後のスタイル）	Forwards … 最後のキーフレーム（100%）のスタイルが適用される Backwards … アニメーション再生後は、最初のキーフレーム（0%）のスタイルが適用される
Frame late （フレームレート）	標準は100で12fps〜カスタムサイズの指定が可能。
Speed★ （再生スピード）	標準は100％で0〜1000％の指定が可能。

Document

Document （ドキュメント幅）	Responsive … レスポンシブで表示させる  Fixed size … 固定幅で表示させる
Add hyperlink★ （リンクの追加）	リンクURLを設定。
Canvas color （キャンバスの色）	キャンバスに指定されたカラーを含めて書き出すかどうかを設定する。

※JavaScriptで書き出すか、CSSで書き出すか

JavaScript はすべてのアニメーションをサポートしていますが、CSSではサポートしていないものがあるので、SVGatorで作成した通りに書き出したい場合はJavaScriptにしておくのがよいでしょう。ただしファイルサイズは多少大きくなります。詳細については、互換性表を参照してください。

③書き出す

すべての設定が終わったら [Export (書き出し)] ボタンをクリックして保存完了です。
ちなみに、今回は私がCSSのほうが得意という理由で、下記の設定で書き出しました。（ごめんなさい、全て無料でできると冒頭に書きましたが、書き出し時に欲が出てSpeedを変更したかったので有料のオプション使っています。）

Export as	testboy
SVG format	Animated
Export IDs	Element’s name
Animation type	CSS Only
Animation start	On load
Direction	Normal
Iteration	Infinite
Fill mode	Forwards
Frame late	100
Speed	500★
Document	Responsive

書き出したものが下記になります。

書き出されたSVGファイルをVSCodeなどのエディタで開くとコードが圧縮された状態になっていますが、展開すれば変更や修正も簡単です。お好みの方法で使用してみてください。

参考サイト

SVGator Help Center Getting Started