プレゼンテーションビデオは何をしますか？

デッキまたはスライドのアウトラインを、ナレーション付きで自動進行するアニメーションビデオに変換します。各スライドはモーショングラフィックスとして再構築されます — 要素の段階的な表示、実際のトランジション、ナレーションにロックされたタイミング — PowerPointをクリックしている画面録画ではありません。

使用するタイミング

ピッチデッキ、ウェビナー、またはコースモジュールを、自動再生ビデオにしたい場合。
箇条書きのアウトラインを、ナレーション付きのアニメーションスライドにしたい場合。
スライドのタイミングがナレーションに正確に追従する必要があるデッキ（自動進行、クリック不要）。

再構築、録画はしない

画面録画はデッキの静的な見た目、マウスのジッター、不自然なスライドカットを継承します。コード（Remotion）で再構築することで得られるものは：フレーム単位で決定論的なリビール、実際にイージングするトランジション、どの解像度でも鮮明なテキスト、そして音声の長さによって駆動されるスライド時間です。デッキはスクリプトになり、ビデオは新しい成果物になります。

ナラティブフロー：デッキはN枚のスライドではなく、一つの議論

タイミングやモーションの前に、ストーリーを修正します。自動進行するプレゼンテーションビデオには、迷子になったスレッドを回復するプレゼンターがいません — 構造自体が論理を伝えなければなりません。まず背骨を作ります。スライドはその上にあるビートです。

一つの一貫したテーマ（背骨）。 デッキの単一の要点を一文で述べます。すべてのスライドはその一文を前進させなければなりません。もしスライドがそうでなければ、それを削除するか付録に移動します。視聴者は一度見ただけで背骨を再現できるはずです。
スライドごとに一つのメッセージ。 スライドは正確に一つのポイントを伝えます — そのタイトルがそのポイントであり、「チャーンは私たちの真の成長税である」のような主張として表現され、「チャーン」のようなラベルではありません。二つのアイデアがある場合は、二つのスライドを意味します。
トランジションは論理を運び、単なるモーションではない。 スライド間のカットは「次は何か？」に答えるべきです — したがって、しかし、つまり、これが証拠です。モーションを論理的な動きに合わせます。「そしてまた」には静かなフェードを、「新しい幕」にはより大きなセクションプッシュを。論理的なステップを示さないトランジションは単なる装飾です。
フックで始め、CTAで締めくくる。 最初のスライドは約5秒で注目を集めます — 鋭い質問、驚くべき統計、ステークス — アジェンダやロゴのホールドではありません。最後のスライドは、あなたが望む単一のアクションを述べます（「パイロットを開始する」、「15%で200万ドルを投資する」）、テイクアウェイフレームとして静止します。

緊張 → 解決（ピッチの背骨）

ピッチはドラマであり、機能リストではありません。緊張が高まり、そして解決するようにシーケンスします — 各幕が次の幕を設定します。

幕	ビート	役割
問題	「ここが壊れている/危機に瀕している」	視聴者が感じる緊張を生み出す
洞察	「ここが誰もが見逃している点だ」	明白でない転換；解決策を得る
解決策	「ここが私たちの答えだ」	問題が作った緊張を解決する
証明	「ここがそれが機能する理由だ」	牽引力、デモ、数字
依頼	「ここが私たちが望むものだ」	一つの具体的なCTA

問題が着地する前に解決策を明かさないでください — 価値のない解決策は機能のように感じられ、安堵感にはなりません。スライドをこれらの幕にマッピングしてください。幕が欠けている場合、議論に穴があります。

ペーシング：ビルドを音声と同期させる

一貫したテーマは時間とともに展開されるため、画面上のビルドとナレーションは一緒に進行しなければなりません — ナレーションが時計を所有し（次のセクション）、リビールはそれに対してスケジュールされるため、視聴者は話されている通りに行を読み、決して先読みしません。スライドごとに一つのメッセージがあれば、これは自然になります。スライドは、声がそれを主張する正確な時間だけ一つのポイントを保持し、その後トランジションが次の論理的なステップを示します。一つのポイントに関する長いナレーションは、スライドを分割することを意味し、ビルドを競わせることではありません。

唯一のルール：ナレーションが時計を所有する

各スライドは、そのナレーション音声の正確な長さに、小さなハンドルを加えたものだけ続きます。 すべてのナレーションクリップの実際の時間を測定し、フレームに変換し、それをスライドの長さにします。「このスライドは約5秒と感じる」と目視で判断しないでください — 常にずれが生じ、音声が途切れたり、早く終わったりします。

import { getAudioDurationInSeconds } from "@remotion/media-utils";
// RemotionのcalculateMetadata() / ビルドステップで、スライドごとに:
const sec = await getAudioDurationInSeconds(slide.audioUrl);
const HANDLE = 0.4; // 音声終了後の呼吸のための余裕
slide.durationInFrames = Math.ceil((sec + HANDLE) * fps);

そして、スライド内部のリビールはその時間に対してスケジュールされます — 箇条書きは固定されたグリッドではなく、言葉に合わせて配置されます。

ビルドリビール：装飾ではなく、表示するためにアニメーション化する

ビルドのポイントはペーシングです：ナレーションがそこに達したときに各要素を表示し、視聴者が話されている行を読むように — 三行先を読むのではなく。要素を段階的に表示します。タイトル、ロゴ、背景の形状は静的に保ちます。

選択肢	推奨	理由
出現動作	フェード＋12～24ピクセル上昇	洗練され、穏やか；「到着している」と読める
要素ごとの時間	0.25～0.5秒	流れるのに十分速く、認識するのに十分遅い
箇条書き間の間隔	0.15～0.4秒	連続的、テキストの壁ではない
避けるべきもの	フライイン、スピン、バウンス、タイプライター	装飾的に読め、声と競合する

間隔はuseCurrentFrame()を使用して駆動し、レンダリングされた音声と完全に同期したままにします（完全なコンポーネントについてはreferences/slide-components.mdを参照）。

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";

const Bullet: React.FC<{ index: number; children: React.ReactNode }> = ({ index, children }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const STAGGER = 8;                         // 箇条書き間のフレーム数（30fpsで約0.27秒）
  const enter = frame - index * STAGGER;     // 各箇条書きは後に開始
  const p = spring({ frame: enter, fps, config: { damping: 200 }, durationInFrames: 12 });
  return (
    <li style={{ opacity: p, transform: `translateY(${interpolate(p, [0, 1], [18, 0])}px)` }}>
      {children}
    </li>
  );
};

スライド間のトランジション

@remotion/transitionsの<TransitionSeries>を使用してスライドをシーケンスします。各スライドは、ナレーションから派生したdurationInFramesを持つSequenceです。Transitionがそれらの間に配置されます。トランジションは控えめに保ちます（短いフェードまたは穏やかなスライド）— コンテンツが主役であり、すべてのカットで忙しいワイプはすぐに疲れます。

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  {slides.map((s, i) => (
    <React.Fragment key={s.id}>
      <TransitionSeries.Sequence durationInFrames={s.durationInFrames}>
        <Slide {...s} />
      </TransitionSeries.Sequence>
      {i < slides.length - 1 && (
        <TransitionSeries.Transition
          timing={linearTiming({ durationInFrames: 15 })}
          presentation={fade()}
        />
      )}
    </React.Fragment>
  ))}
</TransitionSeries>

より大きなトランジション（スライド/プッシュ）はセクション区切りのためだけに予約します — それは「新しいトピック」を示し、余分なモーションを得る価値があります。トランジションは両方の隣接スライドからフレームを借用するため、スライドのナレーションを完全に再生する必要がある場合は、その長さをスライドの予算に追加し戻します。references/sequencing.mdを参照してください。

タイトルとセクション区切り

タイトルカードとセクション区切りはビデオにリズムを与え、密度の高いスライドの間に視聴者が息をつくことを可能にします。区切りをそれ自身の短い「スライド」として扱います：大きなセクション番号/単語、セクションタイトル、約1.5～2秒のホールド、そして両側により顕著なトランジション。区切りの視覚言語（色、タイプ）を一貫させ、別のビデオではなく句読点として読まれるようにします。

テキストを読みやすく、ブランドに沿って保つ

スライドはテキストが多いため、読みやすさがすべてです。

タイプスケール、デッキスケールではない。 ラップトップで表示されるデッキと、フィードで表示されるビデオは異なります。1080pで本文を28～32ピクセル以上に、タイトルを56～80ピクセルにします。スライドに収めるために16ピクセルの脚注が必要な場合、それは二つのスライドに分割する必要があります。
スライドごとに一つのアイデア。 スライドのナレーションが長くなる場合は、分割します — 収めるためにタイプサイズを小さくすることは決してしません。
コントラスト＋安全マージン。 4.5:1以上のコントラスト比を保持します。すべてのコンテンツを中央90%以内に収め、プラットフォームのクロッピングに耐えられるようにします。
ブランドをテーマオブジェクトに固定する。 色、フォント、ロゴ、間隔は一つのthemeに格納し、すべてのスライドが一貫し、リブランドが一行の変更で済むようにします。

export const theme = {
  bg: "#0B0B12", fg: "#F5F5F7", accent: "#6C5CE7",
  font: "Inter, system-ui, sans-serif",
  titlePx: 72, bodyPx: 30, maxWidthPct: 90,
} as const;

ワークフロー

アウトライン → スクリプト。 一つのスライド = 一つのアイデア + 正確なナレーション行。これが唯一の真実の情報源です。
スライドごとにナレーションを生成/録音する。 スライドごとに一つの音声ファイル（TTSまたは録音）。
音声を測定 → スライド時間を設定する。 getAudioDurationInSeconds → フレーム（上記のルール）。
useCurrentFrame()に結びついた段階的なリビールを持つスライドコンポーネントを構築する。
<TransitionSeries>でシーケンスする。 タイトルとセクション区切りを追加します。
各スライドの音声をそのSequence内にマウントします。 これにより、声と映像が決してずれることがありません。
読みやすさ/ブランドパスを確認し、MP4にレンダリングします。

出力チェックリスト

すべてのスライドのdurationInFramesは、推測ではなく、そのナレーション音声から派生しています。
各スライドの音声は、それ自身のSequence内にマウントされています（ビジュアル＋音声が一緒にロックされています）。
箇条書きはuseCurrentFrame()を介して順次表示されます。タイトル/ロゴは静的です。
リビールはフェード＋上昇で、0.25～0.5秒、装飾的な効果はありません。
スライド間のトランジションは控えめです。大きなトランジションはセクション区切りにのみ使用します。
1080pで本文タイプは28ピクセル以上、4.5:1以上のコントラスト、コンテンツは中央90%以内。
スライドごとに一つのアイデア。長いナレーションはタイプサイズを縮小する代わりにスライドを分割します。

配信と検証（レンダリングされた静止画 → MP4）

パッケージ化されたヘルパー（scripts/）：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.pngを使用して静止画をタイル表示し、scripts/probe-mp4.sh out.mp4 [WxH] [fps]でエンコードをアサートします。scripts/README.mdを参照してください。

Remotionはフレーム決定論的です — すべての箇条書きビルド、トランジション、スライド位置はuseCurrentFrame()の純粋関数であるため、シークハーネスなしで任意のフレームをヘッドレスでレンダリングできます。納品物はナレーション付きMP4であるため、静止画検査でクリップされたタイトル、ブランドから外れた色、またはあふれた箇条書きを、完全なエンコードを無駄にする前にキャッチできます。

出力契約：

デッキが登録された（<Composition> + zod schema + defaultProps）、すべてのモーションがフレーム駆動（タイマー/Date.now()/Math.random()なし）のRemotionプロジェクト。各スライドの音声はそれ自身のSequence内にマウントされています。
納品物 = レンダリングされたout/*.mp4（およびプロジェクト。ユーザーが新しいスライド/ナレーションで再レンダリングできるように）。
スライド時間はナレーションから派生 — calculateMetadataで合計およびスライドごとのdurationInFramesを計算します（各音声クリップを測定します）。手作業では決して行いません。

検証ループ — 静止画をレンダリング → 検査 → エンコード。 最初に単一フレームをレンダリングします（安価、ビデオエンコードなし）。その後、各スライドが正しく構築され、読める状態になってから一度だけエンコードします。

# 1. フレーム精度の静止画 — SHIPPED propsを使用。各スライドの落ち着いた状態内に着地:
npx remotion still Deck out/f-title.png --frame=20  --props='{"slides":[...]}'   # タイトルカード安定
npx remotion still Deck out/f-mid.png   --frame=240 --props='{"slides":[...]}'   # コンテンツスライド、箇条書き構築済み
npx remotion still Deck out/f-end.png   --frame=899 --props='{"slides":[...]}'   # 最終フレーム = durationInFrames - 1

# 2. 各PNGを検査 — 忠実度（スライドテキスト正確、数字/ラベル正しい、ブランドの色/フォント適用）
#    およびアーティファクト（テキストあふれ、本文タイプが小さすぎる、中央90%の安全クロップ外のコンテンツ、
#    フォント欠落、低コントラスト、スライドが落ち着くべき場所で箇条書きが途中で構築されている）。

# 3. 静止画が問題ない場合のみ、エンコード:
npx remotion render Deck out/deck.mp4 --props='{"slides":[...]}'

npx remotion compositionsを使用してデッキのdurationInFrames/fpsを読み取り、最終フレームを選択します。トランジション上ではなく、各スライドのホールド内の静止画をサンプリングして、構築された状態を判断します。
データ駆動/バッチ：すべてのバリアントをレンダリングする前に、代表的なデッキ（実際のスライドとナレーション）を静止画で検証します — タイプスケールやあふれバグをデッキごとではなく一度だけキャッチします。
READMEデモGIFを無料で：npx remotion render Deck out/demo.gif --codec=gif。

終了する前に：

npx remotion stillがタイトル、コンテンツスライド、最終フレームでクリーンにレンダリングされる — エラーなし、フォント欠落なし。
スライドテキストが正確で、1080pで本文タイプが28ピクセル以上、4.5:1以上のコントラスト、各フレームで全コンテンツが中央90%以内にある。
フレーム駆動のみ — Date.now()/Math.random()/ライブラリタイマーなし（決定論性がCIで維持される）。
出荷された propsが正しくレンダリングされる（defaultPropsだけでなく） — 正しいスライド、ナレーションがマウントされ、時間が音声から派生している。
完全なMP4がエンコードされ、再生される（音声＋ビジュアルがロックされている）。（オプション）README用にGIFがレンダリングされている。

リファレンスファイル

references/slide-components.md — 完全に実行可能なRemotion Slide、段階的なBulletList、アニメーション化されたTitleCard、およびSectionDividerコンポーネント。共有テーマと、<Audio>を介してマウントされたスライドごとのナレーションを備えています。
references/sequencing.md — 完全なデッキシーケンサ：すべてのナレーションクリップを測定し、合計およびスライドごとの時間を設定するcalculateMetadata、<TransitionSeries>アセンブリ、トランジションフレーム予算の会計処理、およびJSONデッキスキーマからビデオへのデータフローを備えています。

プレゼンテーションビデオ