シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > Web上で高度なアニメーションを作成・公開できる「Animatron」が万能すぎる!
注目記事ピックアップ
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
share0
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
Webサービス
2014/11/21 22:30

Web上で高度なアニメーションを作成・公開できる「Animatron」が万能すぎる!

animatron_01
どうも、まさとらん(@0310lan)です!

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

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

それが、「Animatron」(無料)です!
animatron_02
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」をクリックします。
animatron_03


すると、何も登録することなく…すぐにアニメーションを作成できる編集画面が表示されます。
animatron_04
エディタは、キーフレームをベースにした、一般的なアニメーション作成ソフトと同様な操作が可能です。


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


もちろん、任意の軌道を描いてアニメーションさせることも可能です。
animatron_10
この基本操作を繰り返していくだけで、少しずつ複雑なアニメーションになっていくわけです!

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


また、アニメーションを作るうえで必要なキャラクターや素材などは、自分で簡単に作っていくことが出来ます。
animatron_05
「Illustrator」などでお馴染みのベジェ曲線が使えるので、複雑な造形も簡単です。

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


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


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


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


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


すると、そのまま専用のサイトを生成して世界中に公開できる「URL」と、自分のWebサイトやアプリに組み込める「埋め込み用タグ」が表示されます。
animatron_12
さらに、メニューから最近人気の「SVG」への書き出しや、「GIF」「ビデオ」などにも変換することが可能となっています。

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


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

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


充実した「アニメーション作成」の学習環境!
海外サービスなので、ちょっと操作に心配…という人も安心してください!

非常に丁寧な作りの「チュートリアル動画」が豊富に用意されています。
animatron_14
どれも1〜2分程度の動画で、基本的な操作、アニメーションの作り方、複雑な動きを追加する方法、キャラクターの描き方など、画面を見ているだけで分かるようになっているので、英語が苦手な人でも大丈夫!


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


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


クリックすれば、どのようなテクニックでアニメーションが作られているのか、中身を覗くことが出来るのです!
animatron_17
これで、上級者たちが使っている「技」を研究しながら、自分のスキルアップも出来るので非常にお得です。

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


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

ブラウザだけでOK!たった一人で作れる「3DCGアニメーション」の作り方が話題に!
animatron_18
3Dのキャラクター素材を、豊富なアニメーションテンプレートに当てはめるだけで、誰でも簡単にリアルな動きをつけることが可能になります。

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


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

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

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


written by まさとらん



まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る