Adstackerでは、動画広告はクリップ、字幕のタイミング、テキストレイヤー、スタイル、アニメーション、アスペクト比、行動喚起（CTA）の組み合わせです。クリエイターはこれらの選択を即座に確認する必要があり、最終的なエクスポートはそれに一致しなければなりません。
それが、私たちがRemotionを使用する理由です。そのReactベースのコンポジションは、編集可能なプレビューを可能にし、レンダリングされたビデオと同じ視覚的ルールを提供します。私たちはクリエイティブを一度定義するだけで、両方の体験を整合させることができます。
課題：プレビューとエクスポートがしばしばずれてしまう
クリエイティブツールは一般的に、厄介な問題に直面します。エディターのプレビューは正しく表示されるのに、エクスポートされたファイルはそうではないというものです。テキストの位置がずれたり、フォントの折り返し方が異なったり、キャプションが間違ったタイミングで表示されたり、クリップのシーケンスがエクスポート後に異なる再生をしたりすることがあります。
ユーザーがセグメントを混ぜ合わせたり、字幕スタイルを選択したり、フック/ボディ/CTAテキストを追加したり、出力アスペクト比を変更したりすると、問題はさらに大きくなります。各画面がこれらの設定を独立して解釈すると、小さな違いが積み重なってしまいます。
Adstackerは、即座のプレビューとスケーラブルなレンダリングを必要としています。コンポジションは編集に対して柔軟であり、本番環境で予測可能でなければなりません。
プレビューとレンダリングのための共通コンポジション
私たちの中心的な構成要素は、共通のRemotion VideoTemplateです。これは以下を受け入れます。
- 1つのビデオまたはビデオセグメントのシーケンス
- 合計デュレーションとフレームレート
- 選択されたアスペクト比のターゲットキャンバスサイズ
- タイムドテキスト、CTA、および字幕レイヤー
- 各レイヤーのスタイル設定とアニメーション設定
RemotionのSeriesは、セグメントを1つのタイムラインに連結します。Sequenceは、テキストと字幕レイヤーを特定のフレームに配置します。したがって、バリエーションはデータであり、一度限りの編集ファイルではありません。
アーキテクチャ
フロントエンドとレンダリングパスは、テンプレート、フォント、字幕スタイルマップ、およびレイヤータイプを共有します。スタイルは、ブラウザと完成した広告で同じ意味を持ちます。
Remotion Playerによるライブプレビュー
Remotion Playerはインタラクティブなプレビューキャンバスを提供します。クリエイターがフック、ボディ、CTA、字幕スタイル、またはアスペクト比を変更すると、新しいファイルを構築するのではなく、更新されたpropsをテンプレートに渡します。
プレビューは、静的な近似ではなく、実際のコンポジションを使用します。シーケンシャルクリップ、タイミング付き字幕、アニメーションテキスト、選択されたキャンバス寸法を、使い慣れた再生コントロールとともに表示します。
テキスト編集の場合、プレビューは、キャンバスエディターがインタラクションを処理している間、アクティブなコンポジションレイヤーを一時的に非表示にします。保存された位置は、個別のビジュアルモデルを作成することなく、そのRemotionレイヤーに戻されます。
動的なレイヤー、フレームに同期
Remotionはフレームベースのタイムラインを提供するため、すべてのレイヤーは不正確な視覚的推測ではなく、開始フレームとデュレーションを持ちます。
タイミング付き字幕の単語は短いチャンクにグループ化され、コンポジションに到達する前にフレームに変換されます。各フック、ボディ、またはCTAも同様に、定義された時間枠、スタイル、アニメーション、および位置を持ちます。テンプレートは現在のフレームのレイヤーのみをレンダリングします。
これにより、新しいバリエーションはデータ変更になります。Adstackerは、同じコンポーネントに異なるレイヤー仕様を提供します。これは、私たちのビデオ技術エンジニアリングチームがクライアントのメディアパイプライン全体に適用する、コンポーザブルでテンプレート駆動型のアプローチです。
忠実なレンダリング出力のための設計
ブラウザプレビューとレンダーワーカーは、まったく同じ方法でビデオをデコードするわけではありません。私たちのテンプレートは、レンダリングモードであるかどうかをチェックします。ブラウザでは、RemotionのVideoコンポーネントを使用して、Playerがソースオーディオを再生できるようにします。レンダリング時には、信頼性の高いサーバー側フレーム抽出により適したOffthreadVideoを使用します。
また、私たちは両方のコンテキスト間でフォントとスタイルマップを共有しています。これにより、字幕の折り返し、テキストのサイズ調整、アニメーションの動作が一貫して保たれます。アスペクト比キャンバスとクランプされたオーバーレイは、レイヤーが端を越えて消えるのを防ぎます。
実例：すべての広告を再構築することなく、成功するフックをテストする
1つの製品デモンストレーションと2つの行動喚起（CTA）を持つブランドが、3つのオープニングフックと2つの字幕スタイルをテストしていると想像してください。クリエイターは、最終的な比率で、そのシーケンス、キャプション、アニメーションテキストを含む組み合わせをプレビューできます。
チームがフックのコピーを変更したり、CTAを移動したりする場合、レイヤーデータを更新します。再作成する個別のプレビューデザインは不要で、レンダリングパイプラインはエクスポートに同じテンプレートルールを使用します。
マーケターは、動画を洗練されたものにする細部を制御しながら、より多くのアイデアをテストできます。
自信を持って構築、プレビュー、レンダリング
RemotionはAdstackerが動画広告を動的で再利用可能なコンポジションとして扱うのに役立ちます。同じテンプレートがブラウザでの検証と予測可能な出力をサポートし、フレーム対応のレイヤーは字幕、テキスト、クリップを同期させます。
Adstackerで次のフック、キャプション、およびCTAのセットを作成し、構築しながら組み合わせをプレビューし、テスト準備ができたバリエーションをエクスポートしてください。
私たちは、この「プレビューとエクスポートの一致」という規律を、他のAI動画プラットフォーム構築にも適用してきました。これには、Ssembleのショートフォーム編集ツールやVideoCapのAI駆動型生成パイプラインが含まれ、これらはいずれも当社のクラウドインフラサービスを通じて管理されるレンダリングインフラ上でスケーリングされています。
技術スタック: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
