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秒は見出しを止めて読む時間にする。
動き：主役の登場と要点の強調に絞り、文字を動かし続けない。
場面：[ここだけを差し替える。例：製品カードが開き、特徴を一つ表示する]
製品名・説明・ロゴ：[ここに入力する]MOTION SKILLS / 15 SOURCES
つくりたい映像から、制作スキルを選ぶ
RoundtableSpaceの投稿にある15件から、新しく紹介する7つの制作資料を比較しました。製品紹介、素材の編集、絵柄のある解説映像、実装と演出のレビューへつながります。
新7件は一次資料を確認したスキル・キットです。既存の44本の独自作例と分けて掲載しています。投稿内の既掲載7件は下の作例へ案内し、UI/UXの実装スキル1件は姉妹リポジトリへ整理しました。
| つくりたいもの | 制作資料 | 組み合わせ・役割 |
|---|---|---|
| 製品紹介を、形が途切れず変わる短い映像にする。 | Product Launch Motion | HTMLからMP4 |
| 手元の録画を編集し、字幕・B-roll・ショーリールをつくる。 | HyperFrames Student Kit | 素材編集・HTML動画 |
| 話す言葉に合わせた差し込み映像や、完成動画の効果音をつくる。 | motion-graphics（Barty-Bart） | 差し込み映像・製品紹介・音の仕上げ |
| 切り絵、版画、ピクセル画などの見た目で短い解説映像をつくる。 | Animate | CanvasからMP4 |
| Remotionのロゴ、字幕、短い広告映像の動きを詰める。 | Claude Remotion Skill | Remotion制作・演出レビュー |
| 文字・SVG・複数要素のタイムラインを正しく実装する。 | GSAP AI Skills | GSAPの実装・レビュー |
| ブランドに合う速さ、イージング、注目させる順番を決める。 | Motion Design Skill（LottieFiles） | 動きの設計・レビュー |
新7件の使い方・導入条件
Product Launch Motion
同じ図形をUIやロゴへ変形させ、カーソル操作、スプリング、音楽の拍に合わせて見せる制作スキル。現行v2はHTMLの時刻制御とPlaywright、FFmpegを使う。
必要な環境：Node.js 20以上、Playwright、FFmpeg、Python 3とnumpy。作者はClaude CodeとOpus 5.5を推奨。
導入：README掲載のskills CLI。上流README掲載の手順です。
npx skills add AbubakrChan/product-launch-motion利用条件と確認点：v1のGSAP・HyperFrames手順はlegacy。スキル内には作者固有のローカルパスもあるため、自分の制作環境へ読み替える。MITはスキル・文章が対象で、サンプル映像やそのフレームは再利用できない。音楽とモデル利用料は別に確認する。
HyperFrames Student Kit
無音や言い直しの整理から、ストーリー、字幕、HyperFramesとGSAPの演出までをつなぐ制作キット。motion-showreelは一つのモチーフを変形させ、音楽の拍で章を切り替える。
必要な環境：Node.js 22以上、Git、FFmpegとffprobe、ChromeまたはChromium。Codex／Claude Codeに対応するスキルを同梱。
導入：README掲載のプロジェクト導入。上流README掲載の手順です。
git clone https://github.com/nateherkai/hyperframes-student-kit.git
cd hyperframes-student-kit
npm ci
npm run setup
npm test利用条件と確認点：ローカルの合成素材デモには有料生成APIが不要。ElevenLabsの文字起こし・音声、Kie.aiの画像・動画・音楽生成は任意で、各アカウント・キー・利用枠が必要。AISロゴなどのブランド素材はMITの再利用対象外。
motion-graphics（Barty-Bart）
話者動画と文字起こしに合わせるmotion-broll、製品の流れをワンカットで見せるexplainer-engaging、効果音を配置・計測するsound-effectsなどを用途別に選べる。
必要な環境：機能によりNode.js、Python、PlaywrightとChromium、FFmpeg。B-rollは元動画と時刻付きの文字起こしを用意する。音の仕上げはPython 3.10以上と音声解析の依存が必要。
導入：README掲載のskills CLIで必要なスキルを選択。上流README掲載の手順です。
npx skills add Barty-Bart/motion-graphics利用条件と確認点：B-rollの初期設定はbashを前提とする。時刻のない文字起こしにはローカルfaster-whisper等が別途必要。フォントはOFL、アイコンはISC、同梱SFXはCC0との記載。追加取得する曲・効果音は個別条件を確認する。今回は人物分離など全6スキルの実行はしていない。
Animate
Canvasへ図形を描き、絵柄のキット、ストーリー、音を組み合わせる制作スキル。台本、見た目、絵コンテを確認してからアニメーションへ進み、複数の縦横比に配置を調整する。
必要な環境：Claude Code、Node.js 18以上、PlaywrightとChromium、FFmpeg。ナレーションの単語時刻にはPythonとfaster-whisper。
導入：README掲載のClaude Codeプラグイン導入。上流README掲載の手順です。
/plugin marketplace add cth9191/animate
/plugin install animate@animate利用条件と確認点：ElevenLabsのナレーションは任意で接続と利用枠が必要。手元の録音も使える。WebGLの専用スタイルは上流でも未提供と明記されており、既存のCanvas作風と区別する。
Claude Remotion Skill
ReactとRemotionの制作に、スプリング、登場順、退場、レイヤー、テーマの共通化を加える第三者スキル。書き出したフレームを見て修正する工程を含む。
必要な環境：Node.js、React、RemotionとCLI、描画用ブラウザ。フレーム確認にはRemotionの静止画出力かFFmpegを使う。
導入：README掲載のプロジェクト単位のフォルダ配置。上流README掲載の手順です。
READMEの手順でリポジトリを取得し、remotion-motion-graphics/を制作プロジェクトの.claude/skills/へ配置する。READMEのmkdir・cp例はbash系シェル向け。
利用条件と確認点：Remotion公式のAgent Skillsとは別の作者・別リポジトリ。MITはこのスキルに適用され、Remotion本体の企業利用などの条件は別途確認する。常時微動や粒子などは作者の作風で、すべての作品に必要な規則ではない。
GSAP AI Skills
GreenSock公式のAPI・タイムライン・プラグイン・フレームワーク連携スキル集。開始位置、ラベル、並行する動き、後片付けを整理する実装の参照先。
必要な環境：skills形式を読めるエージェントと、JavaScript／GSAPを使う制作環境。Reactなどは選択した構成に応じて用意する。
導入：README掲載のskills CLI。上流README掲載の手順です。
npx skills add https://github.com/greensock/gsap-skills利用条件と確認点：スキル集はMITだがGSAP本体はStandard License。スキル単体にはMP4書き出し機能がなく、動画化には時刻制御と別の書き出し手段を組み合わせる。
Motion Design Skill（LottieFiles）
感情、視線誘導、動きの重さを起点に、時間・イージング・複数要素の振り付けを選ぶ設計スキル。CSS、GSAP、Motion、Lottieなど実装手段を限定しない。
必要な環境：対象の画面や映像の目的と、実装するアニメーション環境。特定のLottieサービスやAPIは必須とされていない。
導入：README掲載のskills CLI。上流README掲載の手順です。
npx skills add LottieFiles/motion-design-skill利用条件と確認点：動画エンジンやLottieファイルの書き出しツールではない。UIのフィードバックも対象だが、このガイドではモーションの設計・演出に絞って紹介する。
投稿の既掲載7件は、動く作例から選ぶ
Motion Graphics Skill Pack →claude-motion-design →claude-motion →Motion →HyperFrames →Remotion →Remotion Agent Skills →
UI/UXデザインは姉妹リポジトリへ
画面の設計や操作、アクセシビリティを扱うスキルは、Claude UI・UXデザインガイドへ集約しています。投稿10番のMotion Dev Animations Skillもそちらへ整理。ここでは、映像・文字・図形の演出と、動きの実装・書き出しを扱います。
確認日：2026年10月13日。新7件のREADME・スキル本文・ライセンスを固定commitで確認しています。インストール、制作実行、作品の品質・速度の検証はしていません。スキルのMITと、外部サービス・素材・GSAPやRemotion本体の利用条件は別です。
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を組み合わせます。
機械や装置の仕組みを、操作できる立体図で伝えるならAnatomyを選べます。部品をSVGで組み立て、必要に応じてWebGLの効果を加える制作スキルです。3Dモードはベータ版。動画へ仕上げる場合は、時刻制御とフレーム取得・エンコードを組み合わせます。
解説動画では伝達順序が重要です。数値の出典、単位、軸、数式を確定させ、文字の可読時間を確保した上でアニメーションを設計します。
CHARTS / DIAGRAMS / NETWORKS
グラフと関係図を動かす
数値の推移、工程の分岐、ネットワークのつながりを、説明したい順番で見せます。D3に加え、9つのライブラリと独自作例を掲載しています。
| 見せたい内容 | 入口 | 作例で確かめること |
|---|---|---|
| 数値の変化、比較、波形 | Chart.js / ECharts / Plotly / Nivo | 軸と単位を保ち、値と色をフレームごとに更新する。 |
| 工程、分岐、接続関係 | Mermaid / React Flow | 図の定義と、表示する順番・強調を分けて設計する。 |
| ネットワーク、依存、最短経路 | G6 / Cytoscape.js | 計算した関係や経路を、配置と強調につなげる。 |
| 立体のクラスタと接続 | 3d-force-graph | レイアウトを先に確定し、カメラを時刻から制御する。 |
動画化では、自動アニメーションや物理計算を止め、seek(frame)で指定時刻のデータ・座標・視点を描きます。描画完了を待ってフレームを取得し、文字と数値の読みやすさを確認します。
Mermaidは図解の生成、Chart.jsはCanvas 2D、ECharts本体はCanvas／SVGを担当します。図への演出や動画書き出しには、別の時間制御とレンダラーを組み合わせます。
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回。制作時間や回数は、その実験の記録です。
Yaoyorozu AI ToolBox / 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キー、有料サービスは必須ではありません。
元記事をきっかけにYaoyorozu AI ToolBoxが独自制作。横長・縦長の8秒動画を書き出し、代表フレームと再現性を確認しました。音の聴取レビューは別途必要です。
MECHANISM / CUTAWAY / FILM
機械のしくみを、触れる図解にする
AirsupのMachine Skillは、機械の名前や見せたい動作をAIエージェントに伝え、操作できる3Dシミュレーションと紹介動画を制作するスキルです。寸法・材質・計算モデルを調べ、断面・分解・X線・入力変更・故障の再現を組み込みます。コンプレッサーの機能デモで、回転数・断面・分解・吸気弁の故障を試せます。
機械の名前に加え、動かしたい部品、見たい断面、変えたい入力、起こしたい故障を伝えます。出力値の出典と省略した計算も、画面と制作メモに残します。
単気筒のエアコンプレッサーを作ってください。
断面でクランク、ピストン、吸排気弁の動きを見せてください。
回転数を変えて吐出量を計算し、吸気弁が閉じない故障も操作できるように。
寸法と式の出典、設計値と省略した計算を記録してください。
操作できるHTML、編集ソース、28秒の紹介動画を用意してください。作例を入口に、一本つくってみる。
目的に近いルートを選び、作例のコードをベースにテキストや素材を差し替えることで、制作を開始できます。