GIFだと重いアニメーションも解決！AnimateCCでデザイナーでもHTML5 canvasアニメーションを作る方法

いまではどこのwebページを見てもアニメーションが使われているのをよくみかけます。GIF、video、SVGアニメーション、canvasアニメーション、bodymovin、Youtube埋め込みなど、いろんな手法があるなかで何が最適かそれぞれの特性を理解して取捨選択をしていく必要があります。今回はその中でもcanvasアニメーションについてお話したいと思います。

Adobe AnimateCCでHTML5 canvasアニメーションの利点

以下のようなアニメーションをつくりたいという依頼がきました。

• 文字をペンで書いているように見せたい
• カクカクではなく、滑らかに動いてほしい
• 素材はペンのみ

これまでアニメーションはGIFで対応していましたので、とりあえずPhotoshopを使って制作してみたところ、1MB。あまりwebサイトには載せたくない容量になってしまいました。

使用画像は多くないけどリッチに動かしたい。 そんななかあがったのが、AnimateCCでhtml canvasアニメーションを使っての表現でした。

( AnimateCC：https://www.adobe.com/jp/products/animate.html )

そしたら容量は200KB以下になり、さらに様々な利点を発見いたしました。

• アニメーションによってはGIFの半分ぐらいの容量で済む
• GIFより画質にこだわれる
• 視覚的なアニメーションの調整が簡単で、JavaScriptの書けないデザイナーでも作れる
• よく欠点にあげられるスプライトシートの作成が簡単
• スプライトシートによって画像のサイズは大きくなるが、ファイルが一つで済むのでリクエスト数を劇的に減らせる
• スピード調整、使用画像の差し替えが簡単にできる
• ユーザーのアクションに応じてアニメーションを設定できる
• デザイナーからエンジニアへの連携が楽

もちろんいくつか欠点もありますが、利点の多さも考え習得しておいてよい表現方法だと思います。

作り方[1]

簡単に作り方を紹介します。まず最初の画面の詳細設定→HTML5Canvasを選択します

作り方[2]

使用する素材を読み込み動かすものごとにレイヤーを分けます。

※あまり大きい素材をそのまま読み込むとスプライトシートが大きくなるので注意が必要です。

作り方[3]

アニメーションをつけます。UIはflashに似ているのでflashを作ったことがある人はスムーズに制作できると思います。

作り方[4]

Ctrl + Enter (windows)を押すだけでhtml、javascript、スプライトシート(img)が書き出され、指定のブラウザでプレビューされます。各ファイルやフォルダはAnimateCCと同じ階層に格納されます。このファイルを使って実装にうつります。

簡単な説明ではございますが、このような流れで制作しております。

AnimateCCでのcanvasアニメーションはデザイナーとエンジニアの連携が楽で運用に組み込みやすく、手軽にリッチコンテンツ化ができユーザー体験の向上にもつながると思いますので、ぜひアニメーション方法の一つとして習得してみてください。

コラム執筆

山本 愛加（やまもと あいか）

2018年4月入社。第１ビジネスユニットアカウントサービス第20ユニットに所属し、広告運用を担当。日々勉強中です。趣味はライブ撮影と照明です。