paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

誰でもWeb上でリアルに動くHTML5アニメーションを製作できる「Animatron Studio」を使ってみた!

f:id:paiza:20180131135247j:plain
どうも、まさとらん(@0310lan)です!

今回は、ブラウザ上から誰でも簡単にHTML5で作られたアニメーションを製作できるWebサービスをご紹介します!

Webサイトやサービスに組み込んで動きのあるコンテンツを作成したり、企業ロゴやバナー広告、商品紹介、インフォグラフィック…など、とても幅広い分野に応用することが可能です。

ブラウザさえあれば今すぐアニメーションを作れるので、ぜひみなさんもオリジナル作品を作ってみてください!

■「Animatron Studio」とは?

「Animatron Studio」は、とにかく誰でも簡単にアニメーション製作ができることを前提に設計されています。

豊富なイラストやテンプレートを自在に組み合わせることで、わずかなマウス操作だけで楽しいアニメーションを次々と作っていくことが可能です。


例えば、以下のようなアニメーションなら2〜3分あれば完成します!

これは「動く背景」と「走るキャラクター」を組み合わせることでアニメーションを作っています。


また、「文字」をアニメーションさせれば以下のようなタイピング風景も作れます。


上級者になれば、次のように複雑な動きをするロボットも作れますよ!

「Animatron Studio」には2つのモードが用意されており、初心者向けの「Lite Mode(簡易モード)」と上級者向けの「Expert Mode(エキスパートモード)」があります。

これらのモードを切り替えることで、幅広いユーザー層が手軽に利用できるアニメーション製作エディタになっているわけです。(詳細はのちほどご紹介します…)

■「Animatron Studio」の使い方

それでは、実際に「Animatron Studio」を使いながらどのようなサービスなのかを詳しく見ていきましょう!

まず最初に、トップページ上部にある「SIGN UP」ボタンをクリックして無料のユーザー登録をしておきます。
f:id:paiza:20180131135422j:plain


次に、メールアドレスを入力しましょう!
f:id:paiza:20180131135437j:plain
すると、登録したメールアドレス宛に「ユーザー登録用のリンク」が送られてくるのでクリックします。


登録フォームが表示されるので、「ユーザー名」「パスワード」などを入力すれば完了です!
f:id:paiza:20180131135459j:plain


メイン画面に戻るので、画面上部にある「赤いボタン」をクリック!
f:id:paiza:20180131135510j:plain


すると「アニメーション製作エディタ」が表示されます!
f:id:paiza:20180131135522j:plain
あとは、この画面上で自由自在に好きなアニメーションを製作することができるわけです。

■「Lite Mode」の使い方

ここからは、初心者向けの「Lite Mode」を使ったアニメーション製作を見ていきましょう!

ちなみに、モードの切り替えはエディタ画面の上部にあるタブでいつでも切り替えられます。
f:id:paiza:20180131135539j:plain


「Lite Mode」によるアニメーション作りの流れですが、基本的には用意されている素材から好きなものを選んで組み立てていきます。

例えば、サンプル例として冒頭でご紹介した「走るキャラクター」を作ってみましょう!


画面左側にシーン別のテンプレートが豊富に用意されているので、好きなものをクリックします。
f:id:paiza:20180131135553j:plain
すると、「背景素材」「キャラクター素材」「アイテム素材」などが一覧で表示されます。


そこで、まずは「背景素材」をキャンバスにドラッグ&ドロップしてみましょう。
f:id:paiza:20180131135604j:plain


次に、走る動作が設定されているキャラクターを同じように配置します。
f:id:paiza:20180131135614j:plain


あとは、再生ボタンをクリックすればアニメーションのできあがりです!

ちなみに「エンターキー」で再生開始、「Shift + エンターキー」で先頭から再生開始されます。


また、他のシーン別テンプレートの素材も同時に利用できるので、組み合わせは無限です!
f:id:paiza:20180131135628j:plain
キャラクターの動きもたくさん用意されているので、これだけでも自分がイメージしているアニメーションに近いものをすぐに作れるはずです。


さらに面白いのは、「アニメーション効果」を追加することができる点です!

画面下にある「タイムライン」の先頭部分をクリックしてみましょう。
f:id:paiza:20180131135648j:plain


さまざまな「アニメーション効果」のリストが表示されるので、ためしに「ズームイン」の項目を選択してみましょう!
f:id:paiza:20180131135658j:plain


すると、以下のようにキャラクターがズームインされたところからスタートします。


また、「DRAW」の効果を選ぶとキャラクターを描いてからスタートさせることも可能!

他にも、文字のタイピングに最適な効果や、移動モーションを追加するなど多彩な演出が可能になるのでオススメです。

もちろん、自分が持っている画像や動画ファイルをアップロードして利用することもできるし、自分の音声を録音して再生することも可能ですよ!

■「Expert Mode」の使い方

ここからは、より高度なアニメーション作りが可能な「Expert Mode」について見ていきましょう!

「Lite Mode」のように豊富な素材を選択してアニメーションを組み立てることも可能ですが、完全にゼロから自由に製作できるのが大きな特徴です。


例えば、「ペンツール」を使ってIllustratorのようにベジェ曲線でキャラクターを描いていくことが可能です!
f:id:paiza:20180131135746j:plain
これにより、自分だけのオリジナルキャラを作ってアニメーション製作ができるわけです。


また、Tween機能を使うと「最初」と「最後」の位置だけを決めれば、途中のモーションを自動補完してアニメーションを作ることも可能です。
f:id:paiza:20180131135757j:plain


再生すると、以下のように移動してくれます!


また、直線の移動だけでなく「軌道線」を自由に調整できるので、思い通りの動きを簡単に実現可能です。
f:id:paiza:20180131135812j:plain


キャンバスに配置したオブジェクトは、インタラクティブな要素としてさまざまなイベント処理を埋め込むこともできます。
f:id:paiza:20180131135821j:plain
例えば、パソコンのイラストを描いて表示させておき、それをクリックすると別のサイトへ飛ぶような設定ができます。
(クリックしてアニメーションを再生するような動きもOK)


さらにスゴイのは、「ボーン構造」を自分で描くことでキャラクターを自在に動かすことができる点です!
f:id:paiza:20180131135834j:plain
「ボーン構造」は、イラストのキャラクターに骨格のようなものを埋め込むことで、人間らしいリアルな動きを実現してくれる機能になります。

これにより、自分が思い描いた通りにキャラクターを動かすことができるので、アニメーション製作の幅がとても広がります。(Tween機能を組み合わせれば簡単にリアルな動きになりますよ…)


「ボーン構造」の作り方に関しては、以下の動画で詳しく解説しているのでご興味ある方はぜひ参考にしてみてください。

■アニメーションを公開しよう!

アニメーションがある程度完成したら、今度は「公開」をしてみましょう!

画面上部にある「SHARE」ボタンをクリックします。
f:id:paiza:20180131135858j:plain


すると、「埋め込みタグの生成」「リンクURLの生成」「GIF / Videoでシェア」などの選択肢を選ぶことができます。
f:id:paiza:20180131135908j:plain
埋め込みタグを作れば、自分のWebサイトやブログなどで簡単に公開することが可能です。

また、Twitter / Facebook / YouTubeなどと連携すれば、もっと簡単にアニメーションを公開することができますよ。

■学習用のリソースについて

「Animatron Studio」はアニメーション製作ができるだけでなく、初心者向けに丁寧なチュートリアル動画を公開しているのも魅力の1つです。

例えば、以下の「チュートリアルコース」は15秒の短い動画で、「Animatron Studio」のさまざまな機能を解説しています。
f:id:paiza:20180131135944j:plain
動画を見るだけで、どんな機能があってどのように操作すれば良いのか簡単に理解できてオススメです。

また、サンプル例としてアニメーション製作の流れを解説するチュートリアルも用意されているので非常に参考になります。
(基礎から応用まで学習できる専門コースも提供されています…)


メインページには、他のユーザーが作成したアニメーションも閲覧できるようになっています。
f:id:paiza:20180131140025j:plain
一般公開されているアニメーションは、複製して自分なりにカスタマイズすることも可能です。

この機能を活用すれば、他のユーザーがどのようにアニメーション製作をしているのか分かるので勉強になります。


もし、分からないことがあっても「専用フォーラム」が用意されているので便利です!
f:id:paiza:20180131140047j:plain
内容を見てみると、ユーザー同士が教えあって問題を解決しているのがよく分かると思います。

このようなサポートツールが豊富に用意されているので、ぜひ有効活用していきたいですね!

今回ご紹介した内容はすべて無料プランで利用できるので、ぜひみなさんもオリジナル作品を作って公開してみてはいかがでしょうか。

HTML/CSS入門も公開中!動画でプログラミングが学べるpaizaラーニング


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

HTML/CSS入門編はもちろん、PythonJavaC言語PHPRubySQLなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

また今まで一部有料だった「C#入門編」を、今週から【全編無料】で公開しております。

■まとめ

今回は、「Animatron Studio」について駆け足でご紹介しました!

非常に高機能でまだまだ紹介できていない機能もたくさんありますが、まず最初は「Lite Mode」を使って何か1つアニメーションを作ってみることをオススメします。

そこから、「Expert Mode」に切り替えてオリジナルの要素を組み合わせていけば、自然と操作にも慣れてユニークな作品が作れるようになるはずです!

アニメーション製作にご興味ある方は、この機会にぜひ挑戦してみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud