Opus 5.5で実際のスクリーンショットから製品デモ動画を作る方法

Opus 5.5を使えば、製品の概要説明を編集可能な動画プロジェクトに変えられます。 このチュートリアルでは、Opus 5.5がReact/Remotionのコードを書き、実際のWebサイトのキャプチャが画面を提供し、RemotionがMP4を書き出します。5つのシーンで構成される30秒の概要動画を作り、スクリーンショットを差し替えたうえで、完成した動画が製品について正確に伝えているかを確認します。

対象は、ローカルでプロジェクトを実行できるものの、すべての要素を手作業でアニメーションさせたくはない運営担当者、創業者、コンテンツ制作者です。これはスクリーンショットをもとにした製品紹介であり、ユーザーがAPIリクエストを完了する様子を録画したものではありません。全体のワークフローや別のプロンプトについては、まずOpus 5.5動画制作ガイドをご覧ください。

完成動画を見て、作業ファイルを入手する

ローカルで実際にレンダリングした動画です（1280 × 720、30 fps、900フレーム）。このバージョンは意図的に無音にしています。画面は英語で、2026年9月30日にキャプチャしました。

プロジェクト一式、MP4、モデルに渡した元のブリーフをダウンロードできます。同じプロジェクトにはナレーション付き版と縦型版のコンポジションも含まれており、それぞれ下記のチュートリアルで解説しています。

検証した内容： 既存のファーストパーティのClaude Codeセッションからclaude-opus-5-5を呼び出し、生成されたソースを保存してローカルでレンダリングしました。モデルに渡したのはスクリーンショットのファイル名、サイズ、文章による説明です。この呼び出しでは、モデルは画像のピクセルを見ていません。その後、実際の画像を確認してコードを編集しました（縦型のトリミングや字幕の処理を含む）。これは再現可能な1つのプロジェクトです。モデルのベンチマークではなく、1回のプロンプトで商用品質が得られるという主張でもありません。

アーカイブには、src/index.tsx、パッケージのロックファイル、元のキャプチャ、参考用ナレーション、英語のSRT、ブリーフ、再現手順が含まれています。認証情報とnode_modulesは含まれていません。

スクリーンショットで何を示せるかを決める

今回のブリーフは、あえて範囲を絞っています。モデルカタログを紹介し、ドキュメントを見せ、APIリファレンスの場所を示す、という内容です。いずれも視聴者が自分で確かめられる公開ページです。偽のカーソルを動かす、APIレスポンスを捏造する、ドキュメントを閲覧しただけでリクエストが成功したかのように見せる、といったことはしません。

素材を集める前に、視聴者に次にとってほしい行動を1文で書きます。この例では「カタログを見てから、自分の連携に関係するドキュメントを探す」です。無関係なメリットを5つも約束する動画には、より多くの根拠と別の絵コンテが必要です。トランジションを増やしても良くはなりません。

ファイル名、元のURL、キャプチャ日時、サイズ、その画像で伝えたい主張を記録した簡単な素材一覧を作っておきます。各画像は原寸で確認してください。残高、個人を特定できる情報、非公開の会話、実際のAPIキーは除外します。画面の言語が合わない場合は、実際の言語設定でキャプチャし直すか、英語の画面であることを記事内で説明してください。ローカライズ済みに見せるために画面の文字を書き換えてはいけません。

3枚の元画像はいずれも1280 × 720です。カタログのショットでは、元画像の上部320ピクセルだけを表示しています。その下のセクションには変動する価格が含まれるためです。このトリミングは編集上の判断であり、現在の価格を検証したものではありません。日付のあるキャプチャを、いつまでも有効な価格の約束として使ってはいけません。

アニメーションを頼む前に絵コンテを作る

役に立つ絵コンテは、どの素材で、どのメッセージを、何秒で伝え、どんな結果を残すかを示し、モデルに範囲の決まった課題を与えます。このプロジェクトでは次の固定タイムラインを使います（引用符内は動画に表示される英語のテキストです）。

30 fpsの場合、カットはフレーム0、120、330、540、750にあり、コンポジションはフレーム900で終わります。3種類の出力を同じタイムラインにそろえておく実用的な方法です。修正依頼も具体的になります。「ドキュメントのシーンをもっと長く」と言えば、中身の曖昧な動画全体を作り直すのではなく、決まった境界を変えるだけで済みます。

自社製品に使う場合は、色を変える前にシーンのメッセージを置き換えてください。ダッシュボードの紹介なら、空の状態、設定済みの画面、書き出したレポートを見せることが考えられます。後の2つは、本物のキャプチャがある場合にだけ使ってください。ファイルのアップロードなどの操作がストーリーの前提になるなら、実際の画面録画に置き換え、その開始と終了を説明します。アニメーションするポインターを重ねたスクリーンショットは、同等の証拠にはなりません。

まず同梱のプロジェクトを実行する

Node.jsとnpmが使えるマシンを用意します。アーカイブではReact 19.1.0とRemotionパッケージ4.0.424を固定しているため、読む時点の最新リリースに左右されません。ご自身の環境や組織での利用については、Remotionのコーディングエージェント向けセットアップとライセンス情報を参照してください。

プロジェクトを実行する前に、Node.jsとnpmをインストールしてください。後述するターミナルでのメディア確認（任意）には、ffprobeを含むFFmpegを別途インストールする必要があります。npm ciではこのシェルコマンドはインストールされません。任意の確認コマンドを使わなくても、同梱のnpmスクリプトでレンダリングできます。

プロジェクトを展開し、ルートフォルダーでターミナルを開いて次を実行します。

npm ci
npm start

ターミナルに表示されたローカルURLを開き、コンポジション一覧からDemoLandscapeを選びます。5秒の位置までシークすると、空白の四角形ではなくカタログのトリミング画像が表示されるはずです。13秒の位置ではドキュメントのキャプチャが見えるはずです。ここで失敗した場合は、デザインを変える前にパスを修正してください。

ローカルのRemotion Studioを実際にキャプチャした画面です。これは編集可能なプロジェクトのプレビューで、上のダウンロード用MP4がその書き出し結果です。

主なファイルの役割は次のとおりです。

npm ciは、不足している依存関係を取得するためにネットワーク接続が必要です。Remotionの初回レンダリングでは、ヘッドレスブラウザーがダウンロードされることもあります。これはモデルへのアクセスとは別の話です。アーカイブ内の既存コードをレンダリングしても、Opusが再び呼び出されることはありません。

Opusが実装できるブリーフを渡す

元のブリーフは上からダウンロードできます。次の短い調整用テンプレートは、重要な制約を残しつつストーリーを差し替えられるようにしたものです。2回目のモデル実行として検証したものではありません。

既存のRemotionプロジェクトで、編集可能な製品概要動画を作成してください。
インストール済みのパッケージバージョンは変更しないこと。編集前に現在のソースを確認すること。

視聴者：[誰が見るか]
次の行動：[具体的な遷移先を1つ]
コンポジション：DemoLandscape、1280x720、30 fps、900フレーム。
素材：[ファイル名、サイズ、ソースURL、各画像が証明する内容]。
実際の画像をImg/staticFileで使うこと。画面を描き直さないこと。

タイムライン：
0-4 s：[オープニングの一文]
4-11 s：[素材1と検証可能なメッセージ]
11-18 s：[素材2と検証可能なメッセージ]
18-25 s：[素材3と検証可能なメッセージ]
25-30 s：[クロージングと遷移先]

スクリーンショットの縦横比を保つこと。トリミングはすべて元画像のピクセルで明記すること。
個人情報を表示しないこと。古い価格を現在の約束として扱わないこと。
動きはCSSアニメーションではなく、useCurrentFrame/interpolate/springで制御すること。
偽のカーソル操作、捏造した結果、新しいパッケージ、ネットワーク呼び出しは使わないこと。
変更したファイルを返し、プレビューとレンダリングの方法を説明すること。

エージェントが画像を見られる場合は、承認済みの実際の素材を渡したうえで、出力も必ず確認してください。今回のようにサイズと説明だけを渡す場合、画面上のどのコントロールが重要かをモデルが理解していると考えてはいけません。レンダリング後のスクリーンショット確認が、任意の仕上げ作業ではなくワークフローの一部である理由はここにあります。

実際の画面を読みやすく保つ

横長版のカタログ表示領域は幅1120ピクセルです。そのため、1280 × 320のトリミングは1120 × 280になり、縦横ともに同じ倍率0.875がかかります。1280 × 720のドキュメントのキャプチャ全体は1120 × 630になります。タイトルとキャプションは画像の下の別の帯に置いているので、ページには重なりません。

この計算は重要です。スクリーンショットを任意の枠いっぱいに広げると、コントロールが引き伸ばされたり、必要なラベルが切れたり、非アクティブなコントロールが別のものに見えたりします。同梱のShotコンポーネントでは、画像の縦横比を保ったまま、overflowコンテナで見える範囲を決めています。元のPNGはそのまま残ります。

動きは控えめにします。この例では、カメラの拡大率が0.985から1まで変化するだけです。大きくズームすると、小さなUIテキストがぼやけてしまいます。冒頭の四角形は明らかに編集で加えたグラフィックで、製品画面は実際のキャプチャです。応用する際もこの区別を保ってください。装飾はストーリーの説明には使えますが、製品画面の中に証拠を捏造してはいけません。

スマートフォンのサイズでは、書き出しが技術的に鮮明でも、デスクトップのページ全体は小さすぎることがあります。モバイル向けには、この横長フレーム全体を縮小するのではなく、縦型へのレイアウト変更チュートリアルに沿って作り直してください。

動作するバージョンを失わずにシーンを修正する

大きな修正の前には、動作するプロジェクトを保存しておきます。依頼は1回に1つの変更とし、次のように合格条件を付けます。

カタログのシーンだけを変更してください。4-11秒の区間と、
元画像のトリミング y=0..320 は維持すること。見出しと画像の間隔を12ピクセル広げること。
スクリーンショット、以降のシーン、コンポジションのサイズ、依存関係は変更しないこと。
フレーム150で、見出し、トリミング画像全体、キャプチャのラベルが重ならないこと。

差分を確認し、900フレームすべてを書き出す前に、影響する部分だけをレンダリングします。シーンの長さを変える依頼なら、SCENES、全体の長さ、ナレーション、字幕をまとめて確認してください。映像のシーンだけを長くして音声トラックをそのままにすれば、それは単なるデザイン変更ではなく、タイミングの変更です。

実際の修正では、縦型のドキュメントとAPIのショットで、より狭いトリミングが必要でした。また、後の編集で字幕の文字が気づかないうちに隠れるおそれがあったため、行数制限（line-clamp）を削除しました。これらの修正はダウンロード用の最終ソースに含まれています。来歴メモでは、モデルの出力と編集上の変更を分けて記録しています。

MP4を書き出して検証する

プロジェクトのルートで次を実行します。

npm run render:landscape
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/landscape.mp4

期待される動画は、H.264、1280 × 720、30 fps、900フレーム、タイムライン30秒です。このコンポジションは設計上無音なので、音声が欠落した不具合と判断しないでください。音声付きにするには、ナレーションと字幕のガイドに沿ってDemoNarratedを使います。

ファイルができたことを確認するだけで終わらせないでください。MP4を最初から最後まで再生し、シーンごとに一時停止して、スクリーンショットを元画像と比べます。遷移先が読めること、個人情報が映っていないこと、意図しない空白のまま止まる箇所がないことを確認します。メタデータで分かるのはサイズと長さだけで、メッセージが有用で正確かどうかは分かりません。

完成した動画を活用する

編集可能なプロジェクト、使用した素材、書き出したファイルをまとめて保管しておけば、製品画面が変わっても新しいストーリーを作らずに更新できます。自社製品を紹介する場合は、サンプルにあるOfoxの遷移先とスクリーンショットを置き換えてください。公開ページの紹介動画を、テストしていない非公開ワークフローの証拠として使い回してはいけません。

Opus 5.5のモデルページは、このモデルに対応するOfoxのページです。このチュートリアルで記録したコード生成の呼び出しには、OfoxのAPIではなくファーストパーティのClaude Codeを使いました。Ofoxのモデルページやドキュメントは次に見る先として役立ちますが、OfoxがRemotionのレンダラーだという意味ではありません。

続けて、ナレーションと字幕の追加や縦型動画向けのレイアウト再構成に進んでください。ワークフロー全体の流れは動画制作のメインガイドで確認できます。