CLAUDE MOTION / OFFICIAL BETA
チャットから短いアニメーションをつくる
Claude Motionは、2026年10月8日に公開されたAnthropic公式のベータ機能です。文章、グラフ、図形、画像をコードで動かし、チャットの横で再生・編集してMP4へ書き出せます。
使いどころ
レポートの要点、グラフの変化、製品の操作説明など、手元の内容を短い映像にする入口です。文字、数値、タイミングを会話やエディタで調整できます。
始め方
Claudeの通常のチャットでアニメーションを依頼するか、ArtifactsのMotionテンプレートから始めます。伝える内容、素材、尺、見た目を指定し、再生してから修正します。
使えるプランと設定
2026年10月13日確認時点ではTeamとEnterpriseが対象です。Teamは既定で有効。Enterpriseは所有者がOrganization settings > Artifactsで有効にします。ArtifactsにはCloud code execution and file creationの有効化も必要です。
掲載済みの同名スキルとの関係
公式サービスのClaude Motionと、whaleyxbt/claude-motionやClaude Code向けの/motionスキルは提供元と導入方法が異なります。コードを手元で管理する制作には、下の4ルートを選べます。
Anthropic公式発表 ↗公式ヘルプ：利用条件とMP4出力 ↗
Charlie Hillsの制作記事
元投稿はApple風のアニメーション16種を紹介しています。共通の制作ブリーフを固定し、場面の一行を差し替える進め方が参考になります。作り始める手順と、ブリーフ・プロンプト集へ進めます。
Claude /motion：制作手順 ↗16種の作例とブリーフ ↗紹介したX投稿 ↗
記事の後半と16種のプロンプト本体は、作者のSubstackで無料購読登録が必要です。以下は本ガイドの独自ブリーフです。記事の全文や購読部分は転載していません。
Claude Motionで、6秒の製品紹介アニメーションを作ってください。
目的：無音で見ても、製品の特徴を一つ理解できること。
入力：この後に渡す製品名・説明・ロゴだけを使う。
見た目：明るい背景、アクセント色は一色、大きく読みやすい文字。
時間：最初の1秒で主役を見せ、最後の2秒は見出しを止めて読む時間にする。
動き：主役の登場と要点の強調に絞り、文字を動かし続けない。
場面：[ここだけを差し替える。例：製品カードが開き、特徴を一つ表示する]
製品名・説明・ロゴ：[ここに入力する]01 / HTML TO VIDEO
HTMLで短い動画をつくる
商品紹介、文字演出、SNS動画ならHTMLベースのHyperFramesが適しています。付属スキルで構成と実装を進め、プレビューしながら修正できます。
選ぶ理由
HTML、CSS、画像、音声を一つのコンポジションにまとめられます。GSAP、Anime.js、Lottie、Three.js等との連携にも対応しています。
必要な環境
Node.js 22以上とFFmpegが必要です。ローカルでの書き出しに外部クレジットは不要です。外部APIや音声・画像生成を使う場合は別途認証が必要です。
導入の入口
npx hyperframes init motion-video
cd motion-video
npx hyperframes skills update
npx hyperframes preview書き出しはnpx hyperframes render --output video.mp4を実行します。オプション詳細は--helpで確認できます。
HyperFrames固有のコンポジション属性とタイムライン登録規約に従います。HTML単体のwindow.seek(t)とは仕様が異なります。各ライブラリのライセンスも確認してください。
02 / REACT TO VIDEO
Reactで動画を組み立てる
テンプレート動画や字幕・数値の差し替えにはRemotionが適しています。公式Agent Skillsを使い、Reactコンポーネントとして画面を組み立てます。
動きの時間をそろえる
useCurrentFrame()とFPSから位置や色、カメラを決定します。実時間依存のアニメーションを使うと書き出し時にフレームのずれが生じます。
3Dや既存アニメーションを足す
3Dには@remotion/three、Lottieには@remotion/lottieなど、フレーム連動に対応した公式パッケージを利用できます。
導入の入口
npx create-video@latest --yes --blank motion-video
cd motion-video
npx remotion skills add
npm run devStudioでプレビュー確認し、調整後に書き出します。既存プロジェクトへスキルを追加する場合はnpx skills add remotion-dev/skillsを実行します。
Remotionは独自ライセンスです。個人、小規模組織、非営利等向けの条件と、企業向けライセンス（Company License）の要件を確認して利用してください。
03 / INTERACTIVE MOTION
触れる画面を動かす
操作に反応するUIアニメーションにはMotionやGSAPを組み込みます。Emil Kowalskiのスキルを用いて、イージング、速度、割り込み処理を最適化できます。
| 表現 | 入口 | 選ぶときの視点 |
|---|---|---|
| レイアウトの変化、ドラッグ、スプリング | Motion | Reactとの接続、操作の途中で入力しても自然につながるか。 |
| 文字演出、複数要素の連動 | GSAP / Anime.js | 時刻と順番を管理できるか。GSAPの独自利用条件も確認。 |
| 立体、光、シェーダー | Three.js / Fiber + Drei | 必要なGPU機能、Reactの有無、素材とカメラの扱い。 |
| キャラクターの状態に応じた動き | Rive Runtimes | 制作済み.riv素材の有無、エディタ・素材・サービスの条件。 |
キーボード操作、prefers-reduced-motion、画面幅への対応を確認します。動画化する場合は、入力依存の動きを時刻から一意に決定できるように設計します。
04 / EXPLAIN WITH MOTION
仕組みを動きで伝える
数式やアルゴリズムの解説にはManim Community、TypeScriptでシーンを組むならMotion Canvasが適しています。グラフにはD3、地理データにはdeck.glを組み合わせます。
解説動画では伝達順序が重要です。数値の出典、単位、軸、数式を確定させ、文字の可読時間を確保した上でアニメーションを設計します。
THE PRODUCTION LOOP
良い指示を、見直せる制作へ。
素材、伝える内容、出力条件を整理し、シーン構成を実装して映像と音を確認・調整します。この一連の手順をスキルで効率化できます。
目的、ターゲット、必須テキスト、出典、使用するロゴや素材。
配色、フォント、解像度、フレームレート、シーン構成と遷移。
キーフレーム、表示崩れ、文字切れ、レイヤーの重なり、アセット読み込み。
テンポ、トランジション、音声同期を確認し、最終書き出しを行います。
任意の時刻へ戻れる設計
HTML制作では、seek(t)で指定時刻の状態を計算します。フレーム番号をFPSで割って時刻を算出し、描画完了後にフレームを取得することで正確な動画化が可能です。
function stateAt(seconds) {
const p = Math.max(0, Math.min(1, seconds / 0.8));
const eased = 1 - Math.pow(1 - p, 3);
return { opacity: eased, y: 40 * (1 - eased) };
}
// レンダラー側: seconds = frameNumber / fps
// ページ側: 状態を適用 → フォント・素材・描画完了 → 取得乱数はseedを固定し、物理演算は任意時刻の状態を再現できるように実装します。setTimeoutや制御外のCSS transitionはフレームずれの原因になります。
Claudeへ渡す制作ブリーフ
制作開始時に使えるブリーフのテンプレートです。内容を記入し、エンジンの制作スキルとともにプロンプトとして渡します。
目的・視聴相手：
必ず伝える内容と、事実の出典：
提供するロゴ・画面・写真・音声：
色・書体・参考にする表現：
動画の尺・サイズ・FPS：
使う制作エンジン：
後から差し替えたい内容：
音声・音楽の有無と権利：
確認したい点と、完成時に受け取るもの：成果物には編集可能なコード、アセット、書き出し動画、変更箇所のメモを含めることで、保守や再利用が容易になります。
DIRECT / RENDER / REFINE
動きを指定し、フレームで直す
「高級感」「もっと派手に」を、色・材質・移動量・時間へ置き換える。見せたい動きを決めてから、途中のフレームを見て仕上げます。
先に、見せ方を決める
目的、尺、サイズ、FPS、色、書体、場面ごとの主役を指定します。登場の速さ、弾み、要素間の遅れも数値にして、避けたい表現は具体名で伝えます。
同じ時刻を描き直せるようにする
位置や形をフレーム番号と時刻から決めます。フォントや素材の読み込みを待ち、乱数のseedも固定。ループは全N枚のうち0〜N−1を出力し、終端から冒頭へのつながりを確認します。
気になる動きの前後を見る
コンタクトシートで全体を見て、問題の前後を拡大します。「着地が2フレーム遅い」「文字を読む間は動きを止める」のように、場所と変更内容を絞って修正します。
音も、書き出した後に確かめる
映像のイベントと音のピークを照合し、音量やループ境界も確認します。Web Audioで効果音を合成する方法もあります。数値の検査に加え、完成した動画を視聴して判断します。
FPSと、動きが起きるフレーム番号を確認してください。
その前後の静止画と、場面全体のコンタクトシートを出してください。
見る点：主役の見やすさ、文字の読む時間、動きの順番、終端のつながり。
問題ごとに「フレーム番号・見える問題・変更する値」を挙げてください。
影響の大きい2点を修正し、同じフレームを再出力して比べてください。参考記事「Opus 5.5 Motion Lab」は、液体タイトル・製品映像・マスコットの実験と修正履歴を公開しています。作者が報告する映像の追加指示は、それぞれ10回・15回・4回。制作時間や回数は、その実験の記録です。
STUDIO YEBISU / REUSABLE SKILL
制作からレビューまで、日本語スキルでつなぐ
Motion Reelは、ブリーフと実素材をもとに場面を設計し、時刻指定の描画、音の同期、出力レビュー、MP4書き出しへつなぐ独自スキルです。商品紹介、UIの変形、文字や図形の短い映像に使えます。
一度つくった制作環境を、次の一本へ
HTMLのひな形、フレーム取得、短い効果音、確認資料の出力を同梱。新規のHTML動画へ使うほか、RemotionやHyperFramesの既存構成にも制作の判断基準を適用できます。
描画した画面を見て直す
全体の静止画一覧、速い動きの連続フレーム、360px幅の表示を見て修正します。同じ時刻の再描画と実書き出しの記録を残し、技術的な検査と作品のレビューを分けます。
スキルを追加する
npx skills add studio-yebisu/motion-reel --skill motion-reel同梱HTMLの書き出しはNode.js 20以上、Chrome、FFmpegとffprobeを使います。特定モデル、APIキー、有料サービスは必須ではありません。
元記事をきっかけにStudio Yebisuが独自制作。横長・縦長の8秒動画を書き出し、代表フレームと再現性を確認しました。音の聴取レビューは別途必要です。
MECHANISM / CUTAWAY / FILM
機械のしくみを、触れる図解にする
AirsupのMachine Skillは、機械の名前や見せたい動作をAIエージェントに伝え、操作できる3Dシミュレーションと紹介動画を制作するスキルです。寸法・材質・計算モデルを調べ、断面・分解・X線・入力変更・故障の再現を組み込みます。コンプレッサーの機能デモで、回転数・断面・分解・吸気弁の故障を試せます。
機械の名前に加え、動かしたい部品、見たい断面、変えたい入力、起こしたい故障を伝えます。出力値の出典と省略した計算も、画面と制作メモに残します。
単気筒のエアコンプレッサーを作ってください。
断面でクランク、ピストン、吸排気弁の動きを見せてください。
回転数を変えて吐出量を計算し、吸気弁が閉じない故障も操作できるように。
寸法と式の出典、設計値と省略した計算を記録してください。
操作できるHTML、編集ソース、28秒の紹介動画を用意してください。作例を入口に、一本つくってみる。
目的に近いルートを選び、作例のコードをベースにテキストや素材を差し替えることで、制作を開始できます。