Filmora
Filmora - AI動画編集アプリ
強力でシンプルなビデオ編集アプリ
入手

【旅行vlog】マップアニメーションをつくろう│地図自作ツールも紹介

Apr 29, 2026 • カテゴリ: 動画編集の基本とコツ

マップアニメーション・地図アニメーション

旅番組や旅行Vlogで地図上の出演者が移動した道をなぞっていく、そんなアニメーションが流れることがあります。そのアニメーションを「マップアニメーション」あるいは「地図アニメーション」といいます。マップアニメーションがあると、どの道をどう行くのかがわかりやすく視聴者が簡単にイメージできます。しかし、自分でマップアニメーション入り動画を作るのは難しそうですよね。

この記事では3つのマップアニメーションの作り方と、地図画像を作ることができるツールを紹介します。

 目次:      

Filmoraで旅行動画をもっとクリエイティブにしよう!今すぐダウンロード

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

Part1.5つのマップアニメーションの作り方

★方法1:地球Zoomエフェクトテンプレートを使ってマップアニメーション作成

まずは、Filmoraの画像から動画生成機能の「地球Zoom」エフェクトを使ってマップアニメション動画を生成する方法を紹介します。
この機能では、静止画をアップロードするだけで、AIが自動的にズームインやパース移動などを含むアニメーションマップ動画をワンクリックで生成できるテンプレートが用意されています。

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

filmora13

複雑な操作なしで、旅行ルート紹介や地球ズーム演出などを自動作成できる点が大きな魅力です。

filmora13

詳しくは、こちらの記事:地球ズームとは?AIエフェクトでワンクリック作成をご覧ください。

★方法2:Google Earth Proでマップアニメーション作成

Google Earth Pro(グーグルアースプロ)を使えば、旅行動画を彩るおしゃれな地図アニメーションが簡単に作成できます。

filmora13filmora13

詳しくは、以下の動画をご覧ください。


無料でできる!🌍️Google Earth Proでマップアニメーション作成に挑戦!|Wondershare Filmora(Windows&Mac)

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

完成したマップアニメーションは、Filmoraのキーフレーム設定・速度調整・モーショントラッキングなどを使って、さらに印象的に仕上げることが可能です。

filmora13

ここでは、動画制作ソフトWondershare Filmoraを使用した作り方を紹介します。まずFilmoraの説明をします。

filmora13

Filmoraの操作画面はわかりやすく、直感的に操作できます。また、たくさんエフェクト等があり、魅力的な動画ができるのも特徴です。使ってみないと買うのは心配という人もいますが、Filmoraは透かし画像は入ってしまいますが、無料で利用ができます。ですから1度試してから購入したい人も安心できますね。

これから、Filmoraを使用したマップアニメーションの作り方を2種類説明します。

直線ルートのマップアニメーション作成方法、点線ルートのマップアニメーション作成方法の両方がこちらのYouTube動画で説明されていますので参考にしてください。

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

★方法3:直線ルートのマップアニメーションの作り方

1.地図画像を用意して、タイムラインにドラッグ&ドロップし、必要な時間分横に伸ばします。

直線ルートのマップアニメーションの作り方

地図素材著作者:Freepik

2.【ライブラリ → ソリッドカラー】からルート表示に使う色を選んでトラック2に追加し、プレビュー画面で太さと長さを調整します。

直線ルートのマップアニメーションの作り方

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

3.【エフェクト → ユーティリティ】から【クロップ】のエフェクトをトラック2のカラーにドラッグします。

直線ルートのマップアニメーションの作り方

4.トラック2をクリックすると、設定画面が出てくるので、「上」、「下」、「右」、「左」のオプションから、ルートが行きたい方向でキーフレームを追加します。

直線ルートのマップアニメーションの作り方

5.これを繰り返していくことで複数地点を通るマップアニメーションができます。

直線ルートのマップアニメーションの作り方

6.同じ手順で自分を表示するアイコンを置くことで、アイコンも移動する本格的なマップアニメーションになりますよ。

直線ルートのマップアニメーションの作り方

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

★方法4:点線ルートのマップアニメーションの作り方

①.【ライブラリ → ソリッドカラー】からルート表示に使う色をトラック2へドラッグ&ドロップします。

左上、【エフェクト → ユーティリティ】から【イメージマスク】を選択します。※イメージマスクは楕円ですが、プレビューをダブルクリックすると出てくる、編集画面のビデオエフェクトにある幅を75にするときれいな円ができます。

点線ルートのマップアニメーションの作り方

②.円のサイズを調整し、スタート地点に円を置きます。トラック2を複製し、次の地点に円を置きます。この手順を繰り返し、円をルート上に並べていきます。円の発生時間を調整すると順番に円が出てくるようなアニメーションになります。

点線ルートのマップアニメーションの作り方

地図素材著作者:著作者:rawpixel.com/出典:Freepik

③.ここでも、自分の居場所をアイコンにしてキーフレームで追加すれば、まるで自分が移動しているかのようなマップアニメーションになります。

点線ルートのマップアニメーションの作り方

Windows版ダウンロード    Mac版ダウンロード

ios版ダウンロード    Android版ダウンロード

★方法5:ペンツールを使ってマップアニメーション作成

より自由にルートを描きたい場合は、Filmoraのペンツールを使う方法もおすすめです。ペンツールを使えば、地図の上に直線や曲線のパスを自由に描き、その軌跡に沿ってオブジェクトを動かしたり、線が伸びていくようなアニメーションを作成したりできます。

特に、旅行ルートをなめらかに見せたい時や、既存の地図に合わせて細かく経路を調整したい時に便利です。直線ルートや点線ルートよりも自由度が高く、より本格的なマップアニメーションを作りたい方に向いています。

Filmoraのペンツールを使った基本手順は次の通りです。

①.地図画像を用意して、タイムラインにドラッグ&ドロップします。タイムラインの上にあるツールバーから、ペンのアイコンをクリックして 、【ペンツール】を選択します。

②.地図画像の上にアンカーポイントを打ちながら、移動ルートとなるパスを描いていきます。曲線も作れるので、道路や移動経路に合わせた自然なルート表現が可能です。

ペンツールでパスを描く

③.描いた線に色や太さを調整すれば、動画の雰囲気に合わせたルートデザインに調整できます。

描画のカラーを調整する画面

④.「トリムパス」を開き、「終了」の値にキーフレームをつけ 、初めのキーフレームで終了を0% → 終わりのキーフレームの終了を100%にすると、線がスーッと伸びる

 ペンツールでキーフレームを付ける画面

ペンツールでキーフレームを付けるステップ

⑤.必要に応じて、描いた線の上に図形を追加できます。 オブジェクトを選び、リンクをクリックして適用します 。

描画にオブジェクトを付ける

ペンツールは、旅行Vlogの移動演出だけでなく、注目ポイントを囲む線や、解説用の矢印アニメーションにも応用できます。より自由度の高い演出をしたい場合は、ぜひ活用してみてください。

関連記事:ペンツールの使い方完全ガイド|基本操作から線画アニメの作り方まで解説

Windows版ダウンロード    Mac版ダウンロード

ios版ダウンロード    Android版ダウンロード

Part2.マップアニメーション用の地図を自作するツールを紹介!

マップアニメーションの作り方を説明しましたが、地図画像やアイコンも自作したいですよね。そんな時にはWondershareのEdraw Maxというツールをおすすめします。

Edraw Maxとは作図ソフトですが、インターフェイスが視覚的にわかりやすいためFilmora同様、直感的に操作できます。そしてたくさんのテーマやテンプレートがあるので考えたことを形にしやすいです。地図やマップアニメーション上の自分を示すアイコンもEdraw Maxでたくさんのテンプレートを使って作ることができますよ。

作図ソフトEdraw Max

Part3.まとめ

この記事では旅行Vlogなどで使える2種類のマップアニメーションの作り方を説明しましたがいかがでしたか。移動した記録を動画で残せて、発信できるようになると動画作成の楽しみも増えていきますね。

あわせて紹介したEdraw Maxで地図画像も自作すれば完全オリジナルの動画が作れそうです。ぜひFilmoraEdraw Maxを活用して素敵な動画を作成しましょう。

関連記事:オーロラアニメーションのオープニング動画の作り方>>

関連記事:【低予算】スマホだけでPOV視点(一人称視点)VLOGを撮影・編集する方法>>

Part4.FAQ

Q1.マップアニメーションは初心者でも作れますか?

A.はい、作れます。Filmoraのテンプレートやキーフレーム機能を使えば、動画編集が初めての方でも地図上の移動ルートを視覚的にわかりやすく表現できます。まずはシンプルな直線ルートから試すのがおすすめです。

Q2.Google Earth Proで作った地図アニメーションはFilmoraで編集できますか?

A.もちろん可能です。Google Earth Proで作成した映像を書き出してFilmoraに読み込めば、テロップ追加、BGM挿入、速度調整、トランジション追加などを行い、より見やすい旅行動画に仕上げられます。

Q3.点線ルートと直線ルートはどう使い分ければいいですか?

A.直線ルートは移動経路をはっきり見せたい時に向いており、点線ルートはやわらかく軽快な印象を出したい時におすすめです。動画の雰囲気や見せたい世界観に合わせて選ぶとよいでしょう。

Q4.マップアニメーション用の地図やアイコンも自作できますか?

A.はい、自作できます。記事内で紹介したEdraw Maxのような作図ソフトを使えば、オリジナルの地図画像や位置アイコン、ルート図などを作成しやすく、動画全体の統一感も高められます。

旅行動画を盛り上げよう!Google Earth Studioで迫力のマップアニメーション!|Wondershare Filmora

Windows版ダウンロード Mac版ダウンロード

ios版ダウンロード Android版ダウンロード

役に立ちましたか?コメントしましょう!

登録 / ログイン してからコメントを書いてください
user
{{item.name || userName}}
{{item.time}}
{{item.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
user
{{item1.type == 2 ? authName : item1.name ? item1.name : userName}}
{{item1.time}}
@{{item1.reply_to_type == 2 ? authName : item1.reply_to_name ? item1.reply_to_name : userName}} {{item1.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
author

fukuda

編集長

サポート

製品に関するご意見・ご質問・ご要望はお気軽に こちらまでお問い合わせください。 >>

Filmoraを入手 Get Filmora