●ガイド 06
モーションバブル、サンバースト、ネットワーク、ガントを作る
手順どおり。
4つのチャートは異なる問いに答え、必要な行形式も異なります。期間別バブル、階層パス、重み付き接続、タスク日程の正確な構造を学びます。
モーションバブルタイムライン
概要 学べること
きれいなデータから公開できるチャートへ。
- 検索意図を1つのチャート判断に変える
- CSVのラベル、単位、期間を整える
- モーションバブルタイムラインが関係性に合う場合だけ使う
- 動画と最終フレームPNGを両方用意する
CSV データガイド
正しいデータ形式から作る
このチャート用スキーマを出発点に、サンプル行を置き換え、列構成を保ったまま書き出し前に全アニメーションを確認します。
- 適した用途
- バブルが期間ごとに移動・拡大縮小・再配置され、多変量の変化を示します。
- 必須列
対象期間XYサイズ- 1行が表すもの
- 1つの期間における1対象のX・Y座標と数値のバブルサイズ。各期間で対象を繰り返します。
3ステップ
- 1
上記のヘッダー名と列順を保ちます。
- 2
1行に1観測を追加し、名前・単位・期間を統一します。
- 3
全フレームを確認してから、ラベル、密度、速度を調整します。
モーションバブルタイムラインローカライズ済みCSV例
対象,期間,X,Y,サイズ
北部,2021,22,64,38
南部,2021,48,36,62
東部,2021,71,72,44
西部,2021,84,28,26
北部,2022,31,69,46
南部,2022,52,43,70
東部,2022,66,78,51
西部,2022,77,35,34
北部,2023,39,75,58
南部,2023,59,51,77
東部,2023,72,83,63
西部,2023,69,44,42
北部,2024,47,81,72
南部,2024,66,60,86
東部,2024,79,88,75
西部,2024,61,53,55CSV データガイド
正しいデータ形式から作る
このチャート用スキーマを出発点に、サンプル行を置き換え、列構成を保ったまま書き出し前に全アニメーションを確認します。
- 適した用途
- 入れ子のリングが中心から外へ広がり、階層構成と各枝の寄与を示します。
- 必須列
パス値- 1行が表すもの
- 1つの末端パスと値。Product/Core/Search のようにスラッシュで階層を区切ります。
3ステップ
- 1
上記のヘッダー名と列順を保ちます。
- 2
1行に1観測を追加し、名前・単位・期間を統一します。
- 3
全フレームを確認してから、ラベル、密度、速度を調整します。
アニメーションサンバーストローカライズ済みCSV例
パス,値
製品/コア/検索,28
製品/コア/ワークスペース,22
製品/成長/自動化,18
製品/成長/インサイト,14
サービス/アドバイザリー/戦略,12
サービス/アドバイザリー/調査,9
サービス/デリバリー/ローンチ,16
サービス/デリバリー/サポート,11
パートナー/プラットフォーム/クラウド,13
パートナー/プラットフォーム/データ,8CSV データガイド
正しいデータ形式から作る
このチャート用スキーマを出発点に、サンプル行を置き換え、列構成を保ったまま書き出し前に全アニメーションを確認します。
- 適した用途
- 重み付きの関係線が描かれ、接続ノードが力学レイアウトに落ち着きます。
- 必須列
流入元到達先重み- 1行が表すもの
- SourceからTargetへの1本の接続。Weightが線の強さとノードの強調度を決めます。
3ステップ
- 1
上記のヘッダー名と列順を保ちます。
- 2
1行に1観測を追加し、名前・単位・期間を統一します。
- 3
全フレームを確認してから、ラベル、密度、速度を調整します。
力学ネットワークローカライズ済みCSV例
流入元,到達先,重み
製品,デザイン,8
製品,エンジニアリング,10
製品,調査,6
デザイン,ブランド,4
デザイン,成長,5
エンジニアリング,データ,7
エンジニアリング,プラットフォーム,9
調査,データ,5
成長,営業,6
営業,サポート,4
プラットフォーム,サポート,5
データ,インサイト,7
インサイト,成長,3CSV データガイド
正しいデータ形式から作る
このチャート用スキーマを出発点に、サンプル行を置き換え、列構成を保ったまま書き出し前に全アニメーションを確認します。
- 適した用途
- タスクバーが共通の時間軸に順番に現れ、進捗の塗りも動きます。
- 必須列
タスク開始終了進捗- 1行が表すもの
- 1つのタスクに数値の開始・終了位置と0〜100の進捗を指定します。終了は開始より大きくします。
3ステップ
- 1
上記のヘッダー名と列順を保ちます。
- 2
1行に1観測を追加し、名前・単位・期間を統一します。
- 3
全フレームを確認してから、ラベル、密度、速度を調整します。
アニメーションガントタイムラインローカライズ済みCSV例
タスク,開始,終了,進捗
調査,0,3,100
戦略,1,5,92
UXデザイン,3,8,78
プロトタイプ,5,10,65
エンジニアリング,7,15,48
品質保証,13,17,32
ローンチ,16,20,1201 チュートリアル
フローに従う
新しいチャートは順に進めるか、既存アニメーションの点検リストとして使います。
- 01
検索意図を確認する
読者が知りたいのは手順、テンプレート、書き出し設定、実務事例のどれかを先に決めます。
- 02
差し替え可能なCSVを作る
ヘッダーは1行、ラベルは短く、単位は統一し、合計行や注釈を外して再利用しやすくします。
- 03
問いからチャートを選ぶ
ランキング、トレンド、比較、構成比、フロー、関係性のどれを示すかを決めます。モーションバブルタイムラインはその関係が明確な時に使います。
- 04
見える結論を書く
結論、単位、期間をチャート近くに置き、最終フレームだけでも意味が伝わるようにします。
- 05
読める速度に調整する
リーダー、交差点、外れ値、最終値では速度を落とし、動きが理解を助けるようにします。
- 06
配信先に合わせて書き出す
動画にはMP4またはWebM、PDFやメール、検索プレビュー、低モーション環境にはPNGを用意します。
02 視覚例
これらのテンプレートを試す
形式を決める前に動きと読み方を比べる。各例は編集可能なデータ駆動チャートです。
アニメーションサンバースト
力学ネットワーク
アニメーションガントタイムライン
03 適用
関連ユースケース
04 よくある質問
よくある質問
モーションバブル、サンバースト、ネットワーク、ガントを作るは誰向けですか？
CSVやスプレッドシートを、レポート、商品ページ、SNS、プレゼンで使えるアニメーションチャートにしたいチーム向けです。
最初に使うチャートは？
データ関係に合うならモーションバブルタイムラインから始めます。問いが違う場合は、装飾より先にテンプレートを変えます。
どの形式で書き出すべきですか？
汎用再生はMP4、WebにはWebM、短い無音ループだけGIF、静止画の代替にはPNGが向いています。