Webページ上にアニメーション演出を組み込もうとする場合、
今ではJavaScript(jQuery)やCSS3など、実装方法がいくつかありますが
HTML5でのアニメーション動作を簡単に作成することができる
気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。

Google Web Designer


Google Web Designer

言わずと知れたGoogleさんから公開している
HTML5アニメーションをつけた広告を制作できるツール「Google Web Designer」。

ツールは無料でダウンロードすることができます。

この「Google Web Designer」では広告バナーのみならず
画像ギャラリーなども簡単に作れるようになっており
操作も直感的に制作できるようになっています。

作成したデータは一式ダウンロードすることができ
組み込みも簡単にできます。

試しに作成してみたサンプルはこちら。
※「リロード」を押してみてください
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ツールの詳しい操作方法については
GIGAZINEさんのページやASCII.jpさんのページで
紹介されているものがとても分かりやすかったです。

【参考記事】無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
【参考記事】ASCII.jp:Google Web Designerで始めるHTML5アニメーション

続いてもう一つ。

HTML5 MAKER


HTML5 MAKER

ブラウザ上でPowerPointを扱う感覚で
HTML5アニメーションが作成できる「HTML5 MAKER」。

操作画面上に画像をドラッグで追加したり
テキストボックスを追加したりして
各要素に対してアニメーション設定をするようになっています。

画面左側がキーフレーム、
中央で各種パーツの配置などの設定
右側がパーツの細かな設定ブロックになっています。

表記が英語なので少しわかりづらいところもあるかもしれませんが
先の「Google Web Designer」と同様に
直感的に操作できる画面設計になっているかと思います。

無料でアニメーションをあれこれ作ることができますが
有料版と作成できる個数が違ったり、無料で使用するには制限がいくつかあるようです。

以上、HTML5アニメーションを簡単に作成できるツール2点でした。

HTML5アニメーションを作成する際にぜひ。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

HTML5アニメーションを簡単に作成できるツール「Google Web Designer」&「HTML5 MAKER」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR