フリーソフト9VAeきゅうべえを使ってキャプチャ画像から動画マニュアルや解説動画を作る方法を説明します。作業１５分くらい。イラストを動かす方法はこちら。初心者向け説明。縦横変換、ブログ記事の時短作成。動画素材、サムネイルもつくれます。Youtubeで見る
内容：
- 「ひとコマアニメーション」とは（１）
- 画面キャプチャし、連番をつける（２）
- 連番画像を9VAeフォルダに集める（３）
- 連番画像を読み込む。画像サイズ設定（４）
- タイトル文字を入れる（５）
- 矢印を入れる（６）
- 「ひとコマ」を設定（７）
- 次ページを作成。連番画像を次の番号に（８）
- 矢印をカットして複製（９）
- 説明用文字を入力（１０）
- 文字をしゃべらせる（１１）
- タイトルイラストをいれる（１２）
- 複数ファイルの切り替え（１３）
- 素材のまとめかた（１４）
- 動画にする（１５）
- サムネイル作成
■ 9VAeきゅうべえのダウンロード
- Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
- iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
- Win / Mac / Linux：9VAeきゅうべえダウンロード
- Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
- 9VAeのボタン説明、メニュー/キー
１．「ひとコマアニメーション」で解説動画を作ると簡単
「ひとコマアニメーション」は、キッズプラザ大阪で開発されたアニメーション手法です。静止画を作るのと同じコストで動画が作成できます。
9VAeきゅうべえ Ver.0.8.0 (210201) から、ひとコマアニメーションが作れるようになりました。ページの時間をタッチして、メニューに「ひとコマ」がない場合、9VAeを最新版にしてください。
「ひとコマアニメーション」は簡単です。
- 描いた順番にアニメーションが再生されます。
- 線や文字の長さに応じて再生時間が自動的に調整されます。
- 単なる動きの録画ではなく、動きの調整が自由にできます。
ひとコマアニメーションは、あとから文字や画像が差し替えできるので、保守性の高い動画になります。
解説動画は、次のパーツで作成します。
画面キャプチャ方法
|
||
|
||
|
スクリーンショット |
|
| |
|
アルバム＞ スクリーンショット |
|
ファイル |
|
|
スクリーンショット |
２．説明したい画面をキャプチャし、連番をつける
まず解説したい画面を必要な枚数だけ画面キャプチャし、ファイル名を連番にします。
9VAeは連番画像をまとめて読み込むことができ、読み込んだあとはファイル番号の指定だけで、画像を読み出せます。
３．スマホの場合、連番画像を9VAeきゅうべえフォルダに集める
画面キャプチャした画像を9VAeで直接使う方法はこちら（簡単）。ほかのアプリで作成した画像をつかう場合は、画像を9VAeフォルダ（または 9VAeDangla）にいれておきます。ファイルアプリなどでコピーします。こちらの記事も参考にしてください。
Androidでは、9VAeフォルダは、ダウンロードの中にできます。iOS/iPad は本体の直下にできます。フォルダがない場合は、なにかを保存してみてください。
パソコン版では、連番画像用フォルダを作成し、その中に連番画像を集めるとよいでしょう。
メモ：9VAeに連番画像を読み込んだ場合、9VAeのファイルには連番画像のファイルパス名だけが記録されます。パソコン版9VAeは、保存先を指定できるので、連番画像と同じフォルダに保存するのがよいでしょう。
４. 9VAeで連番画像を読み込む。アニメを画像サイズにする
- 画像入力ボタンをクリック。用意した連番画像の最初の画像を選びます。「すべて読み込みますか」と表示されるので「OK」をクリックします。スマホ版でパレットが消えていた場合は右下の「もどす」をタッチしてください
- 入力した画像の選択枠の中心の「＋」をクリック。メニューから「ステージの大きさにする」をクリック。これで画像が全体に広がります。
- 選択枠の中心の「＋」をクリック。メニューから「ページを画像に合わせる」をクリック。これでステージのサイズが画像サイズになります。
- 左下の虫眼鏡ボタンをおせば、画面全体が表示されます
- 選択枠の中心の「＋」をクリック。メニューから「連番()-()」をクリック。開始番号と終了番号を同じ数字、（例えば001なら1）にします。入力欄では最初は -1 になっています
メモ：連番画像は、初期設定（開始番号と終了番号が−１）になっていると、再生時に連番画像が順に表示されます。開始番号と終了番号をどちらも１に設定すれば、１番の画像だけが再生されます。
５. 先頭ページにタイトル文字を入れる
- ページ左側の「＜」をクリック。「空白ページを作る」で新しいページを作ります。
- 文字入力ボタン「Ａ」をクリック。タイトル文字「9VAeで解説動画の作り方」を入れます。
- 文字の選択枠の角のハンドル■をドラッグすれば、文字を拡大できます。
- 線の種類を設定するボタンをクリック。メニューから「縁をつける」をクリックすると文字に縁がつきます。同様にメニューから「影をつける」をクリックすると文字に影がつきます。メニューから「太く」を何回かクリックすれば、縁や影を太くできます。
-
塗り色２ボタンをクリック。ここで縁の色を変更できます。ここでは白にしました。
- 文字タブをクリック。パレット２（文字属性）に切り替えます。
- 文字色ボタンをクリック。文字の色をピンク色に設定しました。
メモ：線の属性ボタンをつかって、矢印や文字に縁取り、影がつけられます。縁どりの色は図形パレットの色２で設定します。下に9VAeの文字操作をまとめます
(B)選択枠の「＋」メニュー＞文字の内容変更 |
|
（Android は未対応） |
|
６. 矢印を入れる
- ２ページをクリックして２ページに移動。
- パレットのタブ１をクリックしてパレット１（図形属性）を表示。
- 矢印の種類ボタンをクリック。メニューから右向き矢印を選択
- 折れ線入力ボタンをクリック。このモードでは頂点を順番にクリックして入力します。
- 画像入力ボタンの場所を示すように、最初の点をクリック
- 終了点をクリック
- 選択ボタンを２回クリック。線の入力が終了し、矢印が入ります。
- 線の太さボタンをクリック。メニューの「太くする」を数回クリックし、矢印を太くします。
-
線の色ボタンをクリック。矢印の色を赤にしました。
メモ：折れ線・多角形を入力するボタンでは点を順番にクリックして入力します。最初か最後の点と同じ点、もしくは、選択ボタンをクリックすれば入力が終了します。
中心「＋」＞いっしょに塗る |
７. ページに「ひとコマ」を設定。プレイする。
- １ページの時間をクリック。メニューから「ひとコマ」をクリック。
- ２ページの時間をクリック。メニューから「ひとコマ」をクリック。
- プレイボタンをクリック。これで、タイトル文字が表示され、矢印がのびていく「ひとコマアニメーション」が再生されます。
メモ：「ひとコマ」に設定したページは、プレイボタンを押すと、描いた順番に絵ができるアニメーションが作成されます。ページの時間は毎回自動設定されます。
８. 次ページを作成。連番画像を次の番号にする
- ページの右側の「＋」をクリック。メニューから「続きのページを作る」。これで次のページができます。ページの時間は、前のページと同じ時間になります
- 画像をクリック。選択枠中心の「＋」をクリック。
- メニューから「連番 (1)-(1) 」をクリック。開始番号、終了番号の入力画面になります。
- 開始番号、終了番号を次の番号「２」に変更します。これで、次の画像に変わります。
- 終了番号が空白の場合、開始と終了が同じ番号になります。その状態で、前後のページにリンクコピー（←□、□→）すると、前後の番号になるので便利です
- 開始番号と終了番号の両方を空白にすると、普通の画像に戻ります
メモ：連番画像の開始番号、終了番号を変更すれば、画像の切り替えができます。
９．矢印をカットして複製
- 矢印をクリックして選択。
- 切り取りボタンをクリック。矢印を記憶ツールに入れます。
- 貼り付けボタンをクリック。メニューから「複製する」をクリック。矢印を元の位置に戻します。
- 点選択ボタンをクリック。矢印の点が表示されます。
- 矢印の先をドラッグして矢印の向きを次の説明用に変更します。
メモ：矢印をいったん切り取って複製するのは前のページとのリンクをきりはなすためです。続きのページ作成では、前のページとリンクした図形になり、再生すると形が変化します。いったん削除して「複製する」を行うとリンクしていない別の図形になり形が変化しなくなります。つながった図形の説明はこちら
１０．説明用文字を入力
- 文字入力ボタンをクリック。ここでは「ステージの大きさにする」と入力しました。
- 線の種類のボタンをクリック。メニューから実線を選ぶと文字に枠線がつきます。
- 塗り色ボタンをクリック。色を指定すると、文字背景に色がつきます。ここでは水色にしました。
- 文字をドラッグして位置を合わせます。
- ２ページに移動
- 「画像入力」という文字をいれましょう
メモ：線の種類ボタンで文字枠、塗り色ボタンで文字背景に色がつけられます。
１１．文字をしゃべらせる
- １ページをクリックして１ページに移動。
- タイトル文字を選びます
- 中心の「＋」メニューから「複製する」を実行。これで文字が複製されます
- 複製した文字の中心の「＋」メニューから「文字の内容変更」を実行し、しゃべる内容に文字を変更します。
- もう一度中心の「＋」メニューから「コメント」を実行。コメントにすると、再生したときに表示されません
- 中心の「＋」メニューから「しゃべる」を実行すればしゃべるよう設定されます。
- もう一度中心の「＋」メニューから「しゃべる」を実行すれば、スマホ版、Mac版では、しゃべるはずです。Windows版、Linux版9VAeでは、ツールアプリを入れる必要があります。以下をクリックして説明をご覧ください。
メモ：ページの時間を「ひとコマ」に設定しておけば、ページの時間は、文字をしゃべる時間に応じて自動的にかわります。「しゃべる」設定した文字は、重なり順序の下の文字から順番に発声します。
１２．タイトルイラストを入れる
- 「openclipart 324079 chalkboard」を検索し、フリーSVGイラストサイトOpenclipart から、「Anime Girl School Chalkboard 2 Animation」をひらきます
- SVG (Source Vector) ボタンを長押し、または、右ボタンでクリックし、「リンク先を保存」して、SVGイラストをダウンロードします
- 右側の「9VA」ボタンをクリックし、メニューから「9VAアニメを入れる」を実行し、ダウンロードした、SVGイラストを読み込みます。
- 重なり順序を下げるボタンを何回かクリックし、イラストを文字の下に配置します
- コメント文字を下に移動します。どの場所においても効果はかわりません
- 選んでいるイラストの中心の「＋」をクリックし、メニューから「ローマ字で動かす」を実行します
- ローマ字で口パクを設定します。最初の数字は秒です。「6:kyuubeee de kaisetu douga no tukurikata wo setumei simasu ...........」と入力しましょう
- プレイボタンで動きを見てみましょう
メモ：読み込んだSVGイラストは、アニメキャストというパーツになります。AIUEOの口の形がはいっており、ローマ字で口パクが制御できます(説明はこちら)
解説動画の作り方のポイントを説明しました。あとは、同じ方法をつかって、続きをつくっていきます。
１３. 複数ファイルの切り替え
9VAeは、複数のファイルを何本でも読み込むことができます。過去に作成した解説動画を開いて記憶ツールにいれ、「9VA」ボタンで切り替えれば、簡単に利用できます。
- ヘルプメニューから、「わらえもん」を開きます。
- ファイルメニューの「名前をつけて保存」で、適当な名前で保存してください
- ヘルプメニューから、「変身」を開きます。
- ドラッグして顔を選択し、
- コピーボタンで記憶ツールに入れます
- 「9VAボタン」をタッチ。
- メニューの下の、「編集中のアニメ」から、適当な名前をつけたファイルをタッチすれば、そのファイルが開きます
- 貼り付けボタンから、「複製する」を実行すれば、変身の顔が入れられます。
- 下の「←ｑ」ボタンをおせば、アニメキャストにして入れられます。用途に応じて使い分けてください
編集中のアニメのリスト
- 今ひらいているファイルにチェックマーク「ｖ」がつきます。
- 未保存のファイルに「＊」がつきます。
- 一度ひらいたアニメキャストが、親のファイルの下に「；」つきで表示され、切り替えできます
- 数が多い場合、▲▼のタッチで続きが表示されます。右側の▲▼は１つ、左側の▲▼は１画面送ります。最後になると△▽に変わります
１４. 素材をアニメキャストにまとめる
- よく使う素材は、「素材」といった名前のアニメキャストにまとめておくと便利です。最後に１ページ追加し、素材アニメキャストを入れておくとよいでしょう。「再生終了」命令をいれておけば、再生時に無視されます
１５. アニメーションを動画にする
- ファイルメニュー「アニメGIF出力」「動画出力」「APNG出力」で、アニメGIF/MP4動画/APNG が出力できます。詳細はこちら
- MP4動画は、幅を空白にし、高さを７２０、１０８０、または１９２０、秒コマ数は３０にするとよいでしょう。数字が大きいほど高解像度、出力時間がかかります
- この記事のGIFは、高さ５１２、秒コマ数は１０で出力しています。
動画（MP4）の作成
-
ファイルメニュー「動画出力」で、MP4動画を作成できます。
-
Windows/Linuxの場合、FFmpegの設定が必要です
メモ：スマホ版、Mac版9VAeは、FFMpegを設定しなくても、MP4動画が出力できます。iPhoneを使った音入りアニメの変換方法はこちら
9VAeをつかえば素材動画が作れる
- 9VAeきゅうべえを使えば、オリジナルの素材動画が簡単に作れます。
- Openclipart や FreeSVG など多くのSVGイラストをつかって動くキャラクタ素材も作れます。
- 動画編集ソフトで動画に合成できます。
|
OS |
9VAeで作成する素材動画 |
|
|---|---|---|
|
連番PNG または MP4(Ezgifで変換) |
||
|
PowerDirector |
GIF |
作り方
- もっと長いアニメを作ることもできます。以下をご覧ください。
サムネイル画像の作成
- ファイルメニュー＞画像出力。パソコン版は先に保存フォルダと保存名を指定します。
- 画像設定画面で、画像サイズ（縦横ドット数）を指定します。Youtube サムネイルは 1280x720 推奨。 サムネイルの場合「背景を透明にする」にはチェックをいれないほうがよいでしょう。
- 原稿の縦横比率を変更したい場合は、「ページメニュー＞ページ設定」でステージのサイズを変更します。
9VAeきゅうべえに関する質問
- 9VAeに関する質問（Yahoo知恵袋）
- よくある質問（Qiita）
- 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。
