Adobe

【Adobe Animate】の特徴的な3機能&おすすめデバイスを解説!

adobeCC animateを使ってみたレビュー記事のアイキャッチ

アニメーションの制作方法は、大きく2つです。

【アニメーションの制作方法】

  1. 少しずつ動きをずらした絵を膨大に手描きする。
  2. ベクター画をCGで動かす。

画材に「リアルorデジタル」の違いはあれど、おおむね上記2つのいずれか、もしくは両方を組み合わせてアニメーションは作られます。

【パラパラ漫画タイプのアニメーション】

例えば、パラパラ漫画で有名な鉄拳さんの作品は、リアル素材を使った手描きタイプのアニメーションです。

ジーナ
ジーナ
1500枚もの絵を描いても、再生時間はわずか約4分なんだ!

そう、手描きアニメーションの難点は、何といっても作業量が膨大なことですね( ゚Д゚)!

【一般的なアニメーションのフレームレート】

人_頭を押さえ叫ぶ、後悔する女子

通常の映画やTVは、1秒間に24枚のフレーム(絵)を使います。

「分」に換算すると、膨大な枚数の絵が必要ということになります。

\「24枚/1秒」で必要な絵(フレーム)の枚数/

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

こんな壮絶な手描き作業を少しでも解消できるのでは?…と思ったのが、この度、Adobeのアニメーション制作アプリAdobe Animateを使ってみた経緯です。

ジーナ
ジーナ
本心は、単純に「ヌルヌル動くアニメーションを作ってみたかっただけ」だったりします。

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

ここまで高度なアニメーションだと、一枚ずつ手描きするのと制作時間は変わらない気もしますが、流用修正のしやすさ、webチャネルとの親和性は桁違いですね。

そんな未来希望に満ちたAnimateについてまとめましたので、興味をお持ちの方は、ぜひご覧ください!

ちなみに、手描きより作業性が良いか?という問いの答えは次の通り。

  • パラパラアニメよりも大幅に作業効率化できる可能性がある。
  • アニメーションの流用や修正が簡単

ただし、上記作業を効率化するためには、Animateイラレオペレーションスキル練度がそれぞれ必要で、手描きにこなれた日曜画家だと、デジタル画を膨大に手描きした方が早そう。

ジーナ
ジーナ
可能性はすごくあるけど、使いこなすスキルが必要ってこと!

Adobe Animate(公式)

動画編集もさくさく!高性能×リーズナブルパソコンならBTOがおすすめ!

【パソコン買うならBTOがおすすめ】

BTOパソコンとは、受注生産型のセミオーダーパソコンです。

  • 必要なアプリや強化したいパーツを組み合わせられるので、高性能でも安価オリジナルパソコンを購入できます(*’ω’*)。

中でも、日本のBTOメーカーMOUSEは、クリエイターを対象としたコンセプトモデルが充実していて、知識がなくても自分好み簡単構成&オーダーできておすすめです(*’ω’*)。

\ベースをクリックしていくだけの簡単構成!/

BTOパソコンメーカー マウスのカテゴリ例出典:https://www.mouse-jp.co.jp/creator/
ジーナ
ベース躯体で10万~16万円と超リーズナブル(*’ω’*)!

\クリエイターモデル!DAIVE!/

マウスクリエイターモデルのバナー

クリエイターモデル

Animate 手書きとは一味違う 高効率な作業性&アニメーション機能

出典:https://helpx.adobe.com/jp/animate/

Animateは、HTML5で作るアニメーションです。

ジーナ
ジーナ
昔はFlashと呼ばれていたものだね。

俗に言うベクタ―画を変化させてくれるプログラムです。

【Animateの特徴】

  • ベクター画を変化させるため、膨大な枚数の絵(フレーム)不要
  • フレームをプログラムで生成するため繋ぎ目を感じにくく、ヌルヌル動くアニメーションが作れる。
  • 画質劣化しない。

Animateのヌルヌルアニメを実現する、主な3つの機能を紹介します。

トゥイーン 画像と画像の自動補填を行う

出典:https://helpx.adobe.com/jp/animate/

わたしが、Animateを触るまで聞いたことがなかったのが「トゥイーン」という機能。

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

【2種のトゥイーン】

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

モーショントゥイーン・シェイプトゥイーンのいずれも、不足する画像を補填する機能という点では、同じものと言えます。

各トゥイーンの特徴・違いは次の通り。

モーショントゥイーン

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

【モーショントゥイーンの自動生成イメージ】

元データは左側(イエロー)の画像のみです。

モーショントゥイーンを実行すると、イエロー間を補填するようにグリーンの画像を自動生成し、連続して動いているような映像を作ります。

モーショントゥイーン_イメージ図

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

シェイプトゥイーン

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

【シェイプトゥイーンの自動生成イメージ】

四角から星の間に、シェイプトゥイーンを実行すると、中継地点の形状(真ん中のグリーンの形状)を自動生成してくれます。

ジーナ
ジーナ
滑らかに形状を変化してくれる!

どちらのトゥイーンも類似した効果を生みますが、オブジェクトの種類や属性によって、使えるトゥイーンが変わります。

  • いずれのトゥイーンも、効果的に取り入れることで、単純な作画作業を大幅に短縮することができます。

ジーナ
ジーナ
シーンや画風によっては、1枚の作画広範囲のアニメーションを作ることもできそうだね。

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

出典:https://helpx.adobe.com/jp/animate/

インバースキネマティックとは、ロボット工学3DCGのポリゴン作成でよく見かけるIKと呼ばれる理論です。

Adobe Animateでは、パーツを繋げて連結&連動させる機能と思っておくと、おおむね正解です。

【インバースキネマティック (IK) について】

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

引用:Adobeオフィシャルサイト https://helpx.adobe.com/jp/flash/kb/8429.html

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

【IKイメージ】

IKをイメージするには、バリの影絵人形劇で使うような、平面の操り人形を作るプログラムと考えると、イメージし易いかもしれません。

パペットイメージ1

Adobeのインバースキネマスティックは、単にパーツ連結のサポートを行うだけの機能ではありません。

  • インバースキネマティックを適応しておくと、登録したパーツをベースにモチーフの動きを作る(トゥイーンする)ことができるため、膨大な作画が不要になります。

ジーナ
ジーナ
すごく楽しいです!

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

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

出典:https://helpx.adobe.com/jp/animate/

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

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

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

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

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

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

とっても便利ですが、わたしはこの操作概念をしばらく理解できませんでした( ゚Д゚)。

もし、みなさんが使い始めて、わたしと同じようにハマったら思い出してください。

コツは「シンボル化する前にモーションをセットすること」です。

【モーション付きシンボルを作るときのポイント】

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

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

ジーナ
ジーナ
ぜひ活用したい!

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

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

ジーナ
ジーナ
時間短縮

AdobeCCコンプリートプラン29,414円(税抜き)も安く利用できる!!

「たのまな」キャンペーン絶賛実施中!

\お得な「たのまな」キャンペーンはコチラ!/

Animate トゥイーンが苦手なアニメーション表現

出典:https://helpx.adobe.com/jp/animate/

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

【パラパラ漫画スタイルの(画像を挿入した)ほうがよい表現】

  • 立体(3D)的な形状変化

具体的には次の様な表現やシーンです。

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

  • 表情が変わるシーン:目や口の開き方や鼻の角度が変わる表現。
  • 立体的なカメラワーク:横向きから縦向きへ、斜め下から上方から見下ろすように…など、対象の形が角度によって変化する動き。

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

ジーナ
ジーナ
要はパラパラ漫画スタイル

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

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

【カメラワークで形が大きく変わる事例】

女性の鼻の形状に注目し、顔の向きに伴って、どのように形状が変化するかを確認してください

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

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

しかも、輪郭線が単純にスライドしているのではなく、形状が大きく変わっているのがポイントです。

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

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

作画とCG手法は使い分けが必要ですね。

  • Animaiteでも、パラパラ漫画スタイルの作業は、ところどころ必要になる。
  • ソフトの得意分野を知ることで、作業時間を大幅に短縮できる。

AdobeCCコンプリートプラン29,414円(税抜き)も安く利用できる!!

「たのまな」キャンペーン絶賛実施中!

\お得な「たのまな」キャンペーンはコチラ!/

Adobe Animate 一緒に使いたいAdobeアプリ

出典:https://www.adobe.com/jp/

Animateのプログラムベクター画をベースに構築している点は重要です。

つまり、CGアニメーションを行うには、ベクター画を作れるペイントソフト必須ということになります。

簡単な作画はAnimateでも作れますが、専用のペイントソフトの方が使い勝手はよいですね。

なお、当然ですがAdobeアプリで作った作品の方が、データ連携もしやすく、使い勝手は良いです。

Adobeアプリを3つ以上利用するなら、コンプリートプランがお得!/

Adobe Illustrator

出典:https://www.adobe.com/jp/

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

【illustrator おすすめNO.1の理由】

  • ベクター画が描ける!
  • 作画データの強力な連携!

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

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

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

わたしは、ベクター画を描けるペイントソフトも使いますが、Animateとの相性は、Illstratorの方が遥かに上です。

Adobe illustrator

Adobe PhotoShop

出典:https://www.adobe.com/jp/

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

Animateだけではなく、Illustratorとも相性がよく、テクスチャ変更やエフェクトの重ね掛けなど、活用したいシーン多岐にわたります。

【PhotoShop おすすめの機能】

  • 素材そのものの加工や作図、画像制作に活用できる。
  • 作画以外でも、データの圧縮など、PhotoShop単体で使いやすい機能も多数ある。

できることが多すぎて、持ってて無用になることがない優秀ソフトですね。

PhotoShop

Adobe Premier Pro

出典:https://www.adobe.com/jp/

Premier Proは動画編集ソフトですが、動画のクオリティをあげたい・音声付きで動画を配信したい・ちょっと加工したい!方には必要です。

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

【Premiere Pro 活用シーン】

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

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

Premire Pro

AdobeCCコンプリートプラン29,414円(税抜き)も安く利用できる!!

「たのまな」キャンペーン絶賛実施中!

\お得な「たのまな」キャンペーンはコチラ!/

Adobe Animate おすすめ周辺機器・アプリ

SNS・動画配信サイトアップにおすすめ Screen Recorder

スクリーンレコーダーのレビュー記事のアイキャッチ画像

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

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

【手っ取り早くHTML5を動画にする方法】

  • 自分のPCでHTML5動画をプレビュー&キャプチャし、動画ファイルにする。

ジーナ
ジーナ
切り出した動画データの編集には、Premier Proのような動画編集ソフトが必要です。

なお、キャプチャソフトとしてわたしがおすすめしたいのは、高性能&簡単な動画編集もできる!CyberLINKScreen Recorderです。

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

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

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

https://dougahensyu.tokyo/capture-cyber-link-7753.html

ちなみに、Adobeにもキャプチャアプリはあるのですが、おすすめしません

Adobeのキャプチャアプリをおすすめしない理由

Adobeでは、Adobe Presenter Video Expressという商品があります。

そして、おすすめしない理由は以下の通り。

  • クリエイティブクラウドのコンプリートプランに含まれない商品で、別額「1,240円/月」が必要。

Adobe Presenter Video Express

ジーナ
ジーナ
高過ぎ&ハイスペック過ぎ!

ジーナ
ジーナ
キャプチャだけができればよいので、Adobe社以外の買い切りソフトで充分です。

\買い切り&簡単な編集もできるおすすめキャプチャソフト/スクリーンレコーダー_バナー

\どこよりお得にScreen Recorderを購入(公式)/

おすすめタブレット&左手デバイス

Animateは、ほぼマウス&キーボードで操作可能です。

ただし、作画をする方するなら、次の2点を揃えるのがおすすめです。

◎板タブレット

デジタルペイントするならタブレット必須ですが、使い勝手・コスパを考えると、板タブがおすすめです。

ジーナ
ジーナ
ベクター画メインの方なら、もうワンサイズ小さくても良いです!


◎左手デバイス

板タブを使っているなら、必須と言ってもよいです。

パソコン周りがすっきりし、タブレット利用がとてもスムーズになります。

一度使うと手放せないおすすめアイテムですよ。

ジーナ
ジーナ
ゲーム用の必要はないので、安くても、有線でも、ノーブランドでもよいです!

ちなみに、わたしのPC環境はこんな感じです。

  • モニタ:ワイドモニタ×2
  • タブレット:Wacom(intuos pro:L)
  • 左手デバイス:ノーブランド(たぶん中華製)
  • PC:デスクトップ(マウスコンピュータ DAIV)

ジーナ
ジーナ
上記パソコン環境になってから快適です。

AdobeCCコンプリートプラン29,414円(税抜き)も安く利用できる!!

「たのまな」キャンペーン絶賛実施中!

\お得な「たのまな」キャンペーンはコチラ!/

HTML5 Canvas による 動的(インタラクティブ)コンテンツ

出典:https://www.adobe.com/jp/

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

HTML5は最新のwebページ言語の規格のことですが、内容はほぼJavaScriptです。

【HTML5の特徴・魅力】

  • web(HTML)の動的・音声コンテンツが作れる。

ジーナ
ジーナ
HTML5をマスターすると…、webで動くゲームも作れます。

ゲームまでは作らないとしても、マウスクリックに反応して画像を切り替えたり、マウスの動きに連動して向きを変えるオブジェクトを組み込むことができるので、興味惹かれます。

ジーナ
ジーナ
Animateの特徴を最大限活かすなら、HTML5も併せてマスターするのがおすすめ!

初めての Animate をサポートする学習コンテンツ

出典:https://helpx.adobe.com/jp/

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

その数なんと27個

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

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

 

ジーナ
ジーナ
しかも、全て無料

まったく知識がなくても組めるものから、中級者から取り組むべきコンテンツまで幅広く、確実にスキルを身に着けられます。

AdobeCCコンプリートプラン29,414円(税抜き)も安く利用できる!!

「たのまな」キャンペーン絶賛実施中!

\お得な「たのまな」キャンペーンはコチラ!/

Adobe Animate 最安値で購入するショップ・方法

出典:https://www.adobe.com/jp/

現在、Animateの単体プランは、Amazonやその他量販店での販売が終了したため、公式サイトから購入するほかありません。

Animate 申込(Adobe公式)

なお、3つ以上のAdobeアプリを使いたい時は、コンプリートプランがお得です。

動画編集もさくさく!高性能×リーズナブルパソコンならBTOがおすすめ!

【パソコン買うならBTOがおすすめ】

BTOパソコンとは、受注生産型のセミオーダーパソコンです。

  • 必要なアプリや強化したいパーツを組み合わせられるので、高性能でも安価オリジナルパソコンを購入できます(*’ω’*)。

中でも、日本のBTOメーカーMOUSEは、クリエイターを対象としたコンセプトモデルが充実していて、知識がなくても自分好み簡単構成&オーダーできておすすめです(*’ω’*)。

\ベースをクリックしていくだけの簡単構成!/

BTOパソコンメーカー マウスのカテゴリ例出典:https://www.mouse-jp.co.jp/creator/
ジーナ
ベース躯体で10万~16万円と超リーズナブル(*’ω’*)!

\クリエイターモデル!DAIVE!/

マウスクリエイターモデルのバナー

クリエイターモデル

Adobe Animate まとめ

出典:https://www.adobe.com/jp/

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

メリット・デメリットは次の通り。

【Animate メリット】

  • 少ない作画点数でヌルヌル動くアニメーションを作れる。
  • HTML5規格で、インタラクティブコンテンツが作れる。

【Animate デメリット】

  • 3D表現が苦手。
  • ベクター画が必要。
  • 動画として出力できない。

Animateのオペレーションスキルを習得するメリットは大きいですが、ベクター画作成スキルも並行して必要なので、どちらも初心者だとちょっと頑張らないといけないですね。

ジーナ
ジーナ
おすすめ作画アプリは、illutratorです!

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

Adobe Animateのレビュー&紹介は、以上となります。

わたしも初めて触ったアプリケーションでしたが、触っててとっても楽しかったです!

ジーナ
ジーナ
ずぶの初心者でもそこそこ弄れるようになるので、操作難易度はそこまでないカナ! 

興味のある方は、ぜひ挑戦してください。

AdobeCCコンプリートプラン29,414円(税抜き)も安く利用できる!!

「たのまな」キャンペーン絶賛実施中!

\お得な「たのまな」キャンペーンはコチラ!/

RELATED POST