Remotionを使い始めて最初に衝撃を受けたのは「データをそのまま動画にできる」という体験だった。JSONファイルを書き換えるだけで動画の内容が変わる——これはAfterEffectsとの本質的な違いだ。
この記事では、外部JSONからデータを読み込んでテキスト・グラフ・数字をアニメーションさせるRemotionの実装例を紹介する。月次レポート動画・ランキング動画・統計可視化動画を量産する際に使っている手法だ。
前提：Remotionのデータドリブン設計
AfterEffectsでデータ可視化動画を作ろうとすると、毎回手動でテキストを打ち直す必要がある。Remotionはそもそも「コンポーネントにpropsを渡す」Reactの設計思想で作られているため、データの差し替えがコードレベルで自然にできる。
// AfterEffects的発想（毎回手動）
// "売上: ¥1,234,567" → テキストレイヤーを毎月書き換え
// Remotion的発想（データドリブン）
const SalesCard: React.FC<{amount: number}> = ({amount}) => (
<div style={{color: '#fff', fontSize: 48}}>
売上: {amount.toLocaleString('ja-JP')}円
</div>
);あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
実装例1：カウントアップアニメーション
数字が「0」から目標値まで増えていくアニメーションは、データ可視化動画の定番だ。
import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
interface CountUpProps {
from: number;
to: number;
startFrame: number;
durationFrames: number;
prefix?: string;
suffix?: string;
}
export const CountUp: React.FC<CountUpProps> = ({
from, to, startFrame, durationFrames, prefix = '', suffix = ''
}) => {
const frame = useCurrentFrame();
const progress = interpolate(
frame,
[startFrame, startFrame + durationFrames],
[0, 1],
{ extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
easing: (t) => 1 - Math.pow(1 - t, 3) } // easeOutCubic
);
const value = Math.round(from + (to - from) * progress);
return (
<span style={{fontVariantNumeric: 'tabular-nums'}}>
{prefix}{value.toLocaleString('ja-JP')}{suffix}
</span>
);
};easeOutCubicを使うことで、数字が最初は勢いよく増えて最後にゆっくり止まる、自然な動きになる。
実装例2：JSONからグラフを生成
外部JSONを読み込んで棒グラフをアニメーションさせる実装だ。月次レポートを毎月データだけ更新して動画を生成するために使っている。
// data.json
{
"title": "月次売上推移",
"unit": "万円",
"bars": [
{"label": "10月", "value": 120},
{"label": "11月", "value": 156},
{"label": "12月", "value": 234},
{"label": "1月", "value": 189}
]
}
// BarChart.tsx
import data from './data.json';
export const BarChart: React.FC = () => {
const frame = useCurrentFrame();
const maxVal = Math.max(...data.bars.map(b => b.value));
return (
<div style={{display:'flex', alignItems:'flex-end', gap:16, height:300}}>
{data.bars.map((bar, i) => {
const barHeight = interpolate(
frame,
[i * 5, i * 5 + 20],
[0, (bar.value / maxVal) * 280],
{extrapolateLeft:'clamp', extrapolateRight:'clamp'}
);
return (
<div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
<span style={{color:'#fff',marginBottom:4}}>{bar.value}</span>
<div style={{width:60, height:barHeight, background:'#e94560', borderRadius:'4px 4px 0 0'}}/>
<span style={{color:'rgba(255,255,255,0.7)',marginTop:6,fontSize:14}}>{bar.label}</span>
</div>
);
})}
</div>
);
};棒グラフが左から順番に伸びる演出は、i * 5のオフセットによってスタガー（時差）アニメーションを実現している。AfterEffectsのエクスプレッションで同じことをやるより、コードの方が圧倒的に直感的だ。
実装例3：テキストのスタガーアニメーション
タイトルや見出しを「1文字ずつ表示」するアニメーションは可視化動画でよく使う。
export const TypeWriter: React.FC<{text: string; startFrame: number}> = ({text, startFrame}) => {
const frame = useCurrentFrame();
const charsToShow = Math.floor(
interpolate(frame, [startFrame, startFrame + text.length * 2], [0, text.length],
{extrapolateLeft:'clamp', extrapolateRight:'clamp'})
);
return <span>{text.slice(0, charsToShow)}</span>;
};calculateMetadataでデータから動画尺を動的に決める
データの量によって動画の長さを動的に変えたい場合はcalculateMetadataを使う。
export const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
const fps = 30;
// データ件数 × 1秒ずつ表示 + オープニング2秒 + エンディング3秒
const durationInFrames = (props.data.length * fps) + (2 * fps) + (3 * fps);
return { durationInFrames, fps };
};ClaudeCodeとの連携：データ可視化動画の完全自動生成
実際の運用では、ClaudeCodeにデータを渡して「このデータを可視化するRemotionコンポーネントを生成して」と指示することで、コーディングの大半を自動化している。Reactの知識とRemotionの概念を理解していればClaudeCodeが出力するコードのレビューができる。この「レビューできる」という状態が重要で、コードが読めない状態でAIが生成したコードをそのまま使うのは危険だ。
まとめ
Remotionのデータドリブン設計は、AfterEffectsの「毎回手動」という制約を根本から覆す。特にレポート動画・ランキング動画のような「構造は同じでデータだけ変わる」コンテンツに圧倒的な威力を発揮する。Reactの基礎知識があれば、AfterEffectsより早く習得できる部分も多い。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。