explainer-video

解説動画

ひとつのメッセージから、テンポよくナレーションが入った30〜90秒のショート動画を作成します。全工程を実行します。スクリプト → ストーリーボード → シーン構築 → ナレーション／キャプションの同期 → 編集 → 仕上げまで、一貫したスタイルシステムを通して進めます。

こんなときに使います

• 30〜90秒の製品紹介、仕組みの解説、オンボーディング、コンセプト動画を作成する。
• まだ形になっていないアイデアや機能から、スクリプト、ストーリーボード、完成動画へと仕上げる。
• ナレーションを映像に同期させ、ミュート再生用のキャプションを追加する。

ストーリー構成（最初に決めます）

解説動画は、機能の紹介ではなく、主張を伝えるものです。工程に入る前にストーリーを固め、後のすべての選択がその主張に沿うようにします。

• 核となるアイデアはひとつ。 視聴後に視聴者がひと言で言い返せるようなメッセージを決めます。ひと言で表せないなら、動画の軸が定まっていません。表せるようになるまで範囲を絞りましょう。そのアイデアに役立たない要素は、短くするのではなく削除します。
• スクリプトを先に作ります。 ナレーションが軸となり、映像は話されている内容を説明するものであって、映像が話を先導するものではありません。ストーリーボードやアニメーションを作る前に、言葉を書き出して時間を計りましょう。完成したシーンを作り直すより、文章を削るほうがはるかに簡単です。
• 問題の重大さを伝えてから「仕組み」を説明します。 問題から仕組みへすぐに飛ばないようにしましょう。まず問題によって生じる損失を視聴者に実感してもらいます。その緊張感が、解決策を見てもらうための原動力になります。

解説動画のストーリー展開 — 各段階にひとつのビートを割り当て、次の順序で進めます。

段階	ストーリー上の役割	視聴者に思ってもらいたいこと
問題	視聴者自身の言葉で悩みを示す	「これは自分のことだ」
重大さ	悩みによって生じる損失（時間、費用、リスク）を示す	「これを解決しなければ」
解決策	製品／アイデアを解決策としてひと言で紹介する	「なるほど、それで解決できる」
仕組み	具体的な1〜3ステップで仕組みを説明する	「どうやって解決するのか分かった」
効果／CTA	解決後の状態と、次に取るべき行動をひとつ示す	「これがほしい。Xをしよう」

（下のスクリプトの構成式の表では、各段階の実行時間に対する割合と語数の目安を示しています。このセクションでは「なぜ」と順序を、あちらでは「どれくらいの長さ」を説明します。）

たとえをひとつ選び、最後まで使います

抽象的な仕組みは、視聴者がすでに知っているものに置き換えると伝わりやすくなります。ひとつの比喩を選び、すべてのシーンで一貫して使いましょう。動画の途中でたとえを変えると、理解し直す必要が生じます。

• エンジニアリング領域ではなく、視聴者の日常から比喩を選びます（行列、サーモスタット、組み立てラインなど）。
• 1本の動画につき比喩はひとつにし、映像表現とナレーションの両方で繰り返し使います。
• その比喩自体に説明が必要なら、別の比喩を選びましょう。

ビートごとのテンポ

テンポは緊張感に合わせます。問題／重大さは手早く進めて価値を伝え、仕組みは各ステップが伝わるようにゆっくり進め、効果を伝える場面では余韻を持たせます。

ビート	印象	カットのリズム
問題／重大さ	軽快で、やや緊張感がある	カットを速くし、短く表示する
解決策	安堵のひと呼吸	ひとつの明確な画を保つ
仕組み	落ち着いて、ひとつずつ	最もゆっくり進め、各ステップを読める長さで表示する
効果／CTA	自信に満ち、開放的	エンドカードを表示し、CTAはひとつにする

ワークフロー

1. スクリプト — 核となるメッセージはひとつです。構成は「問題 → 解決策 → 仕組み → 効果」です。簡潔なナレーション（VO）を書き、1秒あたり約2.3語（約140語／分）で時間を計ります。60秒の動画なら約138語です。
2. ストーリーボード — 各シーンにはアイデアをひとつだけ入れます。各フレームとそのトランジションを描き、ナレーションの各行を映像に対応づけます。
3. シーンを構築 — 図表やデータ、キネティックテキスト／キーワード、背景にアニメーションを加えます（手法は下記に記載）。
4. ナレーションとキャプション — ナレーションを録音／生成し、ナレーションのビートに合わせてシーンのカットを調整し、キャプションを映像に焼き込みます（ほとんどの動画はミュートで再生されます）。
5. 編集 — ナレーションに合わせてカットを編集し、各アイデアが伝わるだけの時間を確保して、メッセージを前進させないシーンは削除します。
6. 仕上げ — 色調を調整し、イージングを統一し、音声をミックスして、エンドカードを作成します。

スクリプトの構成

ビート	役割	尺の割合
問題	視聴者が感じている痛みを明確にします	約20%
解決策	解決策として製品やアイデアを紹介します	約15%
方法	仕組みを、具体的な手順を1〜3個示して説明します	約45%
効果	結果と、明確な次のステップ（CTA）を示します	約20%

まず、話し言葉（短縮形や短い文）でナレーションを書きます。何かを作り始める前に、声に出して読み、所要時間を計ります。

ナレーションのタイミング計算

• 話すペース：聞き取りやすく親しみやすいナレーションなら約2.3語/秒（140語/分）、技術的な内容の行は約2.0語/秒まで落とします。
• ナレーションの行からシーンの長さを見積もります：秒数 = 語数 / 2.3。その後、呼吸のために約0.4秒を加えます。
• ナレーションのないシーン（映像のみのビート）も、認識できるように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 を使って、組み立てたコンテンツをレンダリングします。

キャプションの同期

キャプションは必須です。ミュートでの自動再生を前提にしてください。ナレーションに対応する .srt／.vtt のキューリストを使用します。各キューは2行以内、1行42文字以内、画面上に1.0秒以上表示し、次の行が始まる前に消えるようにします。

1
00:00:00,300 --> 00:00:02,600
Managing releases by hand is slow.

2
00:00:02,800 --> 00:00:05,400
Shipfast automates the whole pipeline.

Remotion では、シーンのカットに使うものと同じタイミング配列からキャプションを制御し、ずれないようにします。

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

シーン2の制作を始める前に、文字サイズのスケール、色のルール（色は意味を表し、意味を途中で変えない）、イージングカーブをそれぞれ1つに固定します。すべてのシーンで同じ開始／終了トランジションを再利用し、実験をつなぎ合わせたものではなく、ひとつの作品として感じられるようにします。映像は、現在読み上げているナレーションの行を説明するものでなければなりません。飾るのではなく、見せましょう。

出力チェックリスト

• 明確なメッセージを1つに絞り、すべてのシーンでそのメッセージを前進させます。
• ナレーションのタイミングを計測します（約2.3語/秒）。シーンの長さはナレーションから算出します。
• ストーリーボードで、各ナレーションの行を映像に対応付けます。
• キャプションを映像に焼き込むか、利用可能にします。2行以内で読みやすくします。
• すべてのシーンで文字、色、動きのシステムを一貫させます。
• エンドカードには、明確なCTAを1つ表示します。

納品と検証（レンダリングした静止画 → 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 を納品します。

出力要件：

• コンポジション（<Composition> ＋ zod schema ＋ defaultProps）が登録された Remotion プロジェクト。すべての動きはフレーム駆動とし、タイマー／Date.now()／Math.random() は使いません。
• 成果物 = レンダリングした out/*.mp4（ナレーション／スクリプト／データを再レンダリングできるよう、プロジェクトも添付します）。
• ナレーションには <Audio src={staticFile()}> を使用します。ナレーション／シーンのタイミングは props に埋め込みます（レンダリング時にリアルタイムで音声を再生しません）。キャプションは同じタイミング配列から制御し、ずれないようにします。
• 長さがデータに依存する場合は、手作業で設定せず calculateMetadata で計算します。

検証の流れ — 静止画をレンダリング → 確認 → エンコード。 まず、コストの低い単一フレームをレンダリングして確認し、フレームに問題がなくなってから一度だけエンコードします。

# Frame-exact stills at start / mid / end — render with the SHIPPED props, not just defaults
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

# Inspect: script→storyboard→scene maps onto frames — sample a frame inside EACH scene's hold,
# confirm narration line and caption are synced to the visual at that frame, no text overflow / off-canvas.

# Only after the stills check out, encode:
npx remotion render Explainer out/explainer.mp4 --props='{...}'

• npx remotion compositions は durationInFrames／fps を読み取り、最終フレームとシーンごとの保持フレームを選択します。
• README 用のデモ GIF を無料で作成：npx remotion render Explainer out/demo.gif --codec=gif。

完了前に：

1. npx remotion still で、フレーム0、各シーンの保持区間内の1フレーム、最終フレームをエラーなくレンダリングできることを確認します。アセットやフォントが欠けていないことも確認します。
2. サンプリングしたすべてのシーンフレームで、キャプションと読み上げられるナレーションの行が画面上の映像と一致していることを確認します（ずれがないこと）。
3. キャプションがセーフエリア内にあり、2行以内で読みやすいことを確認します。テキストが正確で、切れていないことも確認します。
4. フレーム駆動のみとし、Date.now()／Math.random()／タイマーを使いません。納品する props で正しくレンダリングできることを確認します（defaultProps だけでは不十分です）。
5. ナレーション付きの完全な MP4 をエンコードし、再生できることを確認します（任意で、README 用に GIF をレンダリングします）。

参考ファイル

• references/script-to-screen-workflow.md — パイプラインの詳細：問題→解決策→方法→効果のスクリプト構成と、具体例および語数の目安、ナレーションのタイミング表、タイムコード付きの記入式ストーリーボードテンプレート、シーンごとの制作チェックリスト、字幕の作成ガイド（VTT/SRT）、シーン間の一貫性を保つためのスタイルシステム仕様書。