Web制作でもAEを活用しよう

ぞえ

昨今のWeb表現は目を見張るものが多く、皆さんも様々なページを見る中で、これがwebか...と思うようなサイトも多いのではないでしょうか？

「そんなサイトに出会ったことがない」「良いサイトの探し方がわからない」って言う人は「Awwwards」「CSS Design Awards」「CSS Winner」「FWA」などのギャラリーサイトで受賞しているサイトを見てみることをオススメします。

この記事ではWeb表現とAdobe After Effects(以下、AE)に焦点をあて「自分のサイトやポートフォリオをより豪華にしたい」「AEをもっと活用したい」と思う人に役立つように、「AEからjson形式での書き出し方法」「jsonをwebサイトに入れる方法」の2点について書いていきます。

今のWeb表現の主流

今まで多く使われてきた「Flash」もサポートが2020年で終わってしまいます。そのため、今のWeb表現は「CSS」「JavaScript」「WebGL」が主流となっています。（某アイドル育成シミュレーションブラウザゲームも「WebGL」で作られています）

具体的にWebでアニメーション表現をする時には「Video」「Gif Image」「CSS  Animation」「Js animation library」「Sprite Image」などを使用しますが、これらは（特にチームでの開発では）事前のイメージ共有をしっかりと行わないと修正がとても大変だったり、アニメーションの再現が難しかったり、端末によって挙動が違ったりと難しい部分も多くあります。

それならエフェクト特化のソフト(AE)に頼ろう

ここからはAEユーザーの方向けではありますが、これを読んで「AEって便利そう」「AEすごい「さすがAdobe」ってなってくれると嬉しいです。
完成形はこんな感じ。動画のように見えるけど、json（テキスト）という形式で表示しています。（某週間少年漫画雑誌の孤児院で育てられた子ども達が過酷な運命に抗っていく物語のサイトにも使用されています。）

1.拡張機能のダウンロード　
最初にAEで作ったものをjson形式で書き出すための拡張機能「bodymovin」 をダウンロードします。 AEの拡張ファイルが'/build/extension'の中の、「bodymovin.zxp」があります。このzxpファイルを開くために「ZXP installer」 をインストールすることで、bodymovin.zxpをインストールできるようになります。

2.AEの設定
AEを起動して
環境設定→一般設定→「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックし、
環境設定→一般設定→初期設定の「空間補間法をリニアにする」にもチェックを入れましょう。

3.AEでアニメーションを作成する
AEでアニメーションを作りましょう。ここは腕の見せ所です！！スクリーンショット 2019-12-16 18.53.34

4.bodymovinの起動
ウィンドウ→拡張機能→bodymovinで起動します。
スクリーンショット 2019-12-16 18.54.51

この画面では、どのコンポジションを書き出すのかを聞かれているので、書き出したいコンポジションの「Selected」にチェックを入れ、保存先の指定をしたら、右上にある「Render」をクリックしましょう。するとレンダリングされ、jsonファイルが書き出されます。こんな感じ↓スクリーンショット 2019-12-16 19.01.40

5.lottie.jsをダウンロードしよう
「Bodymovin」の右上、「Get the Player」をクリックし、再び緑の「Get the Player」をクリックしましょう。すると「lottie.js」のダウンロードが完了します。

素材は揃った、ここからはWebのターン

とりあえずフォルダの中身はこんな感じ。
index.html：普段通りここに色々書いていく
data.json：「Bodymovin」で書き出したjsonファイル
lottie.js：「Bodymovin」で書き出したjsファイル
スクリーンショット 2019-12-16 19.16.54

index.htmlにはこいつをコピペ。細かいことはコメントを見ればある程度わかると思います。

<!DOCTYPE html>
<html>

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Lottie</title>
</head>

<body>
   <div id="lottie"></div>
</body>

<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
       container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
       renderer: 'svg',
       loop: true,
       autoplay: true,
       path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
   });
</script>

</html>

最後に忘れずにアップロード

ローカルでの確認ではおそらく動かないと思います。
完成したらサーバーにアップロードしてみましょう。

スクリーンショット 2019-12-16 19.34.43

終わりに

無事にWeb制作にAEを活用できたでしょうか？
AE,Webの知識がなく断念した方も将来触った時にこの記事を思い出していただければ幸いです。長くなりましたが、今回の記事はここまで。


この記事が気に入ったらサポートをしてみませんか？