どうも、まさとらん（@0310lan）です！

みなさんは、自分でアニメーションを作りたい！と思ったことはありますか？

もし、「作り方が分からない…」とか「必要なツールを持っていない！」のような理由であきらめているのであれば、今回ご紹介するWebサービスで解消できるかもしれません。

それが、「Animatron」(無料)です！

Webアプリとは思えないくらい高機能で、初心者でも扱いやすいように設計されているのが魅力です。

どんなアニメーションが作れるの？

まずは、一体どんな感じのアニメーションが作れるのかを見てみましょう！

例えば、
「Animatron」のサイトに掲載されているような、サービス紹介用に作られた以下のようなアニメーション！

（Via Animatron user Bryce Struck）

最近のWebサービスは、文字よりも動画で紹介するケースが増えつつあるので、かなり活用できると思います。


また、ストーリー性を持たせたショートムービーのような作品も作れます。

（Via Animatron user Dmitry Skavish）


「Flappy bird」を再現することだって可能！

（Via Animatron user diego guerrero）

ゲームやアプリのプロトタイプを作ってみたり、紹介用にも良いですね。


複雑な背景やパーツなども、「Animatron」だけで作成可能です！

（Via Animatron user Dmitry Skavish）


このようなアニメーションが、ブラウザ上で誰でも簡単に作れるようになっており、自分のWebサイトやサービスに組み込んだり、そのままホストして世界中に公開することも可能です！

どうやって使うの？

それでは、もう少し詳しく見ていきましょう。

まずは、サイトのトップにある「START DESIGNING」をクリックします。



すると、何も登録することなく…すぐにアニメーションを作成できる編集画面が表示されます。

エディタは、キーフレームをベースにした、一般的なアニメーション作成ソフトと同様な操作が可能です。


そのため、任意のタイムライン上で、キャラクターの「開始点」「終了点」を決めるだけで、あとは自動的にアニメーションが生成されるので簡単です。



もちろん、任意の軌道を描いてアニメーションさせることも可能です。

この基本操作を繰り返していくだけで、少しずつ複雑なアニメーションになっていくわけです！

別々のシーンを作って組み合わせたり、レイヤーを使って奥行きを出したりなども出来るので、かなり高度な作品を作ることも可能です。


また、アニメーションを作るうえで必要なキャラクターや素材などは、自分で簡単に作っていくことが出来ます。

「Illustrator」などでお馴染みのベジェ曲線が使えるので、複雑な造形も簡単です。

もし、「ベジェ曲線」の操作が苦手…という人は、ブラウザ上でインタラクティブに練習が出来る学習サイトを活用するとすぐに慣れますよ！
【The Bezier Game】


さらに、あらかじめ豊富なキャラクターや図形などが搭載されたライブラリがあるので、こちらを編集しながら利用するのも便利です！



シーンに使う背景なども、慣れればすぐに描けるようになります。



もちろん、自分で用意した画像・写真・音楽ファイルなど、様々なファイルを素材として利用することも可能です！



アニメーションが完成したら、画面右上にある「書き出し」ボタンをクリックします！



すると、そのまま専用のサイトを生成して世界中に公開できる「URL」と、自分のWebサイトやアプリに組み込める「埋め込み用タグ」が表示されます。

さらに、メニューから最近人気の「SVG」への書き出しや、「GIF」「ビデオ」などにも変換することが可能となっています。

※無償のログインが必要な書き出しもあるので、あらかじめアカウントを取得しておくと便利です。


ちなみに、「Animatron」の専用APIも提供されているので、Webアプリなどに組み込んで面白いサービスが生み出せるかもしれません。

ご興味ある方は、ドキュメントを参照してみてください。
【Animatron　APIドキュメント】

充実した「アニメーション作成」の学習環境！

海外サービスなので、ちょっと操作に心配…という人も安心してください！

非常に丁寧な作りの「チュートリアル動画」が豊富に用意されています。

どれも1〜2分程度の動画で、基本的な操作、アニメーションの作り方、複雑な動きを追加する方法、キャラクターの描き方など、画面を見ているだけで分かるようになっているので、英語が苦手な人でも大丈夫！


さらに、世界中のユーザーが作ったアニメーション作品が随時公開されています。



面白いのは、どの作品も「編集」ボタンが付いている点！



クリックすれば、どのようなテクニックでアニメーションが作られているのか、中身を覗くことが出来るのです！

これで、上級者たちが使っている「技」を研究しながら、自分のスキルアップも出来るので非常にお得です。

このような環境が用意されているおかげで、1日もあれば非常に面白いアニメーションがたった1人で作れるようになるでしょう！

おまけ

最後に、今回ご紹介したような2Dアニメーションではなく、3DのCGアニメーションを簡単に生成できるサービスも合わせてご紹介しておきます！

【ブラウザだけでOK！たった一人で作れる「3DCGアニメーション」の作り方が話題に！】

3Dのキャラクター素材を、豊富なアニメーションテンプレートに当てはめるだけで、誰でも簡単にリアルな動きをつけることが可能になります。

人気のゲームエンジン「Unity」への書き出し機能も搭載されているので、ゲーム制作にも向いています。

まとめ

Webブラウザ上で動作する「アニメーション作成環境」は、まだまだ数えるくらいしかありませんが、なかでも「Animatron」は圧倒的に多機能で高度なアニメーション作りが楽しめます。

今回ご紹介した内容はすべて無料で利用できますが、有料プランにするとHD画質の動画に変換できたり、自分専用のプライベート空間にファイルを保存することが出来るようになったりもします。

ぜひ、みなさんも自分だけのオリジナルアニメーションを作って、世界中に公開してみましょう！


written by まさとらん