製品デモ動画の作成
実際の操作を人間が行っているかのような、一貫性のある製品ストーリーを生成します。実際のインターフェースを録画し、明確さのために必要なプレゼンテーション層のみを追加することを推奨します。
カットの選択
- リポジトリ、ランディングページ、詳細なワークフローには、30または60fpsの1920×1080を使用します。
- ソーシャルフィード用の4:5カットには1080×1350、縦型ストーリー/リールには1080×1920を使用します。
- 完全なワークフローでは45〜90秒、ソーシャルティーザーでは8〜15秒をデフォルトとします。
- 大幅に異なる長さの動画は別々に編集を作成し、単に長いカットを高速化しないでください。
ストーリーの構築
作成前に、アプリ、利用可能なアセット、既存のスクリプト、ブランドの取り扱いを検査します。フック、問題、アクション、目に見える結果、コールトゥアクションを含む短いビートシートを作成します。ビートごとに意味のあるアクションを1つに保ちます。重要な状態は読み取れるのに十分な時間静止させます。
完全なワークフローの場合は、人間の意図、エージェントのアクション、レビューされた結果、解決策を示します。ティーザーの場合は、結果を先頭に置き、それを証明するために最低限のUIのみを使用します。
人間の操作のアニメーション化
ポインター、タイピング、カメラのアニメーションを実装する前に、motion-language.mdを読んでください。human-motion.mjsを使用して決定論的なポインター経路とタイピングタイムラインを生成し、その出力を録画ハーネスに適合させます。
以下の要件を適用します：
- シーン内ではカーソルの位置を連続的に保ちます。表示されたアクション間でカーソルをテレポートさせないでください。
- 緩やかに湾曲した経路に沿って、加速、減速、最後の小さな補正を伴って移動します。
- 移動距離とターゲットサイズに応じて持続時間を変動させます。グローバルなカーソル速度は避けてください。
- 到着後、短時間停止し、ポインターダウンとクリックリップルをアニメーション化してから、クリックを実行します。
- 文字を1文字ずつ、可変の遅延と、スペースや句読点で少し長いポーズを挟みながら入力します。
- テキストフィールドにフォーカスがあるときは常に、点滅する挿入キャレットを表示します。入力前、入力中、入力後のポーズも含みます。
- ストーリーをサポートする場合を除き、人工的なタイピングミスは避けてください。
- 連続したカーソル位置を維持できない難しいシーン変更時は、ポインターをフェードアウトします。
録画と構成
ブラウザの自動化が必要な場合は、Playwrightスキルを使用します。最終ターゲット解像度以上で録画します。再現されたモックアップではなく、実際のアプリ、実際のレイアウト、実際の状態遷移を優先します。ステージングが必要な場合は、製品の視覚的アイデンティティを明確に保持します。
抑制されたカメラワークを使用します：
- 注意を向けるためにパンまたはズームします。単に動きを追加するためではありません。
- 1つの安定したカメララッパーをアニメーション化します。複数のページ子要素を独立して遷移させないでください。
- 固定されたトランスフォーム原点を維持し、現在レンダリングされているトランスフォームから続行して、ジャンプを防ぎます。
- ズームの開始と終了はイージングを適用し、目的地でホールドし、戻りの動きには独自のイージングを与えます。
- カメラ、カーソル、主要なUI要素を競合する方向に同時に動かすことは避けてください。
- テキストオーバーレイは安全マージン内に収め、オーディオなしでも読み取れるようにします。
- キャプションと進行状況インジケーターは、製品のビジュアルランゲージと一貫性を持たせてアニメーション化します。
エンコード
幅広い再生サポートのために、yuv420pとfaststartを備えたH.264 MP4を推奨します。高解像度マスターを保持し、そこから小さい配信用カットを派生させます。テキストを鮮明に保ち、UIエッジ周辺の過度な圧縮を避けます。
レビューと反復
最初のフレームだけでなく、完全な動画を検査します。すべてのクリック、トランジション、ズームエンドポイント、入力テキストの完了、最終CTAでコンタクトシートとフレームを抽出します。以下を確認します：
- カーソルの移動は意図的でありながら不完全に感じられること；
- すべてのクリックに目に見えるフィードバックがあり、ターゲットに着地していること；
- ポインター速度とタイピングのリズムが自然に変動していること；
- フォーカスされたテキストフィールドでキャレットが点滅していること；
- ズームが開始、フォーカスホールド、反転、エンドポイントで連続していること；
- ラベルが読み取れるのに十分な時間表示されていること；
- カーソル、ツールチップ、モーダル、キャプションがクリップされていないこと；
- トランジションが空間的連続性を維持していること；
- 寸法、長さ、コーデック、ファイルサイズが選択したカットと一致していること。
納品前に、急いでいるアクションを修正します。最終的な動画、ポスターフレーム、長さ、寸法、ローカルまたはリポジトリのパスを提供します。要求された場合にのみ、リポジトリのドキュメントを更新します。