Communitygithub.com

ショートフォーム動画

このスキルは、ユーザーがショート動画(リール、TikTok、YouTube Shorts)の制作を依頼した際に使用します。

ショートフォーム動画 とは?

このスキルは、縦型9:16のショート動画をエンジニアリングするための包括的なガイドです。目的は「スワイプに耐える」動画を作成することであり、単なる小さなプロモーション動画ではなく、視聴維持率を最大化するリテンション・マシンとして機能します。対応プラットフォームはInstagram Reels、TikTok、YouTube Shortsで、長さは7〜60秒を想定しています。フック(冒頭の3秒で視聴者の興味を引く)、パターンインタラプト(2〜4秒ごとに視覚的変化を入れて注意をリセットする)、シームレスループ(最後のフレームを最初に戻して再視聴を促す)の3つが核心技術です。すべての編集判断は制作価値ではなく「リテンション曲線」に基づいて行われ、Remotionフレームワーク上でフレーム駆動で実装されるため、Date.now()やMath.random()を使ったタイマーは禁止されています。キャプションは別の「caption-animation」スキルに委ね、本スキルは配置とタイミングのみを担当します。チェックリストには、フックのテキスト表示、パターンインタラプトの密度、9:16セーフエリアの遵守、ループの確認が含まれます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iart-ai/tiktok-video-skills/tree/main/skills/short-form-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ショートフォーム動画 は何をしますか?

スワイプに耐える9:16動画をエンジニアリングする。ショートフォームは小さなプロモーション動画ではない――それはリテンション・マシンだ:最初の1秒を勝ち取るフック、数秒ごとに注意をリセットするパターンインタラプト、そしてしばしば100%を超える視聴時間を稼ぐループ。そのクラフトは、クオリティではなくタイミングである。

使用する場面

  • リール / TikTok / YouTube Shorts(7〜60秒、縦型9:16)。
  • リテンション編集:離脱の修正、パターンインタラプトの追加、ペーシングの引き締め。
  • フック、シームレスループ、再利用可能なショートフォームテンプレート(1つのデザイン、多くのトピック)。

ストーリー構造(リテンション契約)

ショートフォームのストーリーテリングは、視聴者の親指との契約である:毎秒ごとに次の秒を再び勝ち取らなければならない。ナラティブはイントロから前方ではなく、リテンション曲線から後方に向けて形作られる。タイムラインに触れる前に、これらを固定せよ。

  • 1動画に1アイデア。 ショートは正確に1つのペイオフを運ぶ。2つ目のアイデアは注意を分割し、中央で曲線がたるむ――代わりに2つ目の動画にせよ。1文で単一の takeaways を名指しできないなら、まだショートはできていない。
  • 最初の約3秒でループを開き、最後に閉じる。 フックは質問やギャップ(開いたループ)を提示し、ペイオフがそれに答える。ループが開いているから視聴者は留まる――決して早期に答えず、決してペイオフを準備の下に埋めるな。
  • 無音の時間を作るな。 すべてのビートはアイデアを進めるか、注意をリセットする。どちらもしないものはカットせよ。沈黙、スローランプ、前置きのイントロ(「やあ皆さん、この動画では…」)は、視聴者がスワイプする箇所だ。
  • なぜ曲線が作業単位であり、カットではないのか。 アルゴリズムは毎秒のリテンション曲線を平坦に保つものを配信する。「良い」編集で曲線を平坦にしても、それを維持する「醜い」編集には負ける。あなたは曲線を編集しており、フックがその後のすべてを制御する――まずフックを修正せよ。

ナラティブの背骨(フック → 準備 → ボディ → ペイオフ/ループ アークは以下の表に予算化されている):

動きストーリーの役割失敗した場合
フックループを開く;ペイオフを約束する最初の3秒でスワイプされる
テンション維持ボディを通してギャップを開いたままにする中央が平坦、途中離脱
ペイオフループを閉じる――1つのアイデアを届ける「時間の無駄だ」、シェアなし
ループ / CTAフレーム0に戻す、または1つの明確な依頼再視聴なし、アクションなし

(リテンションアーク 表は以下の各動きに秒数を割り当てる;このセクションはその背後にあるナラティブロジックと順序である。フックの文法 はフックのアーキタイプをリストする。)

すべてを動かす単一の指標

リテンション、制作価値ではない。 アルゴリズムは視聴者を維持するものを配信する;約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%が音声オフで視聴)、最も印象的なビジュアルも最初のフレームである――決してスローランプインはするな。強い開始フレームを保持し、黒からフェードアップするな。

パターンインタラプトとカットリズム

パターンインタラプトとは、注意をリセットするあらゆる変化である:ハードカット、ズームパンチ、Bロール挿入、効果音、キャプションポップ、またはアングル変更。ショートフォームでは密度が高い――約2〜4秒ごとに視覚的変化;約4秒ごとにインタラプトがある動画は、静止したトーキングヘッドの約41%に対して約58%を保持する。致命的なのは平坦な中央だ:TikTokは視聴完了曲線が平坦になると配信を抑制するので、低エネルギーテイクをボディに継ぎ接ぎするな。

// すべてのインタラプトを経過時間ではなくFRAMEで駆動する――決定論的にレンダリングされる。
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // 秒――意図的に不均一
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]); // ビートで112%にスナップ
  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までに画面上にテキストとして表示される;最も強いビジュアルが最初のフレームである(フェードアップなし)。
  • 最初の約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つの要素をテストする:フック、ペーシング、ループの継ぎ目。

# フック / ボディ中央 / 最終フレームの静止画――出荷用プロパティで(デフォルトではなく実際のトピック)
npx remotion still Short out/f-hook.png --frame=10  --props='{"topic":"...","hook":"..."}'   # 最初の約3秒が即座に読める
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

# 各PNGを検査:
#  - HOOKフレーム(フレーム0付近 / 最初の3秒):フック行が画面上にテキストとして表示され、即座に読める;最も強いビジュアルがすでにアップしている(フェードアップなし)
#  - LOOP継ぎ目:f-hook(フレーム0)とf-end(最終フレーム)を比較――ループカットが不可視になるよう同じ構図/位置/色
#  - 9:16セーフエリア:フック + 主要被写体が中央の900x1400ボックス内;上部約12%、下部約20-35%(キャプション/CTA/オーディオ)、右アクションレールから空いている

npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}'   # 静止画が検証されたら一度エンコード
npx remotion render Short out/demo.gif --codec=gif                                # README用証明クリップ

トピックごと / バッチごと:すべてをレンダリングする前に、静止画で1トピックを検証せよ。npx remotion compositionsを使用してdurationInFrames/fpsを取得し、中間と最終フレームを選べ。

完了前に:

  1. 静止画がフック、中間、最終フレームでクリーンにレンダリングされる――エラーなし。
  2. フックフレームが即座に読める(画面上のテキストと最も強いビジュアルを前に、フェードアップなし);最初と最後のフレームが一致してクリーンなループ継ぎ目になる。
  3. チェックしたすべてのフレームで、フック + 被写体 + キャプションが9:16中央900×1400セーフボックス内にある。
  4. フレーム駆動のみ――Date.now() / Math.random() / タイマーなし;カットは不均一、平坦な中央なし。
  5. 実際のトピックの出荷用プロパティ(defaultPropsではない)が正しくレンダリングされる;MP4エンコード、GIFはオプション。

リファレンスファイル

  • references/retention-pacing.md ― 完全に実行可能なRemotion <Short>コンポジション:不均一なカット、PunchInパターンインタラプト、画面上のフック、9:16セーフエリアオーバーレイ、シームレスな最初/最終フレームループを持つフレーム駆動ショットスケジューラ。さらに、フックパターンライブラリ、リテンション曲線デバッグメソッド、プラットフォーム別セーフゾーンマップ、テンプレート×トピックバッチレンダリングパターンも含む。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル