short-form-video

短尺動画

スワイプされずに見続けてもらえる9:16動画を作ります。短尺動画は、短いローンチ映像ではありません。視聴維持のための仕組みです。最初の1秒をつかむフック、数秒ごとに注意を引き戻すパターンの変化、そして視聴時間を100％以上に伸ばすループが重要になることもよくあります。大切なのは、仕上がりの美しさではなくタイミングです。

使用する場面

• Reels／TikTok／YouTube Shorts（7～60秒、縦型9:16）。
• 視聴維持率を高める編集：離脱を防ぐ、パターンの変化を加える、テンポを引き締める。
• フック、シームレスなループ、繰り返し使える短尺動画のテンプレート（1つのデザインで多くのトピックに対応）。

ストーリー構成（視聴維持の約束）

短尺動画のストーリーテリングは、視聴者の親指との約束です。毎秒、次の1秒も見てもらえるだけの価値を示す必要があります。ストーリーは冒頭から順に組み立てるのではなく、視聴維持率の曲線から逆算して形作ります。タイムラインに手をつける前に、次の点を固めてください。

• 動画1本につきアイデアは1つ。 短尺動画で伝える価値は、厳密に1つだけです。2つ目のアイデアを入れると注意が分散し、中盤で曲線が落ち込みます。代わりに、別の動画にしてください。単一の要点を1文で言い表せないなら、まだ短尺動画として成立していません。
• 最初の約3秒でループを作り、最後に閉じます。 フックで問いや疑問を提示してループを開き、見どころで答えます。ループが開いたままだからこそ、視聴者は見続けます。早い段階で答えを明かしたり、前置きの下に見どころを埋もれさせたりしないでください。
• 間延びさせない。 すべてのビートは、アイデアを前に進めるか、注意を引き戻す必要があります。どちらでもないものは削ってください。沈黙、ゆっくりした盛り上げ、咳払いのような前置き（「どうも、皆さん。この動画では……」）が、視聴者がスワイプする原因になります。
• 作業単位がカットではなく曲線である理由。 アルゴリズムは、1秒ごとの視聴維持率を高く保つコンテンツを配信します。曲線を平坦にする「良い」編集よりも、見栄えが悪くても曲線を高く保つ編集のほうが有利です。編集するのは曲線であり、フックがその後のすべてを左右します。まずフックを改善してください。

ストーリーの軸（Hook → Setup → Body → Payoff/loop の構成は下の表で時間配分されています）：

展開	ストーリー上の役割	うまくいかない場合
フック	ループを開き、見どころを約束する	最初の3秒でスワイプされる
緊張感の維持	本編を通して疑問を残す	中盤が平坦になり、途中で離脱される
見どころ	ループを閉じ、1つのアイデアを伝える	「時間の無駄だった」と思われ、共有されない
ループ／CTA	フレーム0に戻すか、明確なお願いを1つ伝える	見返されず、アクションにつながらない

（下のThe retention arc表では各展開の秒数を割り当てています。このセクションでは、その背景となるストーリーの論理と順序を説明します。Hook grammarではフックの類型を紹介します。）

すべてを左右する唯一の指標

制作のクオリティではなく、視聴維持率です。 アルゴリズムは視聴者をつなぎ止めるコンテンツを配信します。約87％の視聴者は3秒以内に見続けるかスワイプするかを決め、配信の目安となる平均視聴率は約70％以上です（Shortsは約73％、TikTokは約78％、Reelsは約65％）。以下のすべての判断は、この曲線との兼ね合いで決まります。完璧な映像でも0:04で退屈させれば、見た目が悪くても視聴者をつなぎ止める映像に負けます。

視聴維持の展開

ビート	役割	時間配分（20秒の短尺動画の場合）
フック（0～1秒）	1つのフレームと1行の言葉で、ループを開く	0～1秒
導入	見る理由を示す。約束、賭け金、または疑問を提示する	1～4秒
本編	ビートごとに価値を伝える。1ビートにつきアイデアは1つ	4～17秒
見どころ／ループ	ループを閉じる、またはフレーム0に戻す	17～20秒

長くするのは本編であり、フックではありません。60秒の短尺動画では本編を長くし、ビートを増やします。フックは同じ1秒です。

フックの構成（最初の約1秒）

フックは、脳が答えを知りたくなる「好奇心のギャップ」を生み出す、セリフと映像です。パターンを1つ選び、最後まで貫きます。

フックの種類	形式	最適な用途
オープンループ	「あなたのXがYし続ける理由は……」（答えを後回しにする）	ほとんどのコンテンツ
直接的な約束	「30秒でできる___の方法3つ」	教育系／リスト形式
パターンの切り替え	1フレーム目のスナップズーム／ウィップパン／映像のミスマッチ	エンターテインメント
否定	「___するのはやめましょう」／「あなたは___を間違えています」	強い意見

ルールは2つあります。フックの文言は1フレーム目までに画面上にテキストで表示します（85％の視聴者はミュートで視聴します）。また、最も印象的な映像も1フレーム目に見せます。ゆっくり立ち上げてはいけません。冒頭の印象的なフレームを保ち、黒からフェードインしないでください。

パターンの切り替えとカットのリズム

パターンの切り替えとは、ハードカット、ズームパンチ、Bロールの挿入、効果音、キャプションの表示、アングル変更など、注意をリセットするあらゆる変化です。ショート動画では変化の密度が高く、約2～4秒ごとに映像を変化させます。約4秒ごとに切り替えを入れた動画の視聴維持率は約58％で、静止したトーキングヘッド動画の約41％を上回ります。最大の問題は、中盤が平坦になることです。視聴完了率の曲線が横ばいになるとTikTokは配信を抑えるため、勢いのないテイクをつなぎ合わせて本編を作らないでください。

// Drive every interrupt off the FRAME, not wall-clock — renders deterministically.
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // seconds — uneven on purpose
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);

間隔に変化をつけます。メトロノームのような一定のリズムは退屈に感じられますが、不規則なカットは勢いを生みます。パンチインズームは、新たな映像素材が不要な、最も手軽な切り替えです。

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const PunchIn = ({ at, children }) => {
  const frame = useCurrentFrame(); const { fps } = useVideoConfig();
  const s = spring({ frame: frame - at * fps, fps, config: { damping: 12, stiffness: 200 } });
  const scale = interpolate(s, [0, 1], [1, 1.12]); // snap to 112% on the beat
  return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};

キャプション

多くの視聴者はミュートで視聴するため、画面上のキャプションは必須です。キャプションがコンテンツを伝え、フレーズごとに表示されることでパターンの切り替えにもなります。1行あたり4～7語にし、コントラストを高く保ち、セーフエリア内に配置します。ここでキャプションアニメーションを再実装しないでください。単語ごとのタイミング、カラオケ風のハイライト、スタイル設定にはcaption-animationスキルを使用します。このスキルでは、リテンションのタイムラインと9:16のセーフゾーン内にキャプションを配置することだけを扱います。

ループとリウォッチ

シームレスなループでは、リウォッチするたびに新たな視聴時間としてカウントされます。きれいな8秒のループを3回視聴すると、視聴完了率は300％になり、シグナルとしては最も強力です。手法は2つあります。最後のフレームを最初のフレームに合わせ（構図、位置、色を同じにして）、カットが見えないようにすること。そして、文のループを作ることです。フックの文言を、オチがフレーム0に戻るようにします（「……だから私は決して――」→冒頭に戻る）。リウォッチに最適な長さは約7～15秒です。

9:16のセーフエリア

プラットフォームのUIがテキストや顔に重ならないよう、共通のセーフゾーン内に構図を収めます。

ゾーン	ピクセル数（1080×1920）	避けるもの
共通セーフエリア（全プラットフォーム）	中央の900×1400	この範囲外に重要な要素を置かない
上部	約120px空ける	プロフィール／サウンドUI
下部	約320px空ける	キャプション、CTA、ハッシュタグ、音声バー
右側	約120px空ける	いいね／コメント／共有のボタン列

フックのテキストと主要な被写体は、中央の900×1400の枠内に配置します。エディター上で空いているように見えても、下部の約320pxは空けてください。ここにはプラットフォーム独自のキャプションやボタンが表示されます。

出力チェックリスト

• フックの文言を1フレーム目までに画面上に表示する。最も印象的な映像を1フレーム目にする（フェードインなし）。
• 最初の約4秒以内に、オープンループまたは約束を1つ提示する。
• 約2～4秒ごとに映像のパターンを切り替える。間隔に変化をつけ、中盤を平坦にしない。
• キャプションを表示する（caption-animationを使用）。4～7語にし、セーフエリア内に配置する。
• 最初と最後のフレームを合わせるか、文の内容をフレーム0につなげてループを閉じる。
• 中央の900×1400の枠内に構図を収める。下部320px／上部120px／右側120pxを空ける。
• アニメーションの値はすべてuseCurrentFrame()から導出する。CSSやライブラリのタイマーは使わない。

納品と検証（レンダリングした静止画 → 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 のコンポジション（<Composition> + zod schema + defaultProps）として提供します。カット、パンチイン、割り込みはすべて useCurrentFrame() によって制御し、Date.now() / Math.random() / タイマーは使用しません。納品物は out/*.mp4 とプロジェクト一式です（トピックごとに再レンダリングします）。デフォルトは 9:16 の縦型（1080×1920）です。

検証の流れ — 静止画をレンダリング → 確認 → エンコード。 視聴維持率を左右する3つの要素、フック、テンポ、ループの継ぎ目を、3フレームでテストします。

# Stills at hook / mid-body / last frame — WITH SHIPPED PROPS (the real topic, not defaults)
npx remotion still Short out/f-hook.png --frame=10  --props='{"topic":"...","hook":"..."}'   # ~first 3s reads instantly
npx remotion still Short out/f-mid.png  --frame=N   --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-end.png  --frame=L   --props='{"topic":"...","hook":"..."}'   # L = durationInFrames-1

# Inspect each PNG:
#  - HOOK frame (~frame 0-ish / first 3s): hook line is on-screen text and reads instantly; strongest visual already up (no fade-up)
#  - LOOP seam: compare f-hook(frame 0) vs f-end(last frame) — same composition/position/color for an invisible loop cut
#  - 9:16 safe area: hook + key subject inside the center 900x1400 box; clear of top ~12%, bottom ~20-35% (captions/CTA/audio), right action rail

npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}'   # encode once stills verify
npx remotion render Short out/demo.gif --codec=gif                                # README proof clip

トピック／バッチごと：すべてをレンダリングする前に、静止画を使ってトピックを1つ検証します。npx remotion compositions で durationInFrames / fps を確認し、中間フレームと最終フレームを選びます。

完了前に確認すること：

1. フック、中間、最終フレームの静止画がエラーなくレンダリングされること。
2. フックフレームが一目で伝わること（画面上のテキストと最も印象的なビジュアルを冒頭に配置し、フェードアップなし）。最初と最後のフレームが一致し、ループの継ぎ目が自然であること。
3. 確認したすべてのフレームで、フック、被写体、キャプションが 9:16 の中央 900×1400 のセーフボックス内に収まっていること。
4. フレーム駆動のみであること — Date.now() / Math.random() / タイマーを使わず、カットの間隔に変化をつけ、平坦な中盤を避けること。
5. 実際のトピックの props（defaultProps ではない）で正しくレンダリングされること。MP4 はエンコードし、GIF は任意です。

参考ファイル

• references/retention-pacing.md — すぐに実行できる Remotion <Short> コンポジションの完全な例です。不均等なカット、割り込みとしての PunchIn、画面上のフック、9:16 のセーフエリアオーバーレイ、シームレスな最初／最後のフレームループを備えた、フレーム駆動のショットスケジューラーです。さらに、フックパターンのライブラリ、視聴維持率曲線のデバッグ手法、プラットフォームごとのセーフゾーンマップ、テンプレート×トピックのバッチレンダリングパターンも含まれます。