説明ビデオ

1つのメッセージを、30〜90秒のペース配分されたナレーション付きショートビデオに変換します。スクリプト→ストーリーボード→シーン構築→ナレーション/キャプション同期→編集→仕上げの完全なパイプラインを、一貫したスタイルシステムで実行します。

使用すべき場面

30〜90秒の製品、ハウツー、オンボーディング、コンセプトビデオを制作するとき。
生のアイデアや機能から、スクリプト、ストーリーボード、組み立てられた作品に仕上げるとき。
ナレーションを映像に同期し、ミュート再生用にキャプションを追加するとき。

ストーリー構成（これを最初に決定する）

説明ビデオは「議論」であり、「機能ツアー」ではありません。パイプラインのどの工程よりも前に、ナラティブを確定させ、それ以降のすべての選択がそのナラティブに奉仕するようにします。

1つの核となるアイデア。 視聴者が後で繰り返せる1文。1行で言い表せないなら、そのビデオには背骨がありません—言い表せるまで範囲を削ってください。そのアイデアに奉仕しないものはすべて、縮小ではなく削除します。
スクリプト優先。 VOが背骨です。映像は話されている行を説明するものであり、決してリードしてはいけません。ストーリーボードやアニメーションを作る前に、言葉を書き、時間を計ってください。構築済みのシーンをカットするより、文をカットする方がはるかにコストが低いです。
「どのように」に「ステークス」で価値を与える。 問題から仕組みに飛ばないでください。視聴者に問題のコストを感じさせてください。その緊張が、視聴者に解決策を見させるのです。

説明ビデオのストーリーアーク—各ステージを順に：

ステージ	ナラティブの役割	視聴者が考えるべきこと
問題	彼らの言葉で痛みを名付ける	「それって私のことだ。」
ステークス	その痛みのコスト（時間、お金、リスク）を示す	「これを直さなきゃ。」
解決策	製品/アイデアを修正策として1行で紹介する	「ああ—それで解決だ。」
仕組み	1〜3の具体的なステップでメカニズムを示す	「どうやってそれをやるのかわかった。」
ペイオフ / CTA	アフター状態 + 1つの次のアクション	「それが欲しい。Xをやろう。」

（下の スクリプト計算式 の表は、これらのステージをランタイムシェアと単語予算にマッピングします—このセクションはなぜと順序、あのセクションはどのくらいです。）

1つのアナロジーを選び、それで通す

抽象的な仕組みは、視聴者がすでに知っている何かにマッピングされると理解されやすくなります。1つのメタファーを選び、シーン間で一貫して使い続けてください—アナロジーを切り替えると、理解がリセットされます。

視聴者の世界（キュー、サーモスタット、組立ライン）からメタファーを選び、エンジニアリングの領域からは選ばない。
ビデオにつき1つのメタファー。映像の文法とVOの文言の両方に再利用する。
テストする：アナロジー自体に説明が必要なら、それは間違ったメタファーです。

ビートごとのペーシング

ペースは緊張を追跡します。問題/ステークスは素早く通過して価値に到達し、「仕組み」はゆっくりと各ステップを印象付け、ペイオフで余韻を持たせます。

ビート	感じ	カットのリズム
問題 / ステークス	軽快で、少し緊張した	速いカット、短いホールド
解決策	安堵のビート	1つの明確なホールド
仕組み	意図的で、1ステップずつ	最も遅い—各ステップを読むためにホールド
ペイオフ / CTA	自信に満ち、オープン	エンドカードをホールド；1つのCTA

パイプライン

スクリプト — 1つのコアメッセージ。構成：問題→解決策→仕組み→ペイオフ。タイトなVOを書き、〜2.3語/秒（約140 wpm）で時間を計る。60秒のビデオは約138語。
ストーリーボード — シーンごとに1つのアイデア。各フレームとそのトランジションをスケッチし、各VO行をビジュアルにマッピングする。
シーンを構築 — 図/データ、キネティックテキスト/キーワード、背景をアニメーション化する（テクニックは以下にインライン）。
ナレーションとキャプション — VOを録音/生成し、シーンカットをVOビートに合わせ、キャプションを焼き付ける（ほとんどの再生はミュート）。
編集 — ナレーションに合わせてカットし、各アイデアを着地するのに十分な時間ホールドし、メッセージを前進させないシーンは削除する。
仕上げ — カラーパス、一貫したイージング、オーディオミックス、エンドカード。

スクリプト計算式

ビート	役割	ランタイムの割合
問題	視聴者が感じる痛みを名付ける	約20%
解決策	製品/アイデアを修正策として紹介する	約15%
仕組み	メカニズムを1〜3の具体的なステップで示す	約45%
ペイオフ	結果 + 明確な次のステップ（CTA）	約20%

VOは最初に、話し言葉（短縮形、短い文）で書く。声に出して読み、何かを構築する前に時間を計る。

VOタイミング計算

ペース：明瞭で親しみやすいナレーションは約2.3語/秒（140 wpm）、技術的な行は約2.0に落とす。
シーンの長さをVO行から推定：秒 = 単語数 / 2.3、それに約0.4秒の余裕を加える。
VOのないシーン（純粋なビジュアルビート）でも、認識に最低1.0秒必要。

シーン構築テクニック（インライン）

図/データの表示（プログレッシブ・ディスクロージャー：ノード→エッジ→ラベル）：

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

キネティックキーワード（強調音節で単語がポップイン）：

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

カウントアップ統計：

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

組み立てた作品をRemotion（データ駆動型、決定論的）またはAfter Effectsでレンダリングする。

キャプション同期

キャプションは必須—ミュート自動再生を想定。VOにキー設定された.srt/.vttキューリストを使用する。1行あたり42文字以内、2行以内、最低1.0秒オン、次の行が始まる前に消えるようにする。

1
00:00:00,300 --> 00:00:02,600
リリースを手動で管理するのは遅い。

2
00:00:02,800 --> 00:00:05,400
Shipfastはパイプライン全体を自動化します。

Remotionでは、シーンカットに使用するのと同じタイミング配列からキャプションを駆動し、ドリフトしないようにする。

スタイルシステムの一貫性

シーン2を構築する前に、1つのタイプスケール、1つのカラーグラマー（色＝意味、再割り当てなし）、1つのイージングカーブを固定する。シーン間で同じ入出力トランジションを再利用し、作品が実験のモンタージュではなく、1つのオブジェクトのように感じられるようにする。ビジュアルは現在話されているVO行を説明するものでなければならない—見せるものであり、飾るものではない。

出力チェックリスト

単一の明確なメッセージ；すべてのシーンがそれを前進させる。
VOのタイミングが適切（約2.3語/秒）；シーンの長さはVOから導出。
ストーリーボードは各VO行をビジュアルにマッピング。
キャプションが焼き付け/利用可能；2行以内、読みやすい。
すべてのシーンで一貫したタイプ/カラー/モーションシステム。
1つの明確なCTAがあるエンドカード。

納品と検証（レンダリングスチル→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コンポジション—フレーム決定論的であるため、シークハーネスなしで任意の正確なフレームをヘッドレスレンダリングできます。この階層は、ベイクされたナレーションと焼き付きキャプションを持つMP4/GIFが納品物である場合に使用します。単一のWebシーンの場合は、代わりにスタンドアロンHTMLを納品します。

出力契約：

コンポジションが登録されたRemotionプロジェクト（<Composition> + zod schema + defaultProps）、すべてのモーションはフレーム駆動（タイマー / Date.now() / Math.random() なし）。
納品物 = レンダリングされた out/*.mp4（プロジェクトも含むため、VO/スクリプト/データを再レンダリング可能）。
ナレーションは <Audio src={staticFile()}> 経由；VO/シーンのタイミングはプロップにベイク（レンダリング時のリアルタイムオーディオなし）。キャプションは同じタイミング配列から駆動され、ドリフトしない。
データ依存の長さ？calculateMetadata で計算し、手計算しない。

検証ループ—スチルをレンダリング→検査→エンコード。 まず単一フレームをレンダリング（安価でエンコードなし）、検査し、フレームが正しいことを確認してからエンコード。

# 開始/中間/終了のフレーム正確なスチル—デフォルトだけでなく、出荷用プロップでレンダリング
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# 検査：スクリプト→ストーリーボード→シーンがフレームにマッピングされている—各シーンのホールド内のフレームをサンプリング
# ナレーション行とキャプションがそのフレームのビジュアルと同期していること、テキストオーバーフロー/オフキャンバスがないことを確認

# スチルが問題ないことを確認してからエンコード：
npx remotion render Explainer out/explainer.mp4 --props='{...}'

npx remotion compositions は durationInFrames/fps を読み取り、終了フレームと各シーンのホールドフレームを選択。
README用デモGIFはおまけ： npx remotion render Explainer out/demo.gif --codec=gif。

終了前に：

npx remotion still がフレーム0、各シーンのホールド内のフレーム、および最後のフレームでエラーなくレンダリングされること（欠落アセット/フォントなし）。
サンプリングされたすべてのシーンフレームで、キャプションと話されているVO行が画面上のビジュアルと一致していること（ドリフトなし）。
キャプションがセーフエリア内にあり、2行以内で読みやすいこと；テキストが正確でクリップされていないこと。
フレーム駆動のみ—Date.now() / Math.random() / タイマーなし；出荷用プロップが正しくレンダリングされること（defaultProps だけでなく）。
完全なMP4がエンコードされ、ナレーション付きで再生されること；（オプション）README用にGIFがレンダリングされていること。

参考ファイル

references/script-to-screen-workflow.md — 完全なパイプライン詳細：問題→解決策→仕組み→ペイオフのスクリプト計算式と実例・単語予算、VOタイミング表、タイムコード付きの記入可能なストーリーボードテンプレート、シーンごとの構築チェックリスト、キャプション作成ガイダンス（VTT/SRT）、およびシーン間の一貫性のためのスタイルシステム仕様シート。

説明ビデオ生成