【無料で簡単】GPSログで動く地図付きサイクリング動画の自作法!

自転車のハンドルなどにカメラを装着してサイクリング動画を撮っている人を多く見かけるようになってきました。

サイクリングをしている様子の映像だけでなく、走行位置が地図上で刻々と動くアニメーションも一緒に表示する動画を作れたらいいと思いませんか?

走行した番号道路の名前や橋で渡った河川の名前、周りにあったスポットなどが分かり、より興味深くサイクリングを振り返ることができます。

アーモンドグリコの宣伝で「一粒で二度おいしい」というのがありましたが、サイクリング中だけ楽しむのではなく、後で、サイクリング動画を見てもう一度、楽しめます。

また、YouTubeなどで他の人と動画をシェアする場合、人から見るとただの風景の映像では、本人が思う程、人は興味を持ってくれません。

動く地図を付けて、あなたのサイクリング動画を、再生回数や『いいね!』が大きく増える”感動の作品”に生まれ変わらせましょう!

「こういう動画って作るのは難しいでしょ?」と思われるかもしれませんが、実は意外と簡単

ツールを使う環境を用意するのは、最初、ちょっと面倒に思うかもしれませんが、一回できたら、後は楽ですし、なんとツールは全部無料

この記事では、走行アニメ地図付きのサイクリング動画の作り方を紹介します。

動画サンプル:こんな感じの動画が作れます

家の近所をのんびりサイクリングしたときの様子を走行アニメ地図付きのサイクリング動画にしてみたので紹介します。

スタートは、神奈川県藤沢市にある『鵠沼海浜公園 ハグライドパーク』(スケートボードやBMXを楽しめる施設)で、『新江ノ島水族館』の辺りまで行ってから引き返し、引地川ほとりの『藤沢市立鵠南小学校』が終点です。

まず、最初にお見せするのは、一般的な縦横比 16:9の枠で、サイクリング映像の左下に走行アニメ地図を重ねて表示している動画です。

重ねる場所やサイズは編集時に自由に設定できます。

YouTubeでこのようなサイクリング動画をよく見かけますね。

地図を一緒に見れるので、引地川を渡ってすぐに橋のたもとにある碑が「聶耳記念碑」という名前であることが分かり、調べてみると中国の有名な音楽家の記念碑でした。
このように、走行アニメ地図があると動画の付加価値が高まりますね。

次は、映画の縦横比 21:9の枠で、サイクリング映像の横に走行アニメ地図を並べて表示している動画です。

大画面のディスプレイモニターで見る場合、個人的にはこちらの方が好きです。

映像の左右入れ替えも自由にできます。

以前はGarminのVIRB EditというアプリでGoogle Map連携による地図アニメーション作成ができました。

しかし、2023年以降、Google Maps APIの仕様変更により、VIRB EditでエラーとなってGoogle Mapへの機能が使えなくなりました。

この記事は、GoogleマップではなくOpenStreetMapやJapan GSI Standard Mapを使った代替手段を説明しています。

作成に必要なもの

次のものが必要です。

  • アクションカメラ
    サイクリングの様子を撮影する一般的なカメラで大丈夫です。
    例:Insta360 X3/4/5 やGoPro、Osmo Actionなど、
  • GPS搭載デバイス
    走行ログ(位置を時間の経過と共に記録したデータ)を取るデバイスが必要です。
  • ソフトウェア
    • GPX Animator(無料):走行ログを基に、ルート表示の地図アニメーションを作成するツール
    • Microsoft Clipchamp(無料):サイクリング映像と走行アニメ地図映像を重ねて編集するのに使うツール

「Relive」も「Google Earth Pro」も、GPX Animatorのように“走行軌跡をリアルタイムで刻々と動かして表示する”タイプのアニメーション機能はありません。

🟢 GPX Animator(今回の記事の主役)

リアルタイムに軌跡が動くタイプ
特徴:GPXファイルの時間情報に沿って、地図上を線とアイコン(自転車など)が実際の速度で動く“走行アニメーション”を生成。

出力:動画(MP4など)としてエクスポート可能。

用途:YouTubeなどのサイクリング動画に地図を重ねるのに最適。

🟡 Relive
特徴:サイクリング終了後に、走行ルートを立体的に“再現”するハイライト動画を自動生成するサービス。

動作原理:走行中にアプリがGPSを記録し、終了後に3D地図上で走行ルートを再現した短い動画を作成。

出力:Reliveアプリ内またはクラウド上で再生(動画として保存は制限あり)。

🚫 リアルタイムで軌跡が動くわけではなく、あくまで“後で再構成された3Dルート映像”

🔵 Google Earth Pro
特徴:KML/KMZ形式でルートを読み込み、“ツアー再生”機能でカメラ視点を移動させることは可能。

制約:地図上をアイコンが移動するような“実走行アニメ”ではなく、
 カメラが飛ぶようにルートを追う(いわば「空撮的」)動き。

🚫 地図上に「点や線が時間に合わせて動く」タイプではない

走行ルートに沿って、ドローンで空撮したかのような動画を作る方法については『【無料】Google Earthで作る!サイクリングルートの空撮風3D動画』の記事をご覧ください。

おおまかな手順の流れ

全体的には次の4ステップです。

ステップ1:撮影とログ記録を始めよう

   

ステップ2:サイクリング動画と位置情報をPCに保存

   

ステップ3:GPX Animatorで地図が動き出す!

   

ステップ4:Microsoft Clipchampで編集して完成!

それでは、次に各ステップを詳しく説明します。

ステップ1:撮影とログ記録を始めよう

カメラでサイクリングの様子の撮影を開始すると共に、GPS機能搭載のデバイスで位置情報の記録も開始します。

GoPro Heroの場合、GPSはカメラに内臓されているので、ただ単に、撮影を開始すればOKです。

Insta360 X3/4/5 やOsmo ActionなどのGPS非搭載カメラの場合、専用リモコンを買うのには抵抗があるし、カメラ専用のスマホアプリと接続するのも面倒という人も多いかと思います。

その場合の代替手段を紹介します。

GPSログ取得の代替策1: スマートウォッチの利用

GPSをサポートするスマートウォッチを持っていれば、カメラの撮影開始と併せて、スマートウォッチでのエクササイズの記録を開始もすることで、走行ログの記録開始ができます。

GPSログ取得の代替策2: 「Strava」「Ride with GPS」の利用

専用デバイスがなくても、スマートフォンのGPS機能を使って走行ログを記録できます。

Stravaは、世界中のサイクリストが利用している定番の走行記録アプリです。
無料プランでも走行ルートの記録とGPXファイルの書き出しが可能です。

<記録の手順>

  1. スマホに「Strava」アプリをインストールし、アカウントを作成します。
  2. アプリを起動し、画面下の「記録」タブをタップ。
  3. 種目を「ライド(自転車)」に設定。
  4. スタート地点で「開始」ボタンを押すと、走行ログの記録が始まります。
  5. サイクリングが終わったら「停止」→「保存」をタップします。

<GPXファイルの取得方法>

  1. PCまたはスマホのブラウザでStravaのWeb版(https://www.strava.com/)にログイン。
  2. 「マイアクティビティ」一覧から対象のライドを開きます。
  3. 画面左側(または右上のメニュー)にある「…」をクリックして「GPXをエクスポート」を選択。
  4. これでGPXファイルがダウンロードできます。

Ride with GPSもStrava同様に人気の高いGPSログアプリです。
こちらも無料プランでルート記録とGPXの書き出しができます。

<記録の手順>

  1. 「Ride with GPS」アプリをスマホにインストールし、アカウントを作成します。
  2. アプリを開き、「記録」ボタンをタップ。
  3. 種目を「サイクリング」に設定し、「スタート」を押すとログ記録が開始します。
  4. サイクリング終了後に「ストップ」→「セーブ」で保存します。

<GPXファイルの取得方法>

  1. PCのブラウザで https://ridewithgps.com にログインします。
  2. 「マイライド(My Rides)」ページから対象のアクティビティを開く。
  3. 画面右上にある「Export」ボタンをクリックし、「GPX Track (.gpx)」を選択。
  4. ファイルがダウンロードされます。

【関連記事】
Insta360をハンドルにしっかりと取付けて撮影する方法については『【保存版】Insta360の自撮り棒を自転車に安全装着!付け方とおすすめマウント』の記事をご覧ください。
また、背中に背負ったバックパックに自撮り棒を取付けると、360度映像が撮り易くなり、Insta360の特長をより活かせます。
その方法については『【保存版】Insta360の自撮り棒を自転車に安全装着!付け方とおすすめマウント』の記事をご覧ください。

ステップ2:サイクリング動画と位置情報をPCに保存

撮影の終了後、カメラで撮った動画をPCに保存します。

またGPS機能搭載のデバイスで取った走行ログもPCに保存します。

Garminスマートウォッチを使った例を紹介します。

「アクティビティ」のメニューで『バイク』を選択すると「GPS捕捉中」というメッセージが出て、捕捉できたら、準備完了となるので、開始ボタンを押します。

サイクリングが終わったら、『Garmin Connect』アプリにアクティビティ(この場合、『バイク』)に関するデータが保存されます。

次の画像は、PC版の『Garmin Connect』のスクリーンショットです。

画面右上にある⚙(歯車)マークをクリックし、表示されるプルダウンメニューから『GPXにエクスポート』を選択することで、ファイルにGPXデータを保存できます。

あなたの走行ログデータは準備できましたか?

ステップ3:GPX Animatorで地図が動き出す!

GPX Animatorを使い、先程の走行ログ(GPXデータ)を基に地図上にトラッキングのアニメーションを作成します。

GPX Animatorの準備

Javaの有無をチェック

GPX Animatorは、Javaで開発されたアプリケーションで、動かすにはJavaの実行環境が必要になります。

Java 17 以降があなたのパソコンにインストールされていればOKです。

 インストール確認方法

すでに入っているか確認するには、Windowsの検索バーで「cmd」と入力し、
コマンドプロンプトを開いて次のコマンドを打ちます: java -version

もし「java version 17.x.x」などと出れば → ✅インストール済みでOK。

「’java’ は内部コマンドまたは外部コマンドとして認識されていません」
 と出た場合 → ❌ 未インストールです。

古いJavaが入っている場合や未導入の場合は、新しいJAVAをインストールします。

おすすめは次のどちらか:

  • Adoptium(Eclipse Temurin)
    → 無料で安全なJDK配布元。
    公式サイト: https://adoptium.net/
  • Oracle JDK
    → Oracle JDKの商用利用条件はバージョンにより異なるため、商用利用を行う場合はライセンス条件を公式サイトで確認してください。
    公式サイト: https://www.oracle.com/java/technologies/downloads/

GPX Animatorのインストール

GPX Animatorはオープンソース(誰でも自由に使用・改変・再配布できるプログラム部品やソフトウェアのこと)なので、無料で利用できます。
ありがたいですね。

次のページから最新版をダウンロードしてインストールします。

(私が見た時点では、このバージョンが最新でした。)

https://github.com/gpx-animator/gpx-animator/releases/tag/v1.8.2

Windowsパソコンの場合、『gpx-animator-1.8.2-all.jar』を選ぶのをお勧めします。

Windows x64版の.exeファイルもありますが、これをインストールして使ってみたら、ときどき変な動作をし、どうも上記の方が安定しているように思います。

GPX Animatorの起動

ダウンロードした『gpx-animator-1.8.2-all.jar』をダブルクリックしてアプリを起動します。

次の画面が表示されるので、先ず、『Download Map Updates』をクリックして最新の地図情報で更新します(下の画像を参照)。

GPX Animatorの設定

『General』タブの設定

次に『General』タブの設定をしていきます。

次のスクリーンショットがこのタブの前半部分で、私が設定した内容を紹介します。

英語メニューですが、必要なのは一部の項目だけで心配は要りませんよ。 

数字の順番に説明します。

Output: 動画ファイルの出力先を指定

Viewport Width x Height: 動画の横と縦のサイズをピクセル数で指定
直接、数字を入力することもできるし、横のStandard Sizesボタンをクリックして、1920 x 1080といった一般的な解像度を選ぶこともできます。

Zoom: 地図を拡大レベルを指定します
地図によって例外があるようですが、一般的に1から18の間を選べます。
サイクリング映像に地図アニメーションを重ねる場合、地図が小さく表示されて、地図の中の道路名などの文字サイズが読みにくくなるので、最大の『18』がお勧めです。

Speedup: 早送りの倍数です。
早送りをしないでサイクリング動画に地図アニメーションを重ねるので、『1』(早送りなし)を選びます。

Tail duration: 「tail」とは、移動軌跡の“残像”のような線のことです。Tail durationはその残像がどれくらいの長さ(時間)で表示されるかを指定します。
私は『1s』(1秒)を指定しました。

FPS: フレームレートです。サイクリング動画のFPSと一致させます。
例えば、アクティビティカメラで30fpsを指定して撮影したのなら、ここを『30』と指定します。

Background Map: ここをクリックしてプルダウンメニューに表示される地図を選択します。
お勧めは次の2つです。
● World: OpenStreetMap Carto (Standard)
● JP: Japan GSI Standard Map
これらの地図は道路名や河川名が日本語で表示されることが多く、ライセンス的にも安心です

Map Visibility: 地図の見えやすさです。
サイクリング映像に地図アニメーションを重ねる場合、小さな地図になるため見づらくなるので『100』を選ぶことをお勧めします。

次に『General』タブの下の方の設定を、次のスクリーンショットを使って紹介します。

Logo Position: ロゴマークの表示位置を指定しますが、表示したくない場合は『hidden』を選びます。

Information Position: 緯度経度や日時などの情報を表示する位置を指定します。
こちらもこの情報を表示しない場合は『hidden』を選びます。

“Track”タブの設定

『General』タブの一番下にある「Add Track」ボタンを押すと、次のような『Track』タブの画面が表示されるので、軌跡を描くための情報を設定します。

こちらも次のスクリーンショットを使って、私が設定した内容を紹介します。

Input GPX File: 先にGPXファイルの作成法を説明しましたが、そこで作成したGPXファイルをインプットと指定します。

Color: 軌跡の色を指定します。この例では赤色を選択しています。

Time Offset: サイクリング動画の撮影開始とGPSログの記録開始を「同時に行う」ことが理想ですが、うまくいかないことも多いです。
このタイミングがずれた場合、Time Offsetで時間のズレを調整できます。

Choose travelling Icon: 移動点の標準のアイコンは丸ですが、変更することができます。
私は『Bicycle』を選択しました。

アニメ地図動画の出力

いよいよ、地図が動き出す感動の瞬間です!

動画を出力する前に画面の一番下にある『Preview』をクリックすると、次のように開始位置(バイシクルのアイコンがある位置)と地図のイメージが表示されます。

これを見て地図が自分のイメージが合っているか確認します。

もし、合っていなければ、『Viewport Width x Height』や『ズーム』の設定値を変更し、『Preview』をクリックして再度、確認します。

『Preview』を確認し終わったら、『Render』をクリックして、いよいよ動画の作成です!

動画が作成されたら、長さが実際の走行時間と一致するか確認しましょう。

ステップ4:Microsoft Clipchampで編集して完成!

動画編集ソフトで、アクションカメラで撮った映像に、先ほど作成した走行アニメ地図映像を重ねて、動画ファイルとして書き出す手順を説明します。

PowerDirectorやFilmoraなどの動画編集ソフトを使い慣れている方には、このセクションの説明は不要だと思いますが、そうでない方向けに、無料のソフトのMicrosoft Clipchampを使う方法を説明します。

次のスクリーンショットのように、ClipchampはWindows11に標準装備されています。

このソフトを使って、例として次の2つのファイルを編集(重ね合わせ)してみましょう。

● “湘南海岸公園ポタリング Insta360X4.mp4” : Insta360 X4で撮影したサイクリングの動画

● “湘南海岸公園 ポタリング GPSアニメーション.mp4” : GPX Animatorで作成した地図アニメ動画

Clipchamp を起動し、最初に表示される画面左上の『新しいビデオを作成』をクリックします。

次の画面が表示されるので、ビデオの名前を付け、サイズ(この例では16:9)を選びます。

次に、『メディアのインポート』の下のエリアに、編集する2つの動画をドラッグ&ドロップします(次のスクリーンショットの①を参照)。

さらに、②のように、編集する2つの動画をトラックにドラッグ&ドロップします。

その後、『湘南海岸公園 ポタリング GPSアニメーション』のトラックをクリックしてハイライトしてから、③のように、この動画の枠をドラッグして好みのサイズと位置にします。

出来たと思ったら、次のスクリーンショットの①のように再生ボタンをクリックして動画を確認します。

OKであれば、画面の上にある『エクスポート』をクリックします。

画面が次のスクリーンショットのように変わり、動画作成の進行状況が表示されます。

作成が終わると次のスクリーンショットのように『コンピューターに保存』ボタンが現れるので、クリックして保存場所を指定してお終いです。

一応、これで完成ですが、更に、動画の一部をカットしたい、あるいは早送りやスローモーションをしたい、テロップ(字幕)を入れたいという場合も、Clipchampの編集で可能です。

著作権に関する注意

GPX Animatorで OpenStreetMap の地図を使って作成された地図アニメーションには、次のようなクレジット表記が付けられています。

YouTubeなどで公開・収益化するためには、動画を編集する際に、このクレジットを消したり隠したりしないようにして、著作権の問題を起こさないようにする必要があります。

おわりに

サイクリング動画に走行アニメ地図(地図アニメーション)を加えるだけで、記録映像が一気にストーリーのある作品に変わります。

どの道を走ったのか、どこで止まったのかが地図上で一目でわかるため、見る人にも伝わりやすく、YouTubeなどでシェアしたときの反応もぐっと良くなります。

しかも今回紹介した方法は、すべて無料ソフトだけで作成可能。

「難しそう」と思っていた方も、一度やってみれば驚くほど簡単に、地図付きのサイクリング動画を作れるようになります。

走る楽しみ、撮る楽しみ、編集して振り返る楽しみ。

この3つを組み合わせれば、あなたのサイクリングライフはもっと楽しくなります。

あなたも無料ソフトで走行アニメ地図付きのサイクリング動画づくりに挑戦してみませんか?

LEANY(レニー) | プチプラでおしゃれなヨガウェア・フィットネスウェア

【Allgu(オールグゥ)】 SNSで話題の滑車式骨盤ベルト

DEP|マシンピラティス個別指導の新規体験申し込み