こんにちは、近江です。
前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。
今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。
何故ファイルサイズの比較をするかと言うと、アドサーバは入稿するファイルの容量制限があるため、今後アドサーバにHTML5を入稿する事になった際に、ファイルサイズはかなり大きなポイントになるからです。
比較ツール
Google Web Designer
HTML5作成ツール。現在はベータ版で無料ダウンロードできます。 （https://www.google.com/webdesigner/）
個人的な意見としてはFlashと比較してアニメーションを付ける際に少し面倒且つUIもわかりにくい。。。 でもAdWordsでサポートされており、AdWords向け出力機能が付いています。
Adobe Edge Animate CC
AdobeのHTML5作成ツール。ただ、2015年11月をもって開発を終了したらしく、今後はAdobe Animate CCとして近日リリース予定のようです。
Adobe製品なのでUIは割りとわかりやすいです。手軽にHTML5広告を作成できます。
Adobe Flash Professional CS6
皆さんお馴染みFlash Professionalですが、プラグインとしてToolkit for CreateJSをAdobe Extension ManagerにインストールするとHTML5に出力できるようになります。
また、上で触れたAdobe Animate CCですが、このFlash Professionalも改名してAdobe AnimateCCになるようです。
ということはEdge Animateと統合するということですかね。 ちなみにAdobe Flash Professional CCでは、HTML5 Canvasという機能でHTML5出力ができるようです。
Google Swiffy
swfファイルからHTML5へ変換するツールです。サイトから無料で変換できます。（https://developers.google.com/swiffy/convert/upload）
また、FlashProfessionalにプラグインでインストールすれば、Flashの管理画面からswiffy変換して出力できます。 今回はFlashプラグインで出力したswiffyで比較したいと思います。
出力ファイルサイズ
出力されるファイルサイズ比較です。
以下のように同じアニメーションを4ツールそれぞれで作成しました。画像は全て110KBの300x250サイズのpngを使ってます。
キャプチャですが、実際は上から降ってきて真ん中でバウンドするってアニメーションです。
※4つとも動きがバラバラなので4つ見えている状態でタイミングよくキャプチャするのに10枚くらい撮影しました。
左から順に見ていきます。
| Google Web Designer | Adobe Edge Animate CC | Adobe Flash Professional CS6 | Google Swiffy（Flashプラグイン） | |
|---|---|---|---|---|
| htmlファイル | 41KB | 0.791KB | 1.31KB | 14.8KB |
| jsファイル | 2.35KB | 2.71KB | ||
| 画像ファイル | 110KB | 110KB | 36KB | |
| 合計 | 151KB | 113KB | 40KB | 14.8KB |
※Flashでは画像ファイルを圧縮してjpgファイルにするので軽くなっている。
ということで、出力されるファイルだけで比較するとSwiffyが1位でした〜。 そしてGWDがビリ。ですが、仕方ない理由があります。
なぜならGWD以外は外部jsを呼び出しているからです。GWDは外部jsを読み込んでない分htmlファイルの容量が大きくなります。 なので最終的に使われる外部jsまで全て含めたファイルサイズで言うと勝負はわからないです。
また、GWDが外部jsを読み込んでいない理由はAdWordsの仕様でHTMLファイル入稿時は外部jsを読み込む記述が書かれていると弾かれる仕様になっているためです。 これによってかなりファイルサイズにおいても不利な状況になっています。
ちなみにSwiffy変換後画像ファイルはどうなったの？と気になりますが、恐らくGoogleのサーバに置かれ、表示時に呼び出すようになっているようです。
また、上記はFlash管理画面からSwiffy変換プラグインで出力しました結果ですが、一度swfファイルにしてswiffy管理画面から変換すると、何故か53KBになりました。 見た目は全く同じで画質が良くなったわけでもないし、謎です。。
画質
・Google Web Designer
・Adobe Edge Animate CC
・Adobe Flash Professional CS6
・Google Swiffy（Flashプラグイン）
Flash管理画面から出力した下2つが薄いですね。 これはキャプチャなので、更に画質が悪くなってしまってますが、上2つは実際拡大してもかなり綺麗です。
まとめ
ファイルサイズが軽いのはFlash・Swiffy、画質がいいのはWebDesigner・EdgeAnimateとなりました。
でも画質は拡大してやっと差がわかるくらいで、実際のところ拡大しなければFlashでも全然問題ないです。 なので、ファイルサイズが軽い、画質も問題ないFlashがやっぱり主流になっていくのでしょう。皆さん使い慣れてるし。
そして近日リリースのAdobeAnimateCCがかなり気になりますね！
リリースしてゲットしたらすぐに投稿します！
