short-form-video

ショートフォーム縦型動画（Hyperframes）

ショートフォームとは、1080x1920の縦型動画で、長さは10～30秒、トーキングヘッドの顔にモーショングラフィックスのシーンオーバーレイとカラオケ字幕を重ねたものです。このスキルの内容はすべて、May Shorts 19の反復検証（v1 → v4）から抽出したもので、これらのサンプルをメンテナンスするために残されています。新しい録画にはshort-form-editを使用してください。

必ず最初に/hyperframesを呼び出してください。 このスキルはその上に成り立つもので、フレームワークのルール（data-*属性、window.__timelines、コンポジション構造）に取って代わるものではありません。形式にかかわらず、これらは必ず守ってください。

このスキルを使う場面

• 既存のMay Shortsサンプルをメンテナンスする場合。
• 既存の4レイヤーの足場構造を明示的に求められた場合。

手順（概要）

1. 音声を真実の基準とします。 まず音声を編集します（リテイクや無音部分をカット）。<name>-edit.mp4として保存します。ffprobeで正確な長さを測定し、コンポジションのdata-durationに設定します。
2. ルートのscipts/transcribe-elevenlabs.mjsヘルパー（ElevenLabs Scribe）、docs/TOOLS-AND-API-KEYS.mdに従って正規化した、学生が選択した代替手段を使って編集済み音声を文字起こしします。または、既存のビルドを字幕内のshift()関数でリタイミングする場合は、既存の字幕をそのまま使い、シーンの開始位置だけをずらします。
3. 編集後の時間軸でシーン境界を設定します — 同じファイル内で元の時間軸と編集後の時間軸の基準を決して混在させないでください。以下の「音声同期プロトコル」を参照してください。
4. コンポジションの足場構造を構築します（4レイヤー：ambient-bg、seam-treatment、captions、face）— 以下の「コンポジションの足場構造」を参照してください。
5. data-startを基準に、シーンごとのローカルオフセットでシーンを作成します。各シーンはcompositions/scene<N>-<label>.htmlの下に独立したサブコンポジションとして配置します。
6. Lint → ドラフトレンダリング → 単語単位のフレーム検証 → 最終レンダリング。 これが検証ゲートです。手順3（フレーム検証）は絶対に省略しないでください。

コンポジションの足場構造（常時有効な4レイヤー）

すべてのショートフォーム縦型動画には、compositions/の下に以下の4つのサブコンポジションがあり、共有トラック上に読み込まれます。

index.html (root, 1080x1920, data-composition-id="main")
├── ambient-bg.html        track-index="3" — radial gradient + drift grid + particles + vignette
├── face-wrapper + <video> track-index="0" — talking head (see face-mode choreography)
├── seam-treatment.html    track-index="5" — feathers y=960 edge (bottom-half scenes only)
├── scene1-<label>.html    track-index="1" — scene overlays (back-to-back, no gaps)
├── scene2-<label>.html    track-index="1"
├── …
└── captions.html          track-index="2" — karaoke captions, word-synced

• data-durationは、ルート、ambient-bg、seam-treatment、face-video、face-audio、captionsで同一です。時間の経過に応じて変化するのは、シーンオーバーレイだけです。
• 顔の<audio>は独立した要素です（ミキサーで必要になります）。動画自体の音声トラックは決して使用しないでください。
• class="clip"は、時間指定されたdivに付与します — <video>や<audio>には絶対に付与しないでください。

顔モードの振り付け（ショートフォームを特徴づける手法）

顔は、ソース本来の横長サイズ（1920x1080）に合わせたラッパーdiv内に配置します。GSAPではラッパーをアニメーションさせます（動画要素は決してアニメーションさせないでください — <video>の寸法をアニメーションさせるとフレームがフリーズします）。

モードは2つあります。

const BOTTOM     = { x: 0,       y: 1136, scale: 0.5625 }; // bottom-half, full landscape visible
const FULLSCREEN = { x: -1166.5, y: 0,    scale: 1.7778 }; // cropped-cover, fills 1080x1920
const MODE_DUR = 0.32;

BOTTOMでは、1920x1080のソースを1080x607.5で表示し、下部の960pxの中央に配置します。FULLSCREENでは、横方向をクロップして縦型フレーム全体に表示します。

新しいシーンのコンテンツが表示される0.15秒前に、ease: "expo.inOut"を使って遷移します。

[
  { t: <scene-4-start>, mode: FULLSCREEN },
  { t: <scene-5-start>, mode: BOTTOM },
  …
].forEach(({ t, mode }) => {
  mainTl.to("#face-wrapper", { ...mode, duration: MODE_DUR, ease: "expo.inOut" }, t - 0.15);
});

顔のモードが瞬時に切り替わるのは、縦型動画で最も違和感のあるフレームです。必ず補間してください。

顔のカラーグレーディング（すべてのショートで必須）

#face-video {
  filter: contrast(1.08) saturate(1.08) brightness(0.97);
}

さらに、全編を通して1.00 → 1.025の微妙なケン・バーンズ効果のズーム（ease: "none"）と、顔が鋭い境界に接するのではなく周囲のネイビーになじむようにするサイドビネットの::after疑似要素を加えます。

境界の処理（下半分に表示するシーンでは必須）

y=960の位置に、ネイビーから透明へ変化する60～100pxのグラデーション帯を置き、柔らかく光る2pxのアクセントスキャンラインを重ねます。顔の後に描画して、その上に重ねます。全画面シーンに切り替わると、このレイヤーは覆われます。y=960で境界が鋭く切り替わるのは、AI編集コンテンツだとわかる2番目の特徴です（1番目は背景が平坦なことです）。

音声同期プロトコル（省略厳禁）

問題: 音声が編集されると（テイクの取り直しやポーズの削除）、ソーストランスクリプトのタイムスタンプが編集後の動画と一致しなくなります。元の時間軸で作成されたシーンの data-start は遅れて発火します。

ルール: すべてのタイミングは編集後の時間軸で扱います。決して混在させないでください。

ショートフォームのリタイムにおける検証手順:

1. 両方の音声ファイルを計測します:

   ffprobe -v error -show_entries format=duration -of csv=p=0 assets/original.mp4
   ffprobe -v error -show_entries format=duration -of csv=p=0 assets/<name>-edit.mp4
   

   差分 = 合計カット時間。
2. captions.html の shift() 関数を使ってトランスクリプトの単語をマッピングする場合、それを信頼できる唯一の情報源として扱います。マップ shift(originalTime) = editedTime は、すべてのシーンの data-start にも適用されます。
3. シーン内部のオフセット（compositions/sceneN.html 内）は、そのシーンの data-start に対するローカルな値です。シーンの親 data-start が編集後の時間軸で正しければ、内部オフセットは変更なしで正しいままです — ただし、シーンがカットをまたぐ場合は除きます。その場合、親の duration と内部オフセットの両方がずれます。
4. フェイスモードのトランジション配列の時間は、必ず編集後の時間軸を使用してください。自動的に shift されることはありません。

リタイム用のプランフォーマット（毎回このテーブル構造を使用してください）:

Scene	Current start	Current dur	New start	New dur	Rationale
...	...	...	...	...	...

その後にフェイスモードの配列、次に内部オフセットの変更点、最後にフレーム検証リストを記載します。

シーンオーサリング

1 シーン = 1 サブコンポジションファイル。シーンは同じ data-track-index 上に隙間なく連続して配置されます。各シーン内では:

• data-duration は親のスロットと正確に一致させる
• すべての GSAP アンカーはローカル（シーン開始からの 0 ベース）
• tl.set({}, {}, <data-duration>) を使ってタイムラインをパディングし、GSAP の tl.duration() が data-duration と一致するようにする

シーンのペーシングルール（10 の原則より）

• デッドフレームを作らない。 100ms ごとに ≥1 つのアニメーション要素があること。最初の登場は t=0 ではなく 0.1〜0.3s オフセットする。
• 見せ場は ≥1s 保持。 シーンの「大見せ場」（スタンプ、数字のロック、オチ）は画面に ≥1s、理想的には 1.5s 表示すること。シーンの尺は総時間ではなく見せ場の時間で見積もる。
• 全尺を通してモーションを。 4s シーンのローカル 2s までに登場アニメがすべて着地してしまう場合、二次モーションを追加する: 下線のスイープ、チェックマークのポップ、カードのアンビエントドリフト、ピル上の小さな明滅グロー。死んだペーシング = スワイプされて離脱。
• イーズを変化させる。 シーンごとに登場アニメ全体で少なくとも 3 種類のイーズを使う。
• ランタイム 5s ごとに 1 つの度肝を抜く演出を。 タイポグラフィスラム、グリッチ／クロマチックリビール、ホイップパン、音声同期スラム。これらがないと、動画は「ラベル付きトーキングヘッド」に見えます — 正確だが印象に残りません。

キャプション（カラオケスタイル）

• Montserrat 900、46〜58px（1080 幅の場合）、ベースは 100% ホワイト
• アクティブな単語: scale-1.08 のポップ + アクセントカラーへの変更（AIS は #37bdf8、ブランドに合わせて調整）
• ストロークはレイヤード text-shadow で行い、-webkit-text-stroke は決して使わない（Chromium レンダーで一貫しない描画になる）
• rgba の背景ピルは不要 — ストロークで可読性を保つ。キャプションは字幕トラックではなく、フレーム上のグラフィティのように感じられるべき。
• リタイムの場合は、captions.html 内の shift() 関数を使ってトランスクリプトの単語タイムスタンプ → 編集後の時間軸にマッピングする。これによりトランスクリプト JSON は手を付けずに済み、リタイムが機械的に行える。

完全なカラオケ実装については、/hyperframes 配下の references/captions.md を参照してください。要約すると: 単語ごとの <span> 要素に data-word-start を付け、各 span にスコープした GSAP トゥイーンを使い、ポップの時間は 0.08〜0.12s と短くします。

アンビエント背景（フラットなネイビーで出荷しない）

最低限の背景スタック:

1. ラジアルグラデーションのベース（中心は端より 15〜20% 明るく）
2. アニメーションするノイズ／グレインオーバーレイを 8〜12% の不透明度で
3. 4〜8 個のドリフトするパーティクルドットまたはグリッドトレース
4. 微妙なビネット

background: #07121c 単体はプレースホルダーであり、デザインではありません。テッキー／コントロールルームの美学には、feedback_techy_background_layers.md の 6 レイヤースタックを使用してください（ビネットにマスクされた HUD グリッド + 回路トレース + パルスノード + スキャンビーム + テレメトリティッカー + コーナー mono ラベル）。

音声リアクティビティ

• ヘッドラインはビートに合わせて3〜6%脈動させます。背景は低音に合わせて10〜30%変化させます。
• テキストのリアクティビティは、キャプションの読みやすさを保つため控えめ（3〜6%）にし、背景はより大きく変化させます。
• レンダリングの決定性を保つため、シード値を固定したオフラインアナライザーを使用します（音声の特徴量トラックを事前計算します）。レンダリング経路でAnalyserNodeを使用してはいけません。Math.random()とリアルタイムのオーディオノードは決定性を損ないます。

トランジション

• 種類をローテーションします。 同じ種類のトランジションを連続して使ってはいけません。ハードカットが6回続くと、AI編集だと見抜かれる最大の要因になります。
• 顔モードのトランジション（BOTTOM ↔ FULLSCREEN）は、シーン間でモードが切り替わる場合、シーントランジションも兼ねます。
• オーバーレイのみのシーン間トランジションには、レジストリからpush-up、flash-through-white、sdf-iris、またはフルのshader-transitionsパックをインストールします。npx hyperframes catalog --type blockで一覧を確認できます。

検証ゲート（必須 — 実施せずに納品してはいけません）

Lintの合格は、デザインが機能していることを意味しません。単語単位で正確なタイムスタンプのフレームを抽出し、すべてのPNGを確認するまでは、ショートフォームのレンダリングが完了したと報告してはいけません。

ステップ1 — ドラフトをレンダリング

cd video-projects/<slug>
npx hyperframes lint
npx hyperframes render --quality draft --output renders/<slug>-vN-draft.mp4

ステップ2 — 単語単位で正確なフレームを抽出

画面に特定のビジュアルが表示されているべき、実際に発話される単語に対応したタイムスタンプを8〜15個選びます。切りのよい数値や、シーンの途中ではなく、単語が発話される正確な時刻を選びます。

mkdir -p renders/frames-vN
for pair in "<t>:<label>" "<t>:<label>" ...; do
  t="${pair%%:*}"; label="${pair##*:}"
  ffmpeg -y -ss "$t" -i renders/<slug>-vN-draft.mp4 \
    -frames:v 1 -q:v 2 "renders/frames-vN/t${t}-${label}.png"
done

ステップ3 — すべてのPNGを確認

すべてのPNGに対してReadを呼び出し、画像をコンテキストに読み込みます。ファイル名を一覧表示するだけではいけません。各フレームで次の点を確認します。

• 期待するビジュアルが期待するタイミングで画面に表示されている（1秒遅れたり、早すぎたりしていない）
• 画面下半分を使うシーンで、話者の顔が切れていない
• そのシーンで全画面表示と画面下半分の顔モードが正しく使われている
• キャプションがブランドイメージに合っており、読みやすく、はみ出していない
• 空白フレーム、意図しない重なり、キャンバス外にはみ出したテキストがない

ステップ4 — 不合格があれば修正して再検証します。壊れた状態で納品してはいけません。

ステップ5 — 最終レンダリング

npx hyperframes render --quality standard --output renders/<slug>-vN.mp4

最終レンダリングから3〜4フレームを抜き取り確認します（同じタイムスタンプを使い、別のフォルダーframes-vN-final/から抽出）。標準品質のエンコードによって何も変わっていないことを確認します。

10のルール（品質チェックリスト — 初回ドラフトの前に実施）

すべてのショートフォーム制作で、制作中にこのリストを確認し、制作後に回してはいけません。

1. 動きのないフレームを作らない。 100msごとに、アニメーションする要素を入れます。
2. シーンの見せ場は1秒以上維持する。 合計時間ではなく、見せ場が現れるまでの時間を基準に配分します。
3. 顔をキャラクターとして扱う。 色調補正＋ケン・バーンズ効果＋サイドビネットを適用します。
4. 継ぎ目を目立たせない。 グラデーション＋走査線でy=960をぼかします。
5. 5秒ごとに一度、驚きを与える演出を入れる。 文字のスラム、グリッチ、ウィップパン、オーディオスラムなどを使います。
6. 音声リアクティビティは必須です。 テキストは3〜6%、背景は10〜30%変化させます。
7. トランジションの種類をローテーションします。 同じ種類を連続して使ってはいけません。
8. キャプションは目立たせ、ただラベルのように表示するだけにしないでください。 ピル型ではなく、ストロークを使います。アクティブな単語にはスケールと色の変化を適用します。
9. シーン全体を通して動きを維持します。 登場アニメーションが早く終わる場合は、二次的な動きを加えます。
10. 背景は単なる色ではなく、レイヤーです。 少なくともラジアルグラデーション＋ノイズ＋パーティクル＋ビネットを使います。
11. スラム／スタンプのオーバーレイは、対象のテキストが完全に表示された後に出します。 単語との同期より、表示の順序を優先します。スタンプのtは対象テキストが表示されたtに0.10〜0.25秒を加えた時刻以降にします。そうしないと、オチが前置きより先に出てしまいます。

プロジェクト構成（すべてのショートフォームプロジェクト）

video-projects/<slug>/
├── hyperframes.json
├── meta.json                    (id, name, dimensions 1080x1920, fps 30)
├── index.html                   (root composition, the 4-layer scaffold)
├── compositions/
│   ├── ambient-bg.html
│   ├── seam-treatment.html
│   ├── captions.html            (with shift() function if retiming)
│   ├── scene1-<label>.html
│   ├── scene2-<label>.html
│   └── ...
├── assets/
│   ├── <name>.mp4               (original recording)
│   ├── <name>-edit.mp4          (edited — cuts removed — this is what the comp uses)
│   ├── transcript.json          (whisper output)
│   └── brand assets (logo, brand-tokens.css, background music)
└── renders/
    ├── <slug>-v1-draft.mp4
    ├── frames-v1/
    ├── <slug>-v1.mp4
    └── ...

リタイミング手順（音声を再編集した場合、またはタイムスタンプがずれた場合）

1. ffprobeで編集前後の音声の長さを測定します。差分がカットされた合計時間です。
2. カットされた区間を特定します。何秒分が、どこから削除されたかを確認します。
3. Planテーブルを作成します。すべてのシーンのdata-startとdata-duration、顔モードのすべてのトランジションのt、カット位置をまたぐ内部オフセットを持つシーンを記載します。
4. カット位置をまたぐシーンでは、親の長さと内部オフセットの両方を変更します。カットの片側に完全に収まるシーンは、親のdata-startをずらすだけで構いません。
5. Lint → ドラフトレンダリング → 単語単位で正確なフレームの検証 → 最終レンダリングを行います。省略してはいけません。

ショート動画でしてはいけないこと

• <video> 要素の寸法をアニメーションさせないでください。フレームがフリーズします。ラッパーの div をアニメーションさせてください。
• どのタイムラインでも repeat: -1 を使わないでください。キャプチャエンジンが壊れます。有限回数のみ使用してください。
• Math.random() や Date.now() を使わないでください。決定性が損なわれます。擬似乱数が必要な場合は、シード付き PRNG を使ってください。
• キャプション内に <br> を使わないでください。自然な折り返しと <br> を併用すると、不要な改行が余計に発生します。
• フレーム検証のゲートを省略しないでください。Lint の終了コードは、見た目の正しさを示すものではありません。
• 音声が編集済みなら、元の時間軸で制作しないでください。編集後の時間軸で制作するか、何もしないかのどちらかです。
• background: #07121c を単色のままにしないでください。レイヤーを重ねてください。
• シーン間をハードカットしないでください。トランジションの種類を使い分けてください。
• キャプションを控えめにしないでください。目立たせてください。
• 顔を静止させたままにしないでください。カラーグレーディングと Ken Burns エフェクトを必ず使ってください。

may-shorts-18 から得た教訓（v1 → v2）

v1 のレンダリングで発生した具体的な問題 4 件と、v2 での解決方法をまとめています。新しいショート動画を作るたびに適用してください。

1. Slam/stamp のタイミング — 単語との同期よりも表示順が重要

SLAM/STAMP オーバーレイ（KILLED、DEAD、STOP など）は、対象のテキストが完全に表示された AFTER に出します。話された単語と同時に出してはいけません。may-shorts-18 v1 のシーン 1 では、CLAUDE と CHATGPT が対戦相手として登場しましたが、KILLED はローカル時間 0.46 秒で出た一方、CHATGPT が表示されたのは 0.66 秒でした。そのため、視聴者には対象が見えないまま「Claude … KILLED」と表示され、ジョークが成立しませんでした。

ルール： stamp_t ≥ target-text-visible_t + 0.10–0.25s。表示時刻とは、対象の表示アニメーションが始まる時刻ではなく、終了する時刻です。単語との同期は目安であり、視覚的な表示順が制約です。

2. BOTTOM 顔モードのスケール — デフォルト設定のまま出さない

デフォルトの BOTTOM = { x: 0, y: 1136, scale: 0.5625 }（1920×1080 のソースに正確に横幅を合わせる設定）では、話者がソースフレームの 70％未満しか占めていない場合、話者の左右にスタジオ背景の空白が残ります。これは may-shorts-19 のデフォルト設定で、may-shorts-18 v1 にもそのままコピーされていました。どちらの動画でも、BOTTOM のすべてのシーンで話者の左右に目立つ空白がありました。

ルール： BOTTOM = { x: -180, y: 1110, scale: 0.75 } を優先してください。左右をそれぞれ 180px クロップし、下端を y=1920 に合わせます。定数を確定する前に、実際のソース動画を使って BOTTOM モードのフレームを 1 枚プレビューしてください。ソースの話者がすでに大きく映っている場合は scale 0.65 で十分なことがあります。ソースが広いスタジオ画角の場合は scale 0.80 まで上げて、x を再調整してください。

HIDDEN の x、y、scale は必ず BOTTOM と同じにしてください。異なるのは opacity のみです。そうしないと、オパシティのフェード中に幾何学的な位置がずれてしまいます。

3. 顔モードのトランジション — 1 つではなく、3 つ同時に

隣接するシーン間で顔のモードが変わるとき、顔のラッパーだけに 0.15 秒のプリロールと 0.32 秒の expo.inOut を適用すると、硬い印象になります。モーフィング中の顔の後ろで前のシーンのパネルが完全に不透明なままなので、クロスフェードではなく、2 つの要素が競い合っているように見えます。

ルール： シーン間で顔モードを切り替える「ヒーロー」シーン（特に BOTTOM ↔ FULLSCREEN）では、次の 3 つをすべて行ってください。

1. 対象のトランジションの長さを 0.45～0.55 秒に延長する（デフォルトの 0.32 秒ではなく）
2. 新しいシーンの data-start の 0.25～0.30 秒前に開始する（デフォルトの 0.15 秒ではなく）
3. 前のシーンのパネルラッパーに対し、シーン終了の 0.25 秒前から 0.20～0.25 秒かけて opacity: 0, filter: blur(6px) へフェードする

実装では、顔モードのトランジション配列をエントリーごとの dur に変更して、1 つのトランジションをほかより長くできるようにします。

[ { t: 2.06, mode: FULLSCREEN, dur: 0.50 }, { t: 3.71, mode: HIDDEN, dur: 0.32 }, ... ]
  .forEach(({ t, mode, dur }) => mainTl.to("#face-wrapper", { ...mode, duration: dur, ease: "expo.inOut" }, t));

3 つを同時に変更すると、「本物の編集者が編集した」ように見えます。どれか 1 つだけでは、硬い印象になります。

4. 動画の中盤では、装飾的なシーンより情報を感じさせるシーンが効果的です

15〜20秒のショート動画のシーン3〜5（注目度が最も落ちやすい「中だるみ」の部分）では、情報として読み取れるビジュアルを活用します。棒グラフのレース、数値がカウントアップする統計グリッド、ヒートマップ、スパークライン、フローチャート、テレメトリーが刻々と動くダッシュボードのフレーム、順に赤く点滅する課題グリッドなどです。may-shorts-18 v1 のシーン4は、レーダーリング＋ターミナルチップ＋スパークの組み合わせでした。機能的ではありますが装飾的で、Nateには「平凡」と評されました。v2では、赤橙色に順番に点灯する3×3の課題グリッド＋線が描かれていくスパークライン＋決めの演出に置き換えました。時間は同じでも、エンゲージメントは大幅に向上しました。

ルール： タイポグラフィとアイコンだけのシーンはスライドのように感じられます。情報を感じさせるシーンは、根拠があるように感じられます。中盤のシーンが平凡に感じられたら、装飾を「情報」として読み取れる演出に置き換えます。小さな数字がカウントアップする、棒グラフが伸びる、チャートが描かれていく、グリッドが順番に点滅する、といった演出です。

参考構成

• video-projects/may-shorts-19/ — ショート動画の標準的な例（18.84s、1080x1920、7シーン、フェイスモードの演出、shift()を使ったカラオケ字幕、アンビエント背景＋継ぎ目処理）。新しいショート動画を作成する前に、index.html と compositions/scene*.html を読んでください。
• video-projects/may-shorts-18/ — 上記4つの教訓を取り入れた補助的な参考例：BOTTOM scale=0.75、KILLEDスタンプはCHATGPTの表示後に出す、シーン1→2は滑らかにフェード、シーン4はデータダッシュボード「THE PATTERN」グリッド。

関連スキル（併せて使用）

• /hyperframes — フレームワークのルール（必ず最初に使用）
• /hyperframes-cli — CLIコマンド（init、lint、preview、render）
• /gsap — アニメーションライブラリのリファレンス
• /hyperframes-registry — トランジションブロックのインストール
• /seedance-loop-prompt — ショート動画にAI生成のループ背景動画が必要な場合

メモリの参照先（関連するフィードバック項目）

• feedback_short_form_principles.md — 10のルールと詳しい根拠
• feedback_contrast_technique.md — グローの局所化＋text-shadowのハロー＋暗いテキストの明度向上
• feedback_techy_background_layers.md — 6層のコントロールルーム背景スタック
• feedback_visual_verification.md — 検証ゲート
• project_ais_brand_specs.md — ショート動画がAISブランド仕様の場合（16進カラーコード、フォント、ロゴのグロー）