Opus 5.5のコード動画がここまで進化：驚きの5事例とプロンプト
Opus 5.5でコードから動画を作る仕組み、フレームごとのレンダリングと音声制作を解説します。ピクセル魔法使い、UI変形、ゲーム史、ダンス、AI史の5事例と、各事例の設定を保ったプロンプトを紹介します。
Opus 5.5による動画制作では、アニメーションのコードを書きます。コードで画面を描き、カットと音を配置して、MP4へレンダリングします。ピクセル魔法使い、ソフトウェアのUIモーション、ゲーム発展史、ダンス映像の演出も、この方法で制作できます。
仕組み：各フレームを描いて動画にまとめる
コードで絵を描くパラパラ漫画と考えると分かりやすくなります。コードで、ある時刻にどの要素があり、どこにいて、どう変わるかを決めます。レンダリングツールが順に画面を取り出し、エンコードすると動画になります。
Webページをフレームごとに描く方法では、ページにrender(t)やseek(t)を用意し、時刻を渡すと対応する1枚を描画できます。例えば30fpsでは、n番目のフレームはt = n / 30です。Playwrightでページを開いて時刻を指定し、スクリーンショットを撮ります。FFmpegでフレーム列と音声をMP4にまとめます。RemotionやHyperFramesなどのフレームワークには、それぞれの時間・フレーム制御があります。
画面を時刻から再現できることが大切です。 ランダムな効果はシードを固定し、撮影前にフォントの読み込みを待ちます。タイマーで進み続けるだけのアニメーションにすると、特定のカットだけを再レンダリングした際に結果が変わることがあります。
音もコードで作れます。Pythonのnumpyやscipyで音符とドラムの波形を計算し、時間に沿って重ねて音楽や効果音にします。既存の音楽を使う場合は、先に拍を探してから動きを配置します。ナレーションは音声モデルを使い、画面と同じ時間軸に合わせられます。
7種類のコードと、それぞれに向く画面
| 方法 | 主な用途 |
|---|---|
| JavaScript＋Canvas 2D | ピクセル、2D図形、イラスト |
| HTML／CSS／SVG | UI、文字、ソフトウェア製品のモーション |
| WebGLシェーダー | 走査線、粒状感、反射、粒子の質感 |
| Three.js | 3D物体、空間、カメラ移動 |
| p5.js＋p5.brush | 色鉛筆、水彩、紙の上の筆致 |
| HyperFrames／Remotion | タイムライン、カット、全編のレンダリング管理 |
| Manim | 数式、幾何、数学の説明 |
これらは組み合わせられます。Canvasでゲーム画面を描き、シェーダーで古いテレビの質感を加え、Three.jsで3D空間へ進むこともできます。実物を正確に見せたい場合は、既存の3Dモデルを渡せます。
1. ピクセル魔法使い：小さな画面で完結する動作ループ
この魔法のアニメーションは、待機、杖を上げて力をためる、魔法を放つ、構えを戻すという順序で進みます。キャラクターはまず128×96の小さなキャンバスに描き、整数倍で拡大します。姿勢は毎秒約8–12回変え、火花と飛び道具はフレームごとに動かすことで、ピクセルアニメーションらしい区切りを残します。
以下のプロンプトは、各事例の設定と制作上の制約を保ちながら簡潔にまとめたものです。そのままコピーして使えます。
自己完結したHTMLを作り、標準のJavaScriptとCanvas 2Dでピクセル魔法使いの魔法を表現してください。ライブラリ、画像、ネット上の素材は使わないでください。
論理キャンバスは128×96とし、中央に整数倍で拡大表示します。画像の平滑化を切り、すべての座標を整数ピクセルに合わせてください。グラデーション、アンチエイリアス、ぼかした影は使いません。全編で約24色を使い、背景は紺と紫、キャラクターは暖色、魔法には少量の明るい色を残してください。
ピクセルの矩形で約24×32の魔法使いを組み立て、曲がった帽子、ひげ、2色のローブ、宝石付きの杖を描いてください。頭、腕、杖、裾を制御可能な姿勢パラメーターにします。60fpsで動作させ、姿勢の変化は毎秒8–12回に量子化し、粒子は連続して動かしてください。
動作は待機中の揺れ、杖を上げて力をためる、火花が宝石へ集まる、光輪と飛び道具を放つ、元の構えへ戻る順序です。魔法を放つ際には1–2ピクセルの揺れを加えます。粒子は事前に確保して再利用し、ループ内で新しいオブジェクトを作らないでください。
背景には月、少数の星、石の地面を残します。宝石の光でキャラクターの輪郭を強め、最初と最後の動作を自然につなげてください。ウィンドウの大きさが変わってもピクセルを鮮明に保ってください。
2. UI変形：1つの形をさまざまな部品へ連続変化させる
白黒の形が、ボタン、読み込み表示、プレーヤー、スライダー、グラフへ変わります。同じ要素が連続して変形し、カーソルのクリックとドラッグが動きを進めます。
UIはHTML／CSS／SVGで組み、ばねの計算で戻りを表現し、音楽の拍に合わせて動作を配置します。各フレームで4つのサブフレームを混ぜ、モーションブラーを作ります。
最初に8–12個のUI状態、白黒または1つのアクセントカラーによる配色、使用可能な約120 BPMの音楽を私に確認してください。状態と拍の対応を一覧にし、確認後に制作を始めてください。
1440×1440のHTMLによるUIアニメーションを作ってください。淡い暖色系の灰色を背景に、白黒の部品とGeistフォントを使います。常に1つの主役を維持し、サイズ、角丸、内部の内容を変えて遷移させてください。カットの切り替えで部品を置き換えないでください。カーソルは実際にクリックやドラッグを行う必要があります。
120 BPM、7小節で、ボタン→読み込み→完了のチェック→Dynamic Island→プレーヤー→進捗バー→音量スライダー→スイッチ→タブ→グラフ→コマンドパネル→通知→ボタンの順に配置します。各拍に動作を割り当て、カメラのズームは主役を追うようにしてください。
すべての状態をseek(t)から計算し、CSS transition、タイマー、前フレームからの状態の蓄積を使わないでください。解析的なばねを使い、インジケーターの両端を別々のばねとして計算して伸縮を表現します。ドラッグ中はカーソル位置で値を決め、離した後に戻るようにしてください。
Pythonで音楽の拍を解析し、動きと効果音を拍に合わせます。Playwrightで各フレームを4回サンプリングし、FFmpegで混ぜてモーションブラーを作り、60fpsで出力してください。全編をレンダリングする前に各拍の静止フレームを確認してください。
粒子の爆発、発光、グラデーション、余計な跳ねを避けてください。旧テキストと新テキストの出入りを別々に制御し、文字が重ならないようにします。拡大される要素や文字を含む要素にはwill-changeを付けないでください。最初と最後はカーソルの位置と速度も含めてつなげてください。
3. ゲーム発展史：年代に合わせて画風を変える
2分間のゲーム発展史では、Canvasのピクセル画、WebGLの古いテレビ効果、Three.jsの3D空間を1本にまとめ、音楽はPythonで合成します。初期のゲームをピクセルと走査線で描き、その後、廊下、城、ブロックの世界へ進みます。
感情の起伏と壮大さを持つ、ドキュメンタリー予告編のような120秒のゲーム発展史動画を制作してください。
仕様は1920×1080、60fpsです。すべての画面をコードで描き、外部の画像や動画を取得しないでください。音楽を自分で作曲し、コードで合成してください。サンプル、音声素材、バーチャル楽器は使わず、音楽のリズムで画面の切り替えを構成してください。
完成後、画面と音楽をMP4にまとめ、私が指定した出力ディレクトリへ保存してください。
4. 甘辛ダンス：人物とモーションの役割を分ける
まず動画モデルで15秒のグリーンバックのダンスを作ります。その後Opusで緑の背景を除き、大きな文字、テープ、分割画面、背景の切り替え、3Dで周囲を巡る文字を加え、音楽に合わせて演出を変えます。
人物の動きは動画素材から、場面とモーションはコードから作ります。 複雑なダンスをコードで描き直す必要はありません。人物の素材を残し、クロマキー、重なり、リズムに制作の重点を置きます。
5. AI発展史：1つの視覚的な主役で長編をつなぐ
3分間のAI発展史は、Claude CodeでRemotionを使って制作します。画面はSVGやCanvasなどのコードで描き、ナレーションは音声モデル、音楽はPythonによる合成で作ります。
全編をつなぐ主役は、光るトークンです。注意のつながりから、言語モデル、マルチモーダル、推論、ツール呼び出しまで、各章を同じ視覚的な手がかりで展開します。長編では、先に物語と絵コンテを組み立て、その後に場面ごとに作ることが重要です。
Remotionで180秒のAI発展史アニメーションを制作してください。1920×1080、30fps、合計5400フレームです。2017年の注意機構を軸に、言語モデル、マルチモーダル、推論、エージェント、まだ結論の出ていないAGIの問題へ進み、映画的な映像エッセイとして表現してください。
光るトークン「the」を全編に登場させます。最初にSTORYBOARD.mdを書き、各場面の時間、画面、字幕、トランジションを列挙してください。各場面は別々に構成し、最後にメインのcompositionへ組み込みます。
章構成は、0–15秒で孤立した単語を見せ、15–35秒で注意のつながりを示し、35–55秒で言語モデルを拡張し、55–80秒で指示チューニングとChatGPTに進みます。80–100秒でマルチモーダル、100–125秒で推論、125–150秒でツールとエージェントを加え、150–170秒でAGIの問いを提示します。最後の10秒でトークンとタイトルへ戻ってください。
SVG、Canvas、CSS、プログラムによる図形を使い、外部の画像や既成の動画を参照しないでください。暗い背景と暖色のアクセントを使い、ばねとイージングで動きを制御します。隣接する場面の図形の関係からトランジションを作ってください。
画面の文字は短くし、各テキストを少なくとも2.5秒表示します。年、人名、論文名を正確にし、不確かな内容はNOTES.mdに記録してください。1場面を作るごとにremotion stillで3–4枚の静止フレームを確認し、文字の重なりとレイアウトを直してから続けてください。
任意の音声トラックpublic/music.mp3を配置できるようにし、音声がない場合は先に無音版を出力しても構いません。最後にremotion renderでout/film.mp4へ書き出し、制作説明とNOTES.mdも渡してください。
プロンプトで役立つ7つの情報
roleには制作上の役割、inputsには必要な素材、directionにはスタイルと避ける効果、structureにはカットとリズム、buildには技術と書き出し、gotchasには起こりやすい問題、startには最初に見るものと確認のタイミングを書けます。
特に、望まないものを具体的にしてください。例えば、画面いっぱいの小さな文字、すべての要素の同時フェードイン、中央の大きな文字とグラデーション背景の繰り返しなどです。まず絵コンテとキーフレームを見て、動きが重要な箇所は数秒の小さなサンプルを確認し、その後に全編をレンダリングします。
納品前にはフレームを抽出し、スマートフォンでの可読性、文字の重なり、動作の間、構図、拍、映像と音の同期を確認してください。問題の時刻を示し、該当部分だけを再レンダリングします。「もっと上質に」と繰り返すより、確認できる条件のほうが修正を進めやすくなります。
