ブログに戻る
始める · 09 / 19

Claude Code で Claude Motion を使う手順

オープンソースの例をビルドし、範囲の明確な依頼で修正し、最終動画を確認します。

本稿は whaleyxbt/claude-motion という Remotion のオープンソースプロジェクトを使います。Anthropic 公式 Motion や当サイト Claude Motion Skills のインストーラーではありません。コマンドは資料とスクリプトを確認しましたが、すべての対応端末で実行したものではありません。ツールが不足していれば先に動作環境ガイドを確認してください。

正しいプロジェクトでエージェントを起動する

Anthropic の最新セットアップ手順で Claude Code を入れ、対応する方法でログインします。claude --version が動くことを確認してください。エージェントの認証とリポジトリの依存関係は別です。専用フォルダーを用意し、下記の正確なリポジトリを取得して説明を残します。当サイトのテンプレートが目的なら入門ページと cm-skills の手順を使います。似た名前だけを理由に無関係な npx パッケージを使わないでください。

変更前に元の例をビルドする

新しいフォルダーを作れる親ディレクトリで下記を実行します。ビルドは効果音、Remotion 描画、FFmpeg 結合の順で進み、期待される出力は out/effort.mp4 です。デザイン変更を頼む前に開いてください。停止したら最初のエラーを保存し、失敗した段階を特定します。取得したフォルダー内から Claude Code を起動し、別の場所の架空の構成ではなく実際のファイルを確認させます。

git clone https://github.com/whaleyxbt/claude-motion
cd claude-motion
npm install
npm run build
claude
出典と参考資料: whaleyxbtwhaleyxbt

範囲の明確な制作を依頼する

編集前に AGENTS.md、CLAUDE.md、関連スキルを読むよう指示します。確定原稿、利用権のある素材、視聴者、縦横比、長さを渡してください。最初は三場面と最後の行動案内からなる十五秒の正方形告知が適しています。絵コンテと時間配分を先に作り、その後に実装させます。事実表現を保持し、不足素材を知らせるよう求めます。システム全体のインストールや外部有料サービスは事前に説明させます。動画の依頼に無制限の端末変更は不要です。

出典と参考資料: whaleyxbt

プロジェクトの確認サイクルを使う

低解像度の下書きとコンタクトシートを依頼し、実際の画像を確認します。draft と sheet のスクリプトが用意され、下記の sheet コマンドは描画済み下書きを対象にします。場面と時刻で修正を伝え、はみ出し、小さい文字、急な切り替え、短すぎる表示を最終描画前に直します。動く版のコピーか Git の記録を残してください。変更が失敗したら、全体の再構築を繰り返すより変更ファイルとエラーを比較します。

npm run draft
npm run sheet -- --video out/draft.mp4
出典と参考資料: whaleyxbtwhaleyxbt

納品する実ファイルを検証する

適切なプロジェクトスクリプトで最終描画し、MP4 をプレーヤーで開きます。長さ、寸法、音声、最終フレーム、行動案内の文言を確認します。ソースと成功したコマンドのメモを保存してください。エージェントの完了報告より、実ファイルが確かな証拠です。当サイト独自の方式ではテンプレートのプレビューとローカル出力の説明に従い、追加の音声サービスが利用可能だと決めつけないでください。

出典と参考資料: whaleyxbtClaude Motion Skills

次のステップ

まず元の例が動くことを確かめます。その後、小さく確認可能な変更を重ね、納品前に出力そのものを検証しましょう。

制作ワークスペースを見る

出典と参考資料

出典は公式資料や制作者の公開ページです。提供状況は変わるため、契約やインストールの前にリンク先を確認してください。

  1. Claude Motion repository and quick startwhaleyxbt
  2. Project build scriptswhaleyxbt
  3. Set up Claude CodeAnthropic
  4. Claude Motion Skills getting startedClaude Motion Skills