HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選：Webサイト作成手順を勉強するまとめ（3）（1/3 ページ）

新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。

» 2014年05月14日 18時00分公開

[岡本紳吾，hatte.Inc]

今回の主な内容

　前々回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、前回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになったら、Webサイトにさまざまな動きを加えたくなるだろう。

　Webアニメーションは、ここ数年で大きく様変わりしてきた。またアニメーションではないが、さまざまな動きを持ったWebサイトもたくさん作られるようになってきている。

　Webアニメーションを制作するツールも多数存在する。例えば、アドビシステムズが提供しているWebアニメーションのツールは、「Adobe Edge Animate」（以下、Edge Animate）と「Adobe Flash Professional」（以下、Flash）がある。

　Flashについては、基本的にFlash PlayerがWebブラウザーのプラグインとして搭載されていないと、Flashで制作したアイニメーションを動かせないので、スマートフォン対応が難しいが、HTML5書き出し機能などでFlashのアニメーションをマルチデバイス向けに作ることができるようになっている。

　これらのツールの使い方をマスターしておけば、突然のWebアニメーション制作案件にも困らなくて済むはずだ。今回は、Webアニメーションの作り方についてEdge AnimateとFlashを例に、提供元であるアドビシステムズが使い方を無料で解説している「Adobe Pinch In」の記事を一部引用しながら、現場で使える具体的な制作手順とテクニックをまとめて紹介していこう。

【ステップ0】初めに2種類のワークフローを把握しておこう

　Edge AnimateはJavaScriptベースのアニメーションを手軽に作成できるツールだ。AfterEffectsっぽいタイムラインを操作して、エレメント（要素）を動かしたり変形したりできるようになっている。JavaScriptベースなので、生成したアニメーションをテキストエディターで調整することもできる。

　まずはEdge Animateでどんなことができるのかを見てみよう。

　Edge Animateは、はじめからアニメーションを作っていく方法と、既存のHTMLを加工する方法の2種類のワークフローが存在する。特に後者は既存サイトの改修などで効率的にアニメーションを導入できるようになっている。

Edge Animate入門第1回　2種類のワークフロー（Adobe Pinch In）の主な内容

ゼロから作成する場合のワークフロー
既存のHTMLファイルを読み込んで作成する場合のワークフロー

2種類のワークフロー（Edge Animate入門第1回　2種類のワークフロー（Adobe Pinch In）より引用）

【ステップ1】アニメーションツールの基本「エレメント」を使う

　アニメーションツールの基本はまず、エレメント（要素）の配置や位置調整、大きさの調整をマスターすることだ。エレメントの階層構造にも注目できるようになっておこう。

Edge Animate入門第2回　エレメントの配置、位置やサイズの指定（Adobe Pinch In）の主な内容

エレメントを配置する
エレメントの階層構造を作成する
エレメントの位置やサイズを指定する

基本図形の描画（Edge Animate入門第2回　エレメントの配置、位置やサイズの指定（Adobe Pinch In）より引用）

【ステップ2】「キーフレーム」を使いアニメーションを動かす

　配置をマスターしたらまず動かしてみよう。キーフレームを利用したアニメーションはEdge Animate以外のアニメーションツールでも採用されている方法なので、ここでマスターしておけば、他のツールでもすぐに理解できるようになる。

　Edge Animateでは自動的にアニメーションを設定してくれる機能が付いているのだが、場合によってはアニメーションが設定されると困る場合がある。画面外に出した要素を他の場所から画面内に入れたいといったときなどだ。

　この切り替えを理解しておくことと、Edge Animate独自の「ピン」ツールを利用したアニメーションの設定をマスターしておけば、迅速にアニメーションを作っていくことができるようになる。

Edge Animate入門第3回　エレメントのアニメーション（Adobe Pinch In）の主な内容

キーフレームを使ったアニメーション作成
ピンツールを使ったアニメーション作成
イージングの設定

ピンツールを使ってアニメーションを作成する手順（Edge Animate入門第3回　エレメントのアニメーション（Adobe Pinch In）より引用）

【ステップ3】アニメーションをHTML内に表示する

　アニメーションを動かせるようになったらいよいよパブリッシュだ。Flashの場合は書き出ししたswfファイルを貼り付ける作業だったが、Edge Animateの場合はJavaScriptなので、スクリプトを読み込ませて、再生したい場所でそのスクリプトを実行させる必要がある。既存のサイトに貼り付けるには、書き出されたhtmlのソースをコピーペーストすればOKだ。