メインコンテンツへ移動
AIチュートリアル

Claude、Three.js、Remotionで縦型アニメーションストーリーのショート動画を作成

Claude Animated Shortsのインストールと使い方を学び、スタイライズされたキャラクター、映画的なカメラワーク、音楽、エフェクト、フレームチェック、最終2Kレンダリングを備えた55～70秒の縦型ストーリーを制作します。すべてthree.jsとRemotionを使ってローカルでレンダリングできます。

約12分で読了
Claude、Three.js、Remotionで縦型アニメーションストーリーのショート動画を作成

Claude Animated Shortsとは？

Claude Animated Shortsは、How to Make Viral Animated Shorts Using Claude (Full Workflow)で紹介されているワークフローを基にした、無料のClaudeスキルです。AI動画生成ツールに頼らず、55～70秒の縦型アニメーションストーリーショートを作成できます。

このプロジェクトでは、2Dキャラクターと色鮮やかな3D環境を組み合わせます。対象となるスタイルには、インクの輪郭線、描き込まれた街並み、レンズブラー、滑らかなカメラ移動、行進曲風の音楽、同期した効果音が含まれます。レンダリングは、Remotion内のthree.jsを使い、自分のコンピューター上で実行します。

このワークフローは、1831年のBroughton橋を題材にした67秒のショート作品、The Bridge That Fell for a Songで実証されています。

主な機能とリポジトリの内容

リポジトリには、制作スキル、完全なサンプルプロジェクト、音声素材、品質保証ツール、測定済みのビジュアルリファレンスが含まれています。

  • SKILL.md：完全なパイプライン、制作ルール、修正方法、最終的なビジュアル値を含む、メインのスキル定義です。
  • templates/bridge/：橋のショート作品の完全なソースです。世界観、キャラクター、インク処理、レンズブラー、カラーグレーディング、ストーリー、カメラワークが含まれています。
  • templates/audio/：合成した効果音、行進曲風の音楽、ダッキングとラウドネス処理を施した最終ミックスが含まれています。
  • templates/scripts/：静止画とサイド・バイ・サイドシートの生成、ショットの結合、フレーム単位の品質保証を行うヘルパーです。
  • references/STYLE_BIBLE.md：20本のリファレンスショートから測定した脚本とビジュアルの公式です。
  • references/reports/：動き、奥行き、テクスチャ、キャラクター、ライティング、輪郭線、カラーグレーディングを扱う7つのレポートです。
  • references/frames/：540×960ピクセルのフルサイズリファレンスフレーム38枚です。
  • references/sheets/：各リファレンスショートにつき60フレームを収録したコンタクトシート20枚で、合計1,200フレームです。

前提条件

スキルをインストールする前に、レンダリングと音声ワークフローに必要なローカルツールを準備します。

  • Claude Code：スキルの呼び出しとワークフローの調整に使用します。
  • Node：JavaScriptおよびRemotion環境に使用します。
  • Remotion：動画の合成とthree.jsレンダリング用に@remotion/threeとともに使用します。
  • Python 3：付属のヘルパースクリプトに使用します。
  • ffmpeg：動画と音声の処理に使用します。

Remotionとthree.js統合をセットアップする際は、公式のRemotionドキュメントに従ってください。補助的なコマンドラインツールが利用可能かどうかも、次のコマンドで確認できます。

node --version
python3 --version
ffmpeg -version

Claudeスキルをインストールする

  1. リポジトリをクローンするか、ZIPアーカイブをダウンロードします。

  2. 完全なプロジェクトフォルダーを、次のClaudeスキルパスに配置します。

    ~/.claude/skills/cartoon-3d-short/

  3. SKILL.md、templates/、references/がそのディレクトリ内に残っていることを確認します。スキルはワークフローとビジュアル比較にこれらのリソースを使用するため、リポジトリの構成を保持してください。

  4. 制作を開始する前に、Remotion、@remotion/three、Node、Python 3、ffmpegがコンピューターで利用可能になっていることを確認します。

Remotionの一時ストレージを設定する

REMOTION_TMPを、十分な空き容量のあるドライブ上のフォルダーに設定します。Remotionの各バンドルでは、約1.3 GBのpublic/ディレクトリが一時ストレージにコピーされます。

Unix系シェルでは、次のようにして現在のセッション用に変数を設定できます。

export REMOTION_TMP=/path/to/large-drive/remotion-tmp

小容量のシステムディスクではなく、大容量のドライブ上の場所を選択してください。環境変数を永続的に設定する方法は、オペレーティングシステムとシェルによって異なります。

初めてのアニメーションショートを作成する

1. トピックを選ぶ

説明したい歴史的出来事、物語、またはテーマを決めます。このプロジェクトは短い物語作品を想定しているため、約1分に収められる、焦点の絞られたテーマから始めるのが最適です。

2. Claude Codeでスキルを呼び出す

Claude Codeを開き、スキルを直接リクエストします。プレースホルダーをテーマに置き換えてください。

Use the cartoon short skill and make a short about [your topic].

例：

Use the cartoon short skill and make a short about the Broughton bridge collapse.

3. スキルに制作パイプラインを実行させる

ClaudeはSKILL.mdの指示に従います。ワークフローは次の主な段階で進みます。

  1. テーマと事実：題材と事実に基づく土台を確立します。
  2. 脚本：事実を短い物語にまとめます。
  3. 音声：ストーリー用のナレーションを準備します。
  4. ショットプラン：story.tsでシーケンスとカメラプランを定義します。
  5. 静止画：最終レンダリングに進む前に代表的なフレームを生成します。
  6. レンダリング：Remotionとthree.jsを通じて、アニメーションショットをローカルで生成します。
  7. 品質確認：測定済みのレポートと提供されたリファレンスフレームを使ってフレームを比較します。
  8. 最終出力：最終的な2Kレンダリングとサウンドミックスを生成します。

ビジュアルと音声のワークフローを理解する

付属の橋のテンプレートは、完成したショート作品をプロジェクトでどのように構成するかを示す完全な例です。templates/bridge/を調べて、環境、キャラクター、アウトライン、奥行き効果、カラーグレーディング、カメラワーク、ストーリーのタイミングがどのように連携しているかを確認してください。

音声については、templates/audio/を確認してください。実績のある制作で使われている合成効果音、行進曲のスコア、ラウドネス処理、ダッキングが示されています。ダッキングは、ナレーションやその他の重要な音声に合わせてサウンドトラックの音量バランスを整えるのに役立ちます。

プロジェクトには、静止画生成、ショットの結合、比較シート、フレーム単位のチェック用スクリプトも含まれています。これらのツールにより、完成版を仕上げる前に映像上の問題を特定できる反復的なワークフローを構築できます。

リファレンスを正しく使う

リファレンス素材は、ストーリーの内容を提供するものではなく、ビジュアルの方向性を示すためのものです。

  • references/STYLE_BIBLE.mdを読んで、計測に基づく脚本とビジュアルの定式を理解してください。
  • モーション、奥行き、テクスチャ、キャラクターの表現、ライティング、アウトライン、グレーディングを調整する際は、各レポートを参照してください。
  • 生成した静止画を、フルサイズのリファレンスフレーム38枚と比較してください。
  • コンタクトシートを使って、完成したシーケンス全体のテンポとビジュアルの一貫性を評価してください。

ストーリー、キャラクター、声は必ず自分自身で作成してください。付属のリファレンスは内容ではなく、見た目の参考として使用します。

高度なヒント

本レンダリングの前に静止画を確認する

完成版のレンダリングに時間をかける前に、静止画生成と比較のワークフローを使用してください。代表的なフレームを使うと、制作の早い段階で構図、アウトライン、ライティング、奥行き、ぼかし、グレーディングを評価しやすくなります。

レポートを目的別のチェックリストとして使う

ショットに問題があるときは、すべてのビジュアル設定を一度に変更するのではなく、問題に対応するレポートを参照してください。たとえば、動きに問題がある場合はモーションレポートを、インク表現が意図したスタイルと合わない場合はアウトラインレポートを確認します。

完全な橋のテンプレートを調べる

橋のプロジェクトは単なるビジュアルサンプルではありません。完成した67秒のショート作品の完全なソースです。story.ts、カメラ、キャラクター、環境要素、ポストプロセス、音声が一つの作品にどのように貢献しているかを理解するために活用してください。

レンダリング前にディスク容量を計画する

Remotionの各バンドルは、約1.3 GBのパブリックアセットを一時フォルダーにコピーするため、バンドルを繰り返すと限られたストレージに大きな負荷がかかることがあります。レンダリングの多いセッションを始める前に、REMOTION_TMPを十分な容量のドライブに設定してください。

オリジナルのクリエイティブ要素を維持する

プロジェクトごとに、新しいストーリー、オリジナルのキャラクター、自分自身の音声演出を作成してください。リポジトリのコードとドキュメントはMIT Licenseで公開されていますが、付属のフレームはスタイル研究の目的に限ってライセンスされています。

ライセンス

プロジェクトのコードとドキュメントはMIT Licenseでライセンスされています。詳細はリポジトリのLICENSEファイルを確認してください。付属のリファレンスフレームは用途が限定されており、ビジュアルスタイルの研究目的にのみ提供されています。

まとめ

Claude Animated Shortsは、テーマを洗練された縦型アニメーションストーリーに変えるための、構造化されたローカルワークフローを提供します。スキルと依存関係をインストールした後、テーマを指定してClaude Codeにプロンプトを送り、リサーチ、脚本、音声、ショット計画、静止画レビュー、フレーム比較、レンダリング、サウンドミキシングまでのパイプラインに沿って制作できます。付属の橋の制作例と計測に基づくリファレンスは、一貫した見た目のオリジナルショート作品を作るための実用的な基盤になります。