地図を動かす動画の作り方

地図を動かす動画の作り方を説明します。

パソコンやスマホの無料アプリで作れます。いらすとやを動かす方法はこちら。ダンス動画の作り方はこちら。 しゃべる解説はこちら。

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

内容：

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

アプリはフリーソフト9VAeきゅうべえを使います。下からダウンロードできます

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

操作方法

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

２．OpenClipart から日本地図を読み込む

ブラウザで、248220、map、OpenClipart を検索

操作方法

1. SVGボタンを右ボタンでクリックし、メニューから名前をつけてリンク先を保存を実行。スマホの場合は、長押しして、画像をダウンロードでもかまいません
2. ファイルメニューの「開く」でダウンロードしたファイルを開きます
3. ページの右側の「＋」をタッチし、メニューから「続きのページをつくる」をタッチし、２ページを作ります
4. 外からドラッグして全部選びます。
5. 左下の「ー」ボタンを、何回かタッチし、表示倍率を小さくします
6. 選択枠の角のハンドルをドラッグし、日本地図を拡大します。大阪府が中央にくるように位置も調整しましょう。
7. 左下の虫眼鏡ボタンでもとの倍率に戻ります
8. ページの右側の「＋」をタッチし、メニューから「続きのページをつくる」をタッチし、３ページを作ります
9. 外からドラッグして見えている部分を選びます。
10. 左下の「ー」ボタンを、何回かタッチし、表示倍率を小さくします
11. 選択枠の角のハンドルをドラッグし、日本地図を拡大します。大阪府が中央にくるように位置も調整しましょう。
12. 左下の虫眼鏡ボタンでもとの倍率に戻ります

３．ウィキペディアから大阪府の地図を読み込む

ブラウザで、map of osaka SVGを検索

操作方法

1. 地図を右ボタンでクリックし、メニューから「名前をつけてリンク先を保存」を実行。画像ではなく、SVGファイルを、ダウンロードする点に注意してください
2. 「9VA」ボタンのメニューから、「9VAアニメをいれる」でダウンロードしたファイルを開きます。「9VA」ボタンから読み込むと、アニメキャストというパーツになります
3. 読み込んだ地図の選択枠の角のハンドルで大きさが変更できます。中心の「＋」のドラッグで場所がかえられます。日本地図の大阪府の上に、重なるように調整

４．大阪府の外枠を消す

ウィキペディアの地図に枠がついているので削除しましょう

操作方法

1. 選択枠の中心の「＋」をタッチし、メニューから、「アニメの中を修正」をタッチします。大阪府の地図の中身が開きます
2. 地図を選んで、
3. 左側の点選択ボタンをタッチします。地図の中の点が全部表示されます
4. 外側の枠線の点を、一部、囲んで選択します。
5. もう一度、点選択ボタンを押せば、外枠の線以外の点が選択からはずれます
6. もう一度、点選択ボタンをタッチすれば、枠線が選択された状態になります。
7. 削除ボタンで、枠線が消えます
8. 上の太い文字は、ファイル名や、アニメキャストの名前です。一番左をタッチし、メニューから「このアニメにもどる」をタッチすれば、もとのファイルに戻ります。

５．埋立て地を拡大

操作方法

1. ページの右側の「＋」をタッチし、メニューから「続きのページをつくる」をタッチ。４ページを作ります
2. 外からドラッグして見えている部分を選びます。
3. 左下の「ー」ボタンを、何回かタッチし、表示倍率を小さくします
4. 選択枠の角のハンドルをドラッグし、大阪府の地図を拡大します。埋立て地が中央にくるように位置も調整しましょう。
5. 左下の虫眼鏡ボタンでもとの倍率に戻ります。埋立て地を拡大しました。
   このなかの、夢洲で、万博がおこなわれます

６．夢洲の形を追加

操作方法

1. ページの右側の「＋」をタッチし、メニューから「続きのページをつくる」をタッチ。５ページを作ります
2. 大阪府の地図を選択
3. 選択枠の中心の「＋」をタッチし、メニューから「アニメの中を修正」をタッチします。大阪府の地図の中身が開きます
4. 左下の「＋」ボタンで画面を拡大します
5. 地図を選んで、
6. 左側の「点選択」ボタンをタッチします。全ての点が表示されます
7. 夢洲の点の一部を選んで、
8. もう一度点選択ボタンをタッチします。夢洲の点だけが表示されます
9. 記憶ツールの上の「コピー」ボタンをタッチすれば、夢洲の形が記憶ツールにはいります
10. 上の太い文字の一番左をタッチし、メニューから「このアニメにもどる」をタッチすれば、もとのアニメに戻ります。
11. 記憶ツールの下の、「貼り付け」ボタンから「複製する」で、夢洲の形がはいります

７．夢洲の色を変える。ふちを強調する

操作方法

1. 記憶ツールからいれた形を、地図の正しい位置にはまるよう、大きさや位置を調整します
2. 色は、右側の、「塗り色」パレットで設定できます。
3. 下の「線の太さ」ボタンで、線の太さが変えられます
4. 「線の種類」ボタンをタッチすれば、メニューから、線にぶれの効果をつけたり、影をつけたりできます

８．図形、矢印、文字をいれる

操作方法

1. 線の色を設定します。
2. 「線の種類」で、ふちをつけます。
3. ふちの色は、塗り色の右側のボタンです。
4. 左側の、「円をかく」ボタンをタッチし、夢洲の上に、リングを書きましょう
5. 矢印をいれるには、「折れ線」ボタンをタッチします。
6. 「矢印の種類」ボタンで、右向き矢印を選びます。
7. 開始点、
8. 終了点の順番にタッチ。最後の点を２回タッチすれば、入力完了します
9. 「A」ボタンで文字をいれます。
10. 文字入力してから、塗り色をえらべば、文字背景がつきます。
11. 「線の種類」で枠線がつきます
12. 枠線の色は「線の色」ボタンで設定できます

９．時間をひとコマにする

操作方法

1. ページの時間を、タッチし、「ひとコマ」に設定すれば、自動的にアニメーションができます。
2. 「プレイ」ボタンをおして、動きをみながら、おかしい部分は調整してください。

10．動画をMP４出力

操作方法

1. 「ファイル」メニューから動画出力を実行します。パソコン版9VAeでは、ファイルの保存場所を先に指定します
2. 高さは1080か、720に設定すると良いでしょう。
3. 幅は空白にすると比率を合わせて自動設定されます。時間は自動的に設定されます。
4. 秒のコマ数は30が滑らかな動画になります。
5. OKボタンを押して、動画出力されるまで待ちましょう。
   iPhone、iPad版では、カメラロールに動画ができます。

アニメキャストについて、こちらも参考になります。＞ベクトルとビットマップの違い

---

解説動画の作り方

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

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

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
• 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）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。