remotion-explainer-video

snapcn から構築する Remotion 解説動画

Remotion でナレーション付きの解説動画を作成します。ナレーションに合わせてタイミングを調整し、字幕を焼き込み、画面上のすべてのビートに snapcn のシーンを使います。snapcn のシーンは shadcn CLI でインストールでき、プロジェクトには自分で所有するコードとして追加されます。

手書きのスライドではなく、snapcn を使う理由。 動画を一から作ると、グラデーションの上に箇条書きがフェードインするだけになりがちです。snapcn を使えば、強く切り替わるメッセージ、状態が変化するステータス、拡大する数値、デバイス上の製品など、各ビートを実際のショットとして表現できます。

snapcn のルール

1. 該当するものがない場合を除き、すべてのビートに snapcn コンポーネントを使います。 長さを含むカタログはこちらです： https://snapcn.dev/llms-components.txt?ref=skill-explainer。ページはすべて Markdown 形式で取得できます。例： https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer。
2. コンポーネント名を独自に作らないでください。 インストールできるのは、このリストにある名前だけです。
3. すべてのテキストプロパティを設定してください。 シーンにはサンプルの文言が含まれているため、設定しないと動画にそのまま残ります。

カタログ全体を確認するには、アンブレラとなるスキルもインストールしてください： npx skills add snapcndev/snapcn --skill snapcn。

ワークフロー

1. まずスクリプトを書く

コードを書く前に、各ビートにつき1文ずつナレーションを書きます。150語で約1分です。

ビート	内容	snapcn シーン	フレーム数
導入	視聴者自身の言葉で問題を提示	punch-lines、type-morph	144 / 94
仕組み	2～3つの手順または状態	status-cycle、word-flip、card-rail	198 / 180 / 108
実演	製品が機能する様子	laptop-frame、phone-frame、screen-recording	240 / 240 / 139
裏付け	実際の数値を1つ	count-grid	47
締め	名前	wordmark-cut、block-wordmark	66 / 150

2. ナレーションと単語単位のタイミング

• ナレーションを録音または生成し、public/voiceover.mp3 に配置します。
• Whisper（@remotion/install-whisper-cpp）または TTS プロバイダーから、@remotion/captions 形式の単語単位のタイミング { text, startMs, endMs }[] を取得します。
• 動画の長さはナレーションに合わせます。 各ビートのシーケンスを対応する文の長さに合わせます。シーン本来の長さ（フレーム数の列）より短くしてはいけません。

3. 字幕

• word-captions：トランスクリプトを順に表示する焼き込み字幕です。captions を渡します。 スタイルは preset で指定します。縦向きの場合は aspect="9:16" を使用します。
• karaoke-captions：強調したい引用を1つ表示するための、単語ごとに塗りつぶされる1行字幕です。
• 字幕はすべてのシーンの上に表示され、背後のシーンに対して透過します。

4. ビルド

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

約15秒の解説動画です。問題 → 仕組み → 裏付け → 名前の順に、ナレーションと字幕を付けて構成します。public/voiceover.mp3 と4枚のスクリーンショットを用意すれば、このまま型チェックとレンダリングができます：

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// Word-level timings from Whisper (or @remotion/captions): { text, startMs, endMs }[].
const captions = [
  { text: "Closing", startMs: 0, endMs: 400 },
  { text: "the", startMs: 400, endMs: 550 },
  { text: "books", startMs: 550, endMs: 1000 },
  { text: "takes", startMs: 1000, endMs: 1350 },
  { text: "a", startMs: 1350, endMs: 1450 },
  { text: "week.", startMs: 1450, endMs: 2100 },
];

// Real product screenshots in public/. Scenes fall back to snapcn sample images without them.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

// ~15s explainer: problem → how it works → result → name, narrated, captions burned in.
export const Explainer: React.FC = () => (
  <AbsoluteFill>
    <Series>
      <Series.Sequence durationInFrames={144}>
        <PunchLines script="Closing the books / takes a week. | Acme / does it overnight." />
      </Series.Sequence>
      <Series.Sequence durationInFrames={198}>
        <StatusCycle
          prefix="Every invoice gets"
          statuses={["imported", "matched", "reconciled"]}
          chips={["Stripe", "QuickBooks", "Xero"]}
        />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <CountGrid from="5" to="500" noun="teams" cards={shots} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={66}>
        <WordmarkCut word="acme." />
      </Series.Sequence>
    </Series>
    <WordCaptions captions={captions} />
    <Audio src={staticFile("voiceover.mp3")} />
  </AbsoluteFill>
);

durationInFrames={468}、fps={30}、width={1280}、height={720} で登録します。実際の解説動画では、各シーケンスの長さを文のタイミングから算出し、合計の長さをナレーションの再生時間に合わせて設定します。

5. 確認とレンダリング

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

• 各シーンは、対応する文が読み上げられている間、画面に表示されます。音声をオンにして一度確認します。
• 字幕がシーン独自の見出しに重ならないようにします。重なる場合は、シーンのテキストの位置を移動するか、字幕ページを短くします（maxWords）。
• 画面上の文字はすべてスクリプトに含まれており、デフォルトのサンプル文言が残っていないことを確認します。

ルール

• 言ってから見せます。 シーンには、ナレーションで述べた内容を表示します。同時に別のテキストを読ませてはいけません。
• 1つのビートにつき1つのアイデアとし、長さは約5～8秒にします。
• 字幕を焼き込みます。 多くの視聴者はミュートで再生を始めます。
• 実際の数値だけを使います。 裏付けのビートに使う指標を捏造してはいけません。

snapcn Pro

Pro では、orbit-flow（ラベル付きの3つのステップで仕組みを説明します）、 proof-line、hex-tally、metric-morph（印象に残る数字）、read-through などの解説向け演出に加え、 テンプレートと、スクリプトから演出を計画する snapcn MCP が利用できます： claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY。components.json にキーを設定すれば、Pro コンポーネントは無料版と同じ方法でインストールできます（https://snapcn.dev/account?ref=skill-explainer）。 プラン：https://snapcn.dev/docs/pricing?ref=skill-explainer

Pro の利用をまだ検討中ですか？Pro コンポーネントのひとつである Manifesto は、メールアドレスの確認が済めば無料で利用できます：https://snapcn.dev/docs/pricing?ref=skill-explainer#free

クレジット表記

レンダリングの監査と「字幕を映像に焼き付ける」ためのガイダンスは、 everyinc/product-launch-video（MIT、 © 2026 Every Media, Inc.）を参考にしています。THIRD_PARTY_NOTICES.md をご覧ください。