ランキング動画、スライド動画が作れる無料アプリ：9VAeきゅうべえ

ランキング動画を作る方法を説明します。作業時間は２０分くらいです。Android版 9VAeきゅうべえ、パソコン版、iPhone/iPad版で作れます。動画素材、サムネイルも作れます。

。

他のアニメの作り方はこちら。9VAeの質問はこちら。

内容：２０分程度

• 画像を9VAeフォルダにいれる（Android版のみ）（１）
• 基本画面を作る（２）
• 文字が出てくる動きをつける（３）
• 文字の動きをグラフで調整（４）
• アニメキャストを作る（５）
• 最初のランクが出てくるところを作る（６）
• アニメキャストを同じ場所に複製する（７）
• アニメキャストの文字、画像を変更（８）
• 続きのページを作る（９）
• ４位、３位、２位を複製し、３位、２位、１位を作る（１０）
• 背景に色をつける（１１）
• 動画にする（１２）
• サムネイル作成（１３）

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

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

１.ランキングで使う画像を9VAeフォルダにいれる（Android版のみ）

1. スマホ版9VAeに画像や音をいれるには、あらかじめスマホ内部の「9VAe」（Androidの場合は「ダウンロード」フォルダも可）にファイルをいれておく必要があります。（iPhone版はカメラロールから入力できます）
2. 画像や音を9VAeフォルダにいれるには、「Simple File Manager」 や「File Manager - Innorriors（Amazon Fire）」 のようなファイルマネージャを使うのが簡単です。以下は、Simple File Manager で、内部/9VAe にランキング用の画像を５枚入れた例です。

   

3. Abdroid版への音、画像入力について、こちらもご覧ください。

メモ：スマホ版9VAeでは、9VAeフォルダに絵や音を入れておけば入力できます。Android版はダウンロードフォルダからでも入力できます。

２. 基本画面を作る

以下、パソコン版、スマホ版とも共通です。図のABCDの順番に操作していきます。

（１）文字、四角形、画像を入力

順位、四角形、名前、画像の順番に入力します。一般的なグラフィックソフトと同様の操作なので簡単にできるでしょう。

1. 9VAeを起動。（Android版の場合、横にして画面をタッチすれば横画面になります。）
2. 「文字入力ボタン」（下図Ａ）をタッチ。「５位」と入力。
3. 角のハンドル（下図Ｂ）のドラッグでサイズ変更できます。
4. 中心の「＋」（下図C）のドラッグで位置変更ができます。

   

5. 「塗のある四角形入力ボタン」（上図Ｄ）をタッチ。四角形（上図Ｅ）を描きます。塗色は白にしましょう。選択ボタンをタッチしてから塗色ボタン（上図F）で色が変更できます。
6. 間違えたときは「元に戻すボタン」で元に戻せます。
7. 文字入力ボタン（上図G）をタッチし、四角形の上に名前の文字を入れます。
8. 「写真入力ボタン」（上図H）をタッチ。ランキング５位の画像を入力。
9. 文字と同じように、選択枠の角のハンドルでサイズを縮小、選択枠中心のハンドルをドラッグすれば移動できます。

メモ：選択枠の角のドラッグでサイズ変更。中心の＋または枠線のドラッグで移動。選択ボタンで選択して色変更できることも覚えておきましょう。

（２）位置合わせ

1. 選択ボタン（下図Ｉ）をタッチ。画面を左上から右下にドラッグ（下図J）して、順位、四角形、名前、画像全部を選びます。
2. メニューバー「配置メニュー＞縦軸を合わせる」（下図K）（パソコン版の場合は「調整＞配置＞縦軸を合わせる」）。これで入力した文字、図形、画像が整列します。

   

メモ：入力したあと、配置メニューで正確に位置合わせができます。

（３）文字にシンボルをつける、文字の色を変える

1. 文字「５位」をタッチして選択（上図M）。
2. 右側のタブ３（上図N）をタッチ。スタンプから六角形（上図O）をタッチ。文字の下に六角形が配置されます。色はタブ１（上図P）をタッチし塗色のカラーパレット（上図Q）から好きな色に設定しましょう。ここでは青色にしました。
3. 文字の色は文字をタッチ（上図M）して選んでから、タブ２（上図Ｒ）をタッチ。文字色ボタン（上図Ｓ）で変えられます。ここでは白に変更しました。
4. これがランキング動画の基本配置になります。シンボルの形、文字の色、画像の配置を変えるとオリジナルのランキング動画が作れます。 

メモ：タブ１（図形タブ）で図形の塗色、線の色が変更できます。タブ２（文字タブ）で文字の色が変えられます。タブ３で図形シンボルが入れられます。

３．前のページを作成し、文字が出てくる動きをつける

（１）前のページを作成、文字を登録

1.  文字に動きをつけましょう。ページの左側の「＜」（下図Ｔ）をタッチ。メニューから「前につづいたページを作る」。これでページの内容がコピーされます。
2. ５位とシンボルをいっしょに選択（下図Ｕ）。右側の登録パレットの「＋」（下図Ｖ）をタッチ。５位とシンボルがパレットに登録されます（下図Ｗ）。

   

メモ：登録パレットに登録する方法を覚えておきましょう。登録した図形を選択したり、登録した図形を選択できないように設定したり、他のソフトの「レイヤ」に似た機能です。動きグラフもここで付けます。

（２）文字を下に隠す、文字を透明にする

1. シフトボタン（上図Ｘ）をタッチ。選択枠中心の「＋」（上図Ｙ）を下にドラッグ。下図のように四角形の下に文字を隠します。
2. 現在のAndroid版では、文字が最前面になるという制限があります。そのため文字を図形で隠すことができないので、文字の色を透明にします。タブ２（上図Ｚ）にある文字の色ボタン（上図ａ）をタッチ。カラーパレットの透明度の一番左側（上図ｂ）をタッチし文字を透明にします。

メモ：シフトボタンを押した状態で図形を移動させると、縦か横にしか移動しません。カラーパレットの上にあるパレットが透明度で、一番左側が透明、一番右側が不透明です。

４．文字の動きをグラフで調整

1. 登録パレット（下図ｃ）をタッチ。メニュ＝から「ゆっくり動き出すグラフ」をタッチ。下図のようなグラフが表示されます。
2. グラフの右側の線の上をタッチして△の点を追加。上にドラッグして下図のような形にします（下図ｄ）。
3. 図形タブ（下図ｅ）をタッチ。右上の「曲線ボタン」（下図ｆ）をタッチ。追加した点が△（角）から□（曲線）にかわります。
4. プレイボタン（下図ｇ）をタッチして動きをみてみましょう。

   

5. 最初に間をもたせるため、ページの左側の「＜」ボタンをタッチ。「前につづいたページを作る」で同じページを追加しましょう。プレイボタンをタッチすると、１秒してから文字が出てくるようになります。
6. ランクの文字が出たあと、そのまま表示を続けたいので、３ページをタッチ（上図ｉ）して３ページに移動してから、ページの左上（上図ｊ）をタッチ。メニューから「往復」をタッチし、往復命令をいれます。
7. プレイボタンを押すとランキング「５位」が出た状態を続けます。停止するにはプレイボタンの右側の停止ボタン、スマホの場合はタイトルバーをタッチしてください。

メモ：登録パレットに動きグラフを追加すれば、グラフの形で動きます。最後のページに往復命令をいれるとそこで再生を続けます。

これでランキング動画の基本パーツができました。これをコピーしてランキング動画を作っていきます。

５．基本画面をアニメキャストにする（パーツにする）

（１）全部のページを記憶ツールに入れる

1. １ページのページ番号（下図ｌ）をタッチ。メニューから「ページの指定ここから」をタッチ。
2. ３ページのページ番号（下図ｍ）をタッチ。メニューから「ページの指定ここまで」をタッチ。
3. ３ページのページ番号（下図ｍ）をもう一度タッチ。メニューから「まとめて切り取る」をタッチ。これで全部のページが記憶ツール（下図ｎ）に入ります。

   

メモ：ページ番号のメニューで複数ページの選択ができます。選択したページが全部選ばれたことになり、全部のサイズをいっしょに変更したり、位置を変えたりできます。ここでは全部のページを切り取って、記憶ツールに入れました。  

（２）アニメキャストにして取り出す

1. 記憶ツールの下の「ｑ」ボタン（上図ｏ）をタッチ。
2. アニメキャストの名前をいれます。ここでは５位なので「005」としてＯＫボタンを押しましょう。（好きな名前をつけてかまいません）
3. 上図のように３ページのアニメーションが１つの図形になります。

メモ：記憶ツールにいれたものは、なんでもアニメキャストというパーツにできます。9VAeの強力な機能です。  

６．前のページを作成し、最初のランクが出てくるところを作る

動きの作り方は上に述べた方法と同じです。

1. ページの左側の「＜」（下図ｐ）をタッチ。メニューから「前につづいたページを作る」をタッチ

   

2. アニメキャストをタッチして選択。
3. シフトボタン（上図q）をタッチ。選択枠の中心「＋」を左側にドラッグ（上図r）して移動。シフトが押されていると、水平に移動します。
4. 登録パレットへの追加ボタン（上図ｓ）をタッチ。
5. 登録されたボタン（上図ｔ）をタッチ。メニューから「ゆっくり動きだすグラフ」をタッチ。上図のようなグラフが追加されます。
6. グラフの点（上図ｕ）を右下に少し移動させます。

メモ：前のページのアニメキャストを移動させると赤い矢印ができます。この矢印にそってランキング画像がでてきます。 

７. ２ページのアニメキャストを同じ場所に複製する

1. ２ページ（下図ｖ）をタッチして２ページに移動。

   

2. アニメキャスト（上図ｗ）をタッチして選択。
3. シフトボタン（上図ｘ）をタッチしてから、選択枠中心「＋」をタッチ。メニューから「複製する」をタッチ。シフトがおされていると同じ位置に複製されます。
4. 登録ボタン（上図y）をタッチ。登録パレットに登録しておきます。
5. 複製して登録したアニメキャストの選択枠の中心「＋」（上図z）をタッチ。メニューから「別のアニメにして修正」をタッチ。
6. 新しいアニメキャストの名前の入力になります。
7. ４位のランクを作成するので、名前を「004」としてＯＫボタン。
8. これで４位のアニメキャストが開きます。

メモ：シフトを押して複製すると同じ位置に複製されます。「別のアニメにして修正」するのは重要です。これをしないと２つのアニメキャストは同じ中身を参照するため、どちらも４位になってしまいます。「別のアニメにして修正」すると５位と４位を作ることができます。

８. ４位のアニメキャストの文字、画像を変更

1. ３ページ（下図Ａ）をタッチして３ページに移動。

   

2. 文字「５位」（上図Ｂ）をタッチして選択。
3. 選択枠中心の「＋」（上図Ｂ）をタッチ。メニューから「文字の内容変更」を実行。
4. 「他のページの内容も修正しますか」に対して「はい」。
5. 文字を「４位」に変更します。
6. 同様に下の文字を「9VAeきゅうべえ」に変更します。（上図Ｃ）
7. 画像（上図Ｄ）をタッチして選択。
8. 選択枠中心の「＋」をタッチ。メニューから「絵・写真の変更」を実行。
9. 「他のページの内容も修正しますか」に対して「はい」。
10. 画像を４位の画像に変更（上図Ｄ）
11. 画面上の「004」の左側のファイル名（new）（上図Ｅ）をタッチ。メニューから「このアニメにもどる」をタッチ。親のアニメに戻ります。

メモ：画像を変更すると、縦横の画像サイズが元の画像になります。縦横比率を同じにしておくとよいでしょう。

９．続きのページを作って４位のアニメを右に移動

1. ページの右側の「＋」（下図Ｆ）をタッチ。メニューから「続きのページを作る」。これで下図のように３ページができます。

   

2. 登録した４位のパレット（上図Ｇ）をタッチ。メニューから「選択する」を実行。
3. シフトボタン（上図Ｈ）をタッチ。
4. 選択枠の中心「＋」（上図Ｉ）を右側にドラッグ。４位の画像を5位の右側に配置します。
5. ２ページ（上図J）をタッチして２ページに移動。４位のアニメキャストが選択されています。
6. 重なりを下げるボタン（上図K）をタッチ。４位のアニメキャストを５位の下に隠します。
7. 登録パレット（上図L）をタッチ。メニューから「ゆっくり動き出すグラフ」をタッチ
8. グラフの点（上図M）をドラッグして右下に移動させます。プレイボタンで動きを見てみましょう。

メモ：登録しておけば、重なった図形でも簡単に選択できます。シフトボタンを押した状態で移動させると、縦横に移動できます。

１０. ４位、３位、２位を複製し、３位、２位、１位を作る

上と同じ方法を繰り返して３位、２位まで作成します。（１）同じ位置に複製（２）登録パレットに登録（３）別のアニメにして修正（４）中身を次のランクに変更（５）元のアニメに戻る（６）続きのページを作る（７）シフトを押して右側に移動。これを繰り返すと下図のようになります。右側にはみ出したら全体を左側に移動しましょう。

1. 左上からドラッグ（下図N）して４つのランクを全部選択。
2. シフトボタン（下図O）をタッチ。
3. 選択枠中心の「＋」を左側にドラッグ（下図P）

   

4. ４ページ（上図Q）をタッチして前のページに移動。
5. 登録ボタン（上図R）をタッチし、メニューから「追加登録する」。これで全部が登録されます。
6. 登録ボタンをもう一度タッチ（上図S）し、メニューから「ゆっくり動き出すグラフ」をタッチ。
7. 動きグラフの点（上図T）を右下に移動。
8. 同じように最後のページの２位を複製して１位のページを追加しましょう（下図）
9. 最後のページの時間（下図U）をタッチ。メニューから「１秒長くする」をタッチして２秒にします。
10. プレイボタンで動きを見てみましょう。

    

１１. 背景に色をつける

1. 背景に色を付けるには、先頭ページにグリーン背景をいれるのが簡単です。先頭ページ「＜＜」ボタン（上図V）をタッチして先頭ページに移動
2. ページの左側の「＜」ボタン（上図W）をタッチ。メニューから「グリーンの背景を入れる」をタッチ。下図のようになります。
3. グリーンの四角をタッチして、塗色ボタンをタッチすれば、好きな色に変更できます。
4. プレイボタンで動きをみてみましょう。ここでコマ落ちしても、アニメＧＩＦ出力すれば、なめらかに動きます。

メモ：背景ページは、その後に続くすべてのページの背景に表示されます。

アンドロイド版の文字が最前面に出る制限

• 現在のアンドロイド版・CromeBook版9VAeは文字が最前面に表示されるという制限があり、図形の下に隠れた文字が見えてしまいます。
• これを防ぐためには、（１）隠れた文字を透明にする。（２）文字の下に文字が隠れている場合、上の文字を選んで塗り色をつける。
• 文字の背後に塗色をつけると、文字の背後に文字枠がつきます。文字枠は背後の文字を隠すことができます。短い文字の前後に空白をつければ文字枠を広げることができ、それで下の文字を隠すことができます。
• パソコン版、iPhone/iPad版ではこのような制限はありません。

１２. アニメGIF / 動画(MP4)出力

1. ここまでできたら「ファイルメニュー＞名前を付けて保存」で名前をつけて保存しておきましょう。
2. 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
   Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要。Youtube解説
3. スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
4. アニメGIFは、背景を透明にできます。音がいれられません。
5. MP4動画には音が入れられます。Youtubeに投稿できます。動画素材を作る場合、画面サイズは、幅を空白、高さを７２０または１０８０、コマ／秒を３０にするとよいでしょう。「OK」ボタンで出力されます。

6. 

ezgif サイトで、アニメGIFをMP4動画に変換

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

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

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

メモ：9VAeは、MP4動画が出力できます。ezgif.com でアニメGIFを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 Ver.0.8.5 （スマホ Ver1.5）から各ページを任意サイズのPNG画像に出力する機能がつきました。

1. ファイルメニュー＞画像出力。パソコン版は先に保存フォルダと保存名を指定します。
2. 画像設定画面で、画像サイズ（縦横ドット数）を指定します。Youtube サムネイルは 1280x720 推奨。　サムネイルの場合「背景を透明にする」にはチェックをいれないほうがよいでしょう。
3. 原稿の縦横比率を変更したい場合は、「ページメニュー＞ページ設定」でステージのサイズを変更します。

 

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

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