9VAeで画像に字幕や音声をいれる方法：ひとコマ解説

無料アプリ9VAeきゅうべえで、画像を読み込んで、文字・字幕や声をいれる方法を説明します。Youtubeで見る。いらすとやを動かす方法はこちら。しゃべる解説はこちら。

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

内容：

１．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 は、スマホでもタブレットでも動きます。２眼表示機能つき

２．iPhoneに画像を入れる

iPhoneの画面をキャプチャし、9VAeにいれる方法を説明します

1. ホームボタンと電源ボタン、または、サイドボタンと音量UPボタンを同時におして、画面キャプチャした画像を作ります。iPhone  の画面が画像になります。
2. 9VAeを起動します
3. もし画面が黒なら、表示メニューの「ダークモード」で白黒を反転できます。
4. ページの左側「＜」をタッチして、「背景ページを入れる」を実行します
5. 音符「♪」の右側の画像入力ボタン「山」をタッチし、「写真から」をタッチします。もしパレットが消えていたら、右下の「もどす」でパレットがON /OFFできます
6. 写真をえらぶ画面から、キャプチャした画像を選びます。
7. 背景ページに、画像がはいります。2ページをタッチして、2ページに移動します
8. 「円をかく」ボタンをタッチし、
9. 中心からドラッグ して、円をかきます
10. 選択ボタンをタッチしてから、
11. 「線の種類」ボタンをおして、「縁をつける」をタッチすれば、線にふちがつきます。パレットで、線の色や太さも変えられます
12. 文字入力ボタン「A」をタッチし、「きゅうべえをタッチ」と入力します
13. 塗り色パレットて色をえらぶと、文字の背景に色がつきます
14. 2ページの時間をタッチし、「ひとコマ」に設定してから 、
15. プレイボタンを押してみましょう。ページの時間を、「ひとコマ」に設定すると、
    線や文字が順番に出てくるひとコマアニメーションになります
16. 文字をタッチして、中心の「＋」のメニューから、「しゃべる」にチェックを入れます。
17. プレイすると、「きゅうべえをタッチ」と、しゃべるアニメになります。この方法で、写真に字幕や声の説明をつけることができます

３．Androidスマホに画像を入れる

Androidスマホの画面をキャプチャし、9VAeにいれる方法を説明します

1. 電源ボタンと音量をさげるボタンを同時におして、画面キャプチャした画像を作ります。アンドロイドの画面が画像になります。
2. 次に9VAeを起動します
3. ページの左側「＜」をタッチして、「背景ページを入れる」を実行します
4. 「♪」ボタンの右側の画像入力ボタン「山」をタッチし、「ファイルから」をタッチします。もしパレットが消えていたら、右下の「もどす」で、パレットがオンオフできます
5. 「最近」の画像から、キャプチャした画像を選びます。もし、画像がみつからなければ、「端末名」＞「Pictures」＞「Screenshots」の中を探してみてください。
6. この操作で、もし読み込めなければ、もういちど画像入力ボタン「山」をタッチし、「9VAeフォルダから」をタッチし、スクリーンショットの名前の画像をえらんでください。「ファイルから」の操作で「9VAe」フォルダの中に画像がコピーされます。これで背景ページに、画像がはいります。
7. 2ページをタッチして、2ページに移動します
8. 「円をかく」ボタンをタッチし、
9. 中心からドラッグ して、円をかきます
10. 選択ボタンをタッチしてから、
11. 「線の種類」ボタンをおして、「縁をつける」をタッチすれば、線にふちがつきます、線の色や太さも変えてみましょう
12. 文字入力ボタン「A」をタッチし、「きゅうべえをタッチ」と入力します
13. 塗り色パレットて色をえらぶと、文字の背景に色がつきます
14. 2ページの時間をタッチし、「ひとコマ」に設定してから 、
15. プレイボタンを押してみましょう。ページの時間を、「ひとコマ」に設定すると、線や文字が順番に出てくるアニメになります
16. 文字をタッチして、中心の「＋」のメニューから、「しゃべる」にチェックを入れます。
17. プレイすると、「きゅうべえをタッチ」と、しゃべるアニメになります。この方法で、写真に字幕や声の説明をつけることができます

４．Windowsに画像を入れる

Windowsの画面をキャプチャし、9VAeにいれる方法を説明します

1. PrintScreenキーで、画面キャプチャします、
2. ペイントアプリを起動（Windowsボタンから「ペイント」をサーチ）し、画像をはりつけて（Ctrl＋V）、デスクトップに保存（ファイルメニュー＞名前をつけて保存）します
3. 次に9VAeを起動します。9VAeは、ダウンロードしたZIPファイルを解凍したフォルダの中の「9va-win.exe」です。最初な起動できませんが、「詳細情報」から実行します。説明はこちら（起動方法）。そのあとデスクトップにショートカットを作っておくと便利です
4. ページメニューの「ページ設定」で、縦と横の数字を入れかえれば、縦長のショート動画を作ることができます
5. ページの左側の「＜」をタッチして、「背景ページを入れる」を実行します
6. 音符ボタン「♪」の右側の画像入力ボタン「山」をタッチします。もしパレットが消えていたら、右下の「もどす」のタッチで、パレットがオンオフできます
7. 画像をえらぶ画面がひらきます。上の フォルダ欄の 右側の ▼をタッチします
8. 画像を保存したフォルダ、たとえば、デスクトップを選びます
9. 画像ファイルを選んで、
10. 「開く」ボタンをタッチします。背景ページに、画像がはいります。
11. 2ページをタッチして、2ページに移動します
12. 「円をかく」ボタンをタッチし、
13. 中心からドラッグ して、円をかきます
14. 選択ボタをタッチしてから、
15. 「線の種類」ボタンをおして、「縁をつける」をタッチすれば、線にふちがつきます、線の色や太さも変えてみましょう
16. 文字入力ボタン「A」をタッチし、「きゅうべえをダブルクリック」と入力します
17. 塗り色パレットて色をえらぶと、文字の背景に色がつきます
18. 2ページの時間をタッチし、「ひとコマ」に設定してから 、
19. プレイボタンを押してみましょう。ページの時間を、「ひとコマ」に設定すると、線や文字が順番に出てくるアニメになります
20. 文字をタッチして、中心の「＋」メニューから、「しゃべる」にチェックを入れます。
21. もういちど、「しゃべる」をタッチすると、初回は「SofTalk」設定になります。
    SofTalkをダウンロードし、アプリの場所を設定すれば、Windows版もしゃべるようになります。この方法で、写真に字幕や声の説明をつけることができます

５．Macの画像を入れる

Macの画面をキャプチャし、9VAeにいれる方法を説明します

1. Shiftキー、commandキー、数字の4を、同時におして、画面キャプチャした画像を作ります。スクリーンショットという名前のファイルが、デスクトップにできます。
2. 次に9VAeを起動します。ダウンロードしたファイルを解凍し、最初に起動するときは、２本指タッチ（右ボタン）メニューから「開く」を２回実行する必要があります。（ダウンロード＞起動方法）
3. ページメニューの「ページ設定」で、縦と横の数字を入れかえれば、縦長のショート動画を作ることができます
4. ページの左側「＜」をタッチして、「背景ページを入る」を実行します
5. 音符ボタン「♪」の右側の画像入力ボタン「山」をタッチし、デスクトップから、スクリーンショット画像を入力します。背景ページに、画像がはいります。
6. 2ページをタッチして、2ページに移動します
7. 「円をかく」ボタンをタッチし、
8. 中心からドラッグ して、円をかきます
9. 選択ボタをタッチしてから、
10. 「線の種類」ボタンをおして、「縁をつける」をタッチすれば、線にふちがつきます、線の色や太さも変えてみましょう
11. 文字入力ボタン「A」をタッチし、「きゅうべえをダブルクリック」と入力します
12. 塗り色パレットて色をえらぶと、文字の背景に色がつきます
13. 2ページの時間をタッチし、「ひとコマ」に設定してから 、
14. プレイボタンを押してみましょう。ページの時間を、ひとコマに設定すると、線や文字が順番に出てくるアニメになります
15. 文字をタッチして、中心の「＋」のメニューから、「しゃべる」にチェックを入れます。
16. プレイすると、「きゅうべえをダブルクリック」と、しゃべるアニメになります。この方法で、写真に字幕や声の説明をつけることができます

６．表示する文字としゃべる文字を分ける

文字入力し「しゃべる」にチェックをいれたときに、うまく発声してくれない場合があります。また、表示は簡潔にし、説明の文章はていねいにしたい場合もあります。その場合、文字を複製してコメント（表示しない文字）にし、しゃべる文字を自由に修正します

1. 文字を選び、中心の「＋」をタッチし、「複製する」を実行。文字が複製されます
2. 複製した文字の中心の「＋」メニューから、コメントと、
3. しゃべるにチェックを入れます。コメントのまわりには、二重線がつきます。しゃべる文字にはピンク色の線がつきます
4. 文字をタッチして、「きゅうべえにタッチします」に変更しましょう
5. プレイボタンを押してみましょう。Youtubeで見る。再生すると、コメントにした文字は、表示されませんが、「きゅうべえをタッチします」としゃべります。

発音がおかしい場合、文字のかきかたを変更（漢字をカタカナにかえる、コンマをいれるなど）書き方を変更して、しゃべり方を調整します

７．編集中の注意

名前をつけて保存、上書き保存をこまめに実行する

• 9VAeは、ファイルメニュー「名前をつけて保存」または「上書き保存」を実行しないかぎり、編集結果をフォルに書き込みません。
• アプリが起動中は、２００回程度元に戻す・やりなおすができますが、なんらかの理由でアプリが終了した場合、保存していないデータが失われます
• ときどき「_編集中」という名前で、作業のバックアップファイルが保存されており、それを読み出せる場合もありますが、基本的には、こまめに、ファイル名を変更して保存したり、上書き保存することをお勧めします。
• iPhone/iPad版は、「9VAe」または「9VAeDangla」フォルダ、Android版は「Download」フォルダのなかの「9VAe」または「9VAeDangla」フォルダに保存されます。

画像が赤色になり見えなくなった場合

• ファイルを保存したあと、ファイルアプリでコピーしたり、ファイルを開いたら画像が赤くなって表示されない場合があります。
• 9VAeの保存ファイルのなかに、画像や音楽のファイルは、ファイル名だけが保存され、本体のデータは保存されていません。したがって、9VAeのファイルだけコピーしても、画像や音楽がコピーされないことがあります。
• 画像には「連番画像」とそれ以外の画像と２種類あります（中心の「＋」メニューで切り替えできます）。連番画像は、ファイル名以外にファイルの保存場所も記録されており、スマホやパソコンの中に画像があれば、読み出せます。それ以外の画像は、ファイル名しか記録されておらず、9VAeと同じフォルダの中に画像がはいっていなければ、赤色になります。
• 赤色になった画像を正しく表示させるには、つぎのようにします

1. 赤い色の画像を選ぶ
2. 中心の「＋」メニューから「絵・写真の変更」を実行します。
3. 正しいファイルを選びます。Android版の場合は、正しいファイルがはいっているフォルダを選びます
4. これで正しい画像が表示されるはずです。上書き保存してください

８．役にたつヒント

• この説明では、背景ページに画像をいれましたが、ふつうのページに入れて、画像を動かすこともできます。例はこちら
• 声を音声合成でいれ、ページの時間を「ひとコマ」に設定しました。こうすれば、言葉の長さに応じてページの時間が調整されるので、簡単ですが、音声ファイルの声をいれる方法もあります。
• ページ数が多くなった場合、ページにラベルをつけておくと便利です
• 何回もつかう素材は、アニメキャストの中にいれておけば便利です
• 9VAeは複数ファイルを同時に編集できます。別のファイルから素材をコピーできます

９．動画出力

• ファイルメニュー「アニメGIF出力」「動画出力」「APNG出力」で、アニメGIF/MP4動画/APNG が出力できます。詳細はこちら
• MP4動画は、幅を空白にし、高さを７２０、１０８０、または１９２０、秒コマ数は３０にするとよいでしょう。数字が大きいほど高解像度、出力時間がかかります
• この記事のGIFは、高さ５１２、秒コマ数は１０で出力しています。

---

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

この記事の動画は、無料ソフト9VAeきゅうべえで作成しています。Youtube動画とアニメGIFやAPNGを同じデータから作れるので便利。スマホでできる。

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）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

アニメーション制作の革命？：9VAeきゅうべえの制御命令とラベル

無料アプリ9VAeきゅうべえは、なめらかに動くアニメを作るために、他のアプリにない制御命令やラベルを持っています。実際の操作で説明します。Youtubeで見たいひとはこちら。いらすとやを動かす方法はこちら。しゃべる解説はこちら。

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

内容：

１．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 は、スマホでもタブレットでも動きます。２眼表示機能つき

２．往復の使い方

鳥が羽ばたくとか、呼吸とか、口パクとか、形が往復するアニメは、「往復」命令をつかうと簡単につくれます

往復を入れる

1. 塗り色のある四角形のボタンをタッチし、
2. ドラッグして、四角形をかきます
3. ページの右側の「＋」をタッチし、メニューから、「続きのページを作ります」。１ページの内容と同じ２ページができます
4. 四角をタッチして選択し、
5. 上の辺のハンドルをドラッグして、画面の下に縮小します
6. 1ページをタッチして、1ページに移動します。
7. ページの左上をタッチし、「往復」をタッチします
8. 「往復」命令が、1ページにはいります
9. プレイボタンで動きを見てみましょう。1ページと2ページの間を往復します
10. アニメをとめるには、■「停止」ボタンを押します

アニメキャストに往復を入れる

アニメキャストの中に往復をいれれば、動く部品になります

1. 塗り色のある円のボタンをタッチし、
2. ドラッグして、円をかきます
3. 記憶ツールの上の「X↓」ボタンでカットし、円を記憶ツールにいれます
4. 下の「←ｑ」ボタンでアニメキャストにします。名前は適当でかまいません。円がアニメキャストになってはいります
5. アニメキャストの選択枠中心の「＋」をタッチし、「アニメを修正」を実行して、アニメの中を開きます
6. ページの右側の「＋」をタッチし、メニューから、「続きのページを作ります」。１ページの内容と同じ２ページができます
7. 円をタッチして選択し、
8. 角のハンドル■をドラッグして、拡大します
9. 1ページをタッチして、1ページに移動します。
10. ページの左上をタッチし、「往復」をタッチします。「往復」命令がはいります。
11. 画面の上の一番左のアニメの名前をタッチし、メニューから、「このアニメにもどる」を実行します
12. ページの時間を5秒にして、
13. プレイボタンで動きを見てみましょう。

３．繰り返しの使い方

動きが連続するアニメは「繰り返し」命令で簡単に作れます

1. 塗り色のある四角形のボタンをタッチし、
2. ドラッグして、画面の上のほうに四角形をかきます
3. ページの右側の「＋」をタッチし、メニューから、「続きのページを作り」ます。１ページの内容と同じ２ページができます
4. 四角をタッチして選択し、
5. 中心の「＋」プラスをドラッグして、画面の下に移動します
6. 1ページをタッチして、1ページに移動します。
7. ページの左上をタッチし、メニューから「繰り返し」をタッチします
8. 「繰り返し」命令が、1ページにはいります
9. プレイボタンで動きを見てみましょう。1ページと2ページの間を繰り返します
10. アニメをとめるには、■「停止」ボタンを押します

４．繰り返しの範囲指定

「繰り返し」命令を前後のページにリンクコピーすれば繰り返し範囲を広げられます

1. （上の続きをつくります）2ページをタッチして、2ページに移動します。
2. 塗り色のある四角形のボタンをタッチし、
3. ドラッグして、左側に四角形をかきます
4. ページの右側の「＋」をタッチし、メニューから、「続きのページを作ります」。2ページの内容と同じ3ページができます
5. 四角をタッチして選択し、
6. 中心の「＋」をドラッグして、画面の右に移動します
7. 1ページをタッチして、1ページに移動します。
8. 「繰り返し」命令を、タッチして選び、
9. 中心の「＋」をタッチして、次ページに「リンクコピー」を実行します。「繰り返し」命令が 、2ページにリンクコピーされます。これで繰り返し範囲が、1から3ページ（の直前）になります。リンクコピーボタン「←□」「□→」も同じです。
10. プレイボタンで動きを見てみましょう。1ページから3ページの間を繰り返します
11. アニメをとめるには、■「停止」ボタンを押します

５．繰り返しの回数指定

「繰り返し」や「往復」命令を選んで、中心の「＋」メニューで回数を設定できます

1. ヘルプメニューをタッチして、サンプルアニメの、「カニとたたかう」を開きましょう
2. 5ページをタッチして、5ページに移動します。ここに３回の繰り返し命令がはいっています。回数を変更するには次のようにします
3. 「繰り返し」命令をえらび、
4. 中心の「＋」をタッチすれば、回数が変更できます。０回にすれば、無制限に繰り返します
5. プレイボタンで動きを見てみましょう。繰り返しを無制限にしたので、ぬりつぶしがない状態を繰り返します。
6. アニメをとめるには、■「停止」ボタンを押します

６．ページにラベルをつける

• 9VAeは、ページにすきなラベル（文字列）をつけることができます。
• アニメをいくつかのシーンにわけてつくる場合、シーンの先頭ページにラベルをつけておけばわかりやすく、ラベル一覧から簡単に移動できます。
• ラベルは、制御命令のジャンプ先を指定する目的でもつかわれます
• ページにラベルをつけると、ページの左肩にラベルの先頭の文字がつきます

ラベルの作り方、ラベル一覧

1. ヘルプメニューをタッチして、サンプルアニメの、「カニとたたかう」を開きましょう
2. 7ページの左の上をタッチして、「ラベル入力」を実行します。「塗りあり」と入力 します。7ページに、「塗りあり」というラベルがつきます。
   どのページでも好きなラベルがつけられますが、同じラベルをつけると、赤い文字で注意されます
3. 現在のページでないページの左上を、タッチすれば、「ラベル一覧」のリストが表示されます。
4. （先頭ページ）をタッチすれば、先頭ページに移動します
5. 現在の ページの左上を、タッチすれば、往復や繰り返し命令を入力するメニューが表示されます。
6. 現在のページでないページの左上を、タッチすれば、「ラベル一覧」のリストが表示されます。
7. 「塗りあり」をタッチすれば、「塗りあり」ラベルのページに移動します

７．時間を指定してジャンプ

タイマージャンプ

ラベルとタイマージャンプを使えば、無限ループから特定の時間に指定したページにジャンプできます。音楽にあわせて次のシーンにうつるときにも使えます。

1. ヘルプメニューをタッチして、サンプルアニメの、「カニとたたかう」を開きましょう
2. 7ページの左の上をタッチして、「ラベル入力」を実行します。「塗りあり」と入力 します。7ページに、「塗りあり」というラベルがつきます。
3. 「＜＜」ボタンで、先頭ページに移動します
4. 「繰り返し」命令をえらび、
5. 中心の「＋」をタッチして、０回（無制限）にします。
6. 現在の ページの左上を、タッチして、
7. 命令を入力するメニューから、「タイマージャンプ」を入力します
8. 分岐する時間を、10秒にします。「タイマージャンプ」がはいります
9. プレイボタンで動きを見てみましょう。繰り返しのループから、正確に10秒たつと、次のラベル「塗りあり」にジャンプします

８．アニメに画面タッチをつける

クリックで進むボタン

9VAeのページにクリックで進むボタンをいれると再生が一時停止します。設定した場所をクリックすると次のページから再生します

1. 文字入力ボタンをタッチし、
2. 文字、A、B、Cをかきます。中心の「＋」をドラッグして、場所を移動します
3. ページの右側の「＋」をタッチし、
   メニューから、「続きのページを作る」を実行
4. もういちど「続きのページを作る」を実行します。＿1ページと同じ内容の、
   2ページ、3ページができます。
5. 文字 cをタッチして選択し、
6. 角のハンドル■をドラッグして、拡大します
7. 2ページをタッチして、2ページに移動。
8. 文字 Bをタッチして選び、
9. 角のハンドル■をドラッグして、拡大します
10. 1ページをタッチして、1ページに移動。
11. Aをタッチして選び、
12. 角のハンドル■をドラッグして、拡大します
13. 1ページの左上をタッチし、「クリックで進むボタン」をタッチします。
14. クリックで進むボタンの角のハンドル■をドラッグして、縮小し、文字 Bのうえに移動します。
15. 次ページにリンクコピー「□→」で、2ページに、ボタンをコピーします
16. 2ページの、クリックで進むボタンをドラッグして、文字 C のうえに移動します
17. 次ページにリンクコピー「□→」をタッチし、3ページにクリックで進むボタンをコピーします
18. 3ページの、クリックで進むボタンをドラッグして、右下に移動します
19. プレイボタンで動きを見てみましょう。クリックで進むボタンがあると、そのページで停止します
20. プレイすると1ページでとまります。クリックで進むボタンがある、文字 Bをタッチすれば、2ページに移動します
21. 文字 C をタッチすれば、3ページに移動します
22. 右下すみをタッチすれば、終了します

クリックで進むボタンがはいっていても下の場合はとまりません

• アニメキャストは動き続けます
• ページを「ひとこま」の場合、１回だけ再生してからとまります

クリックでジャンプするボタン

クリックでジャンプするボタンをクリックすると、前のラベルに戻ります。上の作業のつづきから実行します

1. 3ページの左上をタッチし、「クリックでジャンプするボタン」をタッチします。「前のラベル」とかかれたボタンがはいります。
2. ドラッグして、文字 Bのうえに移動します。
3. 2ページをタッチして2ページに移動します
4. 2ページの左上をタッチし、「クリックでジャンプするボタン」をタッチします。「前のラベル」とかかれたボタンがはいります。
5. ドラッグして、文字 Aのうえに移動します。
6. 1ページの左上をタッチし、ラベル入力から「A」を入力します
7. 2ページの左上をタッチし、ラベル入力から「B」を入力します
8. 3ページの左上をタッチし、ラベル入力から「C」を入力します
9. プレイボタンで動きを見てみましょう。
   クリックで進むボタンは次のページに、ジャンプするボタンは、指定したラベルに移動します
10. プレイすると1ページでとまります。クリックで進むボタンがある文字 Bをタッチすれば、2ページBに移動します
11. 文字 Cをタッチすれば、3ページCに移動します
12. Bをタッチすれば、前のラベルBにもどります
13. 文字 Aをタッチすれば、前のラベルAに もどり ます

ジャンプ先のラベル指定

クリップでジャンプするボタンのジャンプ先にラベル名を指定できます。

1. 1ページをタッチし、1ページに移動。
2. 1ページの左上をタッチし、「クリックでジャンプするボタン」をタッチします。「前のラベル」とかかれたボタンがはいります。
3. ドラッグして、文字 Cのうえに移動します。
4. 中心の「＋」をタッチして、「ラベル名指定」で、「C」にします。ボタンのジャンプ先が「C」にかわります。
5. 3ページをタッチして、3ページに移動します
6. 3ページの左上をタッチし、「クリックでジャンプするボタン」をタッチします。「前のラベル」とかかれたボタンがはいります。
7. ドラッグして、文字 Aのうえに移動します。
8. 中心の「＋」をタッチして、「ラベル名指定」で、「A」にします。ボタンのジャンプ先がAにかわります。
9. プレイボタンで動きを見てみましょう。クリックで進むボタンは次のページに、ジャンプするボタンは、指定したラベルに移動します
10. プレイすると1ページでとまります。文字 Cをタッチすれば、3ページ、ラベルcに移動します
11. Aをタッチすれば、ラベルAにもどります。文字をタッチして、その文字にジャンプするか、確かめましょう

---

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

この記事の動画は、無料ソフト9VAeきゅうべえで作成しています。Youtube動画とアニメGIFやAPNGを同じデータから作れるので便利。スマホでできる。

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）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

OnePをつかった簡単なアニメーションの書き方

OneP（One Picture）は、ひとコマアニメーションを保存する目的で開発された、ベクトルグラフィックスフォーマットです（拡張子.onep）。似たフォーマットに、SVG（SMIL）がありますが、OnePのほうが簡単です

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

内容：

OnePが使えるアプリ

• うるさいえほん（サイト）
• 9VAeきゅうべえダウンロード（スマホ、パソコン）

OnePの白紙の書き方

• viewBox=が用紙のサイズです。

<onep viewBox="0,0,350,150">
   <page>
  </page>
</onep>

<page のなかに、図形の情報をいれます

３つの色が違う正方形

• <path をつかって、赤、緑、青の四角をかきます。
• d=が頂点です。Mは新しい点のはじまり、Lは以降が絶対座標の意味です

<onep viewBox="0,0,350,150">
  <page>
  <path fill="red"    d="M50,50 L100,50 100,100 50,100" />
  <path fill="green" d="M150,50 L200,50 200,100 150,100" />
  <path fill="blue"   d="M250,50 L300,50 300,100 250,100" />
  </page>
</onep> 

• fill= をstroke=に変更すれば、線になります

２ページめをつくる

• 最初のページのpathに、id=をつけます
• 後ろのページのpathに、linkTo=で、リンクをつなぎます
• d=の中の座標を相対座標に変更しました。「l」小文字は以降が相対値であることを示します。同じ形をかくとき便利です（SVGの座標の書き方と同じです）

<onep viewBox="0,0,350,150">
  <page>
  <path id="p1" fill="red"     d="M50,50 l50,0 0,50 -50,0" />
  <path  id="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  id="p3" fill="blue"   d="M250,50 l50,0 0,50 -50,0" />
  </page>
  <page>
  <path linkTo="p1" fill="red"      d="M50,50 l50,0 0,50 -50,0" />
  <path  linkTo="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  linkTo="p3" fill="blue"   d="M250,50 l50,0 0,50 -50,0" />
  </page>
</onep>

2ページの四角を内側に移動させる

• ２ページの赤青の四角を内側に寄せました。再生すると内側に移動します

<onep viewBox="0,0,350,150">
  <page>
  <path id="p1" fill="red"       d="M50,50 l50,0 0,50 -50,0" />
  <path  id="p2" fill="green"  d="M150,50 l50,0 0,50 -50,0" />
  <path  id="p3" fill="blue"   d="M250,50 l50,0 0,50 -50,0" />
  </page>
  <page>
  <path linkTo="p1" fill="red"     d="M100,50 l50,0 0,50 -50,0" />
  <path  linkTo="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  linkTo="p3" fill="blue"   d="M200,50 l50,0 0,50 -50,0" />
  </page>
</onep>

３ページをつくり、赤青の四角をアニメキャストにする

• <page label="#-1"><cmd ctype="Exit" /></page>は、アニメキャストとの境界です。この後ろにアニメキャストの中身をおきます
• <use label=がアニメキャストです。at=は中心、vec1=,vec2=の２つめの数字は角度です（０度、90度）１つめの数字は長さです。
• <cmd ctype="BaseFrame" は基準枠

<onep viewBox="0,0,350,150">
  <page>
  <path id="p1" fill="red"       d="M50,50 l50,0 0,50 -50,0" />
  <path  id="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  id="p3" fill="blue"   d="M250,50 l50,0 0,50 -50,0" />
  </page>
  <page>
  <path linkTo="p1" fill="red"       d="M100,50 l50,0 0,50 -50,0" />
  <path  linkTo="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  linkTo="p3" fill="blue"   d="M200,50 l50,0 0,50 -50,0" />
  </page>
  <page>
  <path  linkTo="p2" fill="green"  d="M150,50 l50,0 0,50 -50,0" />
  <use label="anime" at="175,75" vec1="75,0" vec2="25,90" />
  </page>
  
  <page label="#-1"><cmd ctype="Exit" /></page>

  <page label="anime">
  <path fill="red"     d="M100,50 l50,0 0,50 -50,0" />
  <path fill="blue" d="M200,50 l50,0 0,50 -50,0" />
  <cmd ctype="BaseFrame" cp1="100,50" cp2="250,100" />
  </page>
</onep>

４ページをつくり、アニメキャストを回転させる

• ３ページの<useに id=をつけます
• ４ページの<use に linkTo=をつけてリンクをつなぎます。、label=がアニメキャストです。vec1=,vec2=の２つめの数字に360を加えると回転します

<onep viewBox="0,0,350,150">
  <page>
  <path id="p1" fill="red"      d="M50,50 l50,0 0,50 -50,0" />
  <path  id="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  id="p3" fill="blue"   d="M250,50 l50,0 0,50 -50,0" />
  </page>
  <page>
  <path linkTo="p1" fill="red"       d="M100,50 l50,0 0,50 -50,0" />
  <path  linkTo="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <path  linkTo="p3" fill="blue"   d="M200,50 l50,0 0,50 -50,0" />
  </page>
  <page>
  <path  linkTo="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <use id="u1" label="anime"  at="175,75" vec1="75,0" vec2="25,90" />
  </page>
  <page>
  <path  linkTo="p2" fill="green" d="M150,50 l50,0 0,50 -50,0" />
  <use linkTo="u1"  at="175,75" vec1="75,360" vec2="25,450" />
  </page>
  

  <page label="#-1"><cmd ctype="Exit" /></page>

  <page label="anime">
  <path fill="red"    d="M100,50 l50,0 0,50 -50,0" />
  <path fill="blue" d="M200,50 l50,0 0,50 -50,0" />
  <cmd ctype="BaseFrame" cp1="100,50" cp2="250,100" />
  </page>
</onep>

---

解説動画の作り方

この記事のひとコマ解説GIFは、フリーソフト9VAeきゅうべえの「ひとコマ機能」で作成しています。

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

• Win / Mac / Linux /ラズベリーパイ：無料ソフトでアニメを作ってみよう - Qiita
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Android / Chromebook：9VAeきゅうべえAndroid版（Google Play）
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明

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

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

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4 （スペースでウィンドウ指定）	デスクトップ
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 + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

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

音声合成でしゃべる解説動画の作り方

アニメ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	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

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

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

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

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

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

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

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

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

ひとコマアニメーションはアニメーションの革命か？！

「ひとコマアニメーション」は、2018年キッズプラザ大阪コンピュータ工房のワークショップでうまれた言葉だ。「うるさいえほん(こちら)」で体験できる

キッズプラザ大阪では、PEAS motch! を使ったアニメ制作ワークショップが行われ、 ３か月で、３０００点近いアニメ作品が制作された。その期間中の3月3日、あるボランティアスタッフTが「夢のある「ひとコマ」マンガです。」と感想欄に書いた。それをプランナーＳが「ひとコマでアニメーション」とは面白いとミーティングで紹介した。その場にいたアプリ開発者はその言葉に衝撃をうけた。

アニメーションは何コマも絵を書く必要があり、最小の「２コマアニメーション」は存在し得るが、「ひとコマアニメーション」は存在しないと思われる。ところが、線を書く途中をアニメーションにすれば１コマでもアニメができる。いわれてみれば当たり前だが、それが画期的なアニメーションだとわかってきた。下がキッズプラザの指導員がPEAS motch! で作成したひとコマアニメーションのサンプルだ。

１．ひとコマアニメーションは制作コストが圧倒的に低い

今まで手軽に作れるアニメーションといえば、任天堂DSの「うごくメモ帳」のような、絵を何枚か書いて再生する、というものだった。線を描くだけなので相当簡単なのだが、それでも、数枚絵を描く必要がある。ところが、

• ひとコマアニメーションは、１コマ描くだけである。

これは制作コストが静止画と同じということだ。WebページやPowerPoint など、 静止画はいろんな場面で使われている。アニメーションを作ったことがない人でも、静止画を作ったことはあるだろう。

• ひとコマアニメーションは、制作コストが静止画と同じ。

例を示そう。下は、 PEAS motch! 画面の説明図で、上はひとコマアニメーション、下が静止画である。

 上のアニメーションは、下の静止画を作成したあと、ボタンを１つ押すだけ。文字や矢印にアニメーション効果が自動的に追加される。アニメ化の時間は０．１秒。制作コストが同じなら、どちらを使いたいだろうか？ データサイズも小さい。上のアニメは６２KB。変化部分だけ記録するので静止画よりすこし大きい程度である。

今までのアニメーションは何コマか作成するので、静止画より必ず制作コストが高くなるわけだが、ひとコマアニメーションは、同じなのである。

• ひとコマアニメーションは静止画より優れている。

ひとコマアニメーションが静止画よりすぐれていることは、心理学的に検証されている。ひとコマアニメーションは、米国ではホワイトボードアニメーションといい、このような線を順番に書いていくアニメーションは単純な動画よりも一目をひき、理解度も高いことが実証されている。その制作コストが静止画と同じなら、つかわない理由はない。世の中の多くの静止画が、ひとコマアニメーションに置き換えられてもおかしくない。相当インパクトがあることがわかるだろう。

２．ひとコマアニメーションの定義

ひとコマアニメーションを次のように定義した。

• １コマのデータで作られるコンピュータアニメーション
• 書いた順番に線や文字が書かれていく

さらに、次のような機能があってもよい。

• 消しゴムがあり、一部を消して書き換えることができる。その書き換えも再生時に再現される。
• 背景に絵や写真が入れられる。
• 制作過程の単なる録画ではなく、線の形や色、再生時間、再生の順番など、後から自由に修正できる。

ひとコマアニメーションらしきアニメーションは昔からあった。

• 絵描き歌
• 絵を描く漫談
• ホワイトボードアニメーション
• 絵の制作過程を録画した動画（タイムラプス）

３．ひとコマアニメーションはアニメーションか？

上の例で、「絵の制作過程を録画した動画」はアニメーションと呼ぶには抵抗があるかもしれない。絵をかく様子を撮影した実写だからだ。

これについて、静止画制作が目的で途中の様子を撮影したものなら単なる動画かもしれないが、アニメーション制作を目的に作られたもので、書いた時間と異なる時間で再生されたら、アニメーションだと考える。

アニメーションは、従来の２次元アニメーション（セルアニメ、人形アニメ・・）とコンピュータグラフィックスで作成する３次元アニメーションに分類されていた。ひとコマアニメーションはそのどちらにも属さない新しいジャンルのアニメと考えられる。

ひとコマアニメーションの絵は、従来のアニメーションのコマとは異なった作り方になりそうだ。車のアニメーションを例に説明してみる。

従来のアニメーションでは、１コマめに車を描いたあと、次のコマでは、その車を少し移動、変化させ、車の動きを表現するだろう。

ひとコマアニメーションは、違う考え方をすべきだ。

ひとコマアニメーションでは、車を描いたあと、その余白に、車以外の情報を書き加えていく。どんな人が乗っているのか、何を運んでいるのか、どんな道なのか、どこに行くのか、これから何が起こるのか、そういった情報を順番に追加していく。

ひとコマアニメーションを再生すると、その情報が徐々にわかっていき、最後に全体が明らかになる。といったストーリーをもった構成がひとこまアニメーションらしいと考える。車だけの動きよりも、車のいる場面全体を描くほうがおもしろいだろう。

別の言葉で言えば、ひとコマアニメーションは、複雑な事件を１枚の絵で説明する情報整理の方法と考える。ひとコマアニメーションは長編アニメを作る方法ではない。長いストーリーを１コマにまとめる表現で、ショートアニメーションの技法のひとつだろう。これは短い空き時間でスマートフォンをみる現代向きのアニメーションといえる。

何コマも描いて動きを表現する今までのアニメーションの作り方ではなく、一枚の絵にどんな内容を含めるか、ストーリーを考えて作ったほうが魅力的なひとコマアニメーションになるだろう。

ひとコマアニメーションは今までのアニメーションとはジャンルの異なるコンピュータアニメーションである。

４．黒板書きはひとコマアニメーションである

情報を１枚の絵に順番に表現していく方法がひとコマアニメーションだと考えると、学校の授業で先生が黒板に絵をかいていく様子はひとコマアニメーションだろう。実際、米国ではこれをホワイトボードアニメーションと呼んでおり、通常の動画よりも、説明をわかりやすく伝えられる動画として注目されている。

 ５．グラレコ はひとコマアニメーションにすべきだ

黒板書きがひとコマアニメーションなら、ノートの手書き、スケッチなど、ペンや筆で書くものもすべてひとコマアニメーションになるはずだ。以下のグラフィックレコーディングもひとコマアニメにした方が、順番がわかって理解しやすい。タイムラプスよりも、時間を調整して再生するひとコマアニメのほうがよい。

グラフィックレコーディングをやってみました！

 ６．Draw My Life はひとコマアニメーションで簡単に作れる

ホワイトボードに自分の人生を書いていく、Draw My Life 動画も、ひとコマアニメーションである。自分の人生を紹介した動画は、Youtube で評判になっており、自己ブランディング手法として注目されている。2013年米国ではじまったらしい。

自分の人生を描く、Draw my lifeの魅力 | UPLOAD

このように、絵ができあがっていくアニメは昔からあった。それなら ひとコマアニメーションはどこが新しいのか。

従来の黒板やノートやスケッチは、書き終わったあと、静止画になってしまう。それを動画にするため、ホワイトボードアニメーションや Draw My lifeではビデオカメラを使い、動画編集によってアニメーションを作っていた。そのため、制作には結構手間がかかっていた。

ひとコマアニメーションは違う。静止画を描いた時点でアニメが完成している。あとから編集できる。これは座標が記録されたコンピュータアニメーションであるからだ。そこが違う。アニメーションは新しくないが、アニメーションの仕組み、記録、再生、編集方法が違う、制作コストが静止画並みに下げられる。

７．アニメーションをベクトルで記録する

黒板書きを記録、再生する方法が、今までは、動画撮影しかなかった。米国のホワイトボードアニメーションの制作では、ホワイトボードに書く様子を動画に撮影し、動画編集を行って仕上げていた。 PEAS motch! は、線のデータをベクトル（図形情報）で記録し、線がのびていく様子をその場で計算して再生する。そのため、動画編集を行う必要がない。 「うるさいえほん」はJavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、ONEP（One Picture）というフォーマットで座標データが記録される。

８．手書きメモはひとコマアニメーションに拡張される

今、スマホで写真を撮影し、その上に手書きできるアプリがある。たとえば、

MetaMoJi Noteでできること | あらゆるタブレット端末で使える手書きノートアプリ MetaMoJi Note

など、多くは静止画だが、当然アニメーションになったほうが表現力が高くなり、より楽しくなる。写真上の手書きメモは、ひとコマアニメーションにかわっていくだろう。

 スマホアプリ picsart

写真加工アプリで有名な、picsart は、ひとコマアニメーションが作成できる。ただ、録画ボタンを押して絵を書く様子を記録するという作り方で、あとからアニメを編集することはできない。

• 『PicsArt』（ピクスアート）で作業内容を動画で録画する方法 | ドハック

スマホアプリ Gocco Doodle!（らくがキッズ）

GooglePlay2014年上半期ベストアプリに選ばれたフリーソフト「らくがキッズ」は、絵を描く過程を再生する機能がついている。絵はベクトル情報で記録しているようで、ひとコマアニメーションといってよい。再生ボタンをおすとのびていく線があり、アニメーションのような特殊効果をつくることができる。

• らくがキッズ

同じようなアプリには、以下のようなものがある。

• 【動画編集】VideoScribeで説明・講義用動画を作成しよう(1) : GameTechDiary

• [iOS11] 手書きアニメ/ショートビデオを「メッセージ」で送る:Digital touchの使い方 | メッセージ(iMessage/SMS/MMS)の使い方 | iPod/iPad/iPhoneのすべて

• ASCII.jp：Windows 10「フォト」アプリが大きく進化、手書きの過程を動画で保存できる｜ズバッと解決！ Windows 10探偵団

• 手書きアニメ動画がつくれるフリーソフト「9VAe」は初心者でも超簡単でびっくり！

• コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開！ - paiza開発日誌

９．ひとコマアニメーションのデータフォーマット

ひとコマアニメーションは、１画面の図形データがあればよいので、SVGのような既存のベクトルフォーマットがそのまま使える。それを読み込んで、再生するライブラリがあれば、ひとコマアニメーションが実現できる。

一方、再生時間を細かくコントロールしたければ、再生スピードの情報の追加が必要になる。再生ライブラリを外部からコントロールするといった形になるだろう。

 PEAS motch! は9VAEきゅうべえアニメ研究所が開発した、9VAeLib ライブラリを用いている。9VAeLib は、SVGベースの図形データを読み込んで時間情報を追加し、アニメーションにして再生できる。 「うるさいえほん」はJavaScriptで記述されたひとコマアニメ作成Webアプリである。このデータは、SVGを簡略化した「ONEP」というテキストフォーマットで座標データが記録されている。

JavaScript で実現した「うるさいえほん」

ひとコマアニメーションの線のデータを記録、再生する仕組みは、比較的容易に、JavaScriptで表現できる。静止画を扱ういろんなサイトに「ひとコマアニメーション」を組み込んでアニメーションの活用範囲を広げていくことが考えられる。

• うるさいえほんを使ってみる
• １コマアニメをJavaScriptで実装 - Qiita

 

10．ひとコマアニメーションに描く内容

 ここでは、ひとコマアニメーションに適した絵は、どんな絵かを考えてみたい。ひとコマアニメーションは、絵に対して、新しい情報をどんどん追加していく作り方が考えられるが、どんな情報を追加していくのがよいだろうか。

• 情景描写：これがどんな場面なのかを、順番に説明していく
• 効果：光とか爆発とか波線とか色をかえて線を書き加えていくだけでも楽しい
• 増えていく：同じ種類のものが増えていく
• 場面転換：画面をまっくろにぬるなど
• ・・・・・

 塗るか消しゴムで消すか２つの方法

• 線を書き加える
• 線で塗ってから消しゴムで一部を消して形をつくる

背景写真に書き加えていく

• 背景ページに写真をいれ、写真をなぞって線を加えていく
• 逆にスケッチ画から写真になるという表現もおもしろい

複数の人で順番に絵を付け加えていくひとコマ寄せ書きアニメーション

• 順番に書く人が交代して絵を描き加えていく。新しい要素が追加されていくため、再生したとき、絵の趣旨が意外な方向に転換していくおもしろさがでてくる。NT京都2018 でやってみたが、これはおもしろそうだ。下のアニメはNT京都2018でその場にいた３名の方に書いてもらった。最初の水色の静止画に新しい情報が追加されている。時間を制限すると緊張感が出ておもしろそうだ。

  

順番にひとコマアニメーションを書いていく手法は初対面の人のコミュニケーションツールとしてもつかえそうだ。グループでひとコマアニメーションを作成し、みんなでアニメーションを見るという運営が考えられる。ちなみに、太さの変わる線は、ワコムのペンタブレットで書いている。「続きをどうぞ」とペンを渡すと書いてくれた。

ネタアニメもできそうだ。Youtube動画が簡単に作成できるし、ひとコマアニメーション作家がうまれそうだ。Draw My Life 動画の作り方も多いに参考になる。

11．「ひとコマアニメーション」をビジネスで使う

 Ｗｅｂ制作現場では、画面を設計するときに、ここに写真を入れ、ここにイラストをいれて・・・といった検討が行われているだろう。そこには「イラスト」と同じコストで作れ、ホワイトボードアニメーションと同じ効果をもつ「ひとコマアニメーション」も検討に入れるとよいだろう。

クライアントから、トップの部分には一目をひくために「アニメーション」を入れたいと要望があるかもしれない。このとき「ひとコマアニメーション」でもよいですか？と提案できるだろう。それが認められれば、静止画と同じコストで作れることになる。

「ひとコマアニメーション」は、「静止画と同じコストで制作できること」が重要である。「ひとコマアニメーション」と同じアニメーションはいろんな方法で作ることができる。たとえば、絵を書くようすをビデオ撮影し、あとから動画編集して作ることができる。この場合、絵を書いたあと、動画編集する手間が余分にかかり、制作コストは静止画と同じではない。これは「ホワイトボードアニメーション」と呼べばよい。PEAS motch! の上で同じ絵を書けば、アニメにするのは「鉛筆ボタン」を押すだけである。そのようなアニメーションを「ひとコマアニメーション」として区別するとよい。

「ひとコマアニメーション」は従来のアニメーションとは別の新しいジャンルのアニメーションになるだろう。ひとコマアニメーションを制作する人はアニメータではなく、静止画を書くイラストレータが主体になるだろう。

12．「ひとコマアニメーション」はアニメーション教育の第一歩

日本のアニメーション制作について、デジタル化が遅れていることが問題になっている。これは、アニメーション制作の基本が紙の上に何枚もコマを書いていくことから始まっているからだ。紙の上に絵を書いてスキャナーで入力してからデジタル作業を行うと、最初からデジタル入力するより手間がかかり、国際競争力が低下するのではと危惧されていた。 

それなら「ひとコマアニメーション」から始めるとよいのではないか。ひとコマアニメーションはデジタル入力によって制作コストが静止画と同じになる。これでアニメーションに興味をもち、本来のアニメーションに発展していくという学習過程をたどれば、自然にアニメーションがデジタル化されていくだろう。

13．キッズプラザ大阪にひとコマアニメーション制作コーナー設置

2019年７月にキッズプラザ大阪の３階デジタル体験広場アクアに、ひとコマアニメーション制作端末が５台設置され、１日１５０〜２００本のアニメが作られている。制作しているのは、４歳児から小学生の子供達だ。(1)１枚絵を描いて (2)アニメーションボタンを押し (3) アップロードボタンを押せば、大画面で１コマアニメーションが再生される。現在は、「PEAS motch! one」から、より簡単な「１コマアニメーター？」に切り替えられている

14．コマ撮りアニメーションとの比較

今までアニメーション制作ワークショップでは、下のようなアプリをつかって、コマ撮りアニメがつくられてきた。

• StopMotionStudio
• KOMA KOMA
• レゴをつかった動画の作り方

それらを、ひとコマアニメーションと比較すると、以下のようになる

項目	ひとコマアニメ	コマ撮りアニメ
用具の準備	不要	複数枚の紙やペン、人形や、ブロックが必要
事前打ち合わせ	不要	グループ制作になり、絵コンテをつくる必要あり。そのためのメンターが必要
制作	各自、自分のペースで絵を描く	人形を動かす人、シャッターを押す人などの分担が必要。 何コマも撮影するので忍耐が必要
上映	完成ボタンを押す	動画出力に時間が必要
データサイズ	小さい	動画出力するのでサイズが大きい
片付け	不要	毎回片付けが必要
表現力	なんでも描ける、１コマ描けばよい	人形アニメは、そこにあるものしか登場できない。絵を描く場合はなんでも描けるが、何コマも描く必要があり、大変。人形が動くおもしろさがある

タブレットが用意できるなら、ひとコマアニメーションが簡単

• １コマアニメーター？ダウンロード(無料)

Winkの使い方：ひとコマ解説

Winkの使い方を説明します。CapCutは、多くの機能が有料になりましたが、Winkは無料で多くの機能が使えます。操作はCapCutとほぼ同じで、AI機能が特長です。

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

内容：

Wink とは

• Wink は、Meitu社が開発した無料でつかえる動画編集アプリです。スマホ版、パソコン版（Windows/Mac) があります。

• Wink iPhone / iPad / Mac 10.15- ダウンロード
• Wink Android / Chromebook ダウンロード
• WinkStudio Windws ダウンロード

Winkと9VAeの関係

• Winkは用意されたAI機能を用いて動画を簡単に修正するアプリです。
• 9VAeきゅうべえは、動画素材が作れるモーショングラフィックスアプリです。イラストや写真を読み込んでWink用の動画素材を自作できます。Winkにはない素材や効果を使いたい場合、9VAeでフリー素材から作れます。プロは Adobe Premiere と After Effects を組み合わせて動画作成しますが、Wink と 9VAe も同じ関係です。この記事の解説動画も9VAeです。

Winkで動画を開く

Winkで動画を開く方法を説明します。

1. アプリを起動したら、「新規」ボタンをタッチ
2. アクセス許可が表示された場合、「すべての写真に許可」しておくとよいでしょう。
3. 設定したら「開始」ボタンをタッチします
4. 編集したい動画を選んで、
5. 「開始」ボタンをタッチ
6. 下の「動画編集」をタッチすれば、動画編集ができます

Winkではめ込み合成（オーバーレイ）

1. 動画を開いたら、下の「動画編集」をタッチします
2. 下のボタンの列を左方向にドラッグし、
3. 「オーバーレイ」ボタンをタッチします
4. はめ込みたい動画を選んで、
5. 「開始」ボタンをタッチします。選んだ動画が、上に重なります。オーバーレイのトラックが、下のタイムラインに追加されます
6. 一部分だけはめ込み合成したい場合は、下の「切り抜き」ボタンをタッチします。切り抜き画面になります。
7. 「クィック」ボタンをタッチし、
8. 合成したい部分を、なぞります。適当になぞれば、AIがエッジを判定してくれます
9. 右側の「チェック」ボタンで、切り抜き処理がはめ込んだ動画全体に反映されます。キャンセルは左側の「X」ボタン
10. 背景が透明になりました。上の画面でドラッグすれば、はめ込み画像の位置やサイズを調整できます。ドラッグで移動するときに、中心になると線がでてきて、中央寄せとか簡単です

Winkで分割と削除

1. タイムラインは、左右にドラッグすれば、表示場所がかえられます。左にドラッグして、分割する場所に 移動しましょう
2. 分割したいトラックを選んで、
3. 「カット」ボタンをタッチすれば、分割されます
4. 削除したい場所を選んで、「削除」ボタンで削除されます
5. 右側の「チェック」ボタンをタッチします
6. トラックを編集するモードが終了し、オーバーレイのトラックが見えなくなります

Winkで再生と保存（動画出力）、ホームに戻る

1. プレイボタンで再生します。
2. 保存ボタンで動画がアルバムに保存されます。保存の右側の「・・・」ボタンで、動画の種類が設定できます。出力した動画は、iOS/iPadの場合、「写真」アプリで開いて、「アルバム＞最近の項目」でみえます。選択して共有ボタン「↑」で「ファイルに保存」で好きなフォルダに保存できます。
3. 「続ける」ボタンをタッチすれば、保存先のアルバムが開きます。
   左上の「＜」ボタンでホームにもどります
4. 作成したプロジェクトは、下の「私」の中のフォルダにはいります

タイムラインの拡大・縮小

1. トラックをダブルタップして、トラック編集モードにします
2. スマホ版では、地ラックの上の目盛りを２本指でさわって、そのまま指の間を広げると拡大（ピンチアウト）
3. ２本指を近づけると縮小（ピンチイン）。画像の拡大・縮小と同じ操作です

Winkで縦横変換

1. 動画を開いて「動画編集」モードにします。下のボタンを左にドラッグして、
   「キャンバス」をタッチします
2. 縦型にするには、「9対16」をタッチします。
3. 画面を２本指で、拡大、縮小することができます。
4. 「チェック」ボタンで処理を終了します
5. 「保存」ボタンで動画が保存されます。保存の右側のサンテンボタンで、動画の種類が設定できます

Winkで画像を回転

1. 動画を開いて「動画編集」モードにします。下のボタンを左にドラッグして、
2. 「オーバーレイ」をタッチします
3. 回転したい画像のトラックを選び、
4. 画面を２本指でドラッグして、回転させます。拡大、縮小もできます。
5. 「チェック」ボタンで処理を終了します

Winkで速度調整

1. 動画を開いて「動画編集」モードにします。下のボタンを左にドラッグして、
2. 「速度」ボタンをタッチします
3. 目盛りを右にトラックすれば、スロー再生になります
4. 目盛りを左にトラックすれば、早送り再生、になります。
5. 「チェック」ボタンで、スピード調整を終了します

Winkで色、明るさ調整

1. 動画を開いて「動画編集」モードにします。下のボタンを左にドラッグして、
2. 「調色」をタッチします
3. 「明度」で明るさを、「彩度」で色の濃さを調整します。下のスライドで、強めたり弱めたりできます。
4. 「チェック」ボタンで処理を完了します

Winkで半透明

• オーバーレイではめ込み合成したトラックを選んで、「不透明度」ボタンをタッチすれば、半透明にすることができます。透明度は左右のバーで調整できます

Winkで音をいれる

1. Winkで、動画を開きます。下のボタンを左にドラッグして、
2. 「音声」ボタンをタッチします
3. 「インポート」ボタンをタッチします
4. 上のタブから、「ファイルから」を選び、
5. 「ファイルから音楽をインポート」します。動画から音楽をインポートすることもできます。フリー素材の音をダウンロードする方法はこちら
6. ファイルから音楽を選びます
7. 「使う」ボタンをタッチします
8. 音がはいりました。下のボタンで音量などを調整できます。「チェック」ボタンで、処理を終了します

Winkで音を取り出す、カットする

1. 動画を開いて「動画編集」モードにします。下のボタンを左にドラッグして、
2. 「音声」ボタンをタッチします
3. 音声トラックが表示されます。タイムラインを左右にドラッグして、音をカットしたい場所に移動します
4. 音をカットしたい場所の、最初と最後２箇所で「カット」ボタンをタッチします
5. 音をカットしたい場所を選んで、
6. 「削除」ボタンをタッチします。音がカットされます。
7. 「チェック」ボタンで、処理を終了します

Winkでモザイク

1. 動画を開いて「動画編集」モードにします。下のボタンを左にドラッグして、
2. 「モザイク」ボタンをタッチします。
3. モザイクされる範囲が、画面上に表示されるので、ドラッグして、モザイクをかけたい場所に移動します
4. 「チェック」ボタンで、モザイクの種類選択を終了します
5. 上の画面で、モザイクの範囲を変更できます。
6. 下のタイムラインの、モザイクトラックの左右の端をドラッグすれば、モザイクをかける時間を修正できます。
7. 「チェック」ボタンでモザイク処理を終了します
8. 「保存」ボタンで、MP4動画がアルバムに出力されます

Winkでマスク

1. Winkで、動画を開きます。下のボタンを左にドラッグして、
2. 「オーバーレイ」ボタンをタッチします
3. マスクをつけたい画像のトラックを選び、
4. 「マスク」ボタンをタッチします
5. ドラッグして、マスクの種類を選びます
6. ハートを選びました
7. 画面を２本指でドラッグして、拡大したり、移動できます。
8. 「チェック」ボタンで、マスク処理を終了します

Winkでコピー

1. 動画を開いて「動画編集」モードにします。
2. 動画のコピーしたい部分をタッチ（一部をコピーしたいなら、さきに分割しておきます）
3. 「コピー」ボタンをタッチ。これで右側に１つコピーができます。
4. ドラッグして場所の入れ替えができます

Wink Windows版

Wink Windows版（ダウンロードはこちら）は、英語、中国語で、日本語版はないみたいです。

英語	日本語
Get Started	新規
RetouchRetouch	リタッチ
Edit	動画編集
Import	インポート
Audio	音声
Mine	私

せりふ、口パクキャラクタの作り方

作り方

ハートの背景素材の作り方

作り方

作り方

---

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

この記事の動画は、フリーソフト9VAeきゅうべえの「ひとコマ機能」で作成しています。

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

• Win / Mac / Linux /ラズベリーパイ：9VAeきゅうべえダウンロード
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Android / Chromebook：9VAeきゅうべえAndroid版（Google Play）
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明

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

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

画面キャプチャ方法

OS	画面キャプチャ方法	保存先
Windows	Print Screen キー Shift + Windows + S  無料ソフト「kioku」	クリップボード
Mac	Shift + Command + 4 （スペースでウィンドウ指定）	デスクトップ
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 + ウィンドウ一覧キー（上の中央のキー）	マイファイル > ダウンロード

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

音声合成でしゃべる解説動画の作り方

アニメ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	AviUtl	連番PNG または MP4
Mac/iPhone/iPad	iMovie	MP4 または　QuickTime(古いMac)
Android	PowerDirector	GIF または MP4

作り方

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

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

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

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

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

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

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

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

2025年賀「データは軽いが、機能はヘビーきゅうべえ」アニメの作り方

ベクトル方式で「データは軽いが、編集機能はヘビー級」という2025年賀アニメを 9VAeきゅうべえで作りました。制作手順を説明します。時間は３０分くらいです。

[9VAeで作成した解説動画 youtube]のサイズをみると、データの軽さがすごい

	9VAe（SVG）	動画（MP4）
データサイズ	３MB	８０MB（1080p 30fps）
せりふの変更	かんたん	困難

他のアニメの作り方はこちら。他の年賀アニメ：2025へび、龍、うさぎ、 とら、うし、ねずみ、いのしし

内容：

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

• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Android / Chromebook：9VAeきゅうべえAndroid版（Google Play）
• Win / Mac / Linux /ラズベリーパイ：9VAeダウンロード
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明

２．完成したヘビの絵を描く

1. 左側の「鉛筆」ボタンをタッチし、ヘビをかきます。
2. 線の色は、右側のパレットで指定します。ヘビの舌は赤い色にしました。 パレットが消えていた場合は、右下の「もどす」をタッチしてください
3. 「塗りのある多角形」を使って、白い多角形をかき、重なった線をかくします。
4. 「塗り色」は白、
5. 「線の種類」をなしにしてかきます

３．前に続いたページを作る

1. ページの左側の「＜」ボタンをタッチし、「前につづいたページを作る」を実行します。順番にできあがる前の状態をつくっていきます
2. ヘビの舌をえらび、
3. 「消しゴム」ボタンで削除します
4. 表示メニューから、「前後のページを重ねて表示」を実行します。後ろのページの線が紫色で表示されます
5. まず、目を選んで左側に移動します。選択して中心の「＋」をドラッグすれば移動できます
6. ヘビの形を、目の位置を参考にして、すこし前の状態に変形します。点選択モードにして、まとめて選んで移動したり、引き伸ばしなどをつかって形を整えます

• 点を選択する方法はこちら、線の形を変形する方法はこちら
• 「中心点の移動」「回転」「引き伸ばし」「端をゆるくとめる」「なめらか」といった処理を使いました

４. どんどん前のページを作る

• 同じ方法をつかって、前の状態をつくっていきます
• 目は、進む方向を見るように動かすとよいです。
• 点は、ページの間で、直線的に移動します。各点が交差しないように、点の移動を考えながら変形しましょう
• ときどき、プレイボタンで、変化を確認しながら変形しましょう
• ページの下の左右のスクロールバードラッグすれば、形の変化をゆっくり動かしてみることができます
• 変化がおかしい点を見つけたら、その点を選んで、調整メニュー「あいだの形にする」を実行すれば、前後のページの中間の形にできるので、そこから修正するとよいでしょう
• ７ページのアニメを作りました

５. ページの時間を調整

1. １ページの番号をタッチし、「ページの指定ここから」を実行します。
2. 最後のページのボタン「＞＞」をタッチします
3. 最後のページの番号をタッチし、「ページの指定ここまで」を実行します。
4. ページの時間をタッチし、「まとめて調整する」を実行します。７ページの時間を３．５秒にしました。各ページの時間を微調整すれば、さらに、いきいきとした動きになります

６．ヘビをアニメキャストにする

1. 左側からドラッグして、ヘビの舌以外を選びます
2. 選択枠の中心のメニューから、「つながった図形を選択」を実行します。７ページのヘビが選ばれます。
3. 記憶ツールの「切り取り」ボタンをタッチして、７ページのアニメを記憶ツールにいれます
4. 記憶ツールの下の、アニメキャストにする「←ｑ」ボタンをタッチします。名前はヘビにしましょう。
5. 前にリンクコピーするボタン「←□」で、作られたアニメキャストを前のページにコピーします
6. いらないページを削除します。５ページの番号をタッチして、「ページの指定ここから」を実行します。
7. 先頭ページに移動するボタン「＜＜」をタッチします
8. １ページの番号をタッチして、「ページの指定ここまで」を実行します。
9. ページの番号をタッチし、「まとめて切り取る」を実行してページを削除します

７．文字を入れてひとコマにする

1. 文字入力ボタン「A」をタッチし、「データは軽いが、機能はヘビー」を入力します。
2. 次のページにリンクコピー「□→」で、文字を２ページにコピーします
3. 1ページの時間をタッチし、「ひとコマ」に設定します
4. 2ページの時間をタッチし、「ひとコマ」に設定します
5. 一度プレイすれば、文字や線がでてくるひとこまアニメになります。（文字や線に書き順属性が設定され、動きグラフがつくられます）
6. 1ページの時間を、「アニメキャストの時間（3.5秒）」に設定します。
7. 2ページでは、アニメキャストの最後の状態にしたいので、アニメキャストを選んで、中心のメニューから「アニメの修正」を実行します。アニメキャスト「ヘビ」の中が開きます。
8. 最後のページに移動するボタン「＞＞」をタッチします
9. 最後のページの時間を、１０秒にしましょう。
10. 上の太い文字の左をタッチし、メニューから、「このアニメにもどる」で元のアニメにもどります
11. プレイボタンで再生してみましょう

８. アニメGIF / 動画出力

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

 Windows / Linux で動画出力

• 「動画出力」するためには「FFmpeg」が必要です。Windowsでは、FFmpegをダウンロードし、その場所を9VAeに登録します。LinuxはダウンロードだけでOK

Youtubeへの投稿

• MP4動画出力したものを、Youtubeから選んで投稿します

９．印刷する 

• 印刷機能をもったアプリを使います。9VAeはSVG画像、PNG画像を出力できます。印刷機能はありません。

Windowsの場合

1. LibreOffice Impress または Draw を使うのが簡単です。ダウンロードはこちら
2. 9VAeの印刷したいページ１ページだけ保存します。静止画のSVGイラストができます。
3. LibreOffice Impress または Draw を起動。「挿入メニュー＞画像」。保存したSVGを選びます。9VAeでCtrl+C（コピー）、ImpressでCtrl+V（貼り付け）でもよいです
4. 適当にレイアウトして印刷

Macの場合

1. プレビューアプリを使うのが簡単です。
2. 9VAeの印刷したいページに移動する。
3. プレビューアプリを起動。「ファイルメニュー＞スクリーンショットを撮る＞選択部分」を実行。
4. 9VAeの画面を選択すれば、選択範囲がプレビューにコピーされます。
5. プレビュー「ファイルメニュー＞プリント」

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

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

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

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

アニメーション制作の革命？：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）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。