現在制作中のウェブサイトですが、基本レイアウトやデザインはクライアントさん(デザイン部門)から出されていて、それをHTML化(コーディング)して提供する…というお仕事形態です。
そのクライアントさんから出された原案に「アニメーション」という希望がありました。いわゆるYouTube的な撮影した動画ではなく、イラストレータによる線画をアニメーションしたいというものです。

パッと思い浮かぶのは、かつて一世を風靡したAdobe Flashを使ったアニメーション。一時期はフルFlashで作られたサイトがあったりしましたが、SEO的に効果がほとんど期待できない事や、AppleのiOS上(iPhone/iPad)で動作しない事、セキュリティ的な脆弱性がある事などから、数年前からFlashは廃れてきてしまいました。そしてHTML5が普及するにつれて、ますますFlashによって作られた動画コンテンツは使われない様になっています。

では線画でのアニメーションを作るのに何が良いか…
とググってみたところ、Googleが提供している「Google Web Designer」というアプリケーションがあるとのこと。(この辺りの情報に遅れているという事は、実は結構ハズカシイ事なんですけれどもf(^^;))
早速DLして使ってみたんですが、日本語で解説されているサイトはあっても細かい使い勝手の説明がイマイチで、特にタイムライン上の編集ノウハウがハッキリ判りません。(?_?)
2〜3時間アレコレいじってみたものの、思う様なアニメーションができない事が判りました。

Google Web Designerの解説画面

もう一つヒットしたのがAdobe製の「Animate CC 2017」です。
これは以前、Adobe Flash Professionalとしてリリースされていたアプリケーションで、Adobeが努力してくれたお陰でHTML5にも使える様な動画を吐き出してくれるもの。これなら動画の編集で過去に散々弄ってきたインターフェースなので、細かなコマンドは変わっていたものの、使い勝手もおおよそ見当がついてスイスイ編集できました。(^^)

Adobe Animate CC 2017画面

結果、ワタシ的にはAdobe製品の方が使いやすいかな…という結論を得た次第。
書き出されたアニメーションも、レスポンシブページ上で問題なく動作しているし、iPhoneで見ても何ら問題ナシ。(^^)
Googleさんのアプリケーションにも長所はあるかも知れませんが、今のところAdobe Creative Croudを使っている身としては、Animateにアドバンテージがあるかなと。CCには他に「Experience Design CC」という、ウェブサイトの見た目や動作シミュレーションを簡単に作成・提案・比較検討できるツールを提供してくれているし、コスパは優れているなと感じている今日この頃です。

比較画像