adobe aimate ccの使い方|初心者でもアニメーション♪

個人でもオリジナルアニメゲームをつくれちゃう adobe Animate の使い心地や利用方法について紹介します。

自作アニメ・ゲームに興味のある方、よろしければ参考にしてください。

animate_イラスト出典:https://helpx.adobe.com/jp/animate/

adobe animate cc の使い方|アニメイトのおすすめポイント

adobe animate サンプル出典:https://www.adobe.com/jp/

 

【adobe Animateのおすすめポイント】

  • パラパラアニメよりも大幅に作業効率化できる。
  • パーツの流用や修正が簡単

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

ジーナ
ジーナ
初心者でも簡単に使えるけど、使いこなすにはそれなりのスキルが必要なアプリ。

\アニメイト制作アニメ「夜は短し歩けよ乙女」/

adobe animate cc の使い方|シェイプ・トゥイーン 使用感

animate_作品サンプル出典:https://helpx.adobe.com/jp/animate/

Animateのアニメーション機能と使用感について

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

ジーナ
ジーナ
昔はFlashと呼ばれていたものと根っこが同じ。

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

【Animateの特徴】

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

Animateのヌルヌルアニメーションを生みだす、主要な3つの機能を紹介します。

トゥイーンについて

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

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

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

【2種のトゥイーン】

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

トゥイーンには、モーショントゥイーン・シェイプトゥイーンの2つがあり、不足する画像を補填する機能という点では、同じものです。

モーショントゥイーンとは?

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

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

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

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

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

ジーナ
ジーナ
必ずしも1秒間に24枚の画像を描かなくてよいから、作業を短縮できる。
 

シェイプトゥイーンとは?

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

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

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

ジーナ
ジーナ
滑らかに形状を変化してくれる機能だよ。

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

  • どちらのトゥイーンも、単純な作画作業を大幅に短縮と、滑らかなアニメーションを作る機能です。

ジーナ
ジーナ
シーンや画風によっては、わずか数枚の作画でも、複雑なアニメーションを作ることができそう。

インバースキネマティックについて

出典: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をイメージするには、バリの影絵人形劇で使うような、平面の操り人形を作るプログラムと考えると、イメージし易いかもしれません。

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

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

ジーナ
ジーナ
実際にやってみると、すごく楽しいですョ。

\adobe公式 IK 無料チュートリアル/

アプリが手元になくても、動画を見てるだけでもなんとなく操作感利便性を理解できると思います。

adobe animate ik チュートリアル

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

モーション付きシンボルについて

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

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

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

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

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

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

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

\adobe公式 アセットワープ機能 無料チュートリアル/

アプリが手元になくても、動画を見てるだけでもなんとなく操作感利便性を理解できると思います。

adobe animate アセットワープ チュートリアル

動くカルシファーだって作れそうですね。

ちなみに、シンボル化もアセットワープも驚くほど便利な機能なんですが、ワタシはこの操作概念をしばらく理解できませんでした。

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

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

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

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

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

ジーナ
ジーナ
ぜひ触ってみてください。

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

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

ジーナ
ジーナ
時間短縮になるよ。

adobe animate cc の使い方|アニメーションのデメリット

animate_イラスト出典:https://helpx.adobe.com/jp/animate/

苦手なアニメーション表現について

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

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

  • 立体(3D)的な形状変化をするアニメーション

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

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

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

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

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

立体的な形状変化とは?

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

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

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

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

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

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

ジーナ
ジーナ
単純な三角柱に置き換えてみたけど…、違いが伝わるカナ。

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

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

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

adobe animate cc の使い方|Illustrator

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

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

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

簡単な作画はAnimateでも作れますが、専用のペイントソフトの方が使い勝手は格段によく、可能ならIllustratorを併用するのがおすすめです。

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

AdobeCCコンプリートプランをお得に購入する方法をお知りになりたい方は、こちらをご覧ください。

⇒adobe ccを安く買う方法!最安&個人でアカデミック契約

Illustrator

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

adobe Animateで併用おすすめNO1ソフトは、adobe Illustratorです。

【Illustrator おすすめポイント】

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

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

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

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

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

Adobe illustrator

PhotoShop

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

PhotoShopは、Adobeの中でも、最も有名なソフトの一つですが、Animat、Illustratorとも相性がよく、テクスチャ変更やエフェクトの重ね掛けなど、活用したいシーン多岐にわたります。

【PhotoShop おすすめポイント】

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

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

PhotoShop

Premier Pro

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

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

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

【Premiere Pro 活用シーン】

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

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

音付きの動画として編集するには、Premier Proのような動画編集ソフトを併用します。

Premire Pro

adobe animate cc の使い方|その他周辺機器・アプリ

adobeアプリ以外にも、もっておくと便利なアプリ・ツールがありますので、簡単に紹介します。

Screen Recorder

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

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

よって、手っ取り早くHTML5を動画にするには、次の方法がおすすめです。

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

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

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

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

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

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

ちなみに、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)

ジーナ
ジーナ
作業性は、パソコン設備次第。

adobe animate cc の使い方|HTML5

adobe_animate_イメージ出典:https://www.adobe.com/jp/

動的(インタラクティブ)コンテンツについて

Animateの出力データ HTML5 は、最新のwebページ言語の規格のことで、ほぼJavaScriptと同じです。

【HTML5の特徴・魅力】

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

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

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

\adobe 公式 インタラクティブコンテンツ チュートリアル/

マウスに連動して動くアニメーションなど、視聴者参加型のアニメーションだって作れちゃいます。

adobe animate インタラクティブコンテンツ チュートリアル

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

adobe animate cc の使い方|初心者向けチュートリアル

adobe_チュートリアル1出典:https://helpx.adobe.com/jp/

初心者にもおすすめなチュートリアルについて

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

その数なんと27個

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

adobe_animate_チュートリアルイメージ

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

ジーナ
ジーナ
しかも、全て無料だから、使わない手はない。

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

アプリがなくても視聴可能なので、興味がある方は、ぜひチェックしてみてください。

【adobe ccを3万円以上安値で購入する裏ワザ】

adobe cc コンプリートプラン最安値で利用するなら、デジハリの通信講座がおすすめです。

人差し指を立てて笑顔でこちらを斜め下からのぞき込む女性の画像

【デジハリ adobe のおすすめ3ポイント】

  • いつでも最安値(通常版と比べて約30,000円以上も安い!)。
  • 受講ID・adobeライセンスコードの納品が超早い。
  • 講座内容&サポートが手厚い。

\いつでも3万円以上安く購入できる!/

adobe animate cc の使い方|動作環境

推奨スペックについて

Animateの最小システム要件は次の通りです。

◎Windows

  • プロセッサー:Intel Pentium 4 または Intel Centrino、Intel Xeon または Intel Core Duo クラスプロセッサー(2GHz 以上)
  • オペレーティングシステム:Microsoft Windows 1 Service Pack 1 日本語版または Windows 10 バージョン 1703 日本語版
  • RAM:2 GB 以上の RAM(8 GB 以上を推奨)
  • ハードディスク容量:4 GB 以上の空き容量のあるハードディスク。ただし、インストール時には追加の空き容量が必要(取り外し可能なフラッシュメモリを利用したストレージデバイス上にはインストール不可)
  • モニターの解像度:1,024 x 900 以上の画面解像度をサポートするディスプレイ(1,280 x 1,024 以上を推奨)
  • GPU:OpenGL バージョン 3.3 以降
  • インターネット:ソフトウェアのライセンス認証、サブスクリプションの検証、およびオンラインサービスの利用には、インターネット接続および登録が必要です。

◎Mac

  • プロセッサー:インテルマルチコアプロセッサー 
  • オペレーティングシステム:macOS X バージョン 10.12(64 ビット)またはバージョン 10.13(64 ビット)
  • RAM:2 GB 以上の RAM(8 GB 以上を推奨)
  • ハードディスク容量:4 GB 以上の空き容量のあるハードディスク。ただし、インストール時には追加の空き容量が必要(大文字と小文字が区別されるファイルシステムが使用されているボリュームまたは取り外し可能なフラッシュメモリを利用したストレージデバイス上にはインストール不可)
  • モニターの解像度:1,024 x 900 以上の画面解像度をサポートするディスプレイ(1,280 x 1,024 以上を推奨)
  • GPU:OpenGL バージョン 3.3 以降
  • インターネット:ソフトウェアのライセンス認証、サブスクリプションの検証、およびオンラインサービスの利用には、インターネット接続および登録が必要です。
  • ソフトウェア:QuickTime 10.x ソフトウェアを推奨

ちなみに、パソコン買い替えを検討しているなら、BTOパソコンが安い&高性能でおすすめです。

中でもおすすめなのは、価格・品質・サポートが充実しているパソコン工房です。

【クリエイティブモデル展開おすすめの人気BTOメーカー サービス比較】

  パソコン工房 FRONTER マウス サイコム
 
購入前相談 TEL・チャット・Line:10-18時 TEL:10-19時 TEL:9-20時 TEL10-17時(12-13除く)
購入後相談 TEL:24時間 TEL:24時間
構成の難易度        
価格帯 15万~35万 13万~30万 12万~30万 12万~30万
生産地 島根県 山口県 長野県 埼玉県
特徴 高品質パーツを豊富に選べ、品質・価格共にバランスのよいマシンが作れる。 期間限定セールにあたるとかなり安く買える。さ重視の方におすすめ。 オリジナルパーツも多用することで、リーズナブル&ハイスペックなマシンが作れる。性能も品質もすこぶるよい。 フルカスタムが可能な老舗のBTOメーカー。他のメーカーより、選び方は難しいものの、自由度はNO1。

adobe animate cc の使い方|価格

adobe_animate_イメージ出典:https://www.adobe.com/jp/

animateの価格と最安値について

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

Animate 申込(Adobe公式)はコチラ

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

【コンプリートプランで申し込む方】

コンプリートプランで申し込むなら、「デジハリ」経由で申し込むのが最もお得な申込方法です。詳しくお知りになりたい方は、こちらをご覧ください。

デジハリ adobeのデメリットや他スクールとの比較

【adobe ccを3万円以上安値で購入する裏ワザ】

adobe cc コンプリートプラン最安値で利用するなら、デジハリの通信講座がおすすめです。

人差し指を立てて笑顔でこちらを斜め下からのぞき込む女性の画像

【デジハリ adobe のおすすめ3ポイント】

  • いつでも最安値(通常版と比べて約30,000円以上も安い!)。
  • 受講ID・adobeライセンスコードの納品が超早い。
  • 講座内容&サポートが手厚い。

\いつでも3万円以上安く購入できる!/

adobe animate cc の使い方|まとめ

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

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

【Animate メリット】

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

【Animate デメリット】

adobe_animate_立体的イメージはフォローできない理由
  • 3D表現が苦手。
  • ベクター画が必要。
  • 動画として出力できない。

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

ジーナ
ジーナ
ただし、マスターできれば長編アニメーションだってひとりで作れるよ。

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

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

adobe cc を安く購入する方法!最安&個人でアカデミック契約