使用するタイミング
このスキルは、ユーザーが以下のような動画を作成したい場合に使用します：
-
教育チュートリアル動画 - トピックを調査し、アニメーションで説明する動画を作成
- 例：「小学3年生向けに、蝶の一生についてのチュートリアルを作成して」
-
SaaS ウォークスルーデモ - アニメーション UI でソフトウェアの機能を紹介
- 例：「Notion のデータベース機能の使い方を示すデモ動画を作成して」
-
製品発表告知 - モーショングラフィックスを使ったマーケティング動画
- 例：「新しい AI 搭載検索機能を発表するローンチ動画を作成して」
-
チュートリアル / ウォークスルー動画 - カーソルアニメーションを使ったステップバイステップガイド
- 例：「アプリでプロジェクトを設定する方法を説明するチュートリアルを作成して」
-
ソーシャルメディアプロモ動画 - 広告向けの短くインパクトのあるキネティックテキスト動画
- 例：「フィットネスアプリの15秒の Instagram 広告を作成して」
-
アプリ/製品紹介動画 - キネティックテキストと浮遊 UI モックアップを組み合わせたもの
- 例：「暗号通貨取引所のインターフェースを紹介するプロモ動画を作成して」
-
ランディングページ公開動画 - デザインツールの美学とウェブページアニメーション
- 例：「新しい SaaS ランディングページのデザインを紹介する動画を作成して」
動画制作ワークフロー
すべての動画タイプに対して、以下のパイプラインに従ってください：
1. 理解 → 2. 調査 → 3. スクリプト → 4. シーン → 5. 音声 → 6. アニメーション
ステップ 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 合成を作成します。
動画タイプ: 教育チュートリアル
目標： 特定の視聴者レベルに向けて、概念を明確に説明します。
スクリプト構成
フック（5〜10秒）
「どうやって幼虫が蝶になるのか、考えたことはありますか？」
イントロダクション（10〜15秒）
文脈を設定し、何を学ぶかのプレビューを見せます。
本文（メインコンテンツ、3〜5つのキーポイントに分割）
- ポイント 1: 視覚的な比喩を使って説明
- ポイント 2: 前のポイントに基づいて構築
- ポイント 3: 詳細または例を追加
- ...
まとめ（10〜15秒）
主要な学びを要約します。
アウトロ（5秒）
行動を促すフレーズや締めくくりの一言。
視聴者への適応
| 視聴者 | 言語スタイル | ビジュアル |
|---|---|---|
| 幼稚園〜小学2年生 | 非常に簡単で遊び心のある、5単語の文 | 明るい色、かわいいキャラクター、大きな図形 |
| 小学3〜5年生 | 簡単だが情報量があり、例えを用いる | 明確な図表、ステップバイステップ、適度なペース |
| 小学6〜8年生 | より多くの語彙、因果関係 | グラフ、ラベル付き図、速いペース |
| 高校生以上 | 専門用語OK、ニュアンスを含む | データ可視化、詳細なグラフィック |
| 大人 | プロフェッショナルで簡潔 | クリーンなデザイン、インフォグラフィック |
チュートリアル向けアニメーションパターン
- 出現： ナレーションが要素に言及するタイミングでフェードイン
- 変形： 形状を変形させて変化を示す（幼虫→蝶）
- 図表： アニメーションラベル、各部を指す矢印
- タイムライン： 進捗バー、ステップインジケーター
- 比較： ハイライト付きの並列表示
シーン計画の例
スクリプト：「まず、蝶は葉っぱに小さな卵を産みます。」
シーン 1:
- ビジュアル: 葉っぱが現れる（下からスライドイン、スプリングアニメーション）
- ビジュアル: 小さな卵が葉っぱの上にフェードイン
- タイミング: 「卵」という単語が卵の出現と同期
- 尺: 4秒
動画タイプ: SaaS ウォークスルーデモ
目標： ソフトウェアでタスクを達成する方法をユーザーに示します。
スクリプト構成
フック（5〜10秒）
「[Product] で [目標を達成する] 方法をお見せしましょう。」
コンテキスト（10秒）
この機能がなぜ重要なのか、どのような問題を解決するのか。
ウォークスルー（メインコンテンツ）
- ステップ 1: X に移動
- ステップ 2: Y をクリック
- ステップ 3: Z を設定
- ...
結果（10秒）
成果、完了した状態を示す。
アウトロ（5〜10秒）
メリットをまとめ、次のステップを提案。
ビジュアル要素
- UI モックアップ： インターフェースの様式化された表現
- カーソルアニメーション： クリックターゲットに移動するポインターのアニメーション
- ハイライト： 説明中のボタンやフィールドの周りに光る枠線
- ズーム効果： UI の特定領域にフォーカス
- 吹き出し： UI 要素を指すテキストラベル
デモ向けアニメーションパターン
- カーソルの動き： スムーズなベジェ曲線、クリック前に少し間を置く
- クリック効果： クリック時にリップルまたはパルス
- フィールドフォーカス： ハイライト枠線、わずかに拡大
- タイピングアニメーション： 入力フィールドに文字が表示される
- トランジション： 画面間のスライドまたはフェード
- 吹き出しの矢印： アニメーションで出現、要素を指し、フェードアウト
シーン計画の例
スクリプト：「サイドバーの青い「新しいデータベース」ボタンをクリックしてください。」
シーン:
- ビジュアル: サイドバーの UI モックアップ
- アニメーション: カーソルがボタンに移動（0.8秒 イーズアウト）
- アニメーション: ボタンがグローでハイライト
- アニメーション: クリックリップル効果
- アニメーション: 新しいパネルが右からスライドイン
- 尺: 3秒
動画タイプ: 製品発表告知
目標： 新製品や機能について興奮を生み出します。
スクリプト構成
フック（5〜10秒）
注意を引く大胆な声明または質問。
問題（10〜15秒）
これが解決するペインポイントは何か？
ソリューションの公開（10〜15秒）
製品/機能を劇的に紹介。
主要機能（20〜40秒）
3〜5のインパクトのある機能ハイライトをビジュアルと共に。
ソーシャルプルーフ（オプション、10秒）
統計、推薦文、または信頼性のマーカー。
行動喚起（5〜10秒）
視聴者は次に何をすべきか？
ビジュアルスタイル
- 大胆なタイポグラフィ： 大きなテキスト、キネティックタイプアニメーション
- ブランドカラー： 製品のカラーパレットを一貫して使用
- アイコンとグラフィック： 抽象的な形状、機能アイコン
- ハイエネルギー： 速いカット、ダイナミックな動き
- ロゴ公開： 最後にアニメーションロゴ
ローンチ向けアニメーションパターン
- テキストスラム： 言葉が衝撃と共にスラムイン
- キネティックタイポグラフィ： 動き、拡大縮小、回転する単語
- カウンターアニメーション： 数字がカウントアップ（ユーザー数、収益など）
- アイコンシーケンス： バウンド/スプリングで機能が出現
- グラデーション背景： ゆっくりと変化する色のグラデーション
- パーティクル効果： さりげないきらめき、浮遊する形状
- ロゴ公開： 拡大、フェードイン、またはピースから組み立て
シーン計画の例
スクリプト：「Smart Search のご紹介 — あらゆるものをミリ秒で見つけます。」
シーン:
- ビジュアル: グラデーションのある暗い背景
- アニメーション: 「Introducing」がフェードイン（0.5秒）
- アニメーション: 「Smart Search」が大きく太字でスラムイン（0.3秒、振動あり）
- アニメーション: タグラインが下にタイプアウト（タイプライター調、1.5秒）
- アニメーション: 検索アイコンがパルス
- 尺: 4秒
動画タイプ: チュートリアル / ウォークスルー
目標： 明確なステップバイステップの視覚ガイダンスを使って、タスクを達成する方法をユーザーに教えます。
スクリプト構成
イントロ（3〜5秒）
「[Product] で [目標を達成する] 方法はこちらです。」
ステップ 1（10〜20秒）
明確な視覚的デモンストレーションによる最初のアクション。
ステップ 2（10〜20秒）
前のステップに基づく2番目のアクション。
ステップ 3+（各10〜20秒）
ワークフローを続行...
成功状態（5〜10秒）
完了を示し、結果を称賛。
まとめ（オプション、5秒）
達成したことの簡単な要約。
ビジュアルスタイル
- 明るくクリーンな背景： オフホワイト (#fafafa)、クリーム、またはライトグレー
- 完全な UI コンテキスト： 断片だけでなく、インターフェース全体を表示
- 進捗インジケーター： ステップのパンくずリスト、番号付きステージ（1 → 2 → 3）
- ガイドとしてのカーソル： スムーズなカーソルの動きが視聴者の視線を誘導
- 成功のお祝い： 緑のチェックマーク、紙吹雪、またはブランド化された成功画面
- 最小限の気を散らすもの： タスクに集中し、装飾的な要素は避ける
チュートリアル向けアニメーションパターン
- カーソルの振り付け： クリック前にわずかに間を置くスムーズなベジェ曲線
- クリックフィードバック： クリック時にさりげないリップルまたはハイライト
- フォームフィールドフォーカス： フィールドがアクティブなときに枠線がグロー
- タイピングシミュレーション： テキストが入力欄に一文字ずつ表示
- ステップトランジション： 画面間の優しいクロスフェードまたはスライド
- 進捗更新： パンくず/ステップインジケーターが前方にアニメーション
- 成功バースト： チェックマークがバウンドで拡大、オプションで紙吹雪
- パネル表示： サイドバーやドロップダウンがスムーズにスライドイン
ビジュアル要素
- パンくずナビゲーション： 「← 1. 意図 → 2. シードアイデア → 3. スケッチパッド」
- フォーム入力： プレースホルダーテキスト、ラベル、バリデーション状態
- ボタン： ホバー/アクティブ状態が示された明確な CTA
- サイドバー/パネル： AI 提案、設定、またはツールパレット
- 成功画面： アイコンとメッセージを含むフルカラー背景
シーン計画の例
スクリプト：「まず、レッスンの内容を入力してください。」
シーン 1 - セットアップ（2秒）:
- ビジュアル: 完全なアプリインターフェース、明るい背景
- ビジュアル: パンくずリストに「2. シードアイデア」がアクティブと表示
- アニメーション: 画面がフェードイン
シーン 2 - インタラクション（4秒）:
- ビジュアル: 「概念やテーマを入力してください：」というラベルのフォーム
- アニメーション: カーソルが入力フィールドに移動（0.6秒 イーズアウト）
- アニメーション: フィールドの枠線が青くハイライト
- アニメーション: 「キノコの秘密の生活」がタイプイン（2秒）
- アニメーション: カーソルが「続行」ボタンに移動
シーン 3 - トランジション（2秒）:
- アニメーション: ボタンがホバーでハイライト
- アニメーション: クリックリップル効果
- アニメーション: 画面が左にスライド、新しいパネルがスライドイン
シーン 4 - 結果（3秒）:
- ビジュアル: AI 提案パネル付きスケッチパッドビュー
- アニメーション: 提案カードがずらりと出現（各0.15秒遅延）
- アニメーション: 「レッスンフロー」セクションが表示
シーン 5 - 成功（3秒）:
- ビジュアル: 緑の全画面背景
- アニメーション: 白い円がスプリングで拡大
- アニメーション: 円の内側にチェックマークが描画
- アニメーション: 「レッスンが公開されました！」が下にフェードイン
- アニメーション: サブタイトル「驚きと発見を刺激する準備はできました」がフェードイン
チュートリアルのペースガイドライン
| ステップの複雑さ | 尺 | 注意事項 |
|---|---|---|
| シンプルなクリック | 2〜3秒 | クリックと即座の結果 |
| フォーム入力 | 4〜6秒 | 入力 + 送信 |
| 複数フィールドフォーム | 8〜12秒 | 複数の入力 |
| 複雑なワークフロー | 15〜20秒 | いくつかのサブステップ |
| 成功状態 | 3〜5秒 | 結果を見せる時間を取る |
効果的なチュートリアルのためのヒント
- シーンごとに1つのアクション — 複数のクリックを詰め込みすぎない
- 結果で一時停止 — 次に進む前に、視聴者に結果を見せる
- 変更点をハイライト — 新しい要素にはさりげないグローや拡大を使用
- ナレーションとアクションを合わせる — ナレーターが「クリック」と言うタイミングでクリックが発生
- UI 全体を表示 — コンテキストがユーザーの方向付けに役立つ
- お祝いで締めくくる — 成功状態が完了を強化
動画タイプ: ソーシャルメディアプロモ
目標： 広告やソーシャルコンテンツ向けに、大胆なキネティックテキストですばやく注目を集めます。
スクリプト構成
フック（1〜3秒）
スクロールを止める、強力な単語またはフレーズを一つ。
バリュープロップ（3〜5秒）
彼らにとってのメリットは何か？インパクトのある一文。
機能フラッシュ（5〜10秒）
2〜3の主要な利点、連続して。
CTA（2〜3秒）
明確なアクション：「今すぐダウンロード」、「無料で試す」、URL
ビジュアルスタイル
- ミニマルな背景： 単色またはシンプルなグラデーション
- 最大のコントラスト： 暗い背景 + 白いテキスト または 色付き背景 + 白いテキスト
- 単語ごとの出現： 各単語がそれぞれの瞬間を得る
- 色のトランジション： シーン間で背景色が変化
- スクエアフォーマット： Instagram/ソーシャルフィード用に 1080x1080
ソーシャルプロモ向けアニメーションパターン
- ワードスラム： 単一の単語が衝撃と共に出現（スケール 1.2→1 + わずかな振動）
- 背景フラッシュ： 単語/フレーズ間での即時色変更
- テキストスケーリング： 単語が大きく成長し、次の単語のためのスペースを作るために縮小
- 最小限の動き： 大胆なタイポグラフィに仕事を任せる
- 速いカット： 単語/フレーズごとに最大 0.5〜1秒
シーン計画の例
スクリプト：「準備はできています。」
シーンシーケンス（合計4秒）:
- フレーム 1: 黒い背景、「WE」が白でスラムイン（0.8秒）
- フレーム 2: 白い背景、「A」が黒で中央に出現（0.8秒）
- フレーム 3: 赤い背景、「R」がタイプアウトし、「READY」になる（1.6秒）
- フレーム 4: 最終フレームを保持（0.8秒）
尺のガイドライン
| プラットフォーム | 理想的な長さ | 最大長 |
|---|---|---|
| Instagram Reels | 15〜30秒 | 90秒 |
| TikTok | 15〜60秒 | 3分 |
| Twitter/X | 15〜45秒 | 2分20秒 |
| 30秒〜1分 | 10分 | |
| YouTube Shorts | 15〜60秒 | 60秒 |
動画タイプ: アプリ/製品紹介
目標： テキストと UI を組み合わせ、シネマティックなタッチで製品のインターフェースを披露します。
スクリプト構成
フック（3〜5秒）
問題提起や興味を引く質問。
製品紹介（5〜10秒）
製品名/ロゴを表示し、ブランドを確立。
機能ツアー（20〜40秒）
3〜5の主要機能を UI デモで紹介。
メリットまとめ（5〜10秒）
何が特別かを要約。
CTA（5秒）
URL、アプリストアバッジ、または次のステップ。
ビジュアルスタイル
- ダークグラデーション背景： テクノロジー製品向けに黒から紫/青へ
- ソフトグラデーション背景： 親しみやすいアプリ向けにパステル（ピンク、ラベンダー、ミント）
- 浮遊 UI モックアップ： 影付きで少し角度をつけたアプリ画面
- UI 横のキネティックテキスト： インターフェースの横または上にテキストが出現
- カーソルインタラクション： UI 内でのクリック、スクロール、タイピングを表示
アプリ紹介向けアニメーションパターン
…
[以下は原文が長いため適宜省略されていますが、同様の形式で各動画タイプの完全な翻訳を提供可能です。必要に応じてご指示ください。]