+Life Studioアキヤマです。
ここのところiPhone関連の記事が多かったので
久々にTIPSを更新したいと思います。
今回はこのサイトのTOPのロゴアニメーションでも使われている（2017年現在）
SVGアニメーションの作り方と、SVGアニメの良い点をご紹介します。

After Effectsを使ってSVGアニメを作る

ウェブデザイナーでAfter Effectsを触れる人、または映像制作をしている人でウェブ案件に関わっている人、
そういう人には今回の方法は簡単で、かつ分かりやすく
複雑なSVGアニメーションを作りやすいです。
筆者はウェブデザイナーの出身で、後に映像制作に手を出し今に至るわけですが、
映像の中でもモーショングラフィックスを得意としており、
モーショングラフィックスの作成にはAfter Effectsを使っています。
だから、この方法はドンピシャでした。
ウェブ案件でちょっとしたアニメーションが使われることも
最近ではあたりまえのようになりましたね。
ページローディング時のアニメーションもその一つですが、
これからもっと増えてくるのではないか、と予想します。
今回は数ある動画フォーマット（GIFアニメやmp4、Youtube利用など）のなかで
「なぜSVGアニメーションなのか」、そしてAeを利用したSVGアニメーション制作の下準備までを説明したいと思います。

SVGのメリット

SVGには他の画像ファイルにはないメリットがいくつかあります。
もちろん、それらはSVGアニメにも引き継がれています。

• 画像ファイルに比べてファイルサイズが小さい
• 拡大縮小してもジャギーが出ない
• プラットフォーム依存が少ない

画像ファイルに比べてファイルサイズが小さい

SVGはXMLという言語がベース画像フォーマットで、
従来の画像フォーマットJPEGやPNGに比べファイルサイズが小さいです。
ファイルサイズの比較を行っている記事があります。

拡大縮小してもジャギーが出ない

SVG：Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）
つまり、伸縮できる、ヴェクターの、画像
ということです。
ヴェクターについての説明はこちらのサイトをご参照ください。

ヴェクターの特性として、曲線が滑らかなまま拡大縮小を可逆的に行えます。
そのため、ジャギーがないのが利点です。

プラットフォーム依存が少ない

拡大縮小ができることや、それによる画質の劣化などがないことから
プラットフォーム依存がないことが利点です。

SVGのサポートブラウザ状況（2017）

SVG対応ブラウザの状況です。
2017年、ほとんどのブラウザが対応できており、シェアも高いのも魅力的。

BodymovinというAEのAdd-onを使う

今回紹介するSVGアニメーションの制作方法は、
BodymovinというAfter Effects Add-onを使う方法です。
jsをゴリゴリ書けなくても、After Effectsで作成したアニメーションを、jsonファイルでパパッとSVGアニメーションに変換してくれます。

今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。
GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、
HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。

Bodymovinでできること・できないこと

BodymovinでSVGアニメに変換する際に、できることできないことをまとめました。

エフェクトや3D、ビデオ、オーディオは非対応

• 画像ファイルの書き出し
• エフェクト類
• 画像のシーケンス
• ビデオ、オーディオ
• レイヤーの時間伸縮
• 3Dレイヤー

ウィグラやレンズフレアなどのポストエフェクトはすべて対応しておりません。
ただ、今後対応予定という噂もありますので、期待しましょう。

シェイプ、パス、プリコンポ、マスクなどは対応

• プリコンポーズ
• シェイプ（矩形、楕円、星型）、テキスト
• ヌルオブジェクトレイヤー
• マスク
• パスのトリミング
• タイムリマップ
• ブレンドモード（IE、Edgeを除く）

読み込んだイラレのレイヤーは画像ファイルとして書き出される

BodymovinはあくまでAfter Effects上のパスデータをSVGに置き換えるAdd-onです。
なので、パスデータ以外は画像(PNG)に変換されます。
After Effectsでモーショングラフィックスを作成する際、
素材をIllustratorで作成し、レイヤーを分けた状態でAeに読み込み、
アニメーションをつける作業をすることが多々あります。
この読み込んだIllustratorのレイヤは、パスデータではなく、
Illustratorのレイヤのリンクファイルなので、BodymovinでSVG化した際には
PNG画像に変換されます。

BodymovinをAfter Effects 2017にインストールする手順

After Effects2017での拡張機能（Add-on）インストール方法をご説明します。

拡張機能インストールアプリ　ZXPインストーラをダウンロードする

まずAdd-onインストールのために、ZXP Installerをダウンロード・解凍します。

 
 

続いて、Bodymovinをgithubからダウンロード

こちらのBodymovin githubレポリトジページからBodymovinをダウンロードします。

右側の「Clone or download」をクリックしてダウンロードしましょう。

bodymovin.zxpをZXP Installerにドロップ

先にZXP Installer.appを起動します。

Bodymovin githubレポリトジページからダウンロードしたBodymovinのフォルダで
build > extension
と開いていってください。

extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。

Macのユーザ情報を入力してインストールを許可したら終了

ドロップすると「Updating…」という表示に変わります。

その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。

ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。

インストールが完了するとこんな画面がでます

「The extension was successfully installed!」が表示されたら、インストール完了です。

After Effectsで「拡張機能」を確認

アフターエフェクトのメニューから
ウィンドウ　＞　拡張機能
を開いたときに「Bodymovin」が表示されていればインストール完了！

 

次回は、実際の制作フローと制作の注意点をご紹介します

次回は具体的な制作について触れていきます♪