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

アプギガトップ > Webサービス > Web上で高度なアニメーションを作成・公開できる「Animatron」が万能すぎる!
注目記事ピックアップ
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る