Webサイトのアイコンをアニメーションさせて印象をアップさせる

現在、Webデザイン業界において、Webサイトに動きをつけるのが主流となっています。

動きをつけて、わかりやすく情報を伝えたり、洗練されたWebサイトという印象を与えることができます。 しかし、複雑な動きを作るためにはCSSやJavaScriptを沢山書かないといけないのか…

After Effectsのアニメーションなら簡単に作れるのに…

というわけで、今回はAfter Effectsで作ったアニメーションを簡単にSVGでブラウザ表示する方法を試してみました。 私はスクリプトなどは専門外ですので、エンジニアさんに渡すデータを書き出せるプラグインの紹介をしたいと思います。

まずはAfter Effectsでアニメーションを作る

今回は弊社のサイトのこの部分

この8つのアイコンにアニメーションをつけていこうと思います。

それでは、イメージしているアニメーションをAfter Effectsで… ちょいちょいと作ってみました。 1つ2秒ほどのこんな感じのアニメーションです。

注意すべき点

・aiデータを使用している場合、ベクトルレイヤーからシェイプを作成する。

・今回の方法では、画像のシーケンス、ビデオ、オーディオ、レイヤーの時間伸縮、3Dレイヤーは適用不可。

・あまりに複雑だったり、長時間のアニメーションは非常に重くなってしまう。

書き出し用のプラグインをインストール

さて、アニメーションができましたので、これをブラウザ表示させるために今回はこちらのプラグインを使用します。

「Bodymovin」

このプラグイン、After Effectsで作ったアニメーションをjsonファイルとして書き出し、 SVGでブラウザ上に描画できるというものです。 まずはこちらからプラグインをダウンロードします。

https://goo.gl/uVKfGS

ZXP Installer

CC2017以降の場合はプラグインをインストールするためにこちらも必要です。

http://aescripts.com/learn/zxp-installer/

ダウンロードしたbodymovin-master.zipを解凍したら、 bodymovin-master/build/extensionの中にある bodymovin.zxpをZXPインストーラーにドラッグ&ドロップします。

これで準備完了です。

After Effectsのアニメーションをjsonファイルで書き出す

では、After Effectsに戻って書き出しを行いましょう。

まずAfter Effectsの環境設定を開き一般設定の 「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れます。

先ほど作った「icon1〜8」のコンポジションがある状態で

ウィンドウ＞拡張機能＞Bodymovinを選びます。

するとこのような画面がポップアップされるので、書き出したいコンポジションのSelectedにチェックを入れて、右の緑の「・・・」で保存先を指定し、「Render」ボタンを押します。

すると指定した保存先に.jsonのファイルが書き出されました。

あとはエンジニアさんにお願いして実装してもらいます。

実装してみて思ったこと

先ほどのjsonファイルをエンジニアさんに実装してもらいました。

それがこちら

https://sketch-inc.jp/

おお！After Effectsで作ったアニメーションが表示されています。

SVGで描画されているので綺麗です。 やはり、動きがあるとサイトが洗練されたように感じますね。ページを見た人の印象もアニメーション有り、無しじゃあ違ってくるんじゃないでしょうか？

こういうぐりぐり動く細かいアニメーションをスクリプトで書こうと思ったら、いったいどれだけの作業量になるんでしょう…しかしAfter Effectsで作ったアニメーションをこうも簡単に再現できるのであれば、汎用性は高いはずです。

もう一つ、デザイナーとエンジニアとの意思疎通、イメージの共有についてです。

もう少しこう動かしたいのに…

なんかイメージと違うな…

という風に何度もデザイナーとエンジニアとの間で修正を繰り返す経験ありませんか？

これなら、デザイナーがイメージした通りのものを自分で用意できるわけですから、 そういう問題も少なくなるのでは…？

デメリットとしてはサイトが重くなるというのがありますが、それは複雑なアニメーションや尺の長いアニメーションを作った場合です。アイコンなどのワンポイントくらいなら問題なく動きます。