アニメーション制作の革命？：9VAeきゅうべえのアニメキャスト

無料アプリ9VAeきゅうべえは、なめらかに動くアニメを作るために、他のアプリにない「アニメキャスト」というすごいパーツ作成機能を持っています。これを解説。パソコンでもスマホでもできます。いらすとやを動かす方法はこちら。しゃべる解説はこちら。

ほかの解説動画はこちら。

内容：

１．9VAeきゅうべえのダウンロード

フリーイラストからMP4動画素材が簡単につくれる無料アプリ9VAeきゅうべえは、下からダウンロードできます

• Win / Mac / Linux：9VAeダウンロード
• iPad / iPhone：9VAe iPad版 、9VAeDanga 、9VAePro (599ページ)
• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

操作方法

1. 9VAeきゅうべえアニメ研究所をひらき、Downloadをタッチ
2. ダウンロードする9VAeのアイコンをタッチ
3. パソコン版は右上のダウンロードボタン。スマホ、タブレット版はアプリストアから「インストール」して開きます
4. Mac版は解凍したあと、右ボタンメニューから「開く」を２回。Win版は「詳細情報」から実行します
5. 9VAe Dangla は、スマホでもタブレットでも動きます。２眼表示機能つき

２．9VAeのアニメキャスト機能

9VAeの一番の特長は形のキーフレーム補間ですが、それよりすごいのが「アニメキャスト」です。使えるようになれば、世界が変わるといってもいいでしょう。

• アニメキャストは正確に回転します。回転軸が２つあり、数値で角度を指定できます。
• 他のアプリの動画素材は中を修正できないことが多いのですが、アニメキャストは素材の中をいつでも自由に修正できます
• アニメキャストのなかに、別のアニメキャストをいくつでもいれられます
• アニメキャストは本体と独立して動きます
• アニメキャストに色をつけたり、線の太さを変えたり、ぼかしたりできます

アニメキャストの作り方は簡単で、次の２ステップです。

1. 素材を右側の記憶ツールにいれる
2. 「←ｑ」ボタンで、名前をつける

実例をみて試してみてください

３．アニメキャストの作り方（四角形の回転）

1. 塗りのある四角形のボタンをタッチし、
2. ドラッグして四角形を２つかきます
3. 選択ボタンを押して四角入力を終了し、右側の四角をタッチして選びます
4. 記憶ツールの上の切り取りボタン「×」をタッチし、記憶ツールの中に、四角形を切り取ります。記憶ツールが消えているときは右下の「もどす」をタッチ
5. 記憶ツールの下の、アニメキャストにするボタン「←ｑ」をタッチします。
   アニメキャストができます。名前は好きな名前をつけてかまいません。
6. ページの右側の「＋」をタッチし、メニューから「続きのページ」を作ります。１ページの内容と同じ２ページができます
7. 左側の四角をタッチして選択し、
8. 角のハンドル🔳をタッチして、メニューから「回転」を実行します
9. ドラッグして四角形を回転させます
10. 右側の四角をタッチして選択し、
11. 角のハンドル🔳をタッチして、同じように回転させましょう
12. ドラッグしてアニメキャストを回転させます。アニメキャストは中心メニューから角度を指定して回転させることもできます
13. プレイボタンで動きを見てみましょう

• 9VAeは、点と点を直線で補間するので、左側の四角形は回転しません。もっと多くの中間ページが必要です。右側のアニメキャストは角度で補間するため、正確に回転します

４．アニメキャストの作り方（動く図形の移動）

複数ページでつくられた動くものでも、アニメキャストでも、記憶ツールにいれれば、なんでもアニメキャストにできます。これだけ柔軟なパーツ構造をもつアプリはめずらしいです

1. 塗りのある四角形のボタンをタッチし、
2. 四角形を２つかきます
3. 選択ボタンを押して四角入力を終了し、右側の四角をタッチして選びます
4. 切り取りボタン「×」を押して、記憶ツールの中に、四角形を入れます
5. きおくツールの下の、アニメキャストにするボタン「←ｑ」をタッチします。
   アニメキャストができます。名前は好きな名前にしてかまいません。
6. ページの右側の「＋」をタッチし、メニューから「続きのページ」を作ります
7. 右側の四角をタッチして選択し、
8. 角のハンドル🔳をタッチして、メニューから「回転」を実行します
9. ドラッグして四角形を回転させます
10. 選択枠の中心の「＋」をタッチし、メニューから「つながった図形を選択」を実行します。２ページの回転するアニメキャストが選ばれます。
11. 切り取りボタン「×」を押して、記憶ツールの中に、２ページ分のアニメキャストを入れます。１ページのアニメキャストは記憶ツールの中に移動します
12. きおくツールの下の、アニメキャストにするボタン「←ｑ」をタッチします。
    ２ページにアニメキャストができます。名前は「回転」にしましょう
13. 前のページにリンクコピーするボタン「←□」をタッチし、アニメキャストを１ページにもコピーします
14. １ページの時間をタッチし、時間を「２秒」にします
15. アニメキャストをドラッグして、左側の四角形の上に重ねましょう。アニメキャストには移動方向を示す赤い矢印がつきます。
16. プレイボタンで動きを見てみましょう。１秒で回転し、１秒静止しながら移動するアニメになります

５．アニメキャストの中身の修正

上で作成したアニメキャストは、１秒回転し、１秒静止しながら移動しますが、回転がとまらないように修正してみましょう。アニメキャストの中を修正します

1. 矢印をタッチしてアニメキャストを選択し、
2. 中心の「＋」をタッチして、メニューから「アニメの中を修正する」を実行します。アニメキャストの中が開きます
3. ２ページの１秒間、動きがとまるので、２ページの時間を０秒にします
4. １ページの時間を0.3秒にすれば、回転が速くなります
5. ステージの上の太い文字の左はしをタッチし、メニューから「このアニメにもどる」を実行します。アニメキャストの中から、元のアニメにもどります
6. プレイボタンで動きを見てみましょう。速く回転しながら移動するアニメになりました

• アニメキャストの中では、最後のページの時間を０秒にすれば、すぐ先頭から再生を再開します。また、途中のページに「往復」や「繰り返し」命令をいれて、連続して動くようにする方法もあります

６．アニメキャストを矢印にそって動かす

前後のページで、アニメキャストの位置を変えれば、前のページのアニメキャストに、移動方向を示す赤い矢印がつきますが、この矢印に点を追加して形を自由に変更できます。矢印にそって移動するようになるのがすごいです

1. 1. 矢印をタッチしてアニメキャストを選択し、
   2. もう一度、矢印をタッチすると、点の追加モードになります
   3. 矢印の上をドラッグして点を追加します
   4. プレイボタンで動きを見てみましょう。回転しながら矢印にそって移動するアニメになります

動き矢印を使った作品例

• トランポリン年賀アニメ

７．別のアニメにして修正、矢印にそって向きをかえる

アニメキャストの矢印にそって向きをかえる設定があって便利です

1. 矢印をタッチしてアニメキャストを選択し、
2. 中心の「＋」をタッチして、メニューから「別のアニメにして修正」を実行します。名前を「三角」とすると、アニメキャスト「三角」の中が開きます
3. ２ページのページ番号をタッチし、メニューから「ページを切り取る」を実行します。
4. 図形を選択し、
5. 消しゴムボタンをタッチして、削除します。アニメキャストの基準になる灰色の基準枠が見えます。
6. 多角形ボタンをタッチし
7. 三角形の頂点を順番にタッチします
8. 選択ボタンで多角形入力が終了します
9. ステージの上の太い文字の左端をタッチし、メニューから「このアニメにもどる」を実行します。元のアニメに戻ります
10. プレイボタンで動きを見てみましょう。三角が移動するアニメになります
11. 矢印をタッチしてアニメキャストを選択し、
12. 中心の「＋」メニューから、「矢印にそって向きをかえる」にチェックをいれます。
13. プレイボタンで動きを見てみましょう。

向きをかえるを使った作品例

• マウス年賀アニメ

８．アニメキャストの回転中心を変更する

アニメキャストの回転の中心位置を変更すると、さらに複雑な動きにできます

1. 矢印をタッチしてアニメキャストを選択し、
2. 中心の「＋」をタッチして、メニューから「矢印にそって向きをかえる」のチェックをはずし、「支点の位置をかえる」を実行します
3. 緑色の支点◇が、表示されます。この点をドラッグして移動し、動き矢印の形をととのえます。支点◇は動き矢印の最初の点で、この点とアニメキャストの中心の間に棒が表示されます。動き矢印のまわりを棒が回転することになります
4. ２ページをタッチして、２ページに移動
5. ドラッグして、１ページと同じような位置に支点を移動します。
6. 選択ボタンで、点選択を終了
7. アニメキャストの中心のプラスをタッチし、
   メニューから、「支点を回る角度」を実行。値は、-1000ぐらいをいれてみてください。
8. プレイボタンで動きを見てみましょう。三角が動き矢印のまわりを、回転しながら移動するアニメになります

• アニメキャストの回転の中心は、ふつうは枠の中心ですが、「支点の位置をかえる」を実行すると、中心から棒がのびて、棒の両端の２つの回転中心ができます。アニメキャストの中心メニューから、２つの角度を数値で設定することができます

回転中心の変更をつかった作品

• 二刀流年賀アニメ

９．SVGイラストをアニメキャストにする

SVGイラストは、普通に開くこともできますし、アニメキャストにして読み込むこともできます。アニメキャストにして読み込むと、パーツとして使いやすくなります。

• 「openclipart　322074　miku　usagi」をブラウザで検索して、Openclipartサイトを開きます。こちらを開いてもかまいません

1. 緑色のSVGボタン「SVG(Source Vector)」を長押しして、「リンクアドレスをダウンロード」、または、パソコンの場合は「名前をつけて保存」します。
2. ブラウザから、9VAeにもどり、「９VA」ボタンをタッチし、メニューから、
   「9VAアニメを入れる」を実行し、ダウンロードしたファイルを読み込みます。iPhone/iPad版では、ファイルアプリをつかって、本体の「9VAeDangla」または「9VAe」フォルダに保存すれば、9VAeで読み込めます。
3. 左下の表示縮小ボタン「ー」を、何回かタッチして縮小します
4. 角のハンドル■をドラッグして、サイズを小さくし、中心の「＋」をドラッグして、左上に移動しましょう
5. 虫めがねボタンで、元の表示にもどします
6. 中心の「＋」をタッチして、メニューから「複製する」を5回実行し、並べます
7. 「配置」メニュー、パソコンの場合は、「調整＞整列」メニューを使って、きれいに並べました

10．アニメキャストに色や影をつける

• 上の操作に続いて、アニメキャストに、色や影などをつけてみましょう

1. ２つめのアニメキャストをタッチして選び、
2. ぬり色パレットから黒をえらびます。色が黒くなります。
3. ３つめのアニメキャストをタッチして選び、
4. ぬり色パレットから黒にします。もういちどぬり色パレットをタッチし、上のボタンで半透明にします。透明度に応じて、色が暗くなります。
5. ４つめのアニメキャストをタッチして選び
6. 線の種類のボタンをタッチし、メニューから「影をつける」を実行します。アニメキャストに影がつきます。
7. ５つめのアニメキャストをタッチして選び
8. 線の種類のボタンから、「縁をつける」を実行します。
9. ぬり色2のボタンが縁の色になります。縁の色を、オレンジにしました

11．アニメキャストの中のパーツを修正する

• 読み込んだSVGイラストの中を修正してみましょう

1. 最後のアニメキャストをタッチしてえらび
2. 中心の「＋」のメニューから、「アニメを修正」を実行します。アニメキャストの中が開きます。
3. キャラクタをタッチして選び、
4. 中心の「＋」メニューから、「グループ解除」を実行します
5. うさぎの足をタッチして、うさぎをえらび
6. 中心の「＋」メニューから、「つながった図形を選択」を実行します。つながったページのうさぎが、全部選ばれます。選ばれたページに赤いマークがつきます。
7. ぬり色のパレットで、色をピンクにしましょう
8. 画面の上の一番左の太い文字をタッチし、メニューから「このアニメにもどる」を実行します。
9. プレイボタンで再生してみましょう。アニメーションにいろんなイフェクトがつきました

12．ローマ字で口パクさせる

1. アニメキャストを、ひとつだけ残して、拡大しました
2. アニメキャストの中心の「＋」メニューから、「ローマ字で動かす」を実行します
3. 「10、口パクの、仕方」とローマ字で入力します。(10:kutipaku no sikata...)
   最初の数字は口パクする時間で、秒で指定します。「.」は口をとじた状態を表します
4. アニメキャストを選んだ状態で、ページの時間をタッチして、「アニメキャストの時間（10秒）」にします
5. プレイボタンで再生してみましょう
6. アニメキャストの中心の「＋」メニューから、「アニメを修正」を実行して、中をみてみましょう。
   アニメキャストの、1ページが口を閉じた形、
   2ページから、あ、い、う、え、お、
   の形が、はいっています。このようにしておけば、ローマ字で口パクできます。
   ミクウサギアニメーションは、9VAeで作成して、Openclipart に登録された口パク素材です。同じように作れば、自作キャラクタを、口パクできます。
7. 画面の上の一番左の太い文字をタッチし、「このアニメにもどる」を実行して、
   元のアニメにもどります

9VAeが口パクした例。「13:」１３秒でしゃべる。「.」は口を閉じる

13．アニメキャストのリスト

1. 作成したアニメキャストは、9VAボタンのメニューの「読み込んだアニメを使う」の中に、リストされます。リストの名前をタッチすると、アニメキャストが画面にはいります
2. 画面の上の太い文字をタッチすると、そのアニメの中のアニメキャストがリストされます。タッチすると、アニメキャストの中が開きます
3. 中を開いたアニメキャストは、9VAボタンの中の、「編集中のアニメ」にも、リストアップされます。名前をタッチすると、そのアニメに切替わります。アニメキャストの名前の先頭には、「：」がつきます。中をひらいていないアニメキャストは、表示されません。先頭の「＊」は修正された印です

14．アニメキャストを差し替える

1. アニメキャストをタッチして選んで、
2. 9VAボタンの「読み込んだアニメ」の中から差し替えたいアニメキャストを選んでください
3. 「選んでいるアニメキャストを入れ替えますか」と表示されたら、「はい」をタッチすれば、いれかわります。アニメキャスト「三角」に差し替えました

15．アニメキャストの基準枠

1. アニメキャストをタッチして えらび、
2. 中心の「＋」のメニューから「アニメを修正」を実行して、中をひらきます
3. アニメキャストの先頭ページには、必ず、「基準枠」という灰色の四角形ができます。この範囲がアニメキャストの枠にはまります。基準枠は、選んだり削除したりできません。基準枠とアニメキャストの枠の形が違うと、形が変形します
4. ステージの上の太い文字をタッチし、元のアニメにもどってください
5. アニメキャストの中心の「＋」メニューから、「初めの形にもどす」を実行します
6. アニメキャストが、基準枠と同じ形にもどります

16．アニメキャストの保存、重複の削除

• アニメキャストは、中身がない枠で、アニメの中は9VAeファイルです。アニメキャストを複製すると、アニメの中身は複製されず、枠だけが複製されるため、データサイズが増えません。また、中身を修正すれば、参照先はすべてかわります。
• 別の9VAeファイルから、アニメキャストを、記憶ツール経由でコピーした場合、最初は、本体は元の9VAeファイルにしかありません。あたらしい9VAeファイルを保存するときには、元のファイルの場所をさがして、その内容も保存します。
• そのアニメキャストの中に別のアニメキャストがはいっていることもあるため、つかっているアニメキャストをすべて調べて保存する処理を行っています
• アニメキャストは名前で管理していますが、別の9VAeアニメでは、同じ名前で別の内容のアニメキャストがあるかもしれません。そのため、名前の重複がないか調べ、同じ名前のアニメキャストは、最後に数字を追加して区別します
• 番号違いのアニメキャストは、同じ内容のアニメキャストかもしれません。同じ内容かどうかをチェックし、同じ内容であれば、同じ名前に戻す処理が、ツールメニューの中にある「アニメキャストの整理」です。この処理を行うと、ファイルサイズを小さくすることができます。ファイルの保存に時間がかかるようになった場合は、この処理を行うと、軽くなるかもしれません

17．ローマ字のかわりに定義した文字で口パクする

• アニメキャストのローマ字で口パクを行うときに、アニメキャストの中身は、先頭ページが「.」そこから「aiueo」となるように定義されていますが、自分でページにラベルをつけると、そのラベルの文字で、アニメキャストのページを読み出すことができます。文字をならべるだけで、一定時間でアニメを正確に切り替えできるので、音楽にあわせたアニメをつくるのに使えます。

18．アニメキャストの線の太さ

1. アニメキャストを、ふたつ、ならべました
2. 左のアニメキャストを、縦に引き伸ばします。
   多くのアプリでは、SVGの縦横比率をかえると、線の太さが縦横でかわるのですが、9VAeでは、線の太さはかわりません。
3. 右のアニメキャストを選び、
4. 角のハンドル■をタッチして、「中心点の移動」を実行して、左上に中心を移動します。
5. そのあと、拡大します。このように、アニメキャストを拡大、縮小、変形しても、
   線の太さが変わらない点に、注意してください
6. アニメキャストの 線の太さを変更するには、アニメキャストを選んで、「線の太さ」ボタンのメニューから、「太くする」、「細くする」を使います

ベクトルとビットマップの違い はこちらをご覧ください

---

ひとコマ解説動画の作り方

この記事の動画は、フリーソフト9VAeきゅうべえで作成しています。

9VAeきゅうべえのダウンロード

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：9VAeきゅうべえダウンロード
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

↑これを見るとダウンロード、キーフレーム補間、SVGイラストをパーツ化して口パクさせる方法がわかります。パソコンでもiPadでも同じ操作です。

• 9VAeきゅうべえで、キャプチャー画面に、矢印や説明を加え、ページに「ひとコマ」設定すると解説動画が作れます。
• Youtube動画より短く、キャプチャー画面の羅列より見やすいのが特長です。
• FFmpeg を使って Youtube 動画にすることもできます。

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード（ペイントに貼り付けて保存）
Mac	Shift + Command + 4 （ShiftキーはZの左、スペースでウィンドウ指定）	デスクトップ
Android	電源 + 音量Down  adbコマンド (開発者向け)  adb shell screencap -p /sdcard/screen.png  adb pull /sdcard/screen.png	フォトアプリ＞ ライブラリ＞ Screenshots
iPhone / iPad	ホームボタン + 電源ボタン サイドボタン + 音量UP	写真＞ アルバム＞ スクリーンショット
Linux Mint	Print Screen キー	クリップボード ファイル
Amazon Fire	電源 + 音量Down １秒長押し USBケーブルでPCと接続し、 設定＞接続デバイス＞USB＞ファイル転送	ピクチャ > スクリーンショット
Chromebook	Shift + Ctrl + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

キャプチャ画像を転送する方法はこちら

キャプチャ画像を9VAeに読みこむ

1. 画像入力ボタン「山」でキャプチャ画像を読み込む
2. 画像の中心の「＋」をクリック。メニューから「ステージの大きさにする」
3. 画像の中心の「＋」をクリック。メニューから「ページを画像に合わせる」

文字、矢印を入れる

1. 文字入力ボタン「A」で数字を入力
2. 角の■をドラッグでサイズ変更。
3. 中心の「＋」または枠線のドラッグで移動
4. 線の種類ボタンをクリック。メニューから「→」で矢印に設定
5. 折れ線ボタンをクリック
6. 開始点
7. 終了点
8. 選択ボタンで入力終了
9. 太さ設定ボタン。メニューから「太くする」で太くできます。
10. 文字入力ボタン「A」で説明文章を入力
11. 背景の色を設定
12. 線の種類メニューの「ー」で枠線がつきます
13. 太さ設定ボタン。メニューから「太くする」で太くできます。

文字の色、縁、影をつける

1. 文字を選ぶ
2. 文字タブ２をクリック
3. 文字の色をクリック
4. 赤に設定
5. 文字と矢印をドラッグして選ぶ
6. 図形タブ１をクリック
7. 線の種類から「縁をつける」
8. 線の種類から「影をつける」、線の種類から「広く」
9. 線の色「赤」

ひとコマアニメーションにする

1. ページ時間をクリック。メニューから「ひとコマ」を設定。これでアニメーションができます。
2. プレイボタンで再生してみましょう。入力した順番に文字、矢印がでてきます。
3. これで１ページ完成です。続きを作りたい場合は、ページの右側の「＋」をクリックし「続きのページを作る」で、２ページ目が作成できます。

アニメGIF、動画出力

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要。Youtube解説
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

9VAeをつかえば素材動画が作れる 

• 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
• Openclipart や  FreeSVG などフリーのSVGイラストをつかって動くキャラクタが作れます。
• 動画編集ソフトで動画に合成できます。

OS	無料動画ソフト	9VAeで作れる素材
Windows	CapCut AviUtl	MP4 連番PNG または MP4
Mac/iPhone/iPad	CapCut iMovie	MP4  MP4
Android	CapCut PowerDirector	MP4 GIF または MP4

作り方

• CapCut用動画素材の作り方

• AviUtl動画に合成する方法 (Windows)

• グリーンバック動画を作成してiMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector でグリーンバック動画を入れる方法（Android 他）

• キネマスター用グリーンバック動画を作る方法

• もっと長いアニメを作ることもできます。以下をご覧ください。

9VAeきゅうべえ：長いアニメを作る方法 - Qiita

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。