HTML5のVideoとCanvasを使って神速でランディングページに動きを付ける：ブラック案件駆逐法（2）（2/2 ページ）

[岡本紳吾，hatte.Inc]

HTML5のCanvasアニメーション制作はFlash Proのモーションエディターで

　「アニメーション制作ソフトの元祖」といってもいい存在の「Adobe Flash Profesional CC」（以下、Flash Pro）。「Flashはオワコンでしょ？」と思われがちだが、Flashには「CreateJS」という強力なタッグを組んだツールがあり、Flashで作成したアニメーションをインタラクティブ機能も含めてJavaScriptで動作する形で書き出すことができる。

　スクリプト自体をJavaScriptで書く必要があったり、一部のエフェクトの利用に制限があったりするものの、非常に自由度の高いアニメーションを作成できる。

　Edge Animateで作れるアニメーションはDOMベースのものだが、Flash Proで作ることができるHTML5アニメーションはCanvasのものだ。先に書いた通り、DOMアニメーションでは限界が見えてくる複雑なアニメーションやインタラクティブ要素は、FlashのCanvasである程度解決できるだろう。

新規作成時に「HTML5 Canvas」を選択する

　そして、注目したいのはFlash Pro 2014で「モーションエディター」が再び実装されたことだ。モーションエディターとは、アニメーションソフトではよく使われている各プロパティごとに個別にアニメーションを設定し、細かく動きを調整できる機能のことだが、Flash CS6を最後に削除されてしまっていた。

　これが驚くほど使いやすくなって復活し、ゼリー系モンスターのようなぷよぷよした動きなどを簡単に制作できるようになった。

　モーションエディターは昔のようにメニューから呼び出せるかと思いきや、そうではなく作成済みのモーショントゥイーンをダブルクリック、もしくは右クリックして［トゥイーンを調整］を選択する。

エディターの編集内容に応じて、タイムラインにキーフレームが追加される

　Flash CS6では、カスタムされたトゥイーンは書き出すことができなかった。フレームアニメーションとして編集する必要などがあったが、今バージョンからは自動でフレームアニメーションに変換してくれるようになった。再編集用のトゥイーンを保持しておく必要もなく、うれしい機能追加といえる。

　今回はFlashは利用しなかったが、キャラクターアニメーションなどではモーションエディターを利用することが非常に多く、筆者はさまざまなアニメーションツールを駆使してキャラクターを動かす仕事もこなしている。

　今回、Flash Pro 2014でモーションエディターが復活したことと、モーションエディターで作成したアニメーションをCanvasに書き出せることは、非常に重要なアップデートであるといえよう。

イラレのように「線幅ツール」を使って、動かすことも

　さらに「線幅ツール」が強化され、Illustratorと同様に1本の線の中でさまざまな太さを持たせることができるようになった。

　筆圧感知タブレットとブラシツールで線の太さを変える表現は以前からあったが、今バージョンでは塗りではなく、線として下線線幅が適用できるようになった。これにより、ファイルサイズを削減しつつ、ブラシツールのような多彩な表現を実現できる。Illustratorと違い、さらにこれを動かすこともできる。

Flash Proの「線幅ツール」で描いたイラスト例（公式サイトの画像を引用）

　今回はEdge Animateを使ってLPに動きを持たせることができた。クライアントも満足しているようだ。今度こそ、この案件は手を離れてくれると願いたいところだが、まだ何か起きそうな予感もしている。

次回「あ、ページ追加で。」

　動くLPは納品した。これで一段落かと思いきや、思ったより早くできたので、ついでにページを追加してほしいという依頼が舞い込んだ。コーダーは「仕事が終わった」と完全に休息モード。登山に出かけていて連絡が取れない。こうなったらPhotoshop使いの私が頑張るしかない。コードを書かなくてもWebページが制作できるツール、Museがあればなんとかなるはずだ。

　何と、コーダーが不在の中、デザイナーが孤軍奮闘することに！

※案件についてはフィクションですが、筆者が実際に体験した事実を元に執筆しております。実際にコーディングしたデータをWeb上でご覧いただけます。筆者のGitHubアカウントから素材を含めてダウンロードすることもできます。当記事のLPで紹介されている「Climbing lovers Jewelry」は筆者の会社が輸入代理をしている実在の商品です。

「ブラック案件駆逐法」バックナンバー

• Web制作のプロが知らないともったいない作成ソフトの使い分け方まとめ
• PSDファイルを基にしたリリースレベルのレスポンシブデザインの作り方
• コーディングの手腕がないデザイナーだけでWebページ制作をしてみた件について
• HTML5のVideoとCanvasを使って神速でランディングページに動きを付ける
• 納期明日!? PSDを一晩でWebページにする最新Web制作フローを試してみた

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto