remotion-ads

Remotion Ads

Remotion、ElevenLabs のナレーション、アニメーション付きキャプションを使って、プロフェッショナルな動画広告や解説動画を作成します。

セットアップ

1. references/brand-config-template.md を references/brand-config.md にコピーします
2. ブランドカラー、フォント、音声、キャプションのスタイル、コンテンツのルールを設定します
3. assets/dictionaries/template.pls から発音辞書を作成します

依存関係とフォルダー構成については、references/setup.md を参照してください。

---

対応フォーマット

フォーマット	縦横比	解像度	長さ	シーン
Instagram Reels	9:16	1080×1920	15-60s	4（フック→問題→解決策→CTA）
Instagram Reels (Ohneis)	9:16	1080×1920	15-45s	ビート主導（単語単位）
Website Explainers	16:9	1920×1080	60-160s	6（フック→問題→背景→解決策→プロセス→CTA）
カルーセル	4:5	1080×1350	静止画	5-10 枚

セーフゾーンとクロップ仕様については、references/formats.md を参照してください。 ビート主導のシネマティックなリールテンプレートについては、references/ohneis-style.md を参照してください。 16:9 の長尺フォーマットについては、references/website-videos.md を参照してください。

---

ワークフロー

最初から作成する

# 1. Write scene JSON
# 2. Generate voiceover with word timestamps
node scripts/generate.js \
  --scenes scenes.json \
  --with-timestamps \
  --dictionary your-brand \
  --output-dir public/audio/ad-example/

# 3. Create Remotion composition using actualDuration from info.json
# 4. Render
npx remotion render AdExample out/ad-example.mp4 --codec=h264 --crf=18

URL から作成する（ページ → 動画）

# 1. Extract page data into scene JSON
node scripts/url-to-scenes.js --url https://example.com/page --format reels --output scenes.json
# 2. Review/edit the generated scenes.json
# 3. Continue with voiceover + composition as above

URL から動画を作成するワークフロー全体については、references/url-to-video.md を参照してください。

---

セーフゾーン（重要）

リール（1080×1920）

┌──────────────────────────┐ 0px
│     TOP DANGER (285px)   │
├──────────────────────────┤
│ ←80px  SAFE AREA  120px→ │
│      880×1235px          │
├──────────────────────────┤
│   BOTTOM DANGER (400px)  │
└──────────────────────────┘ 1920px

const SAFE = { top: 285, bottom: 400, left: 80, right: 120 };

ウェブサイト動画（1920×1080）

const SAFE = { top: 60, bottom: 60, left: 80, right: 80 };

---

シーン JSON フォーマット

{
  "name": "ad-example",
  "voice": "VoiceName",
  "character": "narrator",
  "dictionary": "your-brand",
  "scenes": [
    { "id": "scene1", "text": "Hook text.", "duration": 3.5, "character": "dramatic" },
    { "id": "scene2", "text": "Problem.", "duration": 4.5 },
    { "id": "scene3", "text": "Solution.", "duration": 4.0, "character": "expert" },
    { "id": "scene4", "text": "CTA.", "duration": 3.0, "character": "calm" }
  ]
}

音声キャラクターのプリセット

キャラクター	スタイル	安定性	類似度	スタイルパラメーター
dramatic	強烈、感情的	0.3	0.8	0.7
narrator	プロフェッショナル、滑らか	0.5	0.75	0.4
expert	権威ある	0.6	0.85	0.3
calm	穏やか、安心感のある	0.7	0.8	0.2
conversational	カジュアル、親しみやすい	0.45	0.7	0.5

---

コンポジションテンプレート

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";

// Import from your brand-config.md values
const COLORS = { primary: "#000", accent: "#888", dark: "#111", background: "#fff" };

export const AdTemplate: React.FC = () => {
  const { fps } = useVideoConfig();
  // Use actualDuration from info.json, not estimated
  const DURATIONS = { scene1: 3.42, scene2: 4.35, scene3: 4.12, scene4: 3.31 };
  const pad = 5;

  return (
    <AbsoluteFill>
      <Audio src={staticFile("audio/ad-example/ad-example-combined.mp3")} />
      <Series>
        <Series.Sequence durationInFrames={Math.round(DURATIONS.scene1 * fps) + pad}>
          <Scene1Hook />
        </Series.Sequence>
        {/* ... remaining scenes */}
      </Series>
    </AbsoluteFill>
  );
};

再利用可能なシーンコンポーネントについては、references/components.md を参照してください。 TransitionSeries の音声同期については、references/voiceover.md を参照してください。

---

リファレンスファイル

タスクに応じて、必要なファイルを読み込んでください。

基本（最初に読む）

ファイル	読むタイミング
setup.md	プロジェクトの初期化
brand-config-template.md	ブランド設定：カラー、フォント、音声、キャプション、コンプライアンス
formats.md	寸法仕様、セーフゾーン、クロッププレビュー

動画の作成

ファイル	読むタイミング
ohneis-style.md	ビート主導のシネマティックなリールテンプレート：異なるフォントを組み合わせたタイポグラフィ、ハードカット、雰囲気のある写真
voiceover.md	ElevenLabs TTS、モデル、シーン JSON、タイミング同期、辞書
captions.md	アニメーション付きキャプション：TikTok 風、単語ごとの表示、カラオケ
animations.md	Spring の設定、トランジション、アニメーションコンポーネント
components.md	再利用可能なシーンテンプレートのコンポーネント
html-in-canvas.md	ライブ DOM を 2D フィルターまたは WebGL2 シェーダー（ビンテージ、段階的なぼかし、ページツアーのモックアップ）を使ってキャンバスにレンダリング
website-videos.md	16:9 の長尺フォーマット、6 シーン構成
url-to-video.md	既存のウェブページから動画を作成

音声

ファイル	読むタイミング
sound-effects.md	ElevenLabs による効果音の生成
music.md	ElevenLabs または Suno による BGM

アセットと静止画

ファイル	読むタイミング
local-assets.md	背景画像、アイコン、イラスト
carousels.md	4:5 のカルーセルデザインと一括レンダリング

コピーライティング

ファイル	読むタイミング
ad-copywriting.md	スクリプトのフレームワーク、フックの公式、CTA のパターン
copy-frameworks.md	見出しのテンプレート、セクションの公式
natural-transitions.md	人間らしいつなぎ表現、AI らしさを避ける方法

配信

ファイル	読むタイミング
paid-ads.md	Meta キャンペーン戦略、ターゲティング、予算
social-content.md	コンテンツカレンダー、再利用のフレームワーク

---

スクリプト

スクリプト	目的
scripts/generate.js	辞書、リクエストの結合を含む ElevenLabs のナレーション音声生成（注：--with-timestamps フラグは現在何もしません）
scripts/gemini-tts.mjs	Gemini TTS — 単一リクエストでの生成と、テキスト比率に基づく境界選択による無音部分の分割
scripts/suno-direct.ts	Suno によるBGM生成
scripts/url-to-scenes.js	ページコンテンツをシーンの JSON に抽出

---

アップロード前チェックリスト

リール

• 1080×1920、H.264、30fps
• すべてのテキストがセーフゾーン内にある
• 上部 285px と下部 400px にコンテンツがない
• フォントサイズが 48px 以上
• ナレーション音声が同期され、字幕のタイミングが調整されている
• 全体の長さが約 15 秒

ウェブサイト動画

• 1920×1080、H.264、30fps
• フォントサイズが 36px 以上
• 長さが 60～160 秒
• 適切な声のキャラクターを用いた 6 シーン構成

カルーセル

• 1080×1350、PNG
• 端から 80px の余白
• スワイプインジケーター付きの 5～10 枚のスライド