Claude Opus 5.5 によるコード生成動画：公開作例 13 件のプロンプトと構成要素

Last updated at 2026-10-03Posted at 2026-10-03

本記事でいう「Opus 5.5 動画」は、Claude Opus 5.5 がアニメーションをコードとして書き、ブラウザがそれを 1 フレームずつ描画して MP4 に保存したものを指す。出力がコードであるため、出来のよい作例はモーションデザインのように見える。輪郭のくっきりした文字、指定どおりの色、UI のモックアップ、グラフ、ある図形が次の図形へ変わるトランジションなどである。

公開されている Opus 5.5 動画のうち 475 本を見ると、約 6 割がモーショングラフィックス、5 本に 4 本が 16:9 の横長で、長さの中央値は 30 秒である。

生成の仕組みと、映像生成モデルとの違い

Veo、Kling、Seedance のような映像生成モデルはピクセルを直接生成する。Opus 5.5 はそうではなく、Canvas、SVG、CSS、GSAP（JavaScript のアニメーションライブラリ）、Three.js のいずれかを使った単体の HTML ファイルを書く。そのファイルをヘッドレスブラウザが 1 フレームずつレンダリングし、最後に ffmpeg が 1 本の動画にまとめる（Hugging Face の手順解説、Claude Video のインデックス）。この 475 本で使われている描画手段は Canvas が最多で 336 本、次いで SVG が 193 本、Three.js が 141 本である。Opus 5.5 の発表ページには動画に関する記述がなく、この使い方はクリエイター側が見つけ出したものである。

動画をコードとして書く方式には、実務上 3 つの帰結がある。

文字が鮮明で、色が正確に出る。文字はテキストとして描画されるため、プロンプトに書いた hex 値がそのままフレーム上の色になる。
修正のコストが小さい。1 シーンを変えるには、コードを数行書き換えれば済む。
写実的な映像は作れない。後述の作例のひとつを作った Deedy Das は、技術的な概念を説明する用途について「photorealistic video gen like Seedance is not very useful here」（Seedance のような写実系の動画生成は、ここではあまり役に立たない）と書いている（投稿）。

具体的な指示がない場合、Opus 5.5 はグラデーション背景の中央にテキストを置き、すべての要素をフェードインさせる構成に寄りやすい。初期の作品の多くが似た見た目になったのはこのためである（Rexan Wong による分析）。完成度の高い作例には、数秒見れば確認できる共通点が 4 つある。

テンポに変化がある。速いカットの隣に、一拍止まる瞬間が置かれている。
文字に階層がある。主となる 1 行、それより小さい補助ラベル、はっきりした読む順序がそろっている。
シーン同士がつながっている。ある図形が次のシーンへと変化する。
最後はエンドカードか、継ぎ目のないループ地点で終わる。

モーションデザインのショーリール

1. 多数のクリエイターが再利用した 1 行のショーリール用プロンプト

Stephan Livera の投稿より（16,983 いいね、15 秒、16:9）

プロンプトは、ショーリール（制作者が技量を見せるための短いまとめ映像）を作らせる 1 文だけである。

make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.

Opus は出力をデザインポートフォリオのように組み立て、タイムコードの HUD とチャプター名を付けた。あるチャプターでは、6 種類のイージングカーブ（動きの加速と減速の付け方）を「Six ways to get from A to B.」という見出しの下に並べて動かす。別のチャプターではループするタイル模様が画面を埋める。1 単語がポスター大の文字で一気に現れ、最後は赤いエンドカードで閉じる。このプロンプトが与えているのは目的、長さ、どこまで作り込むか（go all out）の 3 つだけで、内容に関する判断はすべてモデルに任されている。そのため、モデルの力量を試す用途には使えるが、自社ブランドの動画には向かない。

少なくとも 90 本の公開 Opus 5.5 動画がこの文、またはそれに近い変形を使っている。Ajith（4,057 いいね）や Leon Abboud のリールもその一部で、見た目はそれぞれ異なる。筆者も同じ一文を Opus 5.5 で実行した。その出力が次の画像である。

同じプロンプトを Opus 5.5 で実行した結果（15 秒、450 フレーム）

Stephan のリールがイージングカーブとタイル模様を軸にしていたのに対し、こちらは跳ねるボールが弾けて「MOTION」という単語になる場面から始まり、2,304 個のドットによる波、円から四角、さらに星へと形を変える点の輪へと進む。

プロダクト発表動画

2. 1 文から作られた推論スタートアップのローンチ動画

Deedy Das の投稿より（3,264 いいね、26 秒）

make a modern slick and punchy video for a modern startup that works on inference

Deedy が社名を指定しなかったため、Opus が名前を考案した。名前は「muda」（日本語の「無駄」）。冒頭はユーザーが回答を 2.81 秒待つ場面で、続いて GPU クラスタの稼働率が 94% まで上がり、最後にロゴが出る。各シーンには、基調講演のチャプターのような小さな番号付きラベルが付く。課題、製品、根拠、名前という展開は、プロンプトで求めていないにもかかわらず現れた。制作にかかったのは約 1 分、費用はおよそ $2 である。

製品、数値、名前はすべて架空のものである。実際の発表に使う場合、これらは利用者の側で用意して渡す必要がある。

3. 実在する製品の素材で組んだ SaaS のローンチ動画

Moritz Kremb の投稿より（418 いいね、46 秒）

Moritz は、よく知られた製品を 1 つ選び、実際の素材を取り込むよう Opus に指示した。

I want you to create a highly professional SaaS product launch video. Go and find some SaaS, preferably just one that people know, so it's easier to identify with it. Pick that, and then make sure to get actual assets and images and all of that stuff from the internet.

Opus は Notion を選び、ローンチ映像でおなじみの流れに沿って構成した。浮かぶアプリアイコンの上に「Docs here. Chats there. Tasks everywhere.」、再現されたプロジェクトボード、グラフを添えた機能紹介の 1 行、顧客ロゴの列、そしてカーソルが申し込みボタンをクリックするエンドカードと続く。具体的な印象を生んでいるのは、実在する製品の情報である。自社製品で作る場合は、スクリーンショット、見出し、機能一覧をプロンプトに貼り付ける。この作例のブランドとロゴは Notion のものであり、自社の素材として流用できないため、デモとして扱う。

4. 途切れないワンカットで見せる写真プリントアプリのローンチ映像

zero の投稿より（2,103 いいね、29 秒、1:1）

このプロンプトは数千文字に及び、<inputs>、<direction>、<structure>、<build>、<gotchas>、<start> の各ブロックに分かれている。direction ブロックの冒頭は次のとおり。

An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. [...] Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template.

ボタンが写真になり、ガラス風のスライダーがその写真の光をゴールデンアワー（日没前の黄金色の光）に変え、画像はスマートフォンからブラウザのウィンドウへ移り、最後は実写の壁に掛かった額装プリントになる。筆者は、避けたい表現を列挙するほうが、形容詞を重ねるよりも早くテンプレート的な見た目を取り除けると見ている。プロンプトは、本編を書く前にビートマップ（どの拍で何が起きるかの割り当て表）と 4 枚の静止フレームを提示するよう Opus に求めている。写真、音楽、壁の映像はクリエイターが用意したもので、プロンプトはまずそれらを受け取るところから始まる。

ここまでの 3 本のローンチ動画は、フック、製品、いくつかの機能、エンドカードという同じ流れをたどっている。opus6.video の App launch video テンプレートはこの構成を前提としており、見出し、3 つの機能、締めの URL を入力して使う形式になっている。

UI アニメーションとアプリ操作の紹介

5. 1 つの図形が 9 つの UI 状態へ変形し続ける

zero の投稿より（12,044 いいね、14 秒、1:1）

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags.

1 つの黒い要素が、ボタン、チェックマーク、音楽プレーヤー、音量スライダー、トグル、タブ、グラフ、⌘K コマンドパレット、トーストへと変わり、最後にボタンへ戻る。カーソルが 120 BPM の曲に合わせて各変化を起こし、最後のフレームが最初のフレームと一致するため、継ぎ目なくループする。

この動画を成立させているのは 2 つの選択である。1 つは、連続した 1 つのオブジェクトを画面に置き続けることで、14 秒間視線をつなぎとめていること。もう 1 つは、プロンプトがテンポを固定していること（「120 BPM, 7 bars, something happens on every beat」）で、これにより各変形の着地点が決まる。登場する状態は汎用的なものなので、自分のアプリで作る場合は実際の画面に差し替える。opus6.video の Product walkthrough テンプレートは、カーソルが自分のインターフェースを順に操作していくこの種の動画を想定したものである。

SNS 広告とブランド用バンパー

6. フィンテック製品の縦型 SNS 広告

David Marcus の投稿より（283 いいね、23 秒、9:16）

make a punchy and modern short video for social that promotes @lightspark capabilities. Needs to be production grade with sound

明るいグリッドの上に大きな文字を置き、1 画面に 1 つの主張だけを載せる構成である。「Money still moves like it's 1973」、USD から MXN への送金が「In seconds」で完了する場面、「For humans. And AI agents」、「The TCP/IP of money」と続き、ロゴで終わる。どの行も、音を消したスマートフォンの画面で読める。この広告の訴求は、1973 年という年号と即時送金の対比に集約されていると筆者は見ている。

7. 20 秒のキネティック・タイポグラフィ（文字を動かす表現）によるアイデンティティ用バンパー

TechHalla の投稿より（270 いいね、20 秒、1:1）

DURATION: exactly 20.00 seconds. LOOPABLE: frame 0 == frame last (position, opacity, cursor if any).
FORMAT: one HTML file, 1080×1080 (square, X-native). 60fps.
PALETTE (strict): bg #0A0A0A, magenta #FF2BD6, acid green #B8FF00 [...] No other hue

黒地に太い白文字が置かれ、ランダムに入れ替わるアシッドグリーンの文字列が単語に収束し、マゼンタのバーの上でハンドル名が 1 文字ずつ打ち出される。この見た目は数値による指定から来ている。ちょうど 20.00 秒のループ、60fps、そして「no other hue」と添えた 3 つの hex コードである。配色を自分のものに差し替える場合も、この精度の指定は残す。内容を入れる余地がこれだけ小さいため、この種のバンパー（動画の前後に挟む短いブランド映像）はイントロかアウトロに向く。

短いブランド映像向けに、opus6.video は 9:16 と 1:1 の形式、および Logo reveal テンプレートを用意している。同サービスのエフェクトライブラリには、上で挙げたようなモーションスタイル（letter drop、decode scramble、stretch slide-in）が、プロンプトにそのまま貼り付けられる文言とともに一覧になっている。

解説動画とデータの見せ方

8. 分量を 1 工程ずつ示すカクテルのレシピ

Rory Flynn の投稿より（1,025 いいね、30 秒、1:1）

We're going to try a little test. Do you think you could render a recipe motion graphic animation using javascript or html (w/e you think will produce the best) to show the full recipe from start to finish (empty glass to completed cocktail) - Explainer video style - Showing the recipe ingreidents + measurements as they're going into the cup. Should be a 30s video.

Rory がカクテル名を指定しなかったため、Opus は Negroni（ネグローニ）を選んだ。手描き風のグラスが層ごとに満たされていき、側面には分量の目盛りが付く。工程カードには「1 oz GIN」や「20 SEC STIR」が表示され、画面下部の 6 段階のトラッカーが、氷、ジン、カンパリ、ベルモット、ステア、ピールを進行に合わせてチェックしていく。

他の動画に転用するなら、このトラッカーの部分である。手順を追う動画は、視聴者がいま工程のどこにいるかを確認できるだけで追いやすくなる。特定のレシピや製品を扱いたい場合は、その名前をプロンプトで指定する。指定しなければ、モデルが自分で選ぶ。

9. シーンごとに映像スタイルを切り替える再帰の解説

Ethan Mollick の投稿より（554 いいね、75 秒）

A video explaining recursion, where every explanation about recursion has a radically different video style, make this self-referential & clever & fast moving.

それぞれの説明が 1 つ前の説明の内側に入れ子になり、そのたびにジャンルが変わる。企業の解説動画、自然ドキュメンタリー、映画の予告編、子ども向け番組といったジャンルである。画面上部の「call stack」バーは層が深くなるたびに伸び、最後は「STILL CONFUSED?」の文字の下で、動画が自分自身の中で再生される。

10. AI の歴史における主要な出来事

klöss の投稿より（192 いいね、2 分 52 秒）

make a video highlighting key moments in the history of AI.

この 1 行から、Opus はオレンジをアクセントにした暗い配色のタイムラインを、番号付きのチャプターで組み立てた。1943 年の人工ニューロンは論理回路図として描かれ、1966 年の ELIZA の対話はターミナルに打ち込まれ、2012 年の ImageNet の結果は棒グラフで示される。画面下部のキャプション行がナレーションの役割を担い、最後のカードではモーションデザイン、サウンドデザイン、コードのクレジットが Claude になっている。年表は各時点を文字、数値、簡単な図で表せるため、コードによるアニメーションと相性がよい。

日付と数値はすべて Opus が自ら書いたものなので、この種の解説動画は公開前に事実確認が必要である。

この 3 本のように、テキスト、数値、図で構成する解説動画は、コードによるアニメーションが得意とする範囲に収まっている。opus6.video にはこの種の動画向けに Explainer、Data story、Recipe & how-to のテンプレートがある。同サービスでは 1 本あたり最長 30 秒のため、#9 や #10 のような長い解説動画は複数本に分割する必要がある。

物語と歴史を描くアニメーション

11. 折り紙と落書きのタッチで描く人類の歩み

songkeys の投稿より（423 いいね、1 分 48 秒）

Create a short origami / doodle-style animation showing humanity's development, progress, and civilization from birth to the present, and ultimately the hatching of AI. [...] Style: doodly, cute, warm, strongly narrative, no spoken language (simple text is OK, but don't use too much explanatory/narrative text, because I want different civilizations to be able to understand it), poetic, moving, high quality.

日の出を迎える柔らかな切り絵の丘から最初の村へ、そして光るアイコンが連なる夜の地球、村の上に広がるネットワークの線、最後に鉛筆が小さな生き物を描くスケッチブックのページへと移っていく。「no spoken language」と指定したことで物語全体が絵で語られる形になり、翻訳しなくても言語圏を問わず見られる。

12. 砂絵アニメーションで描く米国 250 年の歴史

Michael Guo の投稿より（349 いいね、2 分）

Make a 2-minute sand animation that tells the story of 250 years of U.S. history. Keep it lively, engaging, and tasteful. Add appropriate background music and sound design.

粒子感のあるセピアのシルエットで描かれ、各シーンの隅に年号が入る。1840 年代に西へ向かう幌馬車、「Give me your tired, your poor...」の一節とともに自由の女神の前を通る 1886 年の蒸気船、1963 年の群衆と続き、最後は「250, 1776-2026」の上に花火が上がる。「sand animation」という 2 語だけで、セピアの粒子、シルエット、砂を掃いたように見えるシーン転換が得られている。

13. 列車の窓の外を流れる四季

Ole Lehmann の投稿より（264 いいね、30 秒）

4 seasons passing outside a train window, a cozy carriage, a cup of coffee on the table, Grand Budapest Hotel style

紫のカーテン、2 つのテーブルランプ、コーヒーカップを配した左右対称の固定フレームは動かず、窓の外の風景だけが春、夏、秋、冬と移り、再び花の季節に戻る。遠くの丘にはピンク色の宮殿が見える。映画の題名を挙げたことで、左右対称の構図、パステル調の配色、ピンクの建物が 4 語から引き出されている。

物語系の 3 本はいずれも、表現の媒体か参照作品を名指ししている。折り紙、砂、そして Wes Anderson の映画である。

13 例に共通する条件

1 行のショーリール用プロンプトからは、完成度は高いものの誰の作品であってもおかしくないリールが出てきた。実在の会社のように見えるローンチ動画には、製品、スクリーンショット、配色、提供された写真や映像といった実際のコンテキストが与えられていた。Rexan Wong はこれを「everyone has the same model. the context you give it is what makes it look pro」（誰もが同じモデルを使っている。プロらしく見えるかどうかは、与えるコンテキストで決まる）と表現している（投稿、6,730 いいね）。

13 件のうち 6 件のプロンプトが長さかテンポを指定しており、本記事で最もいいねの多い 2 本（#1 と #5）もその中に含まれる。冒頭の 475 本全体では、半数が 15 秒から 43 秒の範囲に収まる。指定がなければ、Opus が長さを自分で決める。klöss の 1 行の歴史プロンプトは長さを指定しておらず、出力は 3 分近くになった。

クリエイターはスタイルも名前で指定している。origami、sand animation、Grand Budapest Hotel、Apple keynote、Dribbble-level UI motion である。それぞれの名前が配色とテンポを含意しており、名前を使わなければ 1 段落かけて説明する必要がある。

最も長いプロンプト群は、アニメーションを作る前に計画を立てさせている。コードを書く前にビートマップ、状態の一覧、静止フレームを求めるため、修正コストが小さい段階で問題が表に出る。

かかる手間の幅は大きい。最短は約 1 分と $2（Deedy Das）、最長はコードで書いたサウンドトラック付きのローンチ動画で約 8 時間（Leon Lin）。その間には、15 分（Chain）、2 回の修正を含む 19 分（David Ch）、プロンプト 3 回（Miles）といった例がある。

Opus 5.5 の動画で扱えない範囲

実写の撮影はできない。実在の人物や場所が写った映像が必要な場合は、Veo や Seedance のような動画生成モデルか、カメラを使う。その映像を Opus がカットし、上に文字やグラフィックを重ねることはできるが、それは動画ファイルを読み込める環境に限られる。たとえば Claude Code と Remotion（React で動画を組み立てるフレームワーク）の組み合わせであれば、Remotion の <OffthreadVideo> コンポーネントでコンポジション内に動画クリップを配置できる。opus6.video は説明文から動画を作る仕組みで、動画の入力は受け付けない。
実際の楽曲やナレーションを録音することはできない。#4 と #5 では音楽をクリエイターが用意し、Opus がそれに合わせてアニメーションのタイミングを調整した。Leon Lin のようにサウンドトラックと効果音一式をコードで書くことは可能だが、録音された楽曲やナレーションは別途用意する必要がある。
ブランドに関する情報を持っていない。参照素材、ロゴ、配色を渡さなければ、出力は前述の中央揃えテキストの見た目に寄っていく。

自分で作る場合の選択肢

手元にある素材と目的に応じて、出発点を選ぶ。

何ができるかを確認したい場合は、#1 のショーリール用プロンプトを実行する。
製品を告知する場合は、#2、#3、#4 のローンチ動画の構成を使い、製品名、3 つの機能、ブランドカラーを入れる。
30 秒を超える動画を作る場合や、自前の映像と音声を使う場合は、Claude Code 上で Remotion や HyperFrames のようなレンダラーと組み合わせる。

自前の環境を構築する

Claude Code と、HTML をヘッドレスブラウザで読み込み、各フレームをキャプチャし、ffmpeg でエンコードするレンダリングパイプラインを組み合わせる。詳細は Hugging Face の手順解説にまとまっている。この方法であれば、長尺の動画、音声、実写映像を扱える。

ブラウザ上のツールを使う

opus6.video は Claude Opus 5.5 をサービス側で実行する形式のため、Claude のサブスクリプションもローカル環境も必要ない。作りたい動画を文章で説明するか、Designer showreel、App launch video、Product walkthrough などのテンプレートから始め、形式（16:9、9:16、1:1）と長さ（10 秒、15 秒、30 秒）を選ぶ。Opus 5.5 がストーリーボードを計画してシーンを書き、利用者はチャットで調整したうえで 1080p の MP4 をダウンロードする。出力される動画には音声が入らないため、音楽は編集ソフト側で追加する。

プロンプト付きの完成動画は、opus6.video の作例ギャラリーにも掲載されている。

FAQ

Opus 5.5 の動画はどのくらいの長さまで作れるか

自分でレンダリングする場合、決まった上限はない。本記事の作例は 14 秒から 3 分近くまで幅がある。全フレームを 1 枚ずつ描画してキャプチャするため、動画が長いほどレンダリングにも時間がかかる。opus6.video では 1 本あたり最長 30 秒である。

本記事のプロンプトは再利用できるか

出発点としてであれば再利用できる。製品、題材、配色を自分のものに差し替えて使う。動画そのものはそれぞれの制作者に帰属するため、紹介する際は元の投稿にリンクする。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up