Animate

【アニメ自作にはアニメイト?】手描きのパラパラ漫画並みにヌルヌル動いてくれる?作画点数少なくできる?Adobe Animate の得意と苦手

Pros weaknesAnimate_Adobe_フラッシュアニメーションを効率よく作れるソフト
  

 

「自作アニメを作ろう!?」と思ったときに、ジーナの脳裏に真っ先に浮かんだのは、パラパラ漫画スタイルです(*’ω’*)。

そして、同時にこんな疑問も浮かびます。

  • どれだけの数の手描きイラストが必要?
  • 何を使ってどう描く?
  • 個人がこなせる作業量なの?アイコン_疑問-1

 

ちなみに、普段見ている映画やテレビやアニメは、「1秒間に24枚」の画像で制作されるのが一般的です(*’ω’*)。

ジーナ
ジーナ
人間の動作が自然に見える最低限のフィルム数が、24枚/1秒だからです。

▼1秒間に何枚の絵を差し込むか?というのはフレームレートという設定で行っています。詳しく知りたい方はこちらをご覧ください。

frames per second_フレームレート_適正値
動画出力時のフレームレート(fps) シーン別適正値一覧&適正値を導く考え方フレームレートとは、1秒間を構成する画像(フレームデータ)を何枚するか?を数値で表したものです。fpsで表します。日本だと、動画編集後の出力ファイルに設定する値としては、24fpsか30fpsで設定するのがオーソドックスであり、無難ですね(*'ω'*)!...

 

24枚/1秒と仮定すると、1分間に必要な画像枚数は次の通りです(*’ω’*)。

  • 1分:1440枚
  • 2分:2880枚
  • 3分:4320
  • 4分:5760枚
  • 5分:7200枚

一人で描くとしたら…激務( ゚Д゚)!

ジーナ
ジーナ
こんなの一人でやりきれるかしら!?
アイコン_ゾンビ

 

▼パラパラ漫画で有名な鉄拳さんのツイートを見ても、壮絶さが分かります(*’ω’*)!

ちなみに、鉄拳さんのパラパラ漫画のフレームレートは次の通りです。

  • 6枚/1秒

1分間のアニメをつくるのに、360枚のイラスト(フレーム)が必要な計算です。

鉄拳さんのように、背景込みで手描きのイラストを描く場合には、想像を絶する作業量になります(*’ω’*)!

ジーナ
ジーナ
アニメを作るには、相当な努力と時間を必要とする(*’ω’*)!

 

 

ここまで読むと、合理的なロジックを持った皆さんは、きっと想像したに違いありません。

  • もっと少ない枚数で、簡単にアニメ化してくれるソフトがあるんじゃね( ゚Д゚)?アイコン_ロボット
ジーナ
ジーナ
えっ!?ジーナは考えましたよ(*’ω’*)!

 

そうして辿り着いたソフトが Adobe Animate です(*’ω’*)。

▼先日、ようやくアドビのクリエイティブクラウド コンプリートプランを契約しました。プランの事や、お得に申込する方法に興味のある方はこちらをご覧ください(*’ω’*)!

Apply for Creative Cloud_クリエイティブクラウド_無料版インストール_方法と解約と注意点
【Creative Cloud】無料版でお試ししたい!?無料版と正規版の違い&新規申込手続きで注意したいポイント解説 アドビの無料版をインストールする時にも、クリエイティブクラウドのインストールは必須です。また、新規申し込みの際にはクレジットカードなども準備が必要です。新規の方の無料版インストールに伴う手続き・解約・注意事項についてまとめました。興味のある方・チェックしておきたい方は、ぜひご覧ください。...

 

まだまだ使い始めたばかりですが、さくっと言えることは次の通りです(*’ω’*)!

  • 手描き作画のみより、圧倒的&効率的にアニメが作れる!
アイコン_スピード

 

ということで、現時点で痛感した、時短に繋がるよきシステムや現時点で把握できた注意点を紹介します。

 

「これから始めたいかも!?」とお考えだった方は、よろしければ参考にしてください。

 

▼Adobe Animateと同じフラッシュアニメ(*’ω’*)!ここまでできると夢は広がる!▼

 

 

コンプリートプランアカデミック価格で購入できる!HM「たのまな」

 

Adobe Animate 作画枚数を短縮する優れた機能

まずは、膨大な作画をすることなくアニメを自動生成してくれる、Adobe Animate優れた機能を紹介します(*’ω’*)!

女性_棒

トゥイーン 画像と画像の自動補填で作業の効率化

ジーナは、Animateを触るまで聞いたことがなかったのが、この「トゥイーン」です。

ジーナ
ジーナ
文字打つのもちょっと難しいんですよね…「トゥイーン」( ゚Д゚)!

 

トゥイーン(tween)とは、between(中間)に由来する言葉で、2点間のイラスト自動生成してくれる機能です。

【2種のトゥイーン】

  • モーショントゥイーン
  • シェイプトゥイーン

 

モーション・シェイプは、どちらも不足する画像を補填してくれる機能という点では、同じものと言えます(*’ω’*)。

モーショントゥイーン

モーショントゥイーンは、不足している画像自動生成することで、滑らかな動画を作ります。

 

▼モーショントゥイーンの自動生成イメージ|イエローの静止画像の間を埋めるように、モーショントゥイーンがグリーンの画像を挿入してくれます。

モーショントゥイーン_イメージ図
ジーナ
ジーナ
必ずしも1秒間に24枚の画像を描かなくてよい!?

 

 

シェイプトゥイーン

シェイプトゥイーンは、シェイプ起点の形と終点の形の、間の形状を補填するようにイメージを生成します(*’ω’*)!

 

▼シェイプトゥイーンの自動生成イメージ|四角から星の中継地点の形状(真ん中のグリーンの形状)を自動生成してくれます。

ジーナ
ジーナ
必ずしも1秒間に24枚も画像を描かなくてよい! ?

 

どちらのトゥイーンでも同等の結果を生むことができますが、オブジェクトの種類や属性によって、使えるトゥイーンが変わります。

  • いずれのトゥイーンも、効果的に取り入れることで、単純な作画作業を大幅に短縮することができます。
ジーナ
ジーナ
シーンや画風によっては、1枚の作画ほぼすべてのアニメーションを作れることも(*’ω’*)!

 

インバースキネマティック 自然な追随導線をシステムでサポート

IKと呼ばれ、ロボット工学3DCGのポリゴン作成でよく見かける理論ですね。

Adobe Animateでは、パーツを繋げて連結&連動させる機能と思っておけばよいです(*’ω’*)。

アイコン_ロボット-1

▼インバースキネマティック (IK) について、Adobeオフィシャルサイトでの説明は以下の通りです。

インバースキネマティック (IK) とは、複数のオブジェクトをボーンで連結し、相互に関連するオブジェクトセットとしてアニメーション化する手法のことです。Flash CS5 Professional では、ボーンツールを使用してインバースキネマティックを実現することができます。

引用:https://helpx.adobe.com/jp/flash/kb/8429.html

 

人間を含め、骨格を持った動物に適用すると、自然で無理のない稼働領域で動かすよう、連携制限をしてくれます。

 

▼イメージ的には、操り人形の連携を作るプログラムです。バリの影絵人形劇で使う、平面の操り人形がイメージとしては近いです(*’ω’*)!

パペットイメージ1

Adobeのインバースキネマスティックは、見え方へのサポートを行うだけではありません。

  • 上記のようなパーツを作っておくと、登録したパーツをベースにモチーフの動きを作る(トゥイーンする)ことができますので、膨大な作画が不要になります(*’ω’*)!

 

▼アドビのチュートリアルページです。興味のある方は、ご覧ください。

 

紙の操り人形と同様で、立体的な動きは苦手です。

 

モーション付きシンボル パーツ単位で登録できるループアニメ

Adobe Animateでは、パーツ単位でループするアニメーションを記録することができます。

インストール-1

そして、パーツ単位で保存(シンボル化)&流用することもできます(*’ω’*)!

【動的要素のあるパーツ例】

  • 葉っぱパーツ:風になびく葉っぱ
  • 腕パーツ:交互に振る腕
  • 目パーツ:一定間隔で行う瞬きや視線の動き
  • 炎エフェクト:ゆらゆらと揺らぐ炎のイメージ

 

ループ記録できるのは、単純なパーツの回転運動変形だけではありません。

炎エフェクトのように、原型が複雑に変化する動きも、膨大な作画をすることなく作成し、パーツ(シンボル)化できます。

▼動くカルシファー作りもさくっとやれそうです(*’ω’*)!

 

▼ユニークな、アセットワープツール/シェイプのチュートリアルはこちらです。文字量多いのですが、動画を見るとイメージ付けやすいです。興味がある方は参考までにご覧ください。

 

使い方のコツは、シンボル化する前にモーションをセットすることです(*’ω’*)!

ジーナ
ジーナ
シンボル化したら、モーションはセットできません(*’ω’*)!

【モーション付きシンボルを作るときの注意点】

  • パーツに動きを記録させるのは、シンボル化する前に行います。
  • シンボル化したパーツは、後から動きを記録させることはできません

とても便利で役立つ機能です。

ぜひ活用してみてください(*’ω’*)!

 

動画を作っていくと、パーツ単位繰り返す動きというのが意外とたくさんあることに気づきます。

動的パーツをシンボル化して流用できると、その分の作画が省略できるので、とっても楽ちんです。

ジーナ
ジーナ
時間短縮(*’ω’*)!

 

 

コンプリートプランアカデミック価格で購入できる!HM「たのまな」

 

Adobe Animate 2Dアニメーション機能が苦手な表現

アニメーションの種類によっては、トゥイーン・インバースキネマティック・アセットワープといったフォローシステムが合わず、作画したほうが早い表現もあります。

アイコン_絵画

▼パラパラ漫画スタイルで、画像を挿入したほうが早い&品質が良くなりやすいケース

  • 立体的な形状変化

 

具体的には次の様な表現やシーンになりますね(*’ω’*)。

【立体的なモーション例】

  • 表情の変化:目や口の開き方や鼻の角度
  • 対象を見る視点・角度の変化:横向きから縦向きへ、斜め下から上方から見下ろすように…など、対象の形が角度によって変化する動き

 

これらは、無理にトゥイーンを使わず、作画データを小まめに差し込むことで簡単に解決します(*’ω’*)!

ジーナ
ジーナ
ここはパラパラ漫画スタイル頑張る!

 

立体的な形状変化について

「モーションによって立体的に形状が変化する例」はたくさんありますが、分かりやすくて代表的なモーションの一つが「人が顔の向きを変える」というシーンです。

 

▼今回はに注目し、顔の向きに伴って、どのように形状が変化するかを確認してみます

adobe_animate_立体的イメージはフォローできない理由

単純なシーンですが、上記4つの画像を見ると、全てのフレームにおいて鼻の形が変わっているのが分かりますね。

しかも、輪郭線が単純に移動しているのではなく、形状が大きく変わるのがポイントです(*’ω’*)!

ジーナ
ジーナ
単純な三角柱に置き換えてみると、違いが際立ちます(*’ω’*)?

 

上記のように、見る角度によって形が変わるケースは、人間なら予測した画像を作成することも容易いですが、コンピュータにとっては難しい作業です(*’ω’*)。

ジーナ
ジーナ
ソフトは、所詮ツールの一つです。一つのツールや手法済ませようとせず使い分ける事も大事です(*’ω’*)!
  • Animaiteで作るアニメーションでも、パラパラ漫画スタイルの作業は、ところどころ必要になる。
  • ソフトの得意分野を知ることで、作業時間を大幅に短縮できる。

 

 

コンプリートプランアカデミック価格で購入できる!HM「たのまな」

 

Adobe Animate 抱き合わせで使いたいAdobeソフト

Animateと連携するデータは、Adobeソフトで作ったほうが使い勝手が良いです。

ジーナ
ジーナ
連携前提で作られているので、細かいところまでスムーズに連携します(*’ω’*)!
共有

また、Adobeの料金プランには、複数ソフトをお得に使い放題が出来るコンプリートプランがありますので、複数ソフトを使いたい人はぜひ検討しましょう(*’ω’*)。

  • 3つ以上のソフトに興味がある人は、コンプリートプランが断然おすすめ(*’ω’*)!

 

▼Adobeクリエイティブクラウドのプランや、お得に購入する方法をお知りになりたい人はこちらをご覧ください。

Apply for Creative Cloud_クリエイティブクラウド_無料版インストール_方法と解約と注意点
【Creative Cloud】無料版でお試ししたい!?無料版と正規版の違い&新規申込手続きで注意したいポイント解説 アドビの無料版をインストールする時にも、クリエイティブクラウドのインストールは必須です。また、新規申し込みの際にはクレジットカードなども準備が必要です。新規の方の無料版インストールに伴う手続き・解約・注意事項についてまとめました。興味のある方・チェックしておきたい方は、ぜひご覧ください。...

 

Adobe Illustrator

画像引用:https://www.adobe.com/

 

Adobe Animateで一緒に使いたいソフトNO1は、Adobe Illustratorです。

お絵描き

▼理由は次の通り(*’ω’*)!

  • 優れた作画機能
  • 細やかな作画データの連携

 

Adobe Animateにも作画機能はありますが、Animate単独で描きこむには、機能がやや不十分です。

【Illustratorをおすすめしたい 連携機能】

  • ベクター線の描画機能:Adobe Animateはベクター線を識別します。オブジェクトの単位を、ベクター線をキーに切り分けられるため、ベクター線で作画できるIllstratorとは相性が抜群によいです。
  • レイヤーの保持:Illustratorで作画したデータをAnimateで取り込むと、レイヤー情報も一緒に保持できます。パーツ毎に分解する時に重宝します。
  • ほぼ共通の操作感:これは同じソフトメーカーの強みですね。ペンの使い方や操作方法がほぼ同じです。

ジーナは、ペイント系ソフトも使っていますが、Animateとの相性は、Illstratorの方が遥かに便利でした。

ジーナ
ジーナ
ベクター絵レイヤー共有機能が秀逸です(*’ω’*)!

 

Adobe PhotoShop

画像引用:https://www.adobe.com/

 

Adobeの中でも、最も有名なソフトの一つがPhotoShopです。

Animateだけではなく、Illustratorとも相性がよく、活用したいシーン多岐にわたります。

アイコン_絵画

▼Animateとの連携のみでも活用したい(*’ω’*)

  • 素材そのものの加工や作図、画像制作で活用できる。
  • 作画以外でも、データの圧縮など、PhotoShopが使いやすい機能もある。
ジーナ
ジーナ
持ってて無用になることがない優秀ソフトですね(*’ω’*)!

Adobe Premier Pro

画像引用:https://www.adobe.com/

 

Premier Proは動画編集ソフトです。

ビデオ
Animateで出力したデータを、直接ホームページに挿入する場合は不要です。

 

ソフトの活用シーンは主に2つです。

  1. 【高度なアニメーションムービーとして編集したい場合】
    アニメーションムービーに、効果音・BGM・エフェクト・トランジションなど、より高度な映像編集を行いたい場合に利用します。
  2. 【SNSや動画配信サイトで動画を拡散したい場合】
    映像と音声は、動画編集ソフトを使って、改めて合成する必要があります。
    音声付きアニメーションを通常の動画ファイルで公開したい場合には、必須ソフトになります。

AnimateはHTML5形式でデータを作成できますが、いわゆる動画データではありません

動画として高度な編集をしたい場合は、Premier Proのような動画編集ソフトが必要になります(*’ω’*)!

  • Illustrator・PhotoShop・Premier Pro・Animateを使うなら、コンプリートプランお得です(*’ω’*)!

 

▼Adobe クリエイティブクラウド(コンプリートプラン)での申込を検討している人は、たのまな経由での申し込みがおススメです(*’ω’*)!

Purchase the academic version legally_たのまな_ヒューマンアカデミー_おすすめ
【Creative Cloud】知らなきゃ損!コンプリートプランを「合法的にアカデミック版」で購入するお得な方法 おすすめヒューマンアカデミー「たのまな」Adobe講座アドビクリエイティブクラウドはコンプリートプランで使いたいですよね。でもサブスクリプションで約5,500円/月はやっぱり高いです。圧倒的に価格を抑えた利用をするなら、通信講座セットを、キャンペーンを使って購入するのがおすすめです。約45%OFFで購入できます!...

 

SNS・動画配信サイト向け 動画ファイルを作りたい人におすすめ サイバーリンク Screen Recorder

Animateのデータ形式はHTML5なので、そのままではSNS動画共有サイトへの共有はできません

webカメラ

SNSや動画共有サイトにアップするには、MP4などの動画ファイル形式に変換する必要がありますが、HTML5形式データを、ダイレクトに変換するエンコーダーなどもありません。

▼現在のところ、一番手っ取り早く動画ファイルを作るのは以下の方法です(*’ω’*)。

  • 自分のPCでHTML5動画をプレビューし、動画キャプチャした動画を切り出す。
ジーナ
ジーナ
切り出した動画データの編集には、Premier Proのような動画編集ソフトが必要です(*’ω’*)!

 

 

なお、キャプチャソフトとしてジーナがおすすめしたいのは、CyberLINKScreen Recorderです。

スクリーンレコーダー_バナー-1

Adobeではないのですが、買い切り&ハイスペック&リーズナブルでおすすめです。

▼CyberLINKのScreen Recorderについて、詳しくお知りになりたい方はこちらをご覧ください。

スクリーンレコーダー_screen capture
Webカメラ&ゲームライブ&動画編集をマルチにこなす!?みんなが認めるおすすめのキャプチャソフト【スクリーンレコーダー】ゲーム実況やパソコンソフトの動画チュートリアル、プレゼン用の動画資料などを作りたいときに必要なのは、キャプチャソフトです。 中でも、スクリーンレコーダーはおすすめです。スクリーンレコーダーって、出来ることの幅と動作の軽さが別次元なんですよね。そんなスクリーンレコーダーの魅力を伝えていきます。...

 

 

Adobeのキャプチャソフトをおすすめしない理由

Adobeでは、Adobe Captivateという商品がありますが、以下の理由でおすすめしません

  • クリエイティブクラウドのコンプリートプランに含まれない商品で、別額「4,000円/月」が必要。
  • eラーニングコンテンツも作れるほど高機能商品ですが、そこまでの機能は不要

 

ジーナ
ジーナ
キャプチャだけができればよいので、Adobe以外の買い切りソフトで充分です(*’ω’*)!

 

スクリーンレコーダー_バナー

\Screen Recorderの購入ならオフィシャルサイトが一番お得/

 

Adobe Animate 最大限生かすためのJava Script

Animateの出力データは、HTML5です。

  • HTML5データの中身は、Java Scriptというプログラム言語です。
サイズ違い1

 

そんなJavaScriptの最大の特徴は、webの動的コンテンツが作れるところです。

ジーナ
ジーナ
Java Scriptをマスターすると…、ゲームも作れます(*’ω’*)!

 

ゲームまでは作らないとしても、マウスクリックでモーションを変えたり、マウスの動きに連動して向きを変えるオブジェクトを組み込むこともできます。

  • 視聴者参加型のアニメーションを作れるとしたら、表現にもビジネスにも可能性と深みがでてきますね(*’ω’*)!?
ジーナ
ジーナ
Animateの特徴を最大限活かすなら、JavaScriptも併せてマスターするのがおすすめです(*’ω’*)!

 

Adobe Animate初めてもサポート充実学習コンテンツ

Adobe Animateに限らず、Adobeは公式サイトのチュートリアルコンテンツが豊富です。

大学生

▼Adobeオフィシャルのチュートリアル

Adobe チュートリアルページを覗いてみる

 

Animateのチュートリアルコンテンツも例外なく、潤沢なチュートリアルコンテンツを揃えていて、27個ものラインナップがあります。

ジーナ
ジーナ
しかも、全て無料で学習可能です。

 

▼これら、一通りのチュートリアルを自習するだけで、スキルは確実に上がります

【Adobe Animate チュートリアル】

  • 初級:14コンテンツ
  • 中級:13コンテンツ
ジーナは、終了するまでにみっちり2日かけました(*’ω’*)!

 

Adobe Animateの情報配信されている個人の方のサイトは少ない印象ですが、ジーナも公式サイトのチュートリアルコンテンツだけで、操作方法はおおむね理解できました(*’ω’*)。

ジーナ
ジーナ
JavaScriptの知識とスキルは、Animateの操作スキルとはまた別物ですね(*’ω’*)!

 

コンプリートプランアカデミック価格で購入できる!HM「たのまな」

Adobe Animate まとめ

Adobe Animateは、旧フラッシュの仕組みを使った2Dアニメーションです。

女性_棒

当然ながら、単純な2Dアニメ得意で、トゥイーンを使うと、作画点数も少なくヌルヌルと動かすことが可能です。

また、従来のアニメーションのように、細かく作画した画像を差し込むと、複雑で立体的な動きも可能になります(*’ω’*)!

 

【Adobe Animate】

  • シーンと表現方法に適した作画や編集を行うことで、作画点数最小にできて、作業効率を上げられる。
  • 手描きには出来ない「レイヤー深度」カラー補正パーツ毎の編集が可能で、チェック&編集効率が高い。
ジーナ
ジーナ
「夜は短し…」同様、アニメーションの表現力手描きに迫るほど流麗でスムーズで美しい(*’ω’*)!

 

▼長編アニメーション「夜明け告げるルーのうた」も総フラッシュアニメです(*’ω’*)!

 

なお、Adobe Animateは、HTML5形式なので、動的なwebコンテンツとしての将来性も期待できるソフトです。

ネット通販

これから手を付けるソフトとしては、とても魅力的です(*’ω’*)!

ジーナ
ジーナ
触ってて楽しい!おすすめです(*’ω’*)。

 

以上、Adobe Animateの紹介でした。

女性-3

 

▼Adobe クリエイティブクラウド(コンプリートプラン)での申込を検討している人は、たのまな経由の申込みがおススメです(*’ω’*)!興味のある方はこちらをご覧ください。

Purchase the academic version legally_たのまな_ヒューマンアカデミー_おすすめ
【Creative Cloud】知らなきゃ損!コンプリートプランを「合法的にアカデミック版」で購入するお得な方法 おすすめヒューマンアカデミー「たのまな」Adobe講座アドビクリエイティブクラウドはコンプリートプランで使いたいですよね。でもサブスクリプションで約5,500円/月はやっぱり高いです。圧倒的に価格を抑えた利用をするなら、通信講座セットを、キャンペーンを使って購入するのがおすすめです。約45%OFFで購入できます!...

 

コンプリートプランアカデミック価格で購入できる!?HM「たのまな」