一文を再生できる短いアニメーション動画にしたいとき、多くの人はまず動画生成モデルを探します。コミュニティで「Claude Motion」と呼ばれている方法は、少し違います。Claude Opus 5.5にWebページのコードを書いてもらい、ブラウザーでアニメーションを表示して、その画面を録画するという方法です。
数分で必ず完成する魔法ではありませんが、コードを書く必要もありません。 この記事では、Webページやコンソールなどのグラフィカルな画面だけを使います。各手順では、まず何が見えるかを説明し、次に何をクリックして何を貼り付けるかを案内します。最後に、完了を確認するための基準も示します。
始める前に、まず全体像を確認しておきましょう。
- 目標：ブラウザーで自動再生するアニメーションを作り、それを動画として録画します。
- 所要時間：初回は30分〜1時間ほどです。主に、APIキーの取得、モデルの接続、最初の修正に時間がかかります。
- 事前に用意するもの：インターネットに接続できるパソコン、ブラウザー、独自のAPIキーを入力できるチャットクライアント、そしてOpus 5.5を呼び出すためのAPIキー。Opus 5.5はすでにAPIYI apiyi.comで、モデルID
claude-opus-5-5を使って呼び出せます。 - 難易度：初心者向けです。コピー＆ペースト、新しいファイルの作成、ファイル名の変更ができれば十分です。
この記事でできるようになること：手順に沿って最初のアニメーションを作り、そのまま使えるプロンプトを知り、今後Opus 5.5を継続して利用する方法も分かります。
Claude Motionの要点
- どんなもの？：「Claude Motion」はコミュニティで使われている呼び名で、Anthropicが単独で公開した動画製品ではありません。Opus 5.5にコードでアニメーションを描かせる手法です。
- 動画生成モデルとの違い：画素を生成しないため、文字や数字を簡単に変更できます。一方で、実在の人物の顔や実写映像は作れません。
- リポジトリで紹介されている使い方は3ステップ：プロンプトをコピーしてOpus 5.5に貼り付け、HTMLとしてレンダリングします。動画が必要なら、ページを録画します。
- すぐ使える素材：awesome-opus5-5-videosリポジトリには703作品が収録されており、中国語のプロンプトは約115件あります。
- 最初の練習におすすめ：melvynxの「15秒のポートフォリオ」という形式なら、山括弧内を自分のURLや製品名に置き換えるだけで使えます。
- どこで使える？：APIYIでclaude-opus-5-5を呼び出せます。APIキー1つで利用でき、料金はトークン単位です。
この記事の事実は、リポジトリの原文（READMEとdata/videos.json、データは2026-10-20時点。この記事での実測ではありません）、スクリーンショットで確認できる数字、APIYIのドキュメントに記載された価格の3種類の情報源に基づいています。これらの情報源にない数字は記載していません。
Claude Motionとは：Opus 5.5がコードを書き、ブラウザーがアニメーションを描画
「Claude Motion」はコミュニティで使われている呼び名で、Claude Opus 5.5にHTML、Canvas、SVG、Three.jsなどのコードでアニメーションを描かせ、それを録画して動画にする手法を指します。作品を集めたリポジトリのREADMEには、次のように記されています。「ここにある動画はすべて、Claude Opus 5.5にアニメーションをコード（HTML、Canvas、SVG、Three.jsなど）で書くよう依頼して作られています。」
そのため、Sora、Veo、Seedanceなどの動画生成モデルとは仕組みが異なります。動画生成モデルは画素を直接生成しますが、Claude Motionが生成するのは「動くWebページ」です。画面に表示される文字や数字はすべてコードに書かれているため、変更したい箇所を指定すれば、モデルにその部分だけ修正させられます。
| 比較項目 | Claude Motion（コードによるモーション） | 動画生成モデル（Sora、Veo、Seedanceなど） |
|---|---|---|
| 画面の生成方法 | Opus 5.5がコードを書き、ブラウザーがリアルタイムに描画 | モデルが画素を直接生成 |
| 得意なコンテンツ | 文字、グラフ、図形、製品紹介、知識解説 | 実在の人物、実写風の映像、映画のようなカット |
| 文字を1つ変更する場合 | コード内の該当箇所だけ修正し、ほかはそのままにできる | 再生成が必要になることが多く、画面全体も変わりやすい |
| そのまま得られるもの | HTMLファイル。録画すると動画になる | 動画ファイル |
| 必要なモデル | claude-opus-5-5など、コードを書ける大規模言語モデル | 専用の動画生成モデル |
| 苦手なこと | 実在の人物の顔、実写の街並み、映画のようなカット | 文字を正確に表示すること、何度も修正する必要がある文章やグラフ |
Claude Motionを使う場面、動画生成モデルに切り替える場面
まず、どんな映像を作りたいかを考えましょう。実在の人物を登場させたい、街中で実写撮影したような映像にしたい、映画のようなカットを作りたい場合は、Claude Motionでは対応できません。動画生成に特化したモデルを使いましょう。一方、画面上の文章や数字を少し修正したい場合や、商品紹介動画を作りたい場合、知識をわかりやすく伝えたい場合は、Claude Motionが向いています。
そのため、必要なのはOpus 5.5のようなコードを書けるモデルで、動画生成モデルを別途探す必要はありません。APIYI（apiyi.com）ではclaude-opus-5-5を直接呼び出せます。APIキー1つで利用でき、実際に消費したトークン数に応じて課金されます。
Claude Motionのリポジトリにあるプロンプトの数
2026-10-20時点で、リポジトリのdata/videos.jsonには合計703件が収録されています。内訳は、モーション（motion）369件、解説（explainer）116件、3Dが117件、インタラクティブ（interactive）101件です。READMEによると、2026-10-12に解説と3Dを中心とした作品が追加されています。また、418件にはSkillry上で比較できる再制作版があり、207件のプロンプトには不完全であることを示すラベルが付いています。使う前にファイルの説明を確認してください。
技術タグの出現回数は、Canvasが267回、SVGが183回、Three.jsが131回、shaderが92回、GSAPが86回、CSSが57回、audioが39回です。これはタグの件数であり、モデルがよく使うツールを示すものです。必ずしも使い方を習得しておく必要はありません。リポジトリには中国語のプロンプトも約115件あるため、中国語でプロンプトを書いても問題ありません。各動画とプロンプトの権利は、それぞれの作者に帰属します。
始める前に：APIYIのコンソールでOpus 5.5の6項目を確認する
このセクションで行うのは、Opus 5.5を呼び出すためのキーを取得し、重要な情報に入力ミスがないか確認することだけです。ソフトウェアのインストールは必要ありません。
- 確認できること：APIYI apiyi.comのアカウントを登録してコンソールにログインします。入口はapi.apiyi.comです。コンソールはウェブ上で利用でき、トークンの作成や、呼び出しごとのログの確認ができます。
- 操作すること：トークンの作成画面を開き、新しいトークンを作成します。ドキュメントで利用可能とされているdefault、svip、ClaudeCodeのいずれかをグループとして選択し、完全なキーをコピーして、まずメモ帳に保存します。
- 完了の目安：トークン一覧に新しいキーが表示され、メモ帳に完全なキーが保存されていること。
| 確認項目 | 表示されるべき内容 | 確認する理由 |
|---|---|---|
| トークン | 一覧に新しいトークンがあり、完全なキーをコピーできる | 後でチャットクライアントに入力するため |
| グループ | default、svip、ClaudeCodeのいずれか | ドキュメントによると、この3つのグループでOpus 5.5を利用できるため |
| モデルID | claude-opus-5-5（ほかにclaude-opus-5-5-thinkingもあります） | 1文字でも違うと呼び出せないため |
| インターフェースの種類 | OpenAI互換とAnthropicネイティブの両方に対応 | 利用するクライアントが対応している方式を選ぶため |
| 料金 | 100万トークンあたり：入力4ドル、出力20ドル、キャッシュ読み取り0.20ドル | ドキュメントによると、上流と同じ料金のため |
| 使用ログ | 作業後に今回の利用料金を確認できる | 1回あたりの費用は推定ではなく、ログで確認するため |
料金情報は、APIYI apiyi.comのドキュメントサイトに掲載された2026年9月23日時点の内容です。ページタイトルは「Claude Opus 5.5 Is Live, Priced Below Opus 5」です。Anthropicが2026年9月22日に発表し、このお知らせは2026年9月23日13:27（UTC+8）に掲載されました。同じドキュメントに記載されたOpus 5の料金は、入力5ドル、出力25ドル、キャッシュ読み取り0.5ドルです。つまり、Opus 5.5のほうが安価です。1回あたりの費用は、利用後にコンソールのログで確認しましょう。
Opus 5.5で最初のClaude Motion動画を作る：5ステップで完成
ステップ1：チャット画面でOpus 5.5に接続する
- 確認できること：カスタムキーに対応した多くのチャットクライアントでは、設定画面に「APIキー」「APIアドレス」「モデル」の3項目があります。
- 入力する内容：先ほどコピーしたキーを入力します。アドレスには、APIYIのドキュメントに記載された該当インターフェースのアドレスを入力します。モデルにはclaude-opus-5-5を指定します。クライアントに「思考を無効にする」設定がある場合は、有効にしないでください。
- 完了の目安：「こんにちは」と送信して正常な返信が届き、コンソールのログにclaude-opus-5-5の呼び出し記録が表示されること。
ステップ2：最初のClaude Motion用プロンプトを貼り付ける
- 確認できること：空のチャット欄が表示されます。
- 貼り付ける内容：まず、melvynxの原文を貼り付けます。原文は以下のとおりです。山括弧の部分は、自分のURLや製品名に置き換えてください。
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are for
同じメッセージの末尾に、この記事でおすすめする次の一文を追加します。モデルがウェブサイトを開けない場合は、製品紹介を2〜3文ほど追加してください。
結果は完全なHTMLファイルとして出力してください。コードはすべて1つにまとめ、ブラウザーで開くと自動再生されるようにしてください。画面比率は16:9にし、説明は不要です。
- 完了の目安：返信の大部分がコードで、通常は
<!DOCTYPE html>で始まり、</html>で終わります。コードの内容を理解する必要はありません。
ステップ3：コードをウェブページとして保存し、ブラウザーで開く
- 確認できること：通常、コードブロックの右上に「コピー」ボタンがあります。
- 操作すること：コピーをクリックし、新しいテキストファイルを作成して貼り付け、motion.htmlとして保存します。Windowsでは、保存時にファイルの種類を「すべてのファイル」にしてください。そうしないと、motion.html.txtになることがあります。Macで「テキストエディット」を使う場合は、先に「フォーマット」メニューから「標準テキストにする」を選びます。保存したら、ファイルをダブルクリックしてブラウザーで開きます。
- 完了の目安：ブラウザーで開いたとき、コードがページいっぱいに表示されるのではなく、画面上でアニメーションが動き出すこと。
ステップ4：一度全体を確認し、1か所だけ変更する
- 確認できること：最初のバージョンは通常、問題なく再生されます。ただし、配色が平凡だったり、テンポが単調だったり、一部のテキストが画面からはみ出したりすることがあります。
- 入力する内容：一度に1つだけ変更を依頼します。たとえば、次のように伝えます。
3秒目に表示されるタイトルを「……」に変更し、それ以外はそのままにして、HTMLファイル全体をもう一度出力してください。
- 完了の目安：新しいコードで元のファイルを上書きし、ブラウザーを更新したとき、依頼した箇所だけが変更されていること。
ステップ5：アニメーションを動画として録画する
- 確認できること：ブラウザーでアニメーションが再生されています。
- 操作すること：まずF11を押して全画面表示にします。MacではCtrl+Cmd+Fを使います。WindowsではWin+Gで標準の録画ツールを開き、MacではShift+Cmd+5で画面を録画します。先に録画を開始し、その後ページを更新して、アニメーションを最初から再生します。
- 完了の目安：録画した動画がプレーヤーで最初から最後まで再生でき、長さが指定した15秒に近いこと。
各ステップの完了基準と、よくある4種類の問題への対処法
| ステップ | 完了の目安 | 失敗したときによくある状態 | 対処方法 |
|---|---|---|---|
| ステップ1 Opus 5.5に接続 | 返信が届き、ログにclaude-opus-5-5の記録がある | モデルから400エラーが返る | 思考（thinking）を無効にしないでください。また、ツール呼び出しを「必須」に設定しないでください。Opus 5.5では、この2つの設定で400エラーが返ります。 |
| ステップ2 プロンプトを貼り付け | 返信の大部分がHTMLコード一式になっている | 動画ではなく、長い説明が生成される | 「完全なHTMLファイルだけを出力し、説明は不要です」と追記して、もう一度送信してください。 |
| ステップ3 ウェブページとして保存 | ブラウザー上でアニメーションが動く | 開いても画面が真っ白 | ファイルの拡張子が.htmlで、末尾に</html>があることを確認します。コードが途中で切れていたら「続きを書いて完成させて」と依頼してください。外部ライブラリを使っている場合は、インターネットに接続してから開きます。 |
| ステップ4 1か所だけ変更 | 変更を依頼した箇所だけが変わる | テキストが画面からはみ出す | 「すべてのテキストに安全な余白を設け、画面比率を16:9に固定し、ウィンドウに合わせて等比で拡大・縮小してください」と伝えます。 |
| ステップ5 動画として録画 | 動画を最初から最後まで再生できる | 録画した時点で、冒頭がすでに途中まで再生されている | 先に録画を開始してから、ページを更新してください。 |
🚀 まず試すときのおすすめ：初めて試す場合は、APIYI apiyi.comでclaude-opus-5-5のトライアル枠を申請してみましょう。具体的な手順は、記事末尾の関連資料を参照してください。1本作ったらコンソールのログで利用料金を確認し、その後の使い方を決めるとよいでしょう。
オプション：すでにClaude Codeを使っている方へ
このセクションは丸ごと読み飛ばしてもかまいません。読み飛ばしても、この記事の作業は完了できます。すでにClaude Codeを使っている場合は、HTMLファイルを直接パソコンに書き込めるため、コピー＆ペーストや拡張子の変更が不要になるのがメリットです。
APIYIのドキュメントに従い、キーはANTHROPIC_AUTH_TOKENに設定します。アドレスには、先ほどコンソールで確認したドメインを使い、先頭にhttps://を付けます。末尾に/v1は追加しないでください。モデルはclaude-opus-5-5を選択します。また、Opus 5.5のデフォルトのeffortはhighからmediumに変更されています。アニメーションなどのコードを書くときは、effortを明示的に指定するのがおすすめです。複数のAgentを使っている場合は、関連資料にあるmagpieの記事を参考にすると、すべてのAgentで同じキーを共有できます。
Claude Motionの事例4選：Opus 5.5のプロンプトを参考にアレンジ
以下の4つのプロンプトは、すべてリポジトリに掲載された原文です。プレビュー画像は、リストの作成者がホストしている短編動画から切り出したものです。いずれも同じ claude-opus-5-5 を使用しています。APIYI（apiyi.com）なら、1つのAPIキーでそれぞれ試せるため、スタイルごとにモデルを切り替える必要はありません。
| 作者 | リポジトリの分類 | 技術タグ | 用途 | 自分用にアレンジする方法 |
|---|---|---|---|---|
| melvynx | motion | Canvas / SVG / GSAP | 15秒のポートフォリオ | 山括弧の部分をURLや製品名に置き換える |
| ezshine | motion | Canvas / SVG / GSAP | 横型の製品紹介（中国語のプロンプト） | 製品の特徴をいくつか追加する |
| songkeys | motion | Canvas | 文字を抑えたストーリー仕立て | テーマを変え、スタイルを表す言葉は残す |
| Ror_Fly | explainer | Canvas | 30秒の手順解説 | カクテルを自分の作業手順に置き換える |
事例1：melvynxの15秒ポートフォリオ
これはステップ2で使ったプロンプトです。短く、長さと用途だけを指定しているので、初めて試すのに向いています。
上の画像はmelvynxの作品から切り出したものです。対応するプロンプトは「make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are for
事例2：ezshineの中国語による製品紹介動画
製品を紹介する横型動画を作りたい場合は、次の中国語プロンプトをそのまま使えます。
设计个动画，介绍本项目的各项特性，像是专业的产品介绍宣传片，最后要生成 16:9 的mp4 视频
「本プロジェクト」という表現でモデルがプロジェクトの内容を参照できるのは、プロジェクトを認識できる環境に限られます。通常のチャット画面では内容が見えないため、あとから3〜5個の特徴を補足してください。チャット画面からMP4を直接出力することはできず、生成されるのはHTMLです。ステップ5の方法で画面を録画してください。
上の画像はezshineの作品から切り出したものです。対応する中国語プロンプトは「设计个动画，介绍本项目的各项特性，像是专业的产品介绍宣传片，最后要生成 16:9 的mp4 视频」です。
事例3：songkeysの折り紙・落書き風ストーリー
機能を列挙するより、物語を伝えるのに向いています。折り紙、落書き、かわいらしさ、温かみ、文字を控えめにすることなど、スタイルが具体的に指定されているのが特徴です。
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. AI then gradually develops and advances， eventually hatching today’s Opus 5.5 （you）. 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.
上の画像はsongkeysの作品から切り出したものです。対応するプロンプトは「Create a short origami / doodle-style animation showing humanity’s development…」です。
事例4：Ror_Flyのカクテル作り手順の解説
空のグラスから完成までを30秒で見せ、材料と分量を順番に表示します。リポジトリ原文のスペルミス「ingreidents」はそのまま残しています。
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.
上の画像はRor_Flyの作品から切り出したものです。対応するプロンプトは「We’re going to try a little test. Do you think you could render a recipe motion graphic animation…」です。
Claude Motionの動画を公開したあと：スクリーンショットで確認できる数字
リポジトリの「Motion graphics」の先頭にある作品で、タグはCanvas · AI imageです。プロンプトは長文ですが、要するに、Claude Popの楽曲と同じ音源を使い、映像を作り直すという内容です。
上の画像はanabologyの作品から切り出したものです。リポジトリに記録されたプロンプトは、Claude Popの楽曲と同じ音源を使って映像を作り直すという内容です。
以下の3枚は、各プラットフォームで投稿が獲得した反応を示すスクリーンショットです。Claude Motionには大きな反響があることがわかります。
Douyinの@悲伤喜羊羊の投稿には、Claude Opus 5.5を使ったと明記されています。いいねは30.3万件、コメントは2,498件、お気に入りは2.2万件、シェアは11.2万件です。
Xの@anabologyの投稿は2026年9月26日のもので、驚異の2,010万回表示を記録しました。
Douyinの@电子智人による9月28日の投稿は「情報理論／驚きの学問」という内容です。いいねは86.7万件、コメントは8,107件、お気に入りは21.3万件、シェアは19.5万件です。
この投稿からわかるのは、同じ種類のアニメーション解説動画に反響があったということだけで、使用モデルは特定できません。
anabologyの元投稿は、Opus 5.5にdonaldのMidjourneyプロンプトとムードボードを与え、12時間後に結果を確認した、という内容です。引用されたdonald（@donaldjewkes）の投稿には「Sep 24」とだけ表示されており、要旨は「コンピューターに5分間話しかけたら、Claudeが12時間作業した」というものです。
Claude Motionに関するよくある質問
Q1：コードが書けなくても、Claude Motionを使えますか？
使えます。コードはOpus 5.5が書いてくれるので、あとはコピーして貼り付け、.html形式で保存し、ブラウザーで開くだけです。作業の中で唯一「技術的な知識」が必要なのはAPIキーの取得ですが、APIYI apiyi.comに登録してトークンを作成するだけなので、ウェブページ上で数回クリックすれば完了します。
Q2：Claude MotionとSeedance、どちらを選べばよいですか？
実在する人物の顔、実写の質感、映画のようなカメラワークを求めるなら、Seedanceのような動画モデルを選びましょう。文字、数字、グラフ、製品紹介、知識解説ならOpus 5.5がおすすめです。動画のタイトルに1本あたりのコストを書いている人もいますが、それはタイトル用の文言であり、実測値でも公式価格でもありません。
Q3：Claude Motionの最初のアニメーションがいまひとつなのはなぜですか？
最初の案は、たいてい「動くこと」だけを実現した状態です。よくある原因として、スタイルを指定していない、一度に多くのことを要求している、デフォルトのeffortがmediumになっている、などが挙げられます。songkeysを参考にスタイルを具体的に指定し、クライアント側で思考強度を設定できる場合は高めにしましょう。その後は、1回の修正で変更する箇所を1つに絞ります。
Q4：MP4を直接ダウンロードできますか？
この記事で作成するのはHTMLです。最も確実なのは、手順5のとおり、OSの画面録画機能を使う方法です。最初からMP4を直接ダウンロードできるとは考えないでください。
まとめ
Claude Motionは動画編集ソフトではなく、コミュニティで広まっている制作方法の1つです。Opus 5.5にコードを書かせ、ブラウザーでアニメーションを描画し、それを録画して動画にします。コードを書ける必要はありません。
初めて作るときは、次の5ステップで進めましょう。APIYI apiyi.comでclaude-opus-5-5のAPIキーを取得し、プロンプトを1つ入力して、HTMLとして保存します。変更するのは1か所だけにして、最後に画面を録画します。1本あたりの費用は、制作後にコンソールログを確認しましょう。他の人の動画タイトルに書かれた数字を参考にするのは避けてください。
実在の人物を出演させたい、街中での実写映像や映画のようなカットを作りたい場合は、Claude Motionではなく、動画生成に特化したモデルを使いましょう。一方、文章を一文だけ直したい、数字を一つ変更したい、製品紹介や知識解説を作りたい場合は、Claude Motionが向いています。
関連記事
- 📘 Claude Opus 5.5はコードで動画を作れる？SVG素材・ナレーション・アニメーション・字幕の4工程を解説：レンダリングやナレーション、字幕の工程を詳しく知りたい方はこちらをご覧ください。この記事では仕組みを繰り返し説明しません。
- 📘 claude-opus-5-5を無料で試すには？申し込み手順5ステップ、利用枠と制限を解説：まだチャージしておらず、まずは利用枠を使って試してみたい方におすすめです。
- 📘 claude-sonnet-5-5とclaude-opus-5-5を比較：Opusは高速、Sonnetは安さだけ？6つのデータで企業向け長文脈エージェントの最適な組み合わせを解説：この用途にOpus 5.5を使うべきか迷っている方はこちら。
- 📘 手順を追って解説：1つのAPIキーであらゆるエージェントに接続。オープンソースのmagpieでAPIゲートウェイを統合（Claude Code、Codex、Pi、Hermesを例に）：複数のエージェントを使っていて、同じキーで接続したい方におすすめです。紹介する例は機能の上限ではなく、あらゆるエージェントを接続できます。
- 📘 顔動画の生成・編集に対応するSeeDance2.5の実践ガイド：3ステップで実写素材を登録し、適切に利用する：人物や実写のような映像が必要な場合は、コードによるアニメーションにこだわらず、動画モデルを使いましょう。
参考資料
- 作品とプロンプトの一覧：github.com/yihui-dev/awesome-opus5-5-videos（READMEとdata/videos.json、データは2026-10-20時点。この記事での実測値ではありません）
- 比較視聴ページ：skillry.dev/ai-videos/opus-5-5
- 事例の元投稿：x.com/melvynx/status/2103714680577638493、x.com/ezshine/status/2103501705698750731、x.com/songkeys/status/2102743212922384673、x.com/Ror_Fly/status/2102853258582880547、x.com/anabology/status/2103534482930491441
- 価格：APIYIドキュメントサイトの2026-09-23更新情報。ページタイトルは「Claude Opus 5.5 Is Live，Priced Below Opus 5」です。入力は4ドル、出力は20ドル、キャッシュ読み込みは0.20ドル（いずれも100万トークンあたり）。ドキュメントには、上流と同じ価格と記載されています。
