ペンタブを使ってオリジナルアニメやゲームをつくれる Adobe アニメイト の使い心地や利用方法について紹介します。
自作アニメ・ゲームに興味のある方は、よろしければ参考にしてください。
出典：https://helpx.adobe.com/jp/animate/adobe animate cc の使い方｜おすすめポイント
＼アニメイト制作アニメ「夜は短し歩けよ乙女」／
アニメイトのポイントといえば、次の2点です。
- パラパラアニメよりも大幅に作業効率化できる。
- アニメーションの流用や修正が簡単。
ただし、上記作業を効率化するためには、Animateとイラレのオペレーションスキル練度がそれぞれ必要で、手描きにこなれた日曜画家だと、デジタル画を膨大に手描きした方が早そう。
adobe animate cc の使い方｜特徴や仕様感
出典：https://helpx.adobe.com/jp/animate/作業性＆アニメーション機能
Animateは、HTML5で作るアニメーションです。
俗に言うベクタ―画を変化させてくれるプログラムです。
【Animateの特徴】
- ベクター画を変化させるため、膨大な枚数の絵（フレーム）は不要。
- フレームをプログラムで生成するため繋ぎ目を感じにくく、ヌルヌル動くアニメーションが作れる。
- 画質が劣化しない。
Animateのヌルヌルアニメを実現する、主な3つの機能を紹介します。
トゥイーンについて
出典：https://helpx.adobe.com/jp/animate/わたしが、Animateを触るまで聞いたことがなかったのが「トゥイーン」という機能。
トゥイーン（tween）とは、between（中間）に由来する言葉で、2点間のベクター画を、自動生成してくれる機能です。
【2種のトゥイーン】
- モーショントゥイーン
- シェイプトゥイーン
モーショントゥイーン・シェイプトゥイーンのいずれも、不足する画像を補填する機能という点では、同じものと言えます。
各トゥイーンの特徴・違いは次の通り。
モーショントゥイーンは、2点間に不足している画像を自動生成することで、滑らかな映像を作ります。
【モーショントゥイーンの自動生成イメージ】
元データは左側（イエロー）の画像のみです。
モーショントゥイーンを実行すると、イエロー間を補填するようにグリーンの画像を自動生成し、連続して動いているような映像を作ります。
シェイプトゥイーンは、シェイプの起点の形と終点の形の、間の形状を補填するようにイメージを生成します。
【シェイプトゥイーンの自動生成イメージ】
四角から星の間に、シェイプトゥイーンを実行すると、中継地点の形状（真ん中のグリーンの形状）を自動生成してくれます。
どちらのトゥイーンも類似した効果を生みますが、オブジェクトの種類や属性によって、使えるトゥイーンが変わります。
- いずれのトゥイーンも、効果的に取り入れることで、単純な作画作業を大幅に短縮することができます。
インバースキネマティックについて
出典：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のインバースキネマスティックは、単にパーツ連結のサポートを行うだけの機能ではありません。
- インバースキネマティックを適応しておくと、登録したパーツをベースにモチーフの動きを作る（トゥイーンする）ことができるため、膨大な作画が不要になります。
アドビのチュートリアルページです。興味のある方は、ご覧ください。
[blogcard url=”https://helpx.adobe.com/jp/animate/how-to/bone-tool-animation.html]
モーション付きシンボルについて
出典：https://helpx.adobe.com/jp/animate/Adobe Animateでは、パーツ単位でループするアニメーションを記録することができます。
そして、パーツ単位で保存（シンボル化）＆流用することもできます。
【動的要素のあるパーツ例】
出典：https://helpx.adobe.com/jp/animate/- 葉っぱパーツ：風になびく葉っぱ
- 腕パーツ：交互に振る腕
- 目パーツ：一定間隔で行う瞬きや視線の動き
- 炎エフェクト：ゆらゆらと揺らぐ炎のイメージ
ループ記録ができるのは、単純なパーツの回転運動や変形だけではありません。
炎エフェクトのように、原型が複雑に変化するような動きも、膨大な作画をすることなく作成できますし、ループパーツ（シンボル）化もできます。
アドビのチュートリアルページです。興味のある方は、ご覧ください。
[blogcard url=”https://helpx.adobe.com/jp/animate/how-to/asset-warping.html?playlist=/services/playlist.helpx/products:SG_ANIMATE/learn-path:key-techniques/playlist:topic/set-header:get-started-more-more/ja_JP.json&ref=helpx.adobe.com]
動くカルシファーも作れそうです。
とっても便利ですが、わたしはこの操作概念をしばらく理解できませんでした( ﾟДﾟ)。
もし、みなさんが使い始めて、わたしと同じようにハマったら思い出してください。
コツは「シンボル化する前にモーションをセットすること」です。
【モーション付きシンボルを作るときのポイント】
- パーツに動きを記録させるのは、シンボル化する前に行います。
- シンボル化してしまったパーツは、後から動きを記録させることはできません。
とても便利で役立つ機能です。
動画を作っていくと、パーツ単位で繰り返す動きというのが意外とたくさんあることに気づきます。
動的パーツをシンボル化して流用できると、その分の作画が省略できるので、とっても楽ちんです。
【adobe ccを3万円以上安値で購入する裏ワザ】
adobe cc コンプリートプランを最安値で利用したいなら、デジハリの通信講座を購入するのがおすすめです。
【デジハリ adobe のおすすめ3ポイント】
- いつでも最安値（講座込みでも3万円以上安い）。
- 受講ID・adobeライセンスコードの納品が超早。
- 講座内容＆サポートが手厚い。
adobe animate cc の使い方｜デメリット
出典：https://helpx.adobe.com/jp/animate/苦手なアニメーション表現について
アニメーションの種類によっては、トゥイーン・インバースキネマティック・アセットワープといったフォローシステムが合わず、作画したほうが早い表現もあります。
【パラパラ漫画スタイルの（画像を挿入した）ほうがよい表現】
- 立体（3D）的な形状変化
具体的には次の様な表現やシーンです。
【立体的なモーション例】
- 表情が変わるシーン：目や口の開き方や鼻の角度が変わる表現。
- 立体的なカメラワーク：横向きから縦向きへ、斜め下から上方から見下ろすように…など、対象の形が角度によって変化する動き。
これらは、無理にトゥイーンを使わず、作画データを小まめに差し込むことで簡単に解決します。
「モーションによって立体的に形状が変化する例」はたくさんありますが、分かりやすくて代表的なモーションの一つが「人が顔の向きを変える」というシーンです。
【カメラワークで形が大きく変わる事例】
女性の鼻の形状に注目し、顔の向きに伴って、どのように形状が変化するかを確認してください。
単純なシーンですが、上記4つの画像を見ると、全てのフレームにおいて鼻の形が変わっているのが分かりますね。
しかも、輪郭線が単純にスライドしているのではなく、形状が大きく変わっているのがポイントです。
上記のように、見る角度によって形が変わるケースは、人間だと予測しながら画像を作成することは容易いですが、コンピュータにとっては難しい作業なんです。
作画とCG手法は使い分けが必要ですね。
- Animaiteでも、パラパラ漫画スタイルの作業は、ところどころ必要になる。
- ソフトの得意分野を知ることで、作業時間を大幅に短縮できる。
【adobe ccを3万円以上安値で購入する裏ワザ】
adobe cc コンプリートプランを最安値で利用したいなら、デジハリの通信講座を購入するのがおすすめです。
【デジハリ adobe のおすすめ3ポイント】
- いつでも最安値（講座込みでも3万円以上安い）。
- 受講ID・adobeライセンスコードの納品が超早。
- 講座内容＆サポートが手厚い。
adobe animate cc の使い方｜併用したいAdobeアプリ
出典：https://www.adobe.com/jp/Animateのプログラムはベクター画をベースに構築している点は重要です。
つまり、CGアニメーションを行うには、ベクター画を作れるペイントソフトが必須ということになります。
簡単な作画はAnimateでも作れますが、専用のペイントソフトの方が使い勝手はよいですね。
なお、当然ですがAdobeアプリで作った作品の方が、データ連携もしやすく、使い勝手は良いです。
＼Adobeアプリを3つ以上利用するなら、コンプリートプランがお得！／
AdobeCCコンプリートプランをお得に購入する方法をお知りになりたい方は、こちらをご覧ください。
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 PhotoShop
出典：https://www.adobe.com/jp/PhotoShopは、Adobeの中でも、最も有名なソフトの一つです。
Animateだけではなく、Illustratorとも相性がよく、テクスチャ変更やエフェクトの重ね掛けなど、活用したいシーンは多岐にわたります。
【PhotoShop おすすめの機能】
- 素材そのものの加工や作図、画像制作に活用できる。
- 作画以外でも、データの圧縮など、PhotoShop単体で使いやすい機能も多数ある。
できることが多すぎて、持ってて無用になることがない優秀ソフトですね。
Adobe Premier Pro
出典：https://www.adobe.com/jp/Premier Proは動画編集ソフトですが、動画のクオリティをあげたい・音声付きで動画を配信したい・ちょっと加工したい！方には必要です。
【Premiere Pro 活用シーン】
- 【高度なアニメーションムービーとして編集したい】
アニメーションムービーに、効果音・BGM・エフェクト・トランジションなど、より高度な映像編集を行いたい場合に利用します。 - 【SNSや動画配信サイトで動画を拡散したい】
映像と音声は、動画編集ソフトを使って、改めて合成する必要があります。
音声付きアニメーションを通常の動画ファイルで公開したい場合には、必須ソフトになります。
AnimateはHTML5形式でデータを作成できますが、いわゆる動画データではありません。
【adobe ccを3万円以上安値で購入する裏ワザ】
adobe cc コンプリートプランを最安値で利用したいなら、デジハリの通信講座を購入するのがおすすめです。
【デジハリ adobe のおすすめ3ポイント】
- いつでも最安値（講座込みでも3万円以上安い）。
- 受講ID・adobeライセンスコードの納品が超早。
- 講座内容＆サポートが手厚い。
adobe animate cc の使い方｜その他周辺機器・アプリ
SNS・動画配信サイトアップにおすすめ Screen Recorder
Animateのデータ形式はHTML5なので、そのままではSNSや動画共有サイトへの共有できません。
SNSや動画共有サイトにアップするには、MP4などの動画ファイル形式に変換する必要がありますが、HTML5形式データを、ダイレクトに変換するエンコーダーなどもありません。
【手っ取り早くHTML5を動画にする方法】
- 自分のPCでHTML5動画をプレビュー＆キャプチャし、動画ファイルにする。
なお、キャプチャソフトとしてわたしがおすすめしたいのは、高性能＆簡単な動画編集もできる！CyberLINKのScreen Recorderです。
Adobeではないのですが、買い切り＆ハイスペック＆リーズナブルでおすすめです。
ちなみに、Adobeにもキャプチャアプリはあるのですが、おすすめしません。
Adobeでは、Adobe Presenter Video Expressという商品があります。
そして、おすすめしない理由は以下の通り。
- クリエイティブクラウドのコンプリートプランに含まれない商品で、別額「1,240円/月」が必要。
おすすめタブレット＆左手デバイス
Animateは、ほぼマウス＆キーボードで操作可能です。
ただし、作画をする方するなら、次の2点を揃えるのがおすすめです。
◎板タブレット
デジタルペイントするならタブレット必須ですが、使い勝手・コスパを考えると、板タブがおすすめです。
◎左手デバイス
板タブを使っているなら、必須と言ってもよいです。
パソコン周りがすっきりし、タブレット利用がとてもスムーズになります。
一度使うと手放せないおすすめアイテムですよ。
ちなみに、わたしのPC環境はこんな感じです。
- モニタ：ワイドモニタ×2
- タブレット：Wacom（intuos pro：L）
- 左手デバイス：ノーブランド（たぶん中華製）
- PC：デスクトップ（マウスコンピュータ DAIV）
【adobe ccを3万円以上安値で購入する裏ワザ】
adobe cc コンプリートプランを最安値で利用したいなら、デジハリの通信講座を購入するのがおすすめです。
【デジハリ adobe のおすすめ3ポイント】
- いつでも最安値（講座込みでも3万円以上安い）。
- 受講ID・adobeライセンスコードの納品が超早。
- 講座内容＆サポートが手厚い。
adobe animate cc の使い方｜HTML5
出典：https://www.adobe.com/jp/動的（インタラクティブ）コンテンツについて
Animateの出力データ HTML5 は、最新のwebページ言語の規格のことで、ほぼJavaScriptと同じです。
【HTML5の特徴・魅力】
- web(HTML)の動的・音声コンテンツが作れる。
ゲームまでは作らないとしても、マウスのクリックに反応して画像を切り替えたり、マウスの動きに連動して向きを変えるオブジェクトを組み込むことができるので、興味もつきませんね。
視聴者参加型のアニメーションだって作れちゃいます。
[blogcard url=”https://helpx.adobe.com/jp/animate/how-to/create-interactive-content.html?playlist=/services/playlist.helpx/products:SG_ANIMATE/learn-path:key-techniques/playlist:topic/set-header:design-accessible-content/ja_JP.json&ref=helpx.adobe.com]
adobe animate cc の使い方｜チュートリアル
出典：https://helpx.adobe.com/jp/初心者でもスキルアップできる学習コンテンツについて
Adobe Animateでは、公式サイトのチュートリアルコンテンツが豊富です。その数なんと27個。
【Adobeオフィシャルのチュートリアル】
まったく知識がなくても組めるものから、中級者から取り組むべきコンテンツまで幅広く、確実にスキルを身に着けられます。
【adobe ccを3万円以上安値で購入する裏ワザ】
adobe cc コンプリートプランを最安値で利用したいなら、デジハリの通信講座を購入するのがおすすめです。
【デジハリ adobe のおすすめ3ポイント】
- いつでも最安値（講座込みでも3万円以上安い）。
- 受講ID・adobeライセンスコードの納品が超早。
- 講座内容＆サポートが手厚い。
adobe animate cc の使い方｜購入
出典：https://www.adobe.com/jp/最安値で購入できるショップや方法について
現在、Animateの単体プランは、Amazonやその他量販店での販売が終了したため、公式サイトから購入するほかありません。
なお、3つ以上のAdobeアプリを使いたい時は、コンプリートプランがお得です。
【コンプリートプランで申し込む方】
コンプリートプランで申し込むなら、「デジハリ」経由で申し込むのが最もお得な申込方法です。詳しくお知りになりたい方は、こちらをご覧ください。
【パソコン買うならBTOがおすすめ】
BTOパソコンとは、受注生産型のセミオーダーパソコンです。
- 必要なアプリや強化したいパーツを組み合わせられるので、高性能で安価なオリジナルパソコンを購入できます。
おすすめNO.1は価格＆性能バランスの優秀な パソコン工房 です。
[/ac-box01]
adobe animate cc の使い方｜まとめ
出典：https://www.adobe.com/jp/Adobe Animateは、旧フラッシュの仕組みを使った単純な2Dアニメーション作成ツールです。
メリット・デメリットは次の通り。
【Animate メリット】
- 少ない作画点数でヌルヌル動くアニメーションを作れる。
- HTML5規格で、インタラクティブコンテンツが作れる。
【Animate デメリット】
- 3D表現が苦手。
- ベクター画が必要。
- 動画として出力できない。
Animateのオペレーションスキルを習得するメリットは大きいですが、ベクター画作成スキルも並行して必要なので、どちらも初心者だとちょっと頑張らないといけないですね。
▼長編アニメーション「夜明け告げるルーのうた」も総フラッシュアニメですよ。
興味のある方は、ぜひ挑戦してください。
⇒adobe ccを安く買う｜社会人の購入方法とプランの全て
【adobe ccを3万円以上安値で購入する裏ワザ】
adobe cc コンプリートプランを最安値で利用したいなら、デジハリの通信講座を購入するのがおすすめです。
【デジハリ adobe のおすすめ3ポイント】
- いつでも最安値（講座込みでも3万円以上安い）。
- 受講ID・adobeライセンスコードの納品が超早。
- 講座内容＆サポートが手厚い。
