ヘルプセンター

Media Studio:3D と HTML ページ今すぐ試す

Media Studio:3D と HTML ページ

3Dディレクターステージ:まずプリビズ、レンダリングはその後

役割はただ1つ:動画にクレジットを使う前に、空間的な位置関係を確定させることです。

ブロッキング、カメラの動き、遮蔽、複数の人物や車の相対的な位置 ―― 言葉では伝わりにくいこれらの要素を、ステージ上にホワイトモデルとして物理的に配置します。ホワイトモデルのプリビズを見てカメラと動きを確認し、その動きをボードに戻して最終レンダリングの手がかりにします。節約できるのは1回分の生成ではなく、シーケンス全体を撮り直すコストです。

クリップ:ステージを開く → カメラ選択でマスターカメラと2台のショットカメラの視点を確認 → プリビズを再生 → ディレクタービューで周囲を回る → カメラ欄でカメラをアクティブに設定 → フレームをボードへ → 動きをボードへ → 閉じる。ボードに静止画とプリビズ動画が追加される

はじめに

  1. ノードを追加 → 3Dディレクターステージ(ベータ、エージェントが作成)。3D バッジの付いたノードが表示されます。ボタンは ステージを開く だけです。
  2. ステージを開く を押します。ステージが全画面で開きます(初回は「ディレクターステージを開いています…」と表示されます)。左側にステージ専用の会話、右側に 3D ビューポートがあります。
  3. 左下の「シーンを説明してください...」にシーンの内容(誰が、どこで、どう動き、カメラがどう動くか)を書いて送信します。ステージのエージェントはデフォルトで ウルトラ ティアを使います。きっかけが欲しい場合は、空の状態で アイデアを一緒に考える / シーン画像からワールドを作成 / 絵コンテからプリビズを作成 / 商品ページなどの URL から始める が表示されます。
  4. エージェントはシーンをホワイトモデルのプリビズとして組み立てます。人物は実際の身長の円柱や箱、セットはグレーのブロックで表され、ボリュームと動きだけで、テクスチャやライティングはありません。ショットごとにカメラを1台作成し(マスターカメラも保持します)、完了すると数行で報告します。このステップでメディアのクレジットはほとんどかかりませんが、空間が成立しているかどうかがわかります。

ブリーフで重要な一文:「ホワイトモデル、動きとカメラのみ」と明示してください。これがないと、エージェントがセットを装飾してしまう(ネオン、雨、反射など)ことがあり、動画モデルが動きではなく見た目を真似するようになります。Night Run のサンプルのブリーフは「純粋なホワイトモデルのプリビズ:色なし、テクスチャなし、マテリアルなし…」で始まっています。

開いたときの画面構成

トップバー(左から順に)

コントロール できること
ディレクタービュー 自由カメラに戻ります(ドラッグで周囲を回転。カーソルを合わせるとキー操作のヒントが表示されます:W A S D で移動、Q E で下降 / 上昇、Shift で高速移動)
カメラビュー ▾(カメラ選択) エージェントが作成したカメラの一覧です。1台選ぶと、そのカメラの視点で見られます。カメラがない間は「先にカメラを追加してください」と表示されます
↻ ファイルからステージを再読み込み
16:9 ▾ アスペクト比:16:9、9:16、1:1、4:3、21:9、3:4
フレームをボードへ アクティブ なカメラから静止画を1枚レンダリングし(長辺 1920 px)、画像ノードとしてボードに追加します。「フレームをボードに追加しました」というトーストが表示されます
動きをボードへ アクティブなカメラでタイムライン全体をレンダリングし(長辺 1280 px、ブラウザー上でレンダリング、ステータスは「動画をレンダリング中…」)、動画ノードとして追加します。「動画をボードに追加しました」というトーストが表示されます
描画 フレームに描き込んだり付箋を貼ったりして、キューに追加 するか、エージェントに直接 送信 します(キューは最大10件)
パネルアイコン / × インスペクター の表示 / 非表示を切り替えます。ステージを閉じます(Esc でも閉じられます)

右側のインスペクター:何も選択していないときは「ステージ上の何かをクリックするか、下のアウトラインから選んで確認してください。シーンの組み立て、移動、ライティングはエージェントに依頼してください。」と表示されます。その下に、折りたためる4つのセクションがあります。

  • 設定 · n ―― このステージ固有のスイッチ、色、スライダー(エージェントのコードから生成されるため、ステージごとに異なります)。
  • カメラ · n ―― カメラの一覧(画角付き)。行をクリックするとそのカメラの視点で見られます。選択中は カメラ視点、アクティブに設定(フレーム / 動きをボードへで使われるのはアクティブなカメラです)、画角 スライダー、位置 / 対象 が表示されます。各行には @(チャットでメンション)があり、チャットに @camera:<id> を挿入して、エージェントにそのカメラを正確に指示できます。カメラを作成できるのはエージェントだけです ―― チャットで依頼してください。
  • オブジェクト · n ―― ステージ上のオブジェクト。行またはビューポート内のオブジェクトをクリックすると選択でき、表示、位置 / 回転 / スケール、サイズ が表示されます。こちらにも @ があります。
  • アセット ―― ファイルをアップロード(GLB、テクスチャ、HDR、音声…) でパソコンからアップロードできます(.glb / .gltf / .obj / .fbx、テクスチャ、HDR、音声。1ファイルあたり 100 MB)。このステージ上 にはこのステージのファイルが一覧表示され、.glb ファイルの横には 配置 があります。ボードライブラリ · 3D には、ボードのライブラリにすでにある 3D モデルが一覧表示され、こちらにも 配置 と @ があります。

下部のプレーヤー:再生 / 一時停止、ループ、時間表示(例:7.53 / 16.00)、スクラバー、@(この瞬間をチャットでメンション。@time:7.5s を挿入します ―― 「この時点で車は角を曲がり終えているはず」がワンクリックで伝えられます)、全画面(コントロールが隠れます。Esc で戻ります)。タイムラインのデフォルトは 10 秒、30 fps で、エージェントが変更できます。

左側の会話では、エージェントの作業がカードとして表示されます:カメラの動きをレンダリング <カメラ> · 0s–4s(1台のカメラの区間を、ステージの renders フォルダー内の動画にレンダリングします)、ボードに書き出す(静止画 / 動画のセットを「<ステージのタイトル> · 3D」というグループとして、「引き継ぎ」メモと一緒にボードに送ります)、結果を報告(実行の結論)。あなたが押す フレーム / 動きをボードへ では、引き継ぎメモなしで単体のノードが作られます。

プリビズから本番のショットへ

  1. ボード上で、プリビズ動画ノードの ⊕ → 動画 へドラッグします。モーションリファレンスに対応したモデル(たとえば Seedance 2.5)を選び、アスペクト比はプリビズと同じにします。
  2. プロンプトでは、各ブロックが何であるかを伝え、色だけでなくカメラに対する位置で呼び分けます(「カメラから最も遠い、最も明るいブロックは逃げる黒いセダン。カメラに最も近い、屋根にライトバーがあるブロックはパトカーで、ずっと後ろについている」)。動画モデルはプリビズの動きには従いますが、役割の割り当ては自由に行ってしまいます。
  3. 生成します。Night Run のサンプルでは、4台のカメラそれぞれがプリビズクリップを作成し、各クリップがフォトリアルなショットになり、それらのショットがビデオコンポーザーで16秒のシーケンスに編集されました。

自分の 3D モデルをインポートする

Blender、C4D などのツールから書き出した .glb は、そのままステージに置けます:インスペクター → アセット → ファイルをアップロード。アップロードが終わると自動的に配置されます(「<名前> がステージに配置されました」)。または、先に glb をアセットとしてボードにアップロードし、ボードライブラリ · 3D から 配置 することもできます。ステージに置いた後は、エージェントが作ったブロックと同じように選択、移動、フレームに収めることができます。Tripo などのツールで生成した 3D ノードも同じライブラリに表示されます。

ステージを使う価値がある場面:複数人のブロッキング、追跡シーン、室内を移動するシーン、周囲との位置関係が決まっている商品、まったく同じカメラでの複数バージョン。単純なポートレートや商品のクローズアップには必要ありません。

3Dディレクターステージ:左側にカメラの動きをレンダリングのカードが並ぶ会話、ホワイトモデルのビューポート、ディレクタービュー / カメラビュー / フレームをボードへ / 動きをボードへがあるトップバー、右側にインスペクター

公式サンプル:インスピレーションを得るにある Night Run — カーチェイス、3D ステージから Seedance へ は、まさにこの方法で作られました ―― 白いステージ上で4つのカメラの動きを確定し、それを Seedance に送って本番のショットを作成しています。Florida House — 間取り図から 3D カットアウェイへ は別の使い方を示しています。間取り図を真上からのレンダリングに変換し、ステージ上で壁を1枚ずつ組み直して家具付きの 3D カットアウェイにし、真上からの静止画と 45° の俯瞰の静止画として書き出しています。

30秒でわかるディレクターステージ:

3D ワールドとリギング

  • 3Dワールド(ノードを追加)/ 画像の 3Dワールドを生成:説明文や画像から生成される、周囲を回ったり中に入って歩いたりできる空間です。結果はウォークスルー表示付きの 3D ノードになります。

  • スケルトンを設定:アニメーション用の自動スケルトンリギングです。対象範囲に注意してください:使えるのは Tripo で生成したモデルだけで、しかもキャラクター / クリーチャーに限られます。アップロードしたモデル、3D ワールド、すでにリギング済みの結果にはリギングできません。

HTML ページ:3つの種類と、それぞれ専用のスタジオ

HTML ノードが作るのは画像ではなく、再生でき、操作に反応するページです。ノードを追加 → HTML(ベータ)で空のカードが置かれ、ボタンは スタジオを開く だけです。初めて開くと、ページタイプを選択 で次の選択肢が表示されます。

種類 ダイアログでの説明 キャンバス スタジオの名前
ポスター 静止画のデザイン。テキストとレイヤーを直接編集できます。 1080×1620 Design Studio
モーション HTML アニメーション:タイムライン上のテキスト、図形、トランジションを動画にレンダリングします。―― ダイアログの説明は控えめすぎます。実際はボード版の After Effects です。後述 を参照 1920×1080 Motion Studio
インタラクティブ映画 分岐する動画:視聴者が分岐点で選択します。ブラウザーで再生でき、Steam やモバイル向けに書き出せます。 1920×1080 Interactive Studio

各カードはカーソルを合わせると短いプレビューを再生します。2つ目のステップがあるのは インタラクティブ映画 だけで、映画のUIテーマを選択 が表示されます:中華古風(墨と金蒔絵の彫刻、朱色の印 ―― 時代劇、武侠、宮廷劇)、SF(ガンメタルのパネル、シアンのライトバー ―― 宇宙、サイバーパンク)、中華幻想(細い金の線、アメジストの装飾、護符の印 ―― 修仙、ハイファンタジー、神話)、モダン(すりガラス、極細の枠線、ネオンピンクのアクセント、チャットの吹き出し型の選択肢 ―― 都会もの、恋愛、ホラー、犯罪)。テーマは一度だけ決めます。そのキットは映画のテーマフォルダーに入り、後からスタジオでスタイルを変更できます。

選択するとすぐにスタジオが開き(「スタジオを開いています…」)、ページには「チャットでポスターの内容を説明してください」のような1行のプレースホルダーが表示されます。空のスタジオには、コンポーザーに入力される書き出し例がいくつか表示されます。ポスターでは 短いブリーフからローンチポスターを作成 / 自分のコピーをタイポグラフィポスターにする / 現在のポスターのスタイルを変更、モーションでは このページを読む順にアニメーション化 / 6秒のタイトルカード / ナレーションに合わせてモーションのタイミングを調整、映画では 自分のクリップからストーリーグラフを作成 / まだ必要なセグメントを計画 / カバーと選択肢のスタイルを変更 です。

4つ目の種類として アプリ(ゲーム、ツール、プロトタイプなどの自己完結型インタラクティブページ)もあります。これはダイアログには表示されず、タスクで必要になったときにエージェントが作成します。スタジオは App Studio です。

ページタイプを選択:ポスター / モーション / インタラクティブ映画のカード。カーソルを合わせるとそれぞれプレビューが再生される

ノードのツールバーは種類によって変わります(全画面 と 削除 は常に右側にあります)。

種類 ツールバー
ポスター レイヤーをエクスポート、Design Studio
モーション レンダリング、Motion Studio
インタラクティブ映画 ビルドをエクスポート、ビルドをダウンロード(ビルドがある場合)、Interactive Studio
アプリ App Studio

エージェントが書いたブリーフがまだ実行されていないノードには、まず 実行 が表示されます。全画面 では、ページを実行する(ポスター / 映画 / アプリ)か、コンポジションを再生します(モーション)。

ポスター:完成後もデザインファイルのまま

クリップ:ポスターノード → レイヤーをエクスポート → ボード上にレイヤードキュメントが表示される → レイヤーを編集 でレイヤーエディターが開く → レイヤーを変更 → キャンバスにエクスポート

Design Studio の中

Design Studio は全画面で開きます。左側にポスター専用の会話、右側にページがあります。

  • 1段目のタブ行:チャットを非表示 / チャットを表示、デザインファイル、ファイルのタブ、エージェントが質問しているときは 質問。右側には エクスポート ▾(画像をエクスポート、PSDをエクスポート ―― ポスターのレイヤーごとに1枚のレイヤー ―― と レイヤーをボードにエクスポート)と プレゼンテーション。
  • 2段目:プレビューを再読み込み、調整(調整用のコントロールをエージェントに依頼します)、コメント(ページ上の要素にコメントします)、編集(右側のドロワー:キャンバス上の任意の要素をクリックして、文字組み、サイズ、ボックスを変更します)、描画(書き込みをしてエージェントに送ります)、ズーム。
  • レイヤーパネル:ポスターのすべてのレイヤー(クレジット欄、タイトル、タグライン、キーアート…)が並び、それぞれに レイヤーを非表示 / レイヤーを表示 の目のアイコンがあります。画像レイヤーには 画像を再生成 があります。
  • 変更はページに直接書き込まれます。保存ボタンはありません。全体のスタイルを変えたい場合は、チャットで依頼してください。

レイヤーを書き出してレイヤーエディターで仕上げる

  1. ボードに戻り、ポスターノードを選択して レイヤーをエクスポート を押します(カードに「レイヤーを書き出しています…」と表示されます)。
  2. 完了すると ―― 「レイヤーを新しいノードに書き出しました」 ―― ポスターの横に「<ポスター名> レイヤー」という名前のレイヤードキュメントが置かれます。ポスターのレイヤーごとに1枚のレイヤーになります(最大128枚)。ラスタライズできないレイヤー(SVG フィルターによるフィルムグレインなど)は、「N 枚のレイヤーをスキップしました:…」としてスキップされます。
  3. その レイヤーを編集 を押すと、Photoshop 級のレイヤーエディターが開きます:重なり順、不透明度、描画モード、レタッチ、トリミング、文字 ―― 詳しくは ボードと画像ツール をご覧ください。
  4. キャンバスにエクスポート で結果を新しい画像としてボードに戻すか、PNGをダウンロード / PSD でダウンロードします。

この流れ ―― ページ → レイヤーをエクスポート → レイヤーエディター → ボードに戻す ―― は、Media Studio で最も見落とされがちで、最も役に立つものです。AI が生成したレイアウトを、再生成するのではなく、デザインファイルのように編集できます。

Design Studio:左側に会話、右側にポスターのページ、レイヤーごとに表示を切り替えられるレイヤーパネル、エクスポートメニュー

モーションページ:ボード版の After Effects

モーションノードは「ちょっとしたアニメーション」ではありません。フレーム単位で正確にレンダリングされるコンポジションです。Motion Studio のエージェントがそれを HTML で書き、レンダリング がフレームごとに動画に変換します。ボード上では、生成したクリップでは担えないポストプロダクションの工程を受け持ちます ―― フレームを正確にしなければならないときは、ここを使いましょう。

  • 実写や生成した映像に重ねるコピー、数字、ロゴ、ブランドタイポグラフィ
  • タイトルカード、タイトル、ロワーサード、エンドカード
  • 解説動画とデータストーリー:棒グラフが軸から伸び、折れ線がその経路に沿って描かれ、数字が目標値までカウントアップします
  • プロモーションや商品紹介、ローンチフィルム、製品アップデート、HUD デモ、トレーラー:グラフィック、文字、インターフェースの動きで構成された作品全体
  • ナレーショントラックに単語単位で同期したキャプション(ハイライト、カラオケ風のピル、全画面のスラム、ネオン、グラデーション塗り ―― あるいはシンプルな字幕バーやコーポレート向けのロワーサード)
  • マスクと描画モード、シーン間の WebGL シェーダートランジション(クロスフェード、ワイプ、リップル、シャッター、グリッチ、ブラースワップ、フラッシュ…)
  • Three.js による 3D:モデル、パーティクル、ライト、カメラの動き ―― 動画モデルに推測させるのではなく、フレーム単位で制御しなければならない 3D ショットに
  • Lottie アニメーション、複数シーンの作品(シーンごとに1つのサブコンポジション)、パラメーター化したテンプレート(タイトル、色、長さを変数に)

素材の取り込み方:ボードの動画 / 画像 / 音声ノードをモーションノードに接続します。動画は下に敷かれる全画面の映像になり(ゆっくりとしたプッシュインなどの動きを付けられます)、画像はレイヤーになり、音声はナレーションや BGM になります ―― そして作品は声に合わせてテンポが決まります。音声ノードを接続すると、クリップの長さと各行が表示されるタイミングが音声に従います。

ホームページのインスピレーションを得るにある9本の HTML モーション作品のダイジェスト(各5秒):ドローン映像に重ねた HUD、製品 UI が動きの中で描かれるローンチフィルム、アイコンがロゴへと変形する映像、数字を画面に表示した製品アップデート、映像に重ねたデータレポート、知識動画の中で自ら描かれていくチャート、1:1 のマーケットプレイス向け動画、ピクセルゲームのデモ、VHS 風のトレーラー ―― どれもモーションノードからレンダリングされています。

Motion Studio での SCRIBE のローンチフィルム(62 秒):製品 UI が動きの中で描かれ、レンズが文章から約束事を浮かび上がらせ、下部のキャプションがナレーションに合わせて表示される

モーションを使うべきとき、使うべきでないとき

作りたいもの 使うもの
正確なテキスト、数字、ロゴ、UI。タイトルカード、ロワーサード、キャプション モーション
解説動画、データレポート、製品アップデート、ローンチフィルム、HUD、トレーラー、マーケットプレイス向け動画 モーション(作品全体)
すでに生成したクリップに、タイトル / ブランドタイポグラフィ / 単語単位で同期したキャプション / データのオーバーレイを加えたもの モーション:その動画ノードを接続し、新しい動画ノードをレンダリングします。元のクリップはそのまま残ります
人間の演技、自然の風景、レンズの質感、光 動画生成。テキストを正確にする必要がある場合は、その後にモーションで仕上げます
クリップをつなぐ、字幕バー、音楽、書き出しだけ ビデオコンポーザー のほうが早く済みます
編集を続けられる静止画のレイアウト ポスター

はじめに

同じところにたどり着く3つの方法があります。

  1. エージェントに伝える(通常の方法):作品の内容を説明して「HTML のモーションページとして」と伝え、商品写真、映像、ロゴ、ナレーションを接続するか @ でメンションします。エージェントはまず台本 / 仕様をテキストノードに書き、次にモーションノードを作成してスタジオに渡します。レンダリング結果はモーションノードの横の動画ノードになり、マスターが必要な場合はコンポーザーで効果音をミックスしたりオープニングを加えたりします ―― ホームページの9本のサンプルはすべてこの形です:仕様のテキスト → モーションノード → レンダリングされた動画 → コンポーザー。
  2. 自分でノードを置く:ノードを追加 → HTML → スタジオを開く → モーション の順に進み、スタジオのチャットにブリーフを書きます(長さ、シーン、各シーンで表示するテキスト、ブランドカラー、効果音 / ナレーション)。
  3. サンプルから始める:ホームページの インスピレーションを得る にある任意の HTML モーションカード → コピーして続行 を押し、商品名、数字、色を自分のものに差し替えます(各サンプルには1行の続きのプロンプトが付いています。レシピ 16 を参照)。

モーションプロジェクトのボード上の様子:仕様のテキストノード → モーションノード → レンダリングされた動画ノード → コンポーザー。下の行は、スタジオが生成してミックスし、コンポーザーにも送った効果音

Motion Studio の仕組み

Motion Studio は会話で操作します。 ドラッグするキーフレームのタイムラインはありません ―― エージェントがあなたの説明をもとに、映像、テキスト、グラフィック、トランジションをタイムライン上に配置します。あなたはプレビューを見て(プログレスバーで任意の瞬間にスクラブできます)、一文で変更を伝えます。

クリップ:ドローン映像に重ねた HUD を変更する ―― Motion Studio を開く → 12 秒のターゲットロックまで再生 → 「琥珀色のレティクルと、左下に信頼度の表示」を依頼 → エージェントの作業が終わったらプレビューを再読み込みして再生 → 閉じる → レンダリング → ボード上の動画ノードがその場で更新される

  1. モーションノードを選択して Motion Studio(またはカード上のボタン)を押します。左側に会話(コンポーザーには「このページに付けたいモーションを説明してください...」と表示されます)、右側にプレーヤーがあり、下部に 再生、スクラブできるプログレスバー、ミュート、再生速度 があります。
  2. 変更したい瞬間までスクラブして、変更内容を説明します ―― 「見出しはフェードではなく左からスライドインさせて。3つの大きな数字はそれぞれ2秒かけてカウントアップ。ロックのレティクルは琥珀色に。最後のロックアップをあと1秒長く表示して」。エージェントは、どのキューポイントを変更したかを要約します。
  3. プレビューを再読み込み を押して、もう一度再生します。トップバーには 描画(箇所を丸で囲んでエージェントに送ります)と 閉じる もあります。
  4. スタジオを閉じ、ノードを選択して レンダリング を押します。カードに「レンダリング中…」、続いて「モーションをレンダリングしました」と表示され、同じ名前の動画ノードが横に表示されます(または更新されます)。もう一度レンダリングすると、その動画ノードがその場で更新されます ―― レンダリング結果が積み重なることはありません。
  5. その動画ノードは、編集、ミックス、オープニングのために、そのままビデオコンポーザーに入れられます。

Motion Studio:ドローン映像に HUD を合成し、12 秒のターゲットロックで一時停止した状態

知っておくと便利なこと:音声ノードをモーションノードに接続すると、レンダリングはそれをナレーションとして扱い、その長さに合わせます。レンダリングは同時に2件まで実行でき、それぞれ最長約20分です。1つのモーションページに含められる要素ノードは最大60個です。ページ自体の効果音、音楽、ナレーションはレンダリングに含まれます。さらに音を重ねたい場合は、レンダリングした動画と音声ノードを一緒にコンポーザーに入れてください。重いコンポジション(3D、シェーダートランジション、長い複数シーンの作品)では、スタジオのモデルティアを ウルトラ または Mega に設定してください。スライド / Design のページをナレーション付き動画にする場合、各ページがこのモーションノードになります ―― 変更したいページの Motion Studio を開いて変更し、そのページだけを再レンダリングしてください。

30秒でわかるモーションページ:

Motion Studio:左側に変更の依頼とエージェントの返信、右側にプレビュープレーヤー

インタラクティブ映画

インタラクティブ映画は、5〜15秒のセグメントをつないだグラフです。視聴者が分岐点ごとに選択するとストーリーが分岐し、複数あるエンディングのいずれかで終わります。

クリップ:映画ノードを選択 → 全画面でプレーヤーを開く → カバー → ニューゲーム → 最初のセグメント → 分岐点で4つの選択肢が表示される → 1つ選ぶ → ストーリーが分岐する → ストーリーツリーでフローチャートを表示 → メニューで一時停止カードを開く → 再開

作り方

  • 台本、セグメント、分岐はすべてプロジェクト内にあります。story.json には、オープニング、各セグメントの動画、字幕(.vtt)、1〜6個の選択肢とその次に続くもの、さらにチャプター、キャラクター、実績、UI の文字列が保存されています。
  • 最も簡単な方法は インタラクティブ映画ゲーム スキルを使うことです(「ストーリーを分岐型のインタラクティブ映画にします:視聴者が分岐点で選択します。キャンバスでプレビューし、Steam やモバイル向けに書き出せます。」)。1つのストーリーから、エージェントがストーリーグラフを書き、まだ必要なセグメントを洗い出し、それらを生成して、プレーヤーに組み込みます。ボード上には、分岐ごとの動画ノードと「ストーリーツリー」のテキストノードが表示されます。
  • カバー、選択肢の文言、テーマは、Interactive Studio のチャットで調整します。

プレーヤーの中

  • カバー:タイトルとキャッチコピー。再生 でタイトルメニューが開きます:つづきから / ニューゲーム / チャプター / ロード / エンディング(n/4 解放済み) / 実績 / キャラクター / 設定 / クレジット。
  • 再生中:左上にチャプター名、右上に4つのバッジ ―― チャプター / エンディング / ストーリーツリー / メニュー。右下に CC(字幕)、1.0×(速度)、全画面。初回の視聴はスキップできません(「初回の視聴はスキップできません」)。視聴済みのセグメントには ⏭ 視聴済みをスキップ が表示されます。
  • 分岐点:セグメントが終わる数秒前に選択肢のカードが表示されます(オプションでカウントダウン付き ―― 時間制限付きの選択。時間切れになるとデフォルトの選択肢が選ばれます:「沈黙もまた選択である」)。
  • ストーリーツリー:映画全体のフローチャートで、訪れたノードが点灯します。全体を表示 / 現在地を表示 / ここまで巻き戻す もあります。
  • メニュー(一時停止カード):再開 / シーンをリプレイ / チャプター / セーブ / ロード / 設定 / タイトルに戻る。セーブスロットは3つで、オートセーブもあります。
  • 設定:音量、効果音、再生速度、字幕、字幕スタイル(アウトライン / バー)、話者名、字幕サイズ、視聴済みセグメント、すべてダウンロード、ダウンロードとセーブデータを消去、全画面。

パッケージ化と公開

  1. ノードを選択して ビルドをエクスポート を押します。ポップオーバーに「ビルドを準備しています…」「メディアをアップロード中 n/total」「ビルドをパッケージ化しています…」と表示されます。
  2. 完了するとボタンが ビルドをダウンロード に変わり、ポップオーバーに 「ZIP をダウンロードして、デスクトップアプリの GenCode に渡してください。Web、デスクトップ(Steam)、モバイル向けのパッケージ化と公開をサポートします。」 と表示されます(GenCode はダウンロードページにリンクしています)。
  3. ZIP には、app/(Web ビルド:index.html、ランタイム、story.json、マニフェスト)、desktop/(Steam の depot スクリプト付きの Electron プロジェクト)、mobile/(iOS と Android 向けの Capacitor プロジェクト)、README が含まれています。公開そのものは GenCode で行います ―― コンテンツの生成とホスティングは、意図的に分けられています。

ボードが書き出すのはストリーミング型のビルド(メディアをクラウドから取得する形式)なので、先にプロジェクトを一般公開で共有しておく必要があります。そうしないと、「プロジェクトが一般公開で共有されていません:共有されるまで、ストリーミング型のビルドはメディアを取得できません」と表示されます。

公式サンプル The Lighthouse Signal — インタラクティブ映画 は、4つのエンディングを持つ完全なプロジェクトです。その閲覧専用ボードでは、すべての分岐セグメントとストーリーツリーを確認できます。

30秒でわかるインタラクティブ映画:

インタラクティブ映画のプレーヤー:分岐点での4つの選択肢、右上のチャプター / エンディング / ストーリーツリー / メニューのバッジ

よくある質問

ディレクターステージは、動画を直接生成するのと何が違いますか?

ステージでは、まずホワイトモデルのプリビズが得られます。レンダリングにクレジットを使う前に、カメラ、ブロッキング、遮蔽を確認できます。空間的に複雑なシーンでは、これがシーケンス全体の撮り直しを防ぎます。

自分の 3D モデルを使えますか?

はい。インスペクター → アセット → ファイルをアップロード で .glb(および gltf / obj / fbx、テクスチャ、HDR、音声。1ファイルあたり 100 MB)を取り込めます。または ボードライブラリ · 3D から 配置 することもできます。ただし、スケルトンを設定 が使えるのは Tripo で生成したモデルだけです ―― この2つは別の機能です。

フレームをボードへは、いま見ている視点をキャプチャしますか?

いいえ ―― アクティブ なカメラでレンダリングします。いま視点として使っているカメラでキャプチャしたい場合は、カメラ 欄でそのカメラを選択し、アクティブに設定 を押してください。

HTML ページは作成後に編集できますか?

はい、いくつかのレベルで編集できます:ページ自体はそのスタジオで(チャット、編集ドロワー、レイヤーパネル)。ピクセル単位の作業では、レイヤーをエクスポート でレイヤーエディター用のレイヤードキュメントに変換できます。

Motion Studio にタイムラインがないのはなぜですか?

会話で操作する仕組みだからです。エージェントがあなたの説明をもとにモーションを配置し、あなたはプレビューを見て一文で変更を伝えます。コメントする前に、プレーヤーのプログレスバーで任意の瞬間にスクラブできます。フレーム単位で制御したい場合は、ブリーフにタイミングを書いてください(「3秒目で棒グラフが伸びる」「12秒でロック」)。エージェントは秒単位で配置します ―― これこそが動画モデルとの違いです。フレームは推測されるのではなく、書かれるのです。

インタラクティブ映画は公開できますか?

はい ―― ビルドをエクスポート してから、GenCode で Web、デスクトップ(Steam)、モバイル向けに公開します。

トラブルシューティング

ステージや Motion Studio が開かない

「このアカウントでは 3D ディレクターステージが有効になっていません」/「このアカウントでは Motion Studio が有効になっていません」は、ほとんどの場合、ワークスペースの管理者が Media Studio をオフにしている(ボードと同じスイッチ)か、プロジェクトへの書き込み権限がない(閲覧専用の共有)ことを意味します。閲覧専用のプロジェクトでは、「このステージはまだセットアップされていません。所有者に一度開いてもらってください。」と表示されることもあります。

ステージが空白になる /「ステージを読み込めませんでした。」

再読み込み を押してください。それでも解決しない場合は、エージェントに修正を依頼 を押してください ―― エージェントが自分のコードを確認します。

動きをボードへの動画が真っ黒、または非常に短い

ブラウザーでレンダリングしている間は、タブを切り替えないでください。アクティブなカメラとタイムラインの長さ(プレーヤーの右側にある合計時間)を確認してください。

書き出したレイヤーがポスターと一致しない

レイヤーをエクスポート は、書き出し可能な要素をすべてラスタライズします。SVG フィルターや一部のブレンド効果は個別のレイヤーにできないため、スキップされ、カードに「N 枚のレイヤーをスキップしました」と表示されます。

レンダリングしても何も起こらない /「すでにレンダリング中です」

レンダリングは1つのノードにつき同時に1件、1つのプロジェクトにつき2件までです。「レンダリング中…」の表示が消えるまでお待ちください。ポスターにはレンダリングするモーションがありません ―― ポスターに必要なのは レイヤーをエクスポート です。