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

アプギガトップ > Webサービス > Web上で高度なアニメーションを作成・公開できる「Animatron」が万能すぎる!
注目記事ピックアップ
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
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...

ページトップへ戻る