ＡＣイラストに動きがつけられる無料アプリ「9VAeきゅうべえ」

フリーソフト9VAeきゅうべえを使ってイラストレータ形式のイラストから動画を作る方法を説明します。作業時間は１５分くらい。いらすとやから作る方法はこちら。SVGイラストはこちら。音声合成はこちら

他のアニメの作り方はこちら。

9VAeの質問はこちら。

9VAeでイラストレータに動きをつける

内容：15分程度

• 「イラストAC」からイラストをダウンロード（１）
• inkscape / Vectornator でイラストをSVGに変換（２）
• 9VAeでイラストを読み込む（３）
• グループ解除して踏切をコピー（４）
• 新しいファイルに踏み切りを入れる（５、６、７）
• ライトをアニメキャストにして点滅させる（８、９、１０、１１）
• 角度を指定して遮断機を上にあげる（１２、１３）
• 通過する列車をコピーする（１４、１５、１６）
• 動画にする（１７）

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

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

www.youtube.com

１．「イラストAC」からイラストをダウンロード

• 「イラストAC」を開きましょう。フリーイラスト素材が多数掲載されています。下の画面は「踏切」で検索した結果です。

 以下、説明画面では、ABCDの順番に操作していきます。

1. ダウンロードユーザーでログイン

   

2. ダウンロードボタン（上図B）をクリック。イラストを評価するとダウンロードできるようになります。

3. AI形式（上図C]）をクリックしてダウンロード。（イラストによっては、AI形式のダウンロードボタンがないものもあります。）

２．inkscape   や  Vectornator でイラストをSVGに変換

■ inkscape  / Vectornator のダウンロード

• inkscape (Win/Mac/Linux)
• inkscape (Windows Store)
• Vectornator (App Store)

1. inkscape を起動し、ダウンロードした Ai ファイルを開きます。（下図OKボタン）

   

2. 「ファイル」メニュー「コピーを保存」で保存すれば、SVGファイルができます。

 Vectornator ( Mac / iPad / iPhone )

1. Vectornator でダウンロードしたイラストを開く。
2. iPadの場合は、ファイルアプリを起動し、ダウンロード（下図D）をタッチ。

   

3. ダウンロードしたファイルを長押し（上図E）メニューから「共有」（上図F）をタッチ。
4. 共有アプリから「Vectornator」（上図G）をタッチ

Vectornator から SVG 保存

1. 左上のボタン「X>」（下図H）をタッチ。ツールボタンが現れます。

   

2. 「↑」ボタン（上図I）をタッチ。
3. 書き出しメニューから「SVG」（上図J）を選んで、「書き出し」（上図K）をタッチ。
4. 書き出し先は「ファイルに保存」（上図L）
5. 「このiPad内」（上図M）をタッチ
6. 「9VAe」（上図N）フォルダを選んで「書き出し」（上図O）。これで、9VAeフォルダにSVGファイルが保存され、9VAeで読み出せます。

３．9VAeを起動し、SVGイラストを読み込む

1. 9VAeを起動。
2. 「ファイルメニュー」＞「開く」（下図P）で保存したSVGイラストを開きます。

   

3. 列車が見えない場合、タッチして選択し（上図Q）、点選択ボタン（上図R）をタッチ。

4. 右上の角の点（上図S）をタッチ。点選択ボタン（上図T）を２回タッチします。１回タッチすると、選んだ点を含む図形の点だけになり、もう一度タッチするとその図形だけ選択された状態になります。
5. そして削除ボタン（上図U）をタッチすれば、列車が見えるようになります。

メモ：9VAeはSVG形式のイラストが読み込めます。

４. グループ解除して踏切をコピー

1. 読み込んだイラストはグループ化されています。読み込んだイラストを選択し（上図V）選択枠中心の「＋」（上図W）をクリック。メニューから「グループ解除」をクリック。
2. もう一度踏切を選択（上図X）し、中心「＋」（上図Y）をクリック。メニューから「グループ解除」をクリック。
3. 踏切を選択し（上図Z）、コピーするボタン（上図a）をクリック。これで踏切が記憶ツール（上図aの下の箱）に入ります。

メモ：記憶ツールをつかって図形をコピーできます。グループ解除のあと、踏切が選択できない場合は9VAeを最新版（Ver.0.7.9-210123以上）にしてください。

５. 新しいファイルに踏み切りを入れる

1. 「ファイルメニュー」＞「新規作成」（下図b）で新しいファイルを開きます。

   

2. 記憶ツールから取り出すボタン（上図c）をクリック。メニューから「ステージにもどす」をクリック。踏切が入ります。ただし画面外に配置されるので見えません。
3. 表示縮小ボタン（上図d）を何回かクリックすれば見えるようになります（上図）
4. 選択枠中心「＋」（上図e）を上にドラッグし、ステージ（上の白い領域）に移動します。
5. 選択枠の角（上図f）のドラッグでサイズを調整しましょう。
6. 虫眼鏡ボタン（上図g）でステージ全体が表示されます。

メモ：SVGから読み込んだファイルの画面サイズが大きい場合、新しいファイルに取り出したときに画面外に入力されることがあります。選択枠のドラッグで位置、サイズを変更します。

６. 踏切のバーをアニメキャストに変更

1. 踏切のバー（上図h）をドラッグして選択。
2. 切り取りボタン（上図i）をクリック。記憶ツールにバーをいれます。
3. アニメキャストにするボタン（上図j）をクリック。「barR」といった名前をつけてアニメキャストにします。
4. 重なりを下にするボタン（上図k）をクリック。
5. 点選択ボタン（上図l）をクリック。制御点が表示されます。
6. 中心の◇（支点上図n）を右側にドラッグ。支点を右端に移動します。
7. シフトボタン（上図m）を押せば、水平に移動できます。

メモ：記憶ツールにいれた図形はアニメキャストにできます。アニメキャストは支点を中心に正確に回転できます。

７. 左側のバーをアニメキャストに変更

1. 左側のバー（下図o）もアニメキャストにしましょう。図形を選んで、表示倍率変更ボタン「＋」で選んだ図形を中心に拡大できます。

   

2. 左側のバーを選んで切り取りボタン（上図p）をクリック。記憶ツールにバーをいれます。
3. アニメキャストにするボタン（上図q）をクリック。「barL」といった名前をつけてアニメキャストにします（上図）。
4. 重ね順を下にするボタン（上図r）をクリック。
5. 点選択ボタン（上図s）をクリック。制御点が表示されます。
6. 中心の支点◇（下図u）を左側にドラッグ。支点を左端に設定します。Shifitボタン（上図t）を押せば水平に移動できます。

８. ライトをアニメキャストにして点滅させる

1. 赤いライト２つを選択。ライト近くの図形を選んで表示拡大「＋」ボタンで拡大できます。
2. ライトひとつをクリック（上図v）して選択し、Shiftボタン（上図w またはシフトキー）をおして、もうひとつクリック（上図x）。これでライトが２つ選択できます。
3. 切り取りボタン（上図y）をクリック。記憶ツールにライト２ついれます。
4. アニメキャストにするボタン（上図z）をクリック。「light」といった名前をつけてアニメキャストにします（上図）。

メモ：Shiftボタンを押せば、離れた図形を複数選択できます。

９．右側のライトを黒、ページの時間を０．５秒にする

1. アニメキャスト選択枠中心の「＋」（下図A）をクリック。メニューから「アニメ（:light）を修正する」をクリック。アニメキャストの中が開きます。

   

2. 表示拡大ボタン（上図B）をクリックしてライトを拡大します。
3. 何もないところをクリックして選択解除してから、右側のライト（上図C）をクリックして選択。
4. 塗り色ボタン（上図D）をクリックし、色を黒に変更。
5. ページの上の時間（上図E）をクリック。メニューから「0.1秒短くする」を５回クリックし、時間を0.5秒にしましょう。

メモ：ページの時間を0.5秒にすれば0.5秒間隔で点滅します。

１０．２ページの左側のライトを黒にする

1. ページ右側の「＋」（上図F）をクリック。メニューから「続きのページを作る」。これで２ページ目ができます。
2. 左側のライト（上図G）をクリックして選択。塗り色ボタン（上図H）をクリックし、色を黒に変更。
3. 右側のライト（上図I）をクリックして選択。塗り色ボタン（上図J）をクリックし、色を赤に変更。
4. １ページと２ページの間（上図K）をクリックし、メニューから「空白ページを入れる」をクリック。
5. 入れたページの時間（上図L）をクリック。時間を０秒にします。
6. 左下の虫眼鏡（上図M）をクリック。これで画面全体が見えるようになります。
7. ステージの上にある太字（new）をクリック（上図N）。メニューから「このアニメにもどる」をクリック。これで元のアニメに戻ります。

メモ：１ページと２ページの間に０秒のページを入れると、ライトの赤と黒が瞬時に切り替わります。もし０秒のページを入れなければ色が徐々に変化します。

１１．ライトを複製し、右側のライトに重ねる

1. ライトの中心「＋」（下図P）をクリック。メニューから「複製する」をクリック。もし、Shiftキー（下図O）を押してから複製すれば、アニメキャストが同じ位置に複製されます。

   

2. シフトボタン（上図Q）をクリックし、複製したライトの中心「＋」（上図R）をドラッグして右側に移動
3. 表示倍率ボタンの「－」「＋」で見える範囲を調節して右側の遮断機まで移動させましょう。
4. 右側の元のライト（上図Ｓ）をクリックして選択。削除ボタン（上図T）で削除。同様に右のライト（上図U）をクリックして選択。削除ボタン（上図V）で削除します。この上に点滅するライトを重ねます。
5. 複製したライトをクリックして選択（上図W）し、中心「＋」（上図Y）をドラッグしてライトの位置に移動
6. 虫眼鏡ボタンをクリックしてから、プレイボタン（上図Z）で動きをみてみましょう。

メモ：左右のライトが０．５秒間隔で点滅します。

１２．角度を指定して遮断機を上にあげる

1. ページの時間（下図a）をクリック。メニューの「１秒長くする」を２回クリックし３秒にします。

   

2. 先頭ページの左側の「＜」（上図b）をクリック。「前に続いたページを作る」」をクリック。先頭ページを複製します。
3. 左側のバー（上図c）を選択。中心「＋」（上図d）をクリック。メニューから「支点を回る角度」をクリック。数字を０に設定します。バーが上に上がります。
4. 右側のバー（上図e）を選択。中心「＋」（上図f）をクリック。メニューから「支点を回る角度」をクリック。数字を３６０に設定します。バーが上に上がります。
5. プレイボタンで動きを見てみましょう（下図）。
6. 先頭ページ左側「＋」（上図g）をクリック。「前に続いたページを作る」」をクリック。先頭ページを複製します。もう一度プレイボタンを押してみてください。

メモ：アニメキャストの支点を左右に移動させたため、その回りの角度を指定することでバーが回転するアニメができました。

１３．最後のページに先頭ページをコピーする

1. 最後のページの右側「＋」（上図h）をクリック。「続きのページを作る」」をクリック。最後のページを複製します。遮断機がおりたページを２ページ作成します。
2. 先頭ページのページ番号１（上図i）をクリック。メニューから「ページを記憶する」をクリック。
3. 最後のページの右側「＋」（下図j）をクリック。「記憶したページを入れる」」これで先頭ページが最後のページにコピーされます。

メモ：「記憶したページを入れる」でページをコピーした場合、前後に同じ図形があれば、自動的にリンクされ、なめらかに動くようになります。

１４．通過する列車をコピーする

1. 「9VA」ボタン（下図k）をクリック。メニューの下のダウンロードしたSVGファイルをクリック。SVGイラストを開きます。

   

メモ：9VAeは複数のファイルを同時に編集ででき、「9VA」ボタンで切り替えできます。

1. 列車をクリックして選択（上図l）。グループ化されているため、４つの列車が同時に選択されます。
2. 点選択ボタン（上図m）をクリック。 
3. 一番下の列車の点を囲んで選びます（下図n）。
4. 点選択ボタン（上図o）をもう一度クリック。この操作で選択された点を含む図形だけが選択されます。

5. コピーボタン（下図p）をクリック。これで一番下の列車だけが記憶されます。

メモ：図形の点を一部選んでからもう一度点選択ボタンを押す方法は、図形のグループ化の構造を無視して必要な図形だけ選択できるので便利です。

１５．踏切が降りている４ページに列車を入れる。

1. 「9VA」ボタン（上図q）をクリック。メニューの下の「（new 」から始まるファイルをクリック。踏切のファイル（下図）を読み出します。
2. 踏切がおりている４ページ（上図r）をクリックして４ページに移動。
3. 貼り付けボタン（上図s）をクリック。メニューから「ステージにもどす」をクリック。４ページに列車がはいります。
4. 表示縮小ボタン「ー」（上図t）を何回かクリックすれば列車が見えます。
5. 選択枠の枠線（下図u）をドラッグし、踏切の位置に列車を移動（下図）
6. シフトボタン（下図v）をクリックし、重なりを下げるボタン（下図w）をクリック。これで列車の重なりが一番下に下がります。

   

メモ：Shiftボタンを押して重なり順位を変更すれば一番上、もしくは、一番下にできます。Shiftキーを押してもかまいません。

１６．列車をコピーし前後に移動する

1. 列車が選択された状態で、前のページにリンクコピーするボタン（上図x）をクリック。３ページに列車がコピーされます。
2. シフトボタン（上図y）をクリック。列車の選択枠の枠線（上図z）を左に移動させましょう。シフトボタンを押していれば、正確に水平に移動できます。
3. ４ページ（上図A）をクリックして４ページに移動
4. シフトボタン（上図B）をクリックして、列車の選択枠の枠線（上図C）を右に移動。
5. 虫眼鏡ボタン（上図D）をクリックしてから、プレイボタン（上図E）を押して動きを見てみましょう。

１７. アニメーションを動画にする

1. 出力する前に「ファイルメニュー＞名前を付けて保存」で名前をつけて保存しておきましょう。
2. 「ファイルメニュー＞アニメGIF出力」でアニメGIFが出力できます。スマホ版では、「9VAeフォルダ」と「カメラロール」に保存されます。パソコン版では最初に保存場所を選びます。
3. 動画素材を作る場合、画面サイズは、幅を空白、高さを７２０、コマ／秒を３０にするとよいでしょう。「OK」ボタンでアニメGIFが出力されます。

 動画（MP4）の作成

1. Mac/iPhone/iPad の場合、ファイルメニュー「動画出力」で、MP4動画を作成できます。

2. Windows/Linux/Android/Amazon Fire の場合、変換サイト：Online GIF to MP4 Video converter - Ezgif.comでアニメGIF を MP4 動画に変換できます。

3. Windows/Linux の場合、 APNG to MP4 Video converter - Ezgif.com を使えば、APNG をMP4 動画に変換できます。時間がかかりますがGIFよりきれいです。

ezgif.comでMP4動画を作成する方法 

1. GIF to MP4 または、APNG to MP4 を開く

2. アニメGIFまたはAPNGファイルを指定（背景は透明にしない）

3. 「Upload!」をクリック ＞ 「Convert GIF to MP4!」をクリック ＞ 「Save」(フロッピーディスクアイコン)をクリック。MP4をダウンロードできます。

メモ：Mac版、　iPhone版は、MP4動画が出力できます。iPhoneを使った音入りアニメの変換方法はこちら

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

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

• 動画編集ソフトで動画に合成できます。

OS	フリーソフト	9VAeで作成する素材動画
Windows	AviUtl	連番PNG または MP4(Ezgifで変換)
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF

作り方

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

• iMovieに合成する方法 (iPhone/iPad/Mac)

• PowerDirector に入れる方法（Android 他）

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

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

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

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

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