リッチな表現に！After Effectsを使った動くSVGアニメーションの作り方と実装方法｜BiNDup
こんにちは、デザイナーのオモトです。
私がノーコードCMS「BiNDup」を使う上で、活用している実用的なカスタマイズ・テクニック第3弾です。
今回は、「Adobe After Effectsで作ったSVGアニメーションの作り方と、BiNDupに実装する方法」について解説します。
専門用語や工程数が多く、複数のアプリを経由する、だいぶ高度な使い方になるので、こういうこともできるんだなーぐらいに思っておいていただけると幸いです。
また複数のアプリを経由すると、編集データや素材がごちゃごちゃして、後で見返した時に大混乱が起きることが多いので、フォルダの整理方法を含め、丁寧に解説していきます。
設定できなかった方にはAdobe IllustratorとAfter Effects、BiNDupのサイトデータを用意しているのでご安心を！
★作業前のご注意★ 必ずお読みください！
※ブログの内容についてはサポート対象外なので要注意！質問いただいてもお答えできません。（ごめんなさい！）上級者向けですがよろしければ参考にしてくださいね。
→アニメーションでユニークなサイトも作れる、ノーコードCMSのBiNDupを30日間無料体験
SVGアニメーションとは？
SVGアニメーションとは、ベクターデータを使い、滑らかでクリアな動きを作り出す技術です。静止画像と異なり、拡大縮小しても画質が劣化しないので、アニメーションにも適しています。Webページで簡単に使用でき、動きを表現するために有用です。
SVGアニメーションになると少し工程が増えますが、基本的なBiNDupへのSVGの実装方法は、こちらも参考にしてください。
BiNDでSVG形式の画像を使う方法
完成イメージ
サンプルでは、数秒おきに目をパチパチとさせるアニメーションを作成していきます。
サンプルを見る
→アニメーションでユニークなサイトも作れる、ノーコードCMSのBiNDupを30日間無料体験
【Adobe Illustrator】動かしたい部分をレイヤー分けしたaiファイルを用意する
レイヤーを分ける
今回は目だけを動かしたいので、イラストを「両目」と「顔・体」の２つのレイヤーに分けていきます。
ai形式で保存
できたら、ai形式でファイル形式で保存します。
→アニメーションでユニークなサイトも作れる、ノーコードCMSのBiNDupを30日間無料体験
【Adobe After Effects】新規プロジェクト・新規コンポジションを作成
新規プロジェクトの作成
Adobe After Effectsを開いたら、左上のファイル→新規→新規プロジェクトをクリックします。
新規コンポジションを作成
次に、新規コンポジションを作成をクリックします。
コンポジションの設定
コンポジションとは、Photoshopで言うところのスマートオブジェクトのようなもので、複数のレイヤーを１つのレイヤーとしてまとめ、編集することができる空間のことです。
以下の項目を設定します。後で変更可能なので、仮の数値でも大丈夫です。
※フレームレート（fps）とは、1秒間の動画が何枚の画像で構成されているかを示すの単位のこと。１秒につき60フレームまたは30フレームで作成することが多いです。アニメーションの場合は、60フレームしてもそこまでぬるぬると動かない上、ファイルサイズが重くなるので30フレームにします。ちなみに、29.97fpsは電気の周波数などの構造的な部分で都合のいい数字で、一般的に30フレーム=29.97フレームとして扱われています。
プロジェクトファイルを保存
ここまでできたら、aiデータと同じフォルダに、プロジェクトファイルを保存します。
→アニメーションでユニークなサイトも作れる、ノーコードCMSのBiNDupを30日間無料体験
aiデータを読み込み
aiデータをプロジェクトパネルにドラッグ&ドロップ
赤枠のエリアにaiデータをドラッグアンドドロップすると、画像のようなアラートが出るので「読み込みの種類」をコンポジションにしてOKをクリックします。
※このワークスペースになってない人は、ウィンドウ→ワークスペースをアニメーションにしてください。
コンポデータをタイムラインにドラッグ&ドロップ
「man」のコンポをドラッグし、下のsample_animeタブの赤枠の中にドロップします。
これでイメージとしては、スマートオブジェクトの中にスマートオブジェクトがあるような状態になりました。
コンポデータの編集
manデータを編集
次に、manをダブルクリックして、編集していきます。
アートボードの背景の透明・不透明を切り替え
赤枠のボタンで、アートボード背景の透明・不透明の表示を切り替える事ができます。
水色枠のIllustratorマークが出ている状態であれば、常に最新のman.aiデータと連携されているので、aiデータを更新すると即座に反映されます。
→アニメーションでユニークなサイトも作れる、ノーコードCMSのBiNDupを30日間無料体験
【重要】シェイプレイヤー化
顔・体のレイヤーを選択、右クリックし、作成→ベクトルレイヤーからシェイプを作成。
これを忘れると、svgの書き出し時に各レイヤーがimg画像として出力されてしまうので、必ず行ってください。
またシェイプレイヤー化すると、Illustratorとのリンクが切れるので、シェイプレイヤー化後にaiデータに編集を加えたい場合は、読み込み直して再度この工程を行う必要があります。
タイムラインの表示を調整
目・顔のアウトラインレイヤーが作成されたら、赤枠のスライダーを左に動かし、タイムラインが全部見える状態にします。
目のアニメーションを作成
アニメーションの起点を変更
デフォルトだと、オブジェクトの真ん中が起点になっています。赤枠のボタンを押すと起点の◯印が移動できるようになるので、目の下あたりに合わせます。
編集画面が小さくて見づらい場合は、黄緑色枠の矢印の選択キー、その横の手のひらツール（オブジェクトを触らずにアートボード内を移動できるツール）、アートボードの拡大縮小を使って画面の位置を調節してみてください。
スケールを表示
目のアウトラインレイヤーを選択し、キーボードのsキーを押してスケールを表示させます。うまく行かない場合は、レイヤーの数字の左横の▼を押して探してください。
スケールにキーフレームを作成
任意の位置で、赤枠のストップウォッチを押し、キーフレームを作成します。
さらに、タイムラインの青い線のインジゲーターを動かし、その前後2フレームに、赤枠の◆ボタンを押し、キーフレームを作成します。
スケールを変更
３つ打ったキーフレームのうちの真ん中をクリックして選択します。動いてないと錯覚してしまうので、インジケーターもキーフレームの位置に合わせてください。
縦横比の固定マークを解除し、右側の数値（高さ）を10%にします。
スペースキーまたは、再生ボタンを押すと動きを確認できます。
アニメーションの尺を長めに変更
まばたきの間隔が短い場合は、command+k（WinだとCtrl+k）を押し、デュレーションの長さを変更してください。
ここでは1秒から３秒に変更していきます。
秒数を伸ばしたら、赤枠のスライダーを左に寄せ、タイムラインのバーの右端をクリックし、３秒まで伸ばします。
同様に、sample_animeのコンポのデュレーションも伸ばします。man本体のデュレーションが３秒以上無いと、sample_animeのmanのタイムラインのバーを3秒以上に設定できないので注意が必要です。
これでアニメーションは完成です。
→アニメーションでユニークなサイトも作れる、ノーコードCMSのBiNDupを30日間無料体験
SVGで書き出す
Bodymovinのインストール
現状After Effectsのデフォルトの機能では、（Media Encorderを使っても）SVGアニメーション形式での書き出しはできません。
なのでExtension（プラグイン）の「Bodymovin」をダウンロードする必要があります。
Bodymovin公式サイトからインストールします。
インストール後、 「環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れてください。
（必要あれば、After Effectsを再起動してください）
Bodymovinの起動
「ウィンドウ > 拡張機能 > Bodymovin」をクリックして、Bodymovinを起動します。
BodymovinのSVGに書き出し先を変更
書き出したいコンポを選択し、「・・・」で書き出し先を指定します。ここでは、sampleのフォルダ内にsvg書き出し用のフォルダを新たに作成しました。
Bodymovinの書き出し設定を変更
次に書き出し設定を変更します。Glyphsにチェックが入っているのを確認したら、Export ModesのStandard、Demo、SMIL（svg）にチェックを入れ、Saveを押します。
BodymovinでSVGを書き出し
書き出すコンポを選択し、上記の２つを設定するとRenderボタンが緑色に点灯します。
Renderボタンを押すと、指定したフォルダ内にデータが作成されます。
→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験
BiNDupにsvgを読み込む
書き出されたhtmlファイルを開く
このようなフォルダ構成になっていると思いますので、書き出されたhtmlファイルを、任意のエディタで開きます。
すごく長いコードが書いてあるので、びっくりすると思いますが、bodyタグ内のコードをすべてコピーします。
BiNDupを開く
BiNDupを開いて、SVGを入れたい場所に、カスタムタグを作成します。
カスタムタグを選択し、HTMLを開くをクリック。出てきたフォームに先程のコードをコピペします。
これで完了です！
まとめ
いかがでしたでしょうか？今回BiNDupに組み込んだSVGは、分割線を入れるだけで、レスポンシブな動くアニメと文字のレイアウトを簡単に作成することができますよ。
ぜひ応用して使ってみてくださいね！
今回作成したサンプルサイトのダウンロード
自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
（BiND10以降、BiNDup対応）
POINT
- After Effectsにaiデータを読み込んだら、必ず「ベクトルレイヤーからシェイプを作成」しよう
- Bodymovinを使って、SVGに書き出そう
- BiNDupならSVGと文字などのレイアウトが簡単に作成可能