remotion-resemble-ai

使用する場面

次のようなものを作成したい場合に、このスキルを使用します。

1. 教育用チュートリアル動画 - トピックを調査し、アニメーション付きの解説動画を作成します

   • 例：「小学3年生向けに、蝶のライフサイクルを解説するチュートリアルを作成してください」

2. SaaS の操作紹介デモ - アニメーション付き UI でソフトウェアの機能を紹介します

   • 例：「Notion のデータベース機能の使い方を紹介するデモ動画を作成してください」

3. 製品ローンチ告知 - モーショングラフィックスを使ったマーケティング動画を作成します

   • 例：「新しい AI 搭載検索機能を発表するローンチ動画を作成してください」

4. チュートリアル／操作ガイド動画 - カーソルアニメーション付きの手順ガイドを作成します

   • 例：「アプリでプロジェクトを設定する方法を紹介するチュートリアルを作成してください」

5. ソーシャルメディア向けプロモーション動画 - 広告用の短くインパクトのあるキネティックタイポグラフィ動画を作成します

   • 例：「フィットネスアプリの15秒の Instagram 広告を作成してください」

6. アプリ／製品の紹介動画 - キネティックタイポグラフィと浮かぶ UI モックアップを組み合わせます

   • 例：「暗号資産取引所のインターフェースを紹介するプロモーション動画を作成してください」

7. ランディングページの公開動画 - ウェブページのアニメーションを使った、デザインツール風の動画を作成します

   • 例：「新しい SaaS ランディングページのデザインを紹介する動画を作成してください」

---

動画制作ワークフロー

すべての種類の動画で、次のパイプラインに従います。

1. UNDERSTAND → 2. RESEARCH → 3. SCRIPT → 4. SCENES → 5. AUDIO → 6. ANIMATE

ステップ 1：依頼内容を把握する

次の項目を確認します。

• 動画の種類： 教育用チュートリアル、SaaS デモ、製品ローンチ、チュートリアル／操作ガイド、ソーシャルメディア向けプロモーション、アプリ紹介、ランディングページ公開、AI 解説動画のいずれか
• 対象視聴者： 年齢、専門知識のレベル、状況
• トーン： 教育的、プロフェッショナル、エネルギッシュ、遊び心のある、ドラマチック、ミニマル
• 長さ： 超短尺（5～15秒）、短尺（30～60秒）、中尺（1～3分）、長尺（3～5分）
• 形式： ワイドスクリーン 16:9（1920x1080）、正方形 1:1（1080x1080）、縦型 9:16（1080x1920）
• ビジュアルスタイル： ダークでドラマチック、柔らかなグラデーション、すっきりとしたミニマル、デザインツール風

ステップ 2：調査する（チュートリアルとデモの場合）

教育コンテンツの場合：

• 正確で最新の情報を検索します
• 信頼できる情報源（公式ドキュメント、教育サイト）を使用します
• 説明に必要な重要な事実、統計、手順を集めます

SaaS デモの場合：

• 製品を実際に確認し、機能を把握します
• スクリーンショットを撮るか、UI のパターンを記録します
• 紹介する主要なワークフローを特定します

ステップ 3：スクリプトを書く

音声を生成する前に、ナレーションスクリプトをすべて書きます。構成は動画の種類によって異なります（下記を参照）。

ステップ 4：シーンを計画する

スクリプトをビジュアルセグメントに分割します。

• 各シーンは、1つの重要なアイデアまたは手順に対応します
• 各セリフに合わせて表示するビジュアルを記録します
• シーン間のトランジションを計画します

ステップ 5：音声を生成する

Resemble.ai を使ってナレーションを生成します（下記のセットアップを参照）。

ステップ 6：アニメーションを作成する

音声に同期するアニメーションを使って Remotion のコンポジションを作成します。

---

動画の種類：教育用チュートリアル

目標： 特定の学習者レベルに合わせて、概念をわかりやすく説明します。

スクリプトの構成

HOOK (5-10s)
"Have you ever wondered how a caterpillar becomes a butterfly?"

INTRODUCTION (10-15s)
Set context and preview what they'll learn.

BODY (main content, broken into 3-5 key points)
- Point 1: Explain with visual metaphor
- Point 2: Build on previous point
- Point 3: Add detail or example
- ...

RECAP (10-15s)
Summarize the key takeaways.

OUTRO (5s)
Call to action or closing thought.

対象者に合わせた調整

対象者	言葉遣い	ビジュアル
幼稚園～小学2年生	とても簡単で遊び心のある表現、5語の文	明るい色、かわいいキャラクター、大きな形
小学3～5年生	簡潔ながら情報豊富な表現、たとえ話	わかりやすい図、段階的な説明、標準的なペース
中学1～2年生	語彙を増やし、因果関係を示す	グラフ、ラベル付きの図、速めのペース
高校生以上	専門用語を使用可能、細かなニュアンスを含める	データの可視化、詳細なグラフィック
成人	プロフェッショナルで簡潔	すっきりとしたデザイン、インフォグラフィック

チュートリアル向けのアニメーションパターン

• 表示： ナレーターが要素に言及するタイミングに合わせて、要素をフェードインさせます
• 変形： 形を変化させて変化の過程を示します（イモムシ → チョウ）
• 図解： アニメーション付きのラベルや、各部分を指す矢印を使います
• タイムライン： プログレスバーやステップインジケーターを使います
• 比較： 強調表示を加えた横並びのレイアウトにします

シーン構成の例

Script: "First, the butterfly lays tiny eggs on a leaf."

Scene 1:
- Visual: Leaf appears (slide in from bottom, spring animation)
- Visual: Small eggs fade in on leaf
- Timing: Sync "eggs" word with eggs appearing
- Duration: 4 seconds

---

動画の種類：SaaS の操作紹介デモ

目標： ソフトウェアでタスクを完了する方法をユーザーに示します。

スクリプトの構成

HOOK (5-10s)
"Let me show you how to [accomplish goal] in [Product]."

CONTEXT (10s)
Why this feature matters, what problem it solves.

WALKTHROUGH (main content)
- Step 1: Navigate to X
- Step 2: Click on Y
- Step 3: Configure Z
- ...

RESULT (10s)
Show the outcome, the finished state.

OUTRO (5-10s)
Recap benefit, suggest next steps.

視覚要素

• UI モックアップ： インターフェースをスタイリッシュに表現したもの
• カーソルアニメーション： クリック対象へ移動するアニメーション付きポインター
• ハイライト： 説明対象のボタンやフィールドを囲む光る枠線
• ズーム効果： UI の特定の領域に焦点を当てる効果
• コールアウト： UI 要素を指し示すテキストラベル

デモ向けのアニメーションパターン

• カーソルの動き： 滑らかなベジェ曲線と、クリック前の短い停止
• クリック効果： クリック時の波紋またはパルス
• フィールドのフォーカス： 枠線のハイライトと、わずかな拡大
• 入力アニメーション： 入力フィールドに文字が表示される演出
• トランジション： 画面間のスライドまたはフェード
• コールアウトの矢印： アニメーションで表示し、要素を指し示してからフェードアウト

シーンプランの例

Script: "Click the blue 'New Database' button in the sidebar."

Scene:
- Visual: UI mockup of sidebar
- Animation: Cursor moves to button (0.8s ease-out)
- Animation: Button highlights with glow
- Animation: Click ripple effect
- Animation: New panel slides in from right
- Duration: 3 seconds

---

動画の種類：製品ローンチ告知

目標： 新製品や新機能への期待を高めます。

スクリプト構成

HOOK (5-10s)
Bold statement or question that grabs attention.

PROBLEM (10-15s)
What pain point does this solve?

SOLUTION REVEAL (10-15s)
Introduce the product/feature dramatically.

KEY FEATURES (20-40s)
3-5 punchy feature highlights with visuals.

SOCIAL PROOF (optional, 10s)
Stats, testimonials, or credibility markers.

CALL TO ACTION (5-10s)
What should viewers do next?

ビジュアルスタイル

• 大胆なタイポグラフィ： 大きなテキストと動きのある文字アニメーション
• ブランドカラー： 製品のカラーパレットを一貫して使用
• アイコンとグラフィック： 抽象的な図形や機能アイコン
• 高いエネルギー： 素早いカットとダイナミックな動き
• ロゴの登場： 最後にアニメーション付きのロゴを表示

ローンチ向けのアニメーションパターン

• テキストの叩きつけ： 単語がインパクトとともに飛び込んでくる演出
• キネティックタイポグラフィ： 単語が移動、拡大縮小、回転する演出
• カウンターアニメーション： 数値（ユーザー数、収益など）が増えていく演出
• アイコンの連続表示： 機能がバウンスやスプリングの動きとともに現れる演出
• グラデーション背景： 色のグラデーションがゆっくりと変化する背景
• パーティクル効果： さりげないきらめきや浮遊する図形
• ロゴの登場： 拡大、フェードイン、またはパーツから組み立てる演出

シーンプランの例

Script: "Introducing Smart Search — find anything in milliseconds."

Scene:
- Visual: Dark background with gradient
- Animation: "Introducing" fades in (0.5s)
- Animation: "Smart Search" slams in large, bold (0.3s, with shake)
- Animation: Tagline types out below (typewriter, 1.5s)
- Animation: Search icon pulses
- Duration: 4 seconds

---

動画の種類：チュートリアル／操作ガイド

目標： 明確なステップごとの視覚的なガイダンスで、ユーザーがタスクを達成できるようにします。

スクリプト構成

INTRO (3-5s)
"Here's how to [accomplish goal] in [Product]."

STEP 1 (10-20s)
First action with clear visual demonstration.

STEP 2 (10-20s)
Second action, building on previous step.

STEP 3+ (10-20s each)
Continue through workflow...

SUCCESS STATE (5-10s)
Show completion, celebrate the outcome.

RECAP (optional, 5s)
Quick summary of what was accomplished.

ビジュアルスタイル

• 明るくすっきりした背景： オフホワイト（#fafafa）、クリーム色、またはライトグレー
• UI 全体の表示： 断片的な表示ではなく、インターフェース全体を表示
• 進行状況の表示： ステップのパンくずリストや番号付きの段階（1 → 2 → 3）
• ガイドとしてのカーソル： 滑らかなカーソルの動きで視線を誘導
• 成功の演出： 緑色のチェックマーク、紙吹雪、またはブランド仕様の成功画面
• 気が散る要素を最小限に： 装飾的な要素を避け、タスクに集中

チュートリアル向けのアニメーションパターン

• カーソルの動き： 滑らかなベジェ曲線と、クリック前の短い停止
• クリック時のフィードバック： クリック時の控えめな波紋またはハイライト
• フォームフィールドのフォーカス： フィールドがアクティブなときに枠線が光る
• 入力のシミュレーション： 入力欄にテキストが一文字ずつ表示される
• ステップ間のトランジション： 画面間を穏やかにクロスフェードまたはスライド
• 進行状況の更新： パンくずリストやステップインジケーターが次へ進むアニメーション
• 成功の演出： チェックマークがバウンスしながら拡大表示され、必要に応じて紙吹雪を追加
• パネルの表示： サイドバーやドロップダウンが滑らかにスライドして表示される

視覚要素

• パンくずナビゲーション： 「← 1. 意図 → 2. 種となるアイデア → 3. スケッチパッド」
• フォーム入力欄： プレースホルダーテキスト、ラベル、検証状態
• ボタン： ホバー状態やアクティブ状態を表示した、わかりやすい CTA
• サイドバー／パネル： AI による提案、設定、またはツールパレット
• 成功画面： アイコンとメッセージを配置したフルカラーの背景

シーンプランの例

Script: "First, enter what your lesson is about."

Scene 1 - Setup (2s):
- Visual: Full app interface, light background
- Visual: Breadcrumb shows "2. Seed Idea" active
- Animation: Screen fades in

Scene 2 - Interaction (4s):
- Visual: Form with "Enter a concept or theme:" label
- Animation: Cursor moves to input field (0.6s ease-out)
- Animation: Field border highlights blue
- Animation: "The Secret Lives of Mushrooms" types in (2s)
- Animation: Cursor moves to "Continue" button

Scene 3 - Transition (2s):
- Animation: Button highlights on hover
- Animation: Click ripple effect
- Animation: Screen slides left, new panel slides in

Scene 4 - Result (3s):
- Visual: Sketchpad view with AI suggestions panel
- Animation: Suggestion cards stagger in (0.15s delay each)
- Animation: "Lesson Flow" section populates

Scene 5 - Success (3s):
- Visual: Green full-screen background
- Animation: White circle scales in (spring)
- Animation: Checkmark draws inside circle
- Animation: "Your lesson is live!" fades in below
- Animation: Subtitle "Ready to inspire wonder and discovery" fades in

チュートリアルのペース配分ガイドライン

ステップの複雑さ	時間	備考
簡単なクリック	2-3s	クリックしてすぐに結果を表示
フォーム入力	4-6s	入力して送信
複数フィールドのフォーム	8-12s	複数の入力欄
複雑なワークフロー	15-20s	複数のサブステップ
成功状態	3-5s	余韻を持たせる

効果的なチュートリアルのヒント

1. 1シーンにつき1つの操作 — 複数のクリックをまとめて急がないでください
2. 結果の表示中は一時停止する — 次に進む前に、視聴者が結果を確認できるようにします
3. 変化した部分を強調する — 新しい要素に控えめな発光や拡大効果を使います
4. ナレーションと操作を合わせる — ナレーターが「クリック」と言うタイミングでクリックします
5. UI全体を見せる — 文脈がわかると、ユーザーが現在の位置を把握しやすくなります
6. 成功を祝って締めくくる — 成功した状態を見せると、完了を実感できます

---

動画の種類：ソーシャルメディア向けプロモーション

目標： 広告やソーシャルコンテンツ向けに、大胆なキネティックタイポグラフィで素早く注目を集めます。

スクリプトの構成

HOOK (1-3s)
Single powerful word or phrase that stops the scroll.

VALUE PROP (3-5s)
What's in it for them? One punchy sentence.

FEATURE FLASH (5-10s)
2-3 key benefits, rapid fire.

CTA (2-3s)
Clear action: "Download now", "Try free", URL

ビジュアルスタイル

• ミニマルな背景： 単色またはシンプルなグラデーション
• 最大限のコントラスト： 暗い背景＋白いテキスト、または色付きの背景＋白いテキスト
• 単語ごとの表示： 各単語を順番に表示します
• 色の切り替え： シーン間で背景色を変えます
• 正方形フォーマット： Instagramやソーシャルフィード向けに1080x1080

ソーシャルメディア向けプロモーションのアニメーションパターン

• 単語を叩きつける： 単語をインパクトのある形で表示します（scale 1.2→1 + わずかな揺れ）
• 背景のフラッシュ： 単語やフレーズの切り替わりに合わせて色を瞬時に変更します
• テキストの拡大縮小： 単語を大きくしてから縮小し、次の表示スペースを確保します
• 最小限の動き： 大胆なタイポグラフィを主役にします
• 高速カット： 単語やフレーズごとに最大0.5-1s

シーン構成の例

Script: "We are ready."

Scene sequence (4 seconds total):
- Frame 1: Black bg, "WE" slams in white (0.8s)
- Frame 2: White bg, "A" appears black, centered (0.8s)
- Frame 3: Red bg, "R" types out, becomes "READY" (1.6s)
- Frame 4: Hold final frame (0.8s)

尺の目安

プラットフォーム	理想的な長さ	最大の長さ
Instagram Reels	15-30s	90s
TikTok	15-60s	3min
Twitter/X	15-45s	2min 20s
LinkedIn	30s-1min	10min
YouTube Shorts	15-60s	60s

---

動画の種類：アプリ／製品の紹介

目標： テキストとUIを組み合わせ、映画のような演出で製品のインターフェースを紹介します。

スクリプトの構成

HOOK (3-5s)
Problem statement or intriguing question.

INTRODUCE PRODUCT (5-10s)
Show the product name/logo, establish brand.

FEATURE TOUR (20-40s)
Walk through 3-5 key features with UI demonstrations.

BENEFIT SUMMARY (5-10s)
Recap what makes it special.

CTA (5s)
URL, app store badge, or next step.

ビジュアルスタイル

• 暗いグラデーション背景： テクノロジー製品には黒から紫／青へのグラデーション
• 柔らかなグラデーション背景： 親しみやすいアプリにはパステルカラー（ピンク、ラベンダー、ミント）
• 浮遊するUIモックアップ： わずかに傾け、影を付けたアプリ画面
• UIに添えるキネティックタイポグラフィ： インターフェースの横や上にテキストを表示します
• カーソル操作： UI内でのクリック、スクロール、入力を見せます

アプリ紹介のアニメーションパターン

• URLバーへの入力： ブラウザーのアドレスバーにタイプライター効果を適用します
• UIのスライドイン： アプリのモックアップを下または横からスプリング効果で滑り込ませます
• パースペクティブの傾き： UIを控えめに3D回転させます（5-10度）
• 発光効果： UI要素の周囲に控えめな発光／ブルーム効果を加えます
• カーソルの動き： クリック時の波紋を伴う、滑らかなベジェ曲線の動きを付けます
• リストの表示： リスト項目を順番に表示します（各項目を0.1sずつ遅らせます）
• トークン／アイコンのグリッド： アプリアイコンや暗号資産トークンをグリッド状に配置します

シーン構成の例

Script: "Earn the best yields on your crypto."

Scene 1 (3s):
- Visual: Soft purple gradient background
- Animation: Text "Earn the best" fades in, "yields" appears in accent color
- Timing: Words sync with voiceover

Scene 2 (4s):
- Visual: Browser URL bar appears (rounded rectangle)
- Animation: "jumper.exchange/" types out character by character
- Animation: Cursor blinks at end

Scene 3 (5s):
- Visual: App UI mockup slides up from bottom
- Animation: Token list (USDC, ETH, LINK) reveals with stagger
- Animation: Cursor moves to highlight token row

---

動画の種類：ランディングページの公開

目標： デザイナーツールのようなドラマチックな演出で、ウェブサイトのデザインを紹介します。

スクリプトの構成

INTRO (3-5s)
Establish the problem or context.

DESIGN REVEAL (10-20s)
Dramatic entrance of the landing page.

FEATURE CALLOUTS (15-30s)
Highlight specific sections of the page.

CTA (5-10s)
"Book a demo", "Get started", with URL.

ビジュアルスタイル

• デザインツールの美学： グリッド線、ガイド、ルーラーを表示します
• ニュートラルな背景： ライトグレー（#f5f5f5）またはダークチャコール（#1a1a1a）
• ウェブページ全体のモックアップ： ブラウザーフレーム内にランディングページ全体を表示します
• 光線／レンズフレア： ドラマチックな公開演出のライティング
• 弁当箱型グリッドのレイアウト： UIコンポーネントをグリッド状に配置します

ランディングページ公開のアニメーションパターン

• グリッドの表示： まず、点線のガイドをフェードインさせます
• 要素の構築： 青い四角形で要素を表し、それが本物のUIに「変化」する様子を見せます
• 光のスイープ： デザインを斜めの光線が横切ります
• ズームとパン： ページ上をカメラが移動します
• コンポーネントの強調： 解説に合わせてセクションを発光させる、または浮き上がらせます
• ブラウザーフレーム： 文脈を示すためにChrome/Safariのブラウザーフレームを使います

シーン構成の例

Script: "Achieve team harmony with TeamFusion."

Scene 1 (2s):
- Visual: Dark background, grid lines appear (dashed, gray)
- Animation: Blue rectangle placeholder at center
- Animation: Cursor enters frame

Scene 2 (3s):
- Visual: Light beam sweeps diagonally
- Animation: Blue rectangle transforms/morphs into webpage mockup
- Animation: Glow effect around the design

Scene 3 (5s):
- Visual: Full landing page visible with bento-style feature cards
- Animation: Cards lift slightly with shadow on hover simulation
- Animation: Text callout points to CTA button

---

動画の種類：AI／テクノロジー製品の解説

目標： テキストとインターフェースのデモを用いて、複雑なAI製品やテクノロジー製品を解説します。

スクリプトの構成

MEET THE PRODUCT (5-10s)
"Meet [Product] — the [category] that [key benefit]."

PROBLEM (10-15s)
What frustration does this solve?

HOW IT WORKS (20-40s)
Show the interface, demonstrate the magic.

INTEGRATIONS (10-15s)
What does it connect with?

CTA (5-10s)
Try it, sign up, learn more.

ビジュアルスタイル

• ダークモード UI： 鮮やかなアクセントカラーを使った暗い背景
• ネオンアクセント： 紫、シアン、マゼンタのグロー
• 音声／AI インジケーター： 波形、録音ボタン、チャットバブル
• アプリアイコンのグリッド： 見覚えのあるロゴで連携機能を表示
• 左右並列のレイアウト： 片側にテキスト、もう片側に UI

AI 解説動画のアニメーションパターン

• 音声波形： 「聞き取り中」を示すアニメーション付きの点やバー
• 録音インジケーター： 「停止」ボタンと点滅する赤い点
• チャットメッセージの入力： まず入力インジケーターを表示してから、メッセージを表示
• モデルセレクター： AI モデルの選択肢を表示するドロップダウン
• 連携アイコン： アプリのロゴが時間差で画面の端からスライドイン
• グローの点滅： 解説中の要素を光らせる

シーンプランの例

Script: "Meet the AI assistant that lets you talk to all your apps."

Scene 1 (3s):
- Visual: Dark purple gradient background
- Animation: "Meet" fades in gray, holds

Scene 2 (5s):
- Visual: App mockup slides in from right
- Visual: Voice recording UI with waveform animation
- Animation: Red recording dot pulses
- Animation: Text "that lets you talk to all your apps" appears left

Scene 3 (4s):
- Visual: Dropdown opens showing model options (GPT-4, Claude, etc.)
- Animation: List items stagger in (0.1s delay)
- Animation: Cursor hovers, selection highlights

---

ビジュアルスタイルのリファレンス

製品の種類とトーンに合わせて、ビジュアルスタイルを選びます。

ダークでドラマチック（テック、AI、フィンテック、暗号資産）

• 背景： 黒から紫／青へのグラデーション、または無地の暗色（#0a0a0a）
• テキスト： 白または明るいグレーに、色付きのアクセント
• アクセント： ネオンパープル（#8b5cf6）、シアン（#06b6d4）、マゼンタ（#ec4899）
• エフェクト： グロー、光線、控えめなパーティクル

ソフトグラデーション（一般消費者向けアプリ、ライフスタイル）

• 背景： パステルグラデーション（ラベンダー→ピンク、ミント→青）
• テキスト： コントラストを付けるためのダークパープルまたはネイビー
• アクセント： 調和するパステルカラー
• エフェクト： 柔らかなシャドウ、角丸、親しみやすい動き

クリーンでミニマル（SaaS、生産性向上、B2B）

• 背景： 白（#ffffff）またはライトグレー（#f8fafc）
• テキスト： ダークグレー（#1f2937）または黒
• アクセント： ボタンや強調表示にブランドカラーを使用
• エフェクト： 控えめなシャドウ、すっきりとしたトランジション

デザインツール（ランディングページ、デザインのショーケース）

• 背景： グリッドが見えるニュートラルグレー
• 要素： 制作ガイドを示す要素（青い四角形、ガイド線）
• エフェクト： 光の走査、要素の表示
• フレーム： 状況を伝えるためのブラウザーの枠

---

アニメーション用語

アニメーションを説明するときは、以下の用語を使用します。

基本的なアニメーション

用語	効果	最適な用途
フェード	不透明度を0→1または1→0に変化させる	控えめな表示、トランジション
スライド	画面外から移動する	UI 要素、リスト項目
スケール	拡大または縮小する	強調、表示
スプリング	行き過ぎを伴う弾む動き	遊び心や活気のある印象
イーズアウト	素早く始まり、最後はゆっくりになる	自然な動き
イーズインアウト	始まりと終わりがゆっくりになる	滑らかで洗練された印象
タイプライター	文字を1文字ずつ表示する	テキスト、URL、コードの表示
スタガー	項目ごとに時間差を付ける	リスト、複数の要素
モーフ	形状が別の形状に変化する	変形、トランジション
パルス	リズミカルに拡大／縮小する	注意を引く
シェイク	水平方向に素早く振動する	インパクト、強調
ワイプ	動く境界線で表示する	シーンのトランジション

高度なアニメーション（例より）

用語	効果	最適な用途
ワードスラム	スケールの行き過ぎとシェイクを伴って単語を表示する	力強い主張、SNS 動画
背景フラッシュ	背景色を瞬時に変更する	シーンのトランジション、活気
ライトスイープ	フレームを横切る斜めの光線	ドラマチックな表示
グロー／ブルーム	要素の周囲に柔らかな光の輪を付ける	焦点、プレミアムな印象
パースペクティブチルト	UI を3D回転させる（5～10°）	アプリのモックアップ、奥行き
カーソルトレイル	ポインターの滑らかなベジェ曲線	UI のデモ
クリックリップル	クリック時に円形のパルスを表示する	ボタンの操作
カウントダウン	数字がカウントダウンする	切迫感、タイマー
グリッド表示	コンテンツの前にガイド線を表示する	デザインツールの美的表現
ロゴの組み立て	ロゴのパーツが組み合わさる	ブランドの表示

タイミングのガイドライン

• 超高速： 0.1-0.2s — 単語を強く表示、色をフラッシュ
• 高速： 0.2-0.3s — 小気味よく、エネルギッシュ
• 中速： 0.4-0.6s — バランスが取れた、プロフェッショナルな印象
• 低速： 0.8-1.2s — ドラマチックで、エレガント
• 段階表示の間隔： 項目間に0.1-0.2s
• 表示保持時間： 0.5-1s — 重要なテキストが印象に残るように表示

---

シーン設計テンプレート

各シーンについて、以下を記録します。

SCENE [number]: [title]
Script: "[exact voiceover text]"
Duration: [X seconds]
Visuals:
  - [element]: [description]
  - [element]: [description]
Animations:
  - [timing]: [element] [animation type] ([duration], [easing])
  - [timing]: [element] [animation type] ([duration], [easing])
Transition to next: [type]

---

必須セットアップ - Resemble.ai

ナレーションを生成する前に、ユーザーの認証情報が設定されていることを確認してください。

既存の設定を確認する

.env ファイルが存在し、以下が設定されているか確認します。

• RESEMBLE_API_KEY - Resemble.ai API トークン
• RESEMBLE_VOICE_UUID - 音声 ID（任意。デフォルトは 7213a9ea）

不足している認証情報を求める

RESEMBLE_API_KEY が設定されていない場合： 次のように尋ねます。「ナレーションを生成するには Resemble.ai の API キーが必要です。https://app.resemble.ai/account/api から取得できます。API キーを貼り付けてください。」

RESEMBLE_VOICE_UUID が設定されていない場合： デフォルトの音声 UUID 7213a9ea を使用します。別の音声を希望する場合にのみ尋ねてください。

認証情報を保存する

1. 提供された値を使って .env を作成または更新します
2. .env が .gitignore に含まれていることを確認します
3. 続行する前にセットアップを確認します

認証情報のセキュリティ

• API キーをバージョン管理に絶対にコミットしないでください
• API キー全体をユーザーに絶対に表示しないでください
• .env が .gitignore に含まれていることを必ず確認してください
• 認証情報は .env のみに保存し、ハードコードしないでください

---

キャプションの動作

キャプションはデフォルトで無効です。 明示的にリクエストされた場合にのみ、単語単位のタイムスタンプとキャプションコンポーネントを生成します。

デフォルト（キャプションなし）：

• 音声ファイルのみを生成します
• 基本的なメタデータ（duration、fps、durationInFrames）を保存します
• タイムスタンプを単語に分割して処理しないでください

ユーザーがキャプションをリクエストした場合：

• ユーザーは「captions」「subtitles」「word highlighting」のいずれかを明示的にリクエストする必要があります
• audio_timestamps を単語単位のデータに変換します
• コンポジションにキャプションコンポーネントを含めます

---

ルールファイル

実装の詳細については、以下を参照してください。

• rules/resemble-setup.md - API 認証情報と設定
• rules/resemble-sync-tts.md - 同期 TTS 生成
• rules/resemble-streaming-tts.md - 長いスクリプト向けのストリーミング
• rules/resemble-voices.md - 音声の選択と管理
• rules/resemble-remotion-integration.md - Remotion との音声連携
• rules/resemble-captions.md - 同期キャプション
• rules/visual-animations.md - アニメーションパターンと Remotion プリミティブ

---

クイックリファレンス

教育用チュートリアルの場合：

1. トピックを十分に調査します
2. 対象者のレベルに合わせて言葉を調整します
3. ナレーションに同期した表示アニメーションを使います
4. 視覚的な比喩や図解を取り入れます

SaaS のデモの場合：

1. 機能のワークフローを把握します
2. UI モックアップを作成するか、スクリーンショットを撮影します
3. カーソルアニメーションとハイライトを使います
4. 結果や成果を明確に示します

製品ローンチの場合：

1. 問題から解決策へとつながるストーリーに焦点を当てます
2. 大胆なタイポグラフィとブランドカラーを使います
3. テンポよく仕上げます — 短い文、速いカットを使います
4. 明確な行動喚起で締めくくります

チュートリアル／操作ガイドの場合：

1. 明るく、すっきりとした UI の雰囲気にします
2. 1シーンにつき1つの操作に絞り、急がないようにします
3. カーソルで視聴者の注目を誘導します
4. 進行状況を表示します（パンくずリスト、番号）
5. 次に進む前に、結果を見せて間を取ります
6. 成功状態を祝う演出で締めくくります

ソーシャルメディアのプロモーションの場合：

1. 印象的な単語やフレーズで始めます
2. 単語を一つずつ、インパクトのある形で表示します
3. 背景色の切り替えで勢いを加えます
4. エンゲージメントを高めるため、全体の長さを30s未満にします
5. フィード向けに正方形（1080x1080）形式を使います

アプリ／製品の紹介の場合：

1. グラデーションのスタイルを選びます（暗くドラマチック、または柔らかなパステル）
2. わずかなパースや傾きを加えた UI モックアップを表示します
3. 動きのあるテキストとインターフェースのデモを組み合わせます
4. Web 製品では、URL バーへの入力アニメーションを使います
5. クリック操作を見せるため、カーソルの動きを演出します

ランディングページのお披露目：

1. デザインツールらしい美しさを取り入れます（グリッド、ガイド）
2. 光のスイープで印象的にお披露目します
3. ブラウザーフレーム内にウェブページ全体を表示します
4. コールアウトで特定のセクションを強調します
5. 明確な CTA と URL で締めくくります

AI／テクノロジーの解説：

1. ネオンのアクセントを取り入れたダークモードの美しさ
2. 音声／チャット UI のやり取りを表示します
3. アプリアイコンのグリッドで連携機能を紹介します
4. テキストとインターフェースを並べたレイアウトにします
5. AI らしさを演出するため、波形と入力中インジケーターを使用します