日本でも大人気のApple社のiPhoneやiPadなどの端末では、Flashアニメーションが閲覧できません。そのため、iPhoneやiPad用のWebページにアニメーションを表示したい場合は、HTML5やCSS3などを利用することになります。

今回は、GUIでビジュアル的にCSS3アニメーションを作成できる「Sencha Animator」をご紹介します。アニメーション用のCSS3は、大量のコードで複雑になるため、専用ツールでの作成が主流になると思います。

Sencha Animator – 日本語

Sencha Animator – ユーザーインターフェース

アニメーション作成用の直感的なGUIでCSS3アニメーションを作成することができます。Adobe Flashに似たインターフェースなので、Flashを作成したことがあり、多少のCSS3の知識があれば、すぐにでもCSS3アニメーションが作成できます。


主な機能（Sencha Animator – 利用ガイド）

• タイムラインコントロール
• オブジェクトプロパティ設定用パネル
• シークエンス、グルーピング、イージング、その他効果の管理
• ステージングエリアでの再生

また、CSS3広告とFlash広告にあるように、作成できるCSS3アニメーションは、Flashと見分けがつかないくらいの完成度です。

Sencha Animator – デモ

Sencha Animator デモ

※現在は開発者プレビュー版であり、サポート端末やブラウザの制限があります。
今後は、より多くの端末やブラウザをサポートしていく予定なので、モバイル端末以外でもCSS3アニメーション作成ツールとして利用できそうです。

サポート端末／ブラウザ（2011年5月10日現在）

• Apple iPad
• Apple iPhone
• Apple iPod touch
• Apple Safari
• BlackBerry Torch
• Google Android
• Google Chrome

弊社で作成したデモ

弊社のfacebookページを「いいね！」と言ってくれた方々の画像で「Hello!」という文字を表現しています。アニメーションは透明度のフェードインで単純ですが、iPadなどのタブレット端末でも閲覧可能です。



ぜひ、弊社facebookページを訪問し「いいね！」と言ってみてください。
株式会社キノ – facebook