バーチャートレース(動く棒グラフ)の作り方完全ガイド|初心者向け無料作成手順とコツ
YouTubeのデータ比較動画やSNSで、時間の経過とともに順位が入れ替わる棒グラフ動画を見たことはありませんか?
あの視覚的に惹きつけられるアニメーショングラフは「バーチャートレース(棒グラフレース)」と呼ばれています。国別の人口推移、企業価値のランキング推移、スポーツ選手の通算成績など、時系列のランキングデータを視覚化するのに最も適した手法です。
どうやって作ってるんだと思いますが、実はプログラミング知識がなくても、誰でも簡単に作成できる方法があります。この記事では、作成手段の比較から具体的なデータの準備手順、視聴者を惹きつけるデザインのコツまで、データアナリストの視点で詳しく解説します。
バーチャートレースを作成する3つのアプローチ
動くグラフを作成する方法は、大きく分けて以下の3つのアプローチがあります。それぞれの特徴やスキルレベルに合わせて選ぶことができます。
| 作成方法 | メリット | デメリット | おすすめの層 |
|---|---|---|---|
| プログラム(Python等) | 高度なカスタマイズが可能 | コード記述や環境構築が必要 | エンジニア・データ分析職 |
| 海外のWebツール | 機能が豊富でバリエーションが多い | 英語表記 ユーザー登録が必須 |
海外ツールの利用に慣れている方 |
| 国内ブラウザ完結ツール(本サイト) | 登録不要ですぐ使える 日本語で簡単 |
超複雑なグラフ形式は非対応 | 初心者、素早く簡単に作りたい方 |
プログラミングはさすがにハードルが高いと思いますので、Flourishなどの海外ツールや本サイトのようなデータを読み込むだけで作れるものが最も効率的です。
作成に必要な「時系列データ」の基本構造
バーチャートレースを作る上で、初心者が最もつまずきやすいのが「データの準備」です。ツールにデータを読み込ませるには、Excelやスプレッドシートで以下のような特定のテーブル構造を用意する必要があります。
| 名前(A列) | 画像URL(B列) | 2020年(C列) | 2021年(D列) | 2022年(E列) |
|---|---|---|---|---|
| 日本 | https://example.com/flags/jp.webp | 100 | 102 | 101 |
| アメリカ | https://example.com/flags/us.webp | 200 | 205 | 210 |
| ドイツ | https://example.com/flags/de.webp | 80 | 82 | 83 |
ただ、今は ChatGPT や Claude といったAIで、指定した形式に整えてくれるので、データの用意は相当楽にできるようになりました。
データを作成する際の重要なルールは以下の通りです。
- 1列目(A列): 比較したい対象の名前(国名、商品名、企業名など)を入力します。
- 2列目(B列): 任意で画像URLを入力します。これによって、バーに画像をつけることができます。
- 3列目以降(C列以降): 時系列のデータ(年、月、日付など)を左から右へ順番に入力します。値は必ず半角数値である必要があります。
よくあるデータ作成のエラーと対策
データを読み込んだ際にエラーが発生する場合、数値データ内に全角スペースやカンマ(,)、円記号(¥)などの文字が含まれているケースがほとんどです。データセルは純粋な半角数値(例: 10000)で入力し、単位や表記はツールの表示設定で後から調整するようにしましょう。
無料ツール「GraphRace Studio」を使った簡単4ステップ作成手順
当サイトが提供している無料ツール「GraphRace Studio」を使い、登録なしでバーチャートレース動画を作る具体的な手順を紹介します。
ステップ1:サンプルデータの確認
まずは、どのような動きになるか確認するため、ツールの紹介ページにあるサンプルデータで試すか、ツール内の標準テンプレートを読み込んで再生ボタンを押してみましょう。どのような構造のデータがあれば動くのかが視覚的に理解できます。
ステップ2:データの貼り付け・アップロード
ご自身でExcelやCSVで作成したデータをコピーし、ツールのデータエディタ画面にそのままペースト(貼り付け)するか、CSVファイルを画面上にドラッグ&ドロップして読み込ませます。
ステップ3:デザインと再生速度の調整
右側のコントロールパネルから、見た目をお好みのスタイルにカスタマイズします。
- 色とテーマ: 暗い背景の「ダークモード」や、やさしい色合いのパレットから選択できます。
- 再生スピード: 変化をじっくり見せたい場合は再生時間を長めに、ダイナミックに見せたい場合は短めに設定します。
- 画面比率: YouTube用の横画面(16:9)だけでなく、TikTokやYouTube Shortsなどの縦型動画(9:16)向けのデザインレイアウトにもワンクリックで調整可能です。
ステップ4:動画としての保存・書き出し
グラフが期待通りに動くようになったら、PCやスマートフォンの画面録画機能(キャプチャ機能)や、録画ツールを用いてブラウザ上の再生画面を撮影し、動画ファイルとして保存します。これにより、簡単にSNSやプレゼンテーションで使える動画素材が完成します。
今すぐブラウザでバーチャートレースを作ってみる
アカウント登録やアプリのインストールは一切不要。お手持ちのExcelデータを貼り付けるだけで、動くグラフアニメーションが作成できます。
バーチャートレース作成ツールを開くバズるグラフ動画に仕上げるための3つのデータ表現テクニック
SNSの視聴者に評価される「質の高い動画」にするために、実践している表現のコツを紹介します。これらのコツは、ツールを作ってバーチャートレースを作った後に、動画編集ソフトを使って少し編集を加えてあげると良いです。
1. 再生速度のチューニングで「ドラマ性」を演出する
ただ一定の速度でグラフを動かすのではなく、データが急激に変化する区間(歴史的なイベントや大きな順位変動があった瞬間)の再生速度をあえて少し緩やかにするなど、視聴者が変化を追えるような適切な時間設計を行います。一般的に、1回のレース動画は30秒から1分程度に収めるのが、飽きずに最後まで見てもらえる最適な長さです。
2. 色数を抑え、特定の項目だけを目立たせる
すべてのバーをカラフルな別々の色にしてしまうと、視線が散らばって何を見せたいのかが伝わらなくなります。基本はカテゴリごとに同じトーンの色でまとめ、特に注目させたい項目(自社ブランドや、劇的な成長を遂げた項目など)にだけ、アクセントとなる強い配色を適用すると、一目で情報が伝わる高品質な動画になります。
3. 安全なツールを使用して作業効率をアップさせる
社外秘の売上データや、競合との機密性の高い推移データを可視化する際は、データの取り扱いに配慮されたツールを使用することが重要です。GraphRace Studioは、読み込んだデータが外部のサーバーに一切送信されず、すべて利用者のブラウザ内(ローカル環境)で完結して処理されるように設計されているため、業務利用でも安心してグラフ作成が行えます。
まとめ
バーチャートレースは、時間の経過に伴うデータのダイナミックな変化を伝えるのに最も優れたビジュアル表現の1つです。プログラミングの学習や海外ツールの英語に苦労することなく、データの並び方さえ理解できれば、誰でも簡単に美しいグラフ動画を作成することができます。
まずは、手元の小さなデータを使って、当サイトの無料ツールでどのような動きになるか試してみてはいかがでしょうか。データの新しい価値や面白いストーリーが、アニメーションを通じて見つかるはずです。
GraphRace Studio