RemotionでSaaSのプロダクトツアー・オンボーディング動画を作る
RemotionでSaaSのプロダクトツアー・オンボーディング動画を作る
SaaSプロダクトにおいて、ユーザーがサインアップ後の最初のセッションで価値を体感できるかどうかは、長期的な継続率を大きく左右する。オンボーディングの成否はプロダクトの生存に直結するといっても過言ではない。そして動画は、テキストや静的なスクリーンショットよりも圧倒的に高い情報伝達効率を持つメディアだ。ユーザーは読まずに見る。文脈を素早く把握し、プロダクトへの信頼を動画のトーンから感じ取る。
問題は、従来のオンボーディング動画制作がコスト高であることだ。スクリーンレコーディングで作った動画は、UIを少し変更しただけで陳腐化する。顧客名や企業ロゴを入れてパーソナライズしたいとなれば、編集工数は膨らむ一方だ。Remotionはこの問題をコードで解決する。
スクリーンレコーディングの限界とRemotionの優位性
LoomやOBSに代表されるスクリーンレコーディングツールは「今この瞬間の画面」を記録するキャプチャベースのアプローチだ。UIが変われば動画は古くなる。顧客ごとにパーソナライズするには動画を撮り直すか、編集ソフトでテロップを差し替える作業が発生する。
RemotionはReactコンポーネントを1フレームずつレンダリングする。記録するUIは実在しなくてよい——Reactで動くUIのモックを作り、フレームに連動してアニメーションさせる。この設計には3つの決定的な利点がある。
更新コストが限りなく低い。 UIデザインが変わったら、モックコンポーネントを数行修正するだけで全動画が更新される。撮り直しは不要だ。
無制限のパーソナライズが可能。 すべてのフレームはpropsで駆動される。customerName、planTier、logoUrlをpropsとして渡すだけで、テキスト、カラー、表示機能が自動的に切り替わる。
大量自動生成ができる。 Remotionのレンダリングエンジンを呼び出すNode.jsスクリプトを書けば、1日に数千本のパーソナライズ動画を自動生成できる。サインアップイベントをトリガーに、顧客ごとの動画を数分以内に配信するパイプラインが実現する。
UIモックアニメーションの構築
オンボーディング動画に必要なのは、ピクセルパーフェクトな本物のUIではない。ユーザーが「この機能はこう動くのか」と理解できる、説得力のある近似表現だ。
以下はSaaSダッシュボードのメトリクスカードが滑らかにカウントアップしながら登場するコンポーネントの例だ。
import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const MetricCard: React.FC<{
label: string;
value: number;
delay: number;
}> = ({ label, value, delay }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const slideY = spring({
frame: frame - delay,
fps,
config: { stiffness: 120, damping: 18 },
from: 40,
to: 0,
});
const opacity = interpolate(frame - delay, [0, 20], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
const displayValue = Math.round(
interpolate(Math.max(0, frame - delay), [0, 45], [0, value], {
extrapolateRight: "clamp",
})
);
return (
<div
style={{
transform: `translateY(${slideY}px)`,
opacity,
background: "rgba(255,255,255,0.08)",
borderRadius: 12,
padding: "24px 28px",
width: 220,
fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif',
}}
>
<div style={{ color: "#94a3b8", fontSize: 14, marginBottom: 8 }}>
{label}
</div>
<div style={{ color: "#f1f5f9", fontSize: 36, fontWeight: 700 }}>
{displayValue.toLocaleString()}
</div>
</div>
);
};
delayプロップで各カードの登場タイミングをずらすことで、スタガードアニメーション（時差登場）を実現している。useCurrentFrame()からdelayを引いた値をspring()とinterpolate()に渡すのが、Remotionでのディレイ実装の定番パターンだ。
機能ハイライトの演出パターン
プロダクトツアー動画でよく使われるのが「特定のUI要素だけを明るくして、周囲を暗くするスポットライト演出」だ。SVGのマスクを使うと綺麗に実装できる。
import { useCurrentFrame, interpolate } from "remotion";
export const Spotlight: React.FC<{
targetX: number;
targetY: number;
targetW: number;
targetH: number;
children: React.ReactNode;
}> = ({ targetX, targetY, targetW, targetH, children }) => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 15], [0, 0.75], {
extrapolateRight: "clamp",
});
return (
<div style={{ position: "relative", width: 1920, height: 1080 }}>
{children}
<svg
style={{ position: "absolute", top: 0, left: 0 }}
width={1920}
height={1080}
>
<defs>
<mask id="spotlight-mask">
<rect width={1920} height={1080} fill="white" />
<rect x={targetX} y={targetY} width={targetW} height={targetH} rx={8} fill="black" />
</mask>
</defs>
<rect
width={1920}
height={1080}
fill={`rgba(0,0,0,${opacity})`}
mask="url(#spotlight-mask)"
/>
</svg>
</div>
);
};
これにカーソルアニメーション（interpolateでleftとtopを動かす）とコールアウトテキストを組み合わせると、プロダクトツアーの典型的な演出が完成する。
データドリブンなカスタマイズ
Remotionのオンボーディング動画で最も強力な機能が、propsによるパーソナライズだ。zodでスキーマを定義することで、型安全なデータドリブン動画生成が実現する。
import { z } from "zod";
export const onboardingSchema = z.object({
customerName: z.string(),
companyName: z.string(),
planTier: z.enum(["starter", "growth", "enterprise"]),
primaryColor: z.string().default("#6366f1"),
featureSet: z.array(z.string()),
});
export type OnboardingProps = z.infer<typeof onboardingSchema>;
このスキーマに基づいてコンポーネントを作ると、JSONを渡すだけで顧客ごとに異なる動画が生成される。
{
"customerName": "田中 健二",
"companyName": "株式会社サンプル",
"planTier": "enterprise",
"primaryColor": "#0ea5e9",
"featureSet": ["analytics", "integrations", "sso"]
}
エンタープライズプランの顧客にはSSO連携の説明を含む動画が生成され、スタータープランの顧客には基本機能のウォークスルーが生成される。同一のRemotionコンポジションから、顧客ごとに完全に異なるコンテンツを持つ動画が作られる。
大量自動生成パイプラインの構築
Remotionはサーバーサイドからレンダリングを呼び出せるNode.js APIを提供している。これを使ったサインアップ連動の自動生成フローを概念的に示す。
import { renderMedia, selectComposition } from "@remotion/renderer";
async function generateOnboardingVideo(customer: OnboardingProps) {
const composition = await selectComposition({
serveUrl: "https://your-remotion-bundle.vercel.app",
id: "OnboardingVideo",
inputProps: customer,
});
await renderMedia({
composition,
serveUrl: "https://your-remotion-bundle.vercel.app",
codec: "h264",
outputLocation: `./output/${customer.companyName}.mp4`,
inputProps: customer,
});
}
本番環境ではoutputLocationをS3やCloudflare R2へのアップロードに置き換え、アップロード完了後にアプリ内通知やメールでビデオURLを顧客に届ける。サインアップイベントから動画到着まで5分以内に完了するパイプラインが構築できる。
より高いスループットが必要な場合はRemotion Lambdaを使う。AWSのLambdaファンクションが並列にフレームを分散処理するため、数百本の同時レンダリングが可能だ。
プロダクトアナリティクスとの連携
さらに高度な活用として、プロダクトアナリティクスのデータを使って「どのオンボーディング動画を送るか」を動的に決定できる。
async function selectAndSendOnboarding(userId: string) {
const events = await analytics.getUserEvents(userId, { days: 7 });
// アナリティクス機能をまだ使っていないユーザーにはその機能を優先紹介
const hasUsedAnalytics = events.some((e) => e.name === "analytics_viewed");
const featureSet = hasUsedAnalytics
? ["integrations", "collaboration", "exports"] // より深い機能を紹介
: ["analytics", "dashboards", "filters"]; // まず基本機能を紹介
await generateOnboardingVideo({
customerName: await getCustomerName(userId),
companyName: await getCompanyName(userId),
planTier: await getCustomerPlan(userId),
primaryColor: "#6366f1",
featureSet,
});
}
ユーザーの行動履歴に基づいて、その顧客が次に必要としている機能を重点的に紹介する動画を自動的に生成・送信できる。スクリーンレコーディングベースのツールでは実現不可能な粒度のパーソナライズだ。
複数シーンの構成設計
完成したオンボーディング動画は通常3〜5シーンで構成される。Remotionの<Sequence>コンポーネントを使って整理する。
import { Sequence } from "remotion";
export const OnboardingVideo: React.FC<OnboardingProps> = (props) => {
return (
<>
{/* シーン1: ウェルカム（0〜90フレーム） */}
<Sequence from={0} durationInFrames={90}>
<WelcomeScene customerName={props.customerName} />
</Sequence>
{/* シーン2: 機能1のハイライト（90〜180フレーム） */}
<Sequence from={90} durationInFrames={90}>
<FeatureScene feature={props.featureSet[0]} color={props.primaryColor} />
</Sequence>
{/* シーン3: 機能2のハイライト（180〜270フレーム） */}
<Sequence from={180} durationInFrames={90}>
<FeatureScene feature={props.featureSet[1]} color={props.primaryColor} />
</Sequence>
{/* シーン4: CTA（270〜360フレーム） */}
<Sequence from={270} durationInFrames={90}>
<CtaScene planTier={props.planTier} />
</Sequence>
</>
);
};
30fpsで360フレーム、合計12秒の動画だ。情報量として十分でありながら、視聴完了率が維持できる長さでもある。
本番リリース前のチェックリスト
オンボーディング動画パイプラインを本番に投入する前に以下の項目を確認する。
- 顧客名・企業名など外部入力の文字列がコンポーネントで安全に扱われているか（XSSに相当するリスクを考慮すること）
- ロゴURLの読み込みにRemotionの
<Img>コンポーネントを使用しているか（通常の<img>タグでは読み込み未完了フレームが混入するリスクがある） - 長い企業名・日本語・非ASCII文字での表示崩れをテストしているか
- エンタープライズプランの動画（シーン数が多い）のレンダリング時間が許容範囲内か
- 生成した動画ファイルをCDN経由で配信しているか
RenderCompのテンプレートで開発を加速する
SaaSオンボーディング動画のパイプラインを一から構築するには相応の設計コストがかかる。RenderCompは本番品質のRemotionテンプレートを提供しており、ダッシュボードモック、機能ハイライトアニメーション、プロダクトツアーコンポジションなど、本記事で解説したパターンを実装済みのコンポーネントが揃っている。rendercomp.comでテンプレート一覧を確認し、開発時間を大幅に短縮してほしい。
FAQ
Q1: 本物のアプリケーションUIを撮影・キャプチャする必要がありますか？
不要です。Remotionはスクリーンキャプチャを一切使いません。UIをReactコンポーネントで再現し、フレームに連動してアニメーションさせます。実在するアプリケーションへの依存は一切ありません。
Q2: 30秒のオンボーディング動画のレンダリングにどれくらいの時間がかかりますか？
コンポジションの複雑さとハードウェアによりますが、現代的なノートPCでは1080p・30秒の動画が1〜3分程度でレンダリングできます。Remotion Lambdaを使うとフレームを並列処理するため、同じ動画が30秒以内に完成することもあります。
Q3: 自動生成パイプラインにナレーション音声を追加できますか？
できます。RemotionはAudio APIを提供しており、音声ファイルをコンポジションのタイムラインと同期させられます。大量生成パイプラインには外部のTTS（Text-to-Speech）APIと組み合わせ、スクリプトテンプレートから音声を生成してAudio propsとして渡す構成が実用的です。
Q4: 日本語や長い名前を持つ顧客でも表示が崩れませんか？
ReactはUnicode文字列をネイティブに扱えるため、日本語の顧客名はそのまま表示できます。ただし、サーバーサイドレンダリング（Lambda等）環境では日本語フォントが未インストールの場合があります。その場合はRemotionのfont loading APIを使ってフォントファイルを明示的に読み込む設定が必要です。
Q5: 生成した動画にクローズドキャプション（字幕）を追加できますか？
できます。字幕テキストをSequenceで時間制御してコンポーネントとして重ねる方法で、ナレーションと同期した字幕を動画内に直接レンダリングできます。外部字幕ファイル（SRT/VTT）を使う場合は、タイムスタンプをフレーム番号に変換してuseCurrentFrame()で表示制御します。
Q6: UIデザインが変わったとき、既存の動画はどうなりますか？
スクリーンレコーディングと異なり、Remotionのモックは数行のJSXです。UIが変更されたらモックコンポーネントを更新し、再レンダリングするだけで全動画が最新UIで更新されます。撮り直しの手間は一切かかりません。
Q7: 1日に何本まで動画を自動生成できますか？
Remotion Lambdaを使う場合、AWSのLambdaコンカレンシー設定に依存します。上限を引き上げれば1日数千本規模の並列レンダリングが可能です。ピークタイム（サインアップが集中する時間帯）には事前にLambdaインスタンスをウォームアップしておくことが推奨されます。
Q8: 出力するビデオフォーマットはどれを選べばよいですか？
Web配信にはH.264（MP4）が最も広い互換性を持ち、全主要ブラウザで再生できます。ファイルサイズを抑えつつ高品質を維持したい場合はH.265（HEVC）も選択肢ですが、iOS SafariとmacOS Safariでは対応していますが、一部のAndroid/デスクトップブラウザでは再生できないケースがあります。Remotionのcodecオプションで切り替えが可能です。