youtube-intro-outro

YouTube イントロとアウトロ

チャンネルのすべての動画の前後を飾る、2つのモーションを作成します。チャンネルを印象づける3〜5秒のブランドイントロ（「このチャンネルはこちら」と伝えるロゴの短いアニメーション）と、YouTube のクリック可能な終了画面要素（チャンネル登録＋次の動画）を表示する最後の約20秒間のアウトロです。どちらも厳しいプラットフォーム上の制約を守る必要があります。イントロの長さは視聴者維持率に影響し、アウトロのレイアウトは YouTube のオーバーレイ UI を避けなければなりません。また、どちらもブランドだけを変えて使える、再利用可能なテンプレートにします。

使用する場面

• チャンネルのイントロ／バンパー／ロゴの短いアニメーション（コンテンツの前に表示する3〜5秒のブランド演出）。
• アウトロ／終了画面／エンドカード（チャンネル登録＋次の動画のカードを表示する最後の約20秒間）。
• 再利用可能なブランドテンプレート：名前、ロゴ、色、アニメーション、音声を差し替えて再度書き出します。

2つの厳守ルール（好みではなく、プラットフォームの制約）

1. イントロは3〜5秒、ロゴの表示は1〜2秒にします。 5秒を超えると、視聴者の離脱率が測定可能なほど高くなり、動画のアルゴリズム評価に悪影響を及ぼします。イントロはチャンネルを認識させたら、すぐに本編へ移ります。
2. アウトロは静かに画面を維持するレイアウトで20秒以上にし、動画の長さは合計25秒以上にします。 YouTube で終了画面要素を表示できるのは、動画の最後の5〜20秒間のみです。また、動画の長さは25秒以上でなければなりません。終了画面要素の配置を考慮してアウトロの背景をデザインし、その下に自分のコンテンツを置かないでください。

イントロ：ロゴの短いアニメーション

ロゴの短いアニメーションは、約3.5秒の3つのビートで構成します。助走（緊張感を高める動き）、インパクト（音のヒットに合わせてロゴがくっきり表示される）、収束（わずかな行き過ぎから元の位置に落ち着く）です。ブランドロゴは、音のインパクトフレームにぴったり合わせて表示します。近いだけでは不十分です。

ビート	時間	役割
助走	0-0.8s	ヒュッという音／盛り上がり。ロゴはまだ判読できない
インパクト	~0.8s	音のヒットと同時にロゴがくっきり表示され、白いフラッシュが入る
収束	0.8-1.2s	行き過ぎた動きが落ち着き、タグラインがフェードインする
表示	1.2-3.5s	ブランドを判読できる状態で表示し、その後本編へ切り替える

import {useCurrentFrame, useVideoConfig, spring, interpolate, Img, Audio, staticFile} from "remotion";

export const LogoSting = ({brand}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const IMPACT = Math.round(0.8 * fps);            // logo lands here, on the sting hit

  // overshoot scale: springs up past 1, settles to 1 (the "snap")
  const scale = spring({frame: frame - IMPACT, fps, config: {damping: 9, mass: 0.5}, from: 1.18, to: 1});
  const logoOpacity = frame < IMPACT ? 0 : 1;
  const flash = interpolate(frame - IMPACT, [0, 6], [0.9, 0], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});

  return (
    <div style={{flex: 1, background: brand.bg, display: "flex", alignItems: "center", justifyContent: "center"}}>
      <Audio src={staticFile(brand.sting)} />        {/* impact of this file must sit at 0.8s */}
      <Img src={staticFile(brand.logo)} style={{width: 420, opacity: logoOpacity, transform: `scale(${scale})`}} />
      <div style={{position: "absolute", inset: 0, background: "#fff", opacity: flash}} />
    </div>
  );
};

spring が1.18から1へ行き過ぎて戻る動きが、ロゴのスナップそのものです。6フレームかけて減衰する白い flash が、インパクトを際立たせます。音声の最も強いトランジェントを IMPACT フレームに合わせます。構成全体、CSS／GSAP の別バージョン、任意のロゴの短いアニメーションでインパクトフレームを見つける方法については、references/intro-outro.md を参照してください。

アウトロ：YouTube の要素ゾーンを避けた終了画面レイアウト

アウトロで最もよくある失敗は、YouTube がチャンネル登録ボタンを重ねて表示する場所に、ロゴやテキストを置いてしまうことです。画面を3分割して考えてください。YouTube のクリック可能な要素は右側の3分の2に配置されます。ブランド要素、チャンネル名、顔出し映像は左側の3分の1に収めてください。モバイルのプログレスバーや UI が重なるため、隅や画面下部は避けます。

要素	標準サイズ	余白を確保する位置（1920×1080）
チャンネル登録／チャンネルの丸型アイコン	294×294	右側、縦方向の中央付近、端から少し外側
次の動画カード（サムネイル）	615×345	右上または中央右
再生リスト／リンクカード	294×294	動画カードの横
ブランド要素（ロゴ、名前）	—	左側の3分の1のみ、上揃え

実際の要素を配置する場所に、アウトロの背景上でプレースホルダーを表示して、その周りを構成します。その後、YouTube Studio で実際の要素を重ねて配置します（グリッドと「要素にスナップ」を使用）。

import {useCurrentFrame, interpolate, Img, staticFile} from "remotion";

// 1920×1080 outro plate. Left third = brand; right two-thirds = YouTube element zones (drawn as guides).
export const EndScreen = ({brand}) => {
  const frame = useCurrentFrame();
  const fade = interpolate(frame, [0, 18], [0, 1], {extrapolateRight: "clamp"});
  const zone = {position: "absolute", border: "2px dashed rgba(255,255,255,.25)", borderRadius: 12};

  return (
    <div style={{flex: 1, background: brand.bg, opacity: fade}}>
      {/* LEFT THIRD: your brand — safe from YouTube's overlays */}
      <div style={{position: "absolute", left: 80, top: 90, width: 560}}>
        <Img src={staticFile(brand.logo)} style={{width: 220}} />
        <div style={{color: brand.fg, font: "700 56px Inter", marginTop: 24}}>{brand.name}</div>
        <div style={{color: brand.accent, font: "500 30px Inter", marginTop: 8}}>Subscribe for more →</div>
      </div>

      {/* RIGHT TWO-THIRDS: leave these empty; YouTube draws the live elements here */}
      <div style={{...zone, width: 615, height: 345, right: 90, top: 110}} />        {/* next-video card */}
      <div style={{...zone, width: 294, height: 294, right: 250, bottom: 150, borderRadius: 999}} /> {/* subscribe circle */}
    </div>
  );
};

破線のガイドを含めるのはプレビュー版だけにし、最終レンダーでは削除します。右側を意図的に静かにした、すっきりした背景を残します。アウトロは静止したブランド要素を表示するか、20秒間にわたって控えめなモーションをループできます。ただし、カードより目立つものは置かないでください。

再利用可能なブランドテンプレート

どちらの構成も、単一の brand プロパティを参照します。名前、色、ロゴ、音声をハードコードしないでください。オブジェクトを差し替えるか、--props を渡すことで、1つのコードベースから各チャンネルのイントロ／アウトロのブランドを変更できます。

// brand.json — the only thing that changes per channel
{ "name": "PixelForge", "logo": "logo.png", "sting": "sting.mp3",
  "bg": "#0B0B14", "fg": "#FFFFFF", "accent": "#7C5CFF" }

# render intro + outro for every brand file in /brands
for f in brands/*.json; do
  name=$(basename "$f" .json)
  npx remotion render Intro  "out/${name}-intro.mp4"  --props="$f"
  npx remotion render Outro  "out/${name}-outro.mp4"  --props="$f"
done

テンプレート内ではフォント、レイアウト、タイミングを固定し、20個のチャンネルで構造を統一して、ブランドアイデンティティだけが異なるようにします。

出力チェックリスト

• イントロは5秒以内にし、ロゴは約2秒までに読み取れるようにします。ロゴの表示は、音声のインパクトフレームと正確に一致させます。
• アウトロは20秒以上レイアウトを表示し続けます。終了画面の要素を表示できるよう、動画全体を25秒以上にします。
• アウトロの右3分の2は、YouTubeの要素を表示できるように余白を残します。独自のブランディングは左3分の1だけに配置します。
• 画面端から約10％以内、および下部のUI領域には、重要な要素を配置しません。
• 終了画面の要素は最大4つまで計画します（最もクリック率の高いレイアウトは、動画1本＋チャンネル登録です）。
• テキスト、色、ロゴ、音声はすべて brand prop から取得します。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 を参照してください。

これは HEAVY ティアです。納品物は実際の MP4 素材（イントロ＋アウトロ）です。エンコードする前に、静止画でロゴの表示タイミングと終了画面のセーフゾーンを確認してください。スティングのタイミングが1フレームずれていたり、YouTubeのチャンネル登録ボタンが表示される場所にロゴが配置されていたりすると、全体のレンダリング後に気づいた場合、多大なコストがかかります。

出力要件：

• 両方のコンポジションが登録された Remotion プロジェクト（<Composition> ＋ zod schema ＋ defaultProps）。すべてのモーションはフレーム駆動とし、Date.now() / Math.random() / タイマーは使用しません。
• スティングのインパクトはフレームに埋め込みます（IMPACT = Math.round(0.8 * fps)）。実行時には検出しません。音声には <Audio src={staticFile()}> を使用し、エクスポートにスティングを含めます。
• 納品物は、レンダリングした out/*-intro.mp4 と out/*-outro.mp4 に加えてプロジェクトも含みます。ユーザーが brand prop でスキンを変更して再エクスポートできるようにします。

検証手順 — 静止画をレンダリング → 確認 → エンコード。

# 1. Frame-exact stills WITH SHIPPED brand props (not just defaultProps).
#    Intro: windup / impact / settle.  Outro: fade-in / held end-screen plate.
npx remotion still Intro out/i-windup.png --frame=12 --props=./brand.json
npx remotion still Intro out/i-impact.png --frame=24 --props=./brand.json   # = round(0.8*fps)
npx remotion still Intro out/i-settle.png --frame=40 --props=./brand.json
npx remotion still Outro out/o-end.png    --frame=N  --props=./brand.json

# 2. Inspect each PNG — fidelity (logo readable + captions/tagline correct; on the impact
#    frame the logo is full-scale and the flash fires) AND artifacts (end-screen elements
#    inside YouTube safe zones — branding in the LEFT third only, right two-thirds quiet,
#    nothing within ~10% of any edge or in the bottom UI band; no off-canvas text/overflow).

# 3. Only once the stills check out, encode both plates:
npx remotion render Intro out/intro.mp4 --props=./brand.json
npx remotion render Outro out/outro.mp4 --props=./brand.json

• インパクトフレーム（ロゴが最大サイズに達し、白いフラッシュが弱まっていく状態）を明示的に検証します。スティングはそのフレームのタイミングに合わせ、近いタイミングではなく正確に一致させる必要があります。
• 最終レンダリングでは、破線の終了画面ガイドを削除します。右3分の2に意図的に余白を確保していることを確認します。
• README のデモ：npx remotion render Intro out/demo.gif --codec=gif。

完了前に確認すること：

1. npx remotion still で、イントロの助走・インパクト・収束と、アウトロの表示継続部分がエラーなくレンダリングされます。ロゴやスティングのアセットもすべて存在します。
2. インパクトフレームではロゴが最大サイズで、読み取れる状態です。イントロは5秒以内、アウトロは20秒以上表示を続け、動画全体は25秒以上です。
3. フレーム駆動のみを使用します。スティングのインパクトはフレームに埋め込み、Date.now() / Math.random() / タイマーは使用しません。
4. 終了画面の要素が YouTube のセーフゾーン内に配置されています。ブランディングは左3分の1、右3分の2は余白を確保し、下部のUI領域と画面端から約10％以内には何も配置しません。
5. スティングをミックスした両方の MP4 がエンコードされ、再生できます。テキスト、色、ロゴ、音声はすべて brand prop から取得します（任意：README 用の GIF もレンダリングします）。

参考ファイル

• references/intro-outro.md — イントロとアウトロ両方の、実行可能な Remotion コンポジション一式。CSS/GSAP を使ったロゴスティングのバリエーション。16:9 用の正確な終了画面座標マップと 1080×1920 に関するメモ。音声スティングのインパクトフレームを見つけて、表示を同期させる方法。および、一括レンダリングパイプライン付きの brand prop スキーマ。