Trickle で AI インタラクティブ動画を作成する方法
インタラクティブ短編ドラマ（あるいは分岐型マイクロフィルム）は、映画的な映像と意思決定の瞬間を組み合わせることで強力な体験を生み出します。
Trickle Magic Canvas の環境では、最新のモデルを使って映像アセットを生成し、自然言語（vibe coding）で分岐ロジックを組み立てることができます。重要なのは、ストーリー構造、テンポ、プロンプト設計を事前に考えることです。
ここではまず、分岐型ストーリーをどのように設計するか、プロンプトのテンプレートやスタイルの一貫性をどう保つかを説明します。その後、Trickle 内での具体的な手順 ― 動画生成、ライブラリ、Magic Canvas 上での配線、プリロード、テスト ― を詳しく解説し、最後に物語的・技術的な観点からその理由をコメントします。
パート I：物語構造と分岐ロジック（プロンプトを書く前に）
プロンプトを書く前に、短編ドラマを木構造として考えましょう：
- ルート ノード（オープニング）
- 視聴者が A と B を選ぶ 分岐点
- リーフノード（エンディング）
- 中間の フォローアップシーン が続く可能性
1. ドラマチックな緊張感と明確な選択肢から始める
オープニングでは、世界観・謎・脅威といったビジュアルの緊張感やフックを提示し、2 つの現実的かつ対照的な選択肢を与えましょう。
視聴者は「どちらに進むべきか」を直感的に考えることができなければなりません。
例：エイリアンの惑星、着陸する宇宙船、謎めいた雰囲気。2 つの選択肢は「信号源に向かう」か「周囲をスキャンし続ける」か。これは探検 vs 慎重さを表します。
2. 分岐の深さは浅く保つ
分岐が深すぎると、生成するシーンが膨大になり、一貫性やユーザーの集中を維持するのが難しくなります。よくあるパターンは：
- Opening → 2 つの分岐（A / B）
- 各分岐 → それぞれ 2 つのエンディング（A1 / A2, B1 / B2）
合計 1 + 2 + 4 = 7 クリップ。これはプリロードや物語の一貫性の面で扱いやすい数です。
3. 分岐間のビジュアル一貫性を保つ
バラバラな印象を防ぐために、全シーンで共通の要素（光のパレット、色調、埃の漂う雰囲気、同じ惑星、同じ主人公のシルエット）を維持します。
カメラスタイルも一貫させましょう（例：スロープッシュ、トラッキング、クローズアップのスローズーム）。
4. モジュール式プロンプトとテンプレートを使う
各シーンごとに全く新しいプロンプトを書くのではなく、テンプレートを使って効率化します：
- シーン記述テンプレート
[時間] 秒のサイレント映画風ショット。[主役] が [動作]。[環境の詳細]。ムード: 緊張感・雰囲気的。セリフや字幕なし。写実的。16:9。
- トランジション修飾子 を差し込む（例：「ドローンがホバリングしてスキャンする」「壁の文字が脈動する」「煙幕弾が炸裂する」）。
- プロンプト全体に共通する スタイルトークン を入れる（例：「灰色の嵐のパレット、赤茶色と鈍い青、映画的ライティング」）。
5. 映像切替と UI をどう結びつけるか計画する
設計段階で並行して考えるべきは：
ユーザーが分岐 A を選んだときにどのテキストに置き換わるのか、どの映像を再生するのか、次に表示するボタンは何か。
これを「各ノードごとに映像アセット・キャプション・ボタン 2 つ・次のノード」を指定する表にすると整理できます。
自然言語でスクリプト化することもできます：
「ユーザーがノード A でボタン A を選んだら、映像を A1 に切り替え、キャプションを … に設定し、ボタンを Restart に変更する。」
これが Trickle の vibe coding テキストになります。
パート II：モデルとビジュアル一貫性
この物語を支えるために、以下の 3 つのモデルを組み合わせて使用します：
- Nano Banana 高速な画像生成／スタイル確認。環境・色調・小道具の検証に使い、雰囲気や背景画像を素早く作成可能。
- Seedream 4.0 高度なテキスト → 画像／マルチモーダル画像生成。キーフレーム、キャラクタービジュアル、洗練した中間画像を作成するのに適する。
- Seedance 1.0 Pro アニメーション（テキスト → 動画、画像 → 動画）。マルチショットの物語性、キャラクター一貫性、プロンプト順守を重視して設計されている。
画像から動画を生成する場合、Seedance はその画像を基盤としてモーションを追加し、統一された映像を維持できます。
パート III：Trickle + Magic Canvas での実装
1. 動画アセットを生成する
- Trickle の Generate Video を選択。
- オープニングノード 用のテンプレートを入力して生成。
- 続いて A, B, A1, A2, B1, B2 を順に生成。
- 生成された動画はすべてグローバル Library に保存される。短いキー（overall, A, B …）でリネームして管理。
- 照明・構図・スケールの一貫性を確認。不自然な分岐はスタイルトークンを強化して再生成。
2. Magic Canvas ページを作成
- Trickle 内で新しいキャンバスプロジェクトを立ち上げる。
- vibe coding で次のように指示する：
「キャンバス幅いっぱいの動画プレイヤーを配置し、16:9 を維持する。最初は Library の overall を表示。枠線や影はなし。下部にキャプションテキスト、さらに下に横並びのボタンを 2 つ配置。」
3. インタラクションを配線
各ボタンに onClick / onTap を設定。
例：
「ボタン Go to Signal がクリックされたら、動画を Library.A に切り替え、キャプションを『彼女は未知の遺跡に入る…』に変更し、ボタンを Touch the Device / Turn Away に変える。」
A1, A2, B1, B2 では Restart ボタンを opening に戻すように設定。
4. プリロードを追加
全アセット（overall, A, B, A1, A2, B1, B2）をページ読み込み時にバックグラウンドでプリロードし、分岐時の遅延を防ぐ。
5. テスト
- 全分岐をクリックして動作確認。
- モバイルでもボタンサイズやレイアウトを検証。
- 不具合があればロード中プレースホルダーを設置。
パート IV：分岐 A → A1 の例
Opening でユーザーが Go to Signal をクリックすると：
動画が A に切り替わる
キャプションが「未知の遺跡に入る…」に変わる
ボタンが Touch the Device / Turn Away になる
ユーザーが Touch the Device をクリックすると：
動画が A1 に切り替わる
キャプションが「彼女が装置に触れると、記憶が洪水のように溢れる…」に変わる
Restart ボタンのみ表示され、Opening に戻る
ユーザーが Restart をクリックすると：
動画が overall に戻る
キャプションと最初のボタン 2 つが復元される
パート V：このアプローチが有効な理由
- 分岐を浅く保つことで、迷いや一貫性の崩壊を防ぐ。
- 短いサイレント映像で複雑さを減らし、動き・雰囲気・構図に集中できる。
- プリロードで分岐切替がスムーズになる。
- vibe coding による自然言語の配線は人間が読みやすく、修正が容易。
- Nano Banana / Seedream / Seedance の組み合わせで、静止画から動きのある映像まで一貫性を持って制作できる。
- Seedance のマルチショット対応で、分岐シーン間の視覚的つながりが維持される。
プロンプトテンプレート（抽象化）
基本シーンテンプレート
[時間] 秒のサイレント映画風シーン。被写体: [誰]。動作: [何をする]。環境: [場所・光・雰囲気]。ムード: [形容詞]。スタイル: 写実的・映画的照明・埃のある雰囲気・ muted red/blue パレット。16:9。
分岐シーン用テンプレート
[時間] 秒の継続シーン。被写体: [行動の継続や反応]。動作ディテールを追加: [ドローン登場／光が点滅／砂嵐]。ライティングは同じ。セリフや字幕なし。
全てのプロンプトに スタイルトークン（例：「映画的照明、埃のかかった空気、 muted palette、スローなカメラワーク」）を入れて、全シーンの一貫性を確保しましょう。