Communityコーディング&開発github.com

スティックマンアニメーションスタジオ

画像参照からスムーズな2Dおよび3Dスティックマンアニメーションを作成し、YouTube向けのMP4動画をエクスポートします。アニメーションプロジェクトの作成、アニメート、レンダリング、改善を依頼する際に使用します。

スティックマンアニメーションスタジオ とは?

このスキルは、画像参照をもとに2Dおよび3Dのスティックマンアニメーションを構築し、YouTube向けのMP4動画として書き出すためのものです。HTML5 CanvasとJavaScript(2D)またはBlender Python API(3D)を優先的に使用し、スムーズなモーション、読みやすいアクション、一貫したキャラクターデザイン、シーンの連続性、信頼性の高いレンダリングを実現します。作業前に参照画像を確認し、最適なパイプライン(2Dまたは3D)を選択します。手順は段階的に進められ、テストプレビュー後に本番出力を行います。依存関係(Blender、FFmpegなど)が不足している場合は、静かにレンダリングを偽装せず、正確なセットアップ手順を報告します。最終成果物として、output.mp4、プロジェクトソースファイル、キャラクターデザインメモ、READMEを提供することを目指します。

対応✓Claude Code~Codex CLI~Cursor
Part ofMobile
npx skills add https://github.com/eddolintang-eng/stickman-3d-animation-skill/tree/HEAD/.claude/skills/stickman-animation-studio

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

name: stickman-animation-studio description: 画像参照からスムーズな2Dおよび3Dスティックマンアニメーションを作成し、完成したYouTube対応MP4動画をエクスポートします。ユーザーがスティックマンアニメーションプロジェクトの作成、アニメート、レンダリング、改善を依頼した場合に使用します。

スティックマンアニメーションスタジオ — 2D & 3D MP4

目的

編集可能なスティックマンアニメーションプロジェクトを作成し、YouTube対応のMP4動画としてレンダリングします。2Dと3Dの両方のワークフローをサポートし、スムーズなモーション、読みやすいアクション、一貫したキャラクターデザイン、シーンの連続性、信頼性の高いレンダリングを優先します。

このスキルはアニメーションコードとプロジェクトファイルを作成します。静止画像が自動的に完全なリグ付きキャラクターになるとは想定しません。まず参照画像を検査し、適切な構築方法を選択します。

動作原則

  • 構築前に検査する。 提供された参照画像、プロジェクトファイル、利用可能なソフトウェア、出力要件を確認します。
  • 必要な情報のみを尋ねる。 ユーザーがフォーマットを指定していない場合、デフォルトは1920×1080、30 fps、横向き16:9とします。ただし、リクエストが明らかにShorts向けの場合は、1080×1920、30 fps、9:16を使用します。
  • 参照を維持する。 キャラクターのシルエット、頭の形、手足の比率、色、服装/アクセサリー、特徴的な部分を一致させます。参照と矛盾するディテールを追加しないでください。
  • 意図を持ってアニメートする。 すべての動きは動作や感情を伝えるものでなければなりません。ランダムな動きや不要なカメラ移動は避けてください。
  • スムーズなタイミングを使用する。 連続的なカーブ、イーズの効いた遷移、予備動作、フォロースルー、制御されたポーズを優先します。急な位置のジャンプは避けてください。
  • シーンの一貫性を保つ。 画面の向き、キャラクターのスケール、小道具、照明、隣接するショット間の空間的関係を維持します。
  • レンダリングして確認する。 レンダリングが成功し、出力ファイルが確認されるまでは、MP4が完了したと主張しないでください。
  • 制限について正直に。 Blender、FFmpeg、フォントなどの依存関係が不足している場合は、それを報告し、レンダリングが行われたふりをするのではなく、正確なセットアップ手順を提供します。

ワークフロー

フェーズ 1 — リクエストを理解する

以下を特定します:

  • アニメーションモード: 2D、3D、または両方。
  • ソース: 画像参照、既存のプロジェクト、またはテキストによる説明。
  • シーン/アクションと感情的なトーン。
  • 長さとアスペクト比。
  • 出力: MP4、プレビュー、編集可能なプロジェクト、またはすべて。
  • ナレーション、字幕、効果音、音楽のリクエストがある場合。

詳細が不足している場合、以下のデフォルトを使用します:

  • YouTube長尺動画: 16:9、1920×1080、30 fps。
  • YouTube Shorts: 9:16、1080×1920、30 fps。
  • ビデオコーデック: H.264。オーディオがある場合はオーディオコーデック: AAC。
  • フレームレート: 固定30 fps。
  • 背景: ユーザーの参照画像を使用するか、シーンに適したシンプルな背景。

フェーズ 2 — 参照画像を検査する

画像が提供された場合:

  • 関連するすべての画像を開いて検査します。
  • メインキャラクター、シルエット、頭/体のプロポーション、手足の長さ、色、アクセサリー、ビジュアルスタイルを特定します。
  • 見えるポーズ、向き、カメラアングル、シーン要素を特定します。
  • プロジェクト内に簡潔なキャラクター仕様書(character_design.mdなど)を記録します。
  • 参照画像が単一のポーズの場合、それはデザイン参照として扱い、完全なアニメーションリグとは見なしません。
  • 2Dの場合、デザインを維持するクリーンなベクター形状またはレイヤー化された透明アセットを作成します。
  • 3Dの場合、参照に基づいたシンプルなメッシュ/リグを作成します。正面/側面の参照画像があれば使用します。見えない詳細を、まるで見えているかのように作り出さないでください。

フェーズ 3 — パイプラインを選択する

2Dパイプライン

推奨実装:

  • HTML5 Canvas + JavaScript(手続き的/ベクターアニメーション用)、または
  • Pythonと適切な2D描画ライブラリ(コマ送りレンダリング用)。

要求された結果を確実に生成できる最もシンプルなパイプラインを選択します。キャラクターのパーツ(頭、胴体、上腕/下腕、手、上腿/下腿、足)は、必要に応じて分離しておきます。関節にピボットポイントを使用します。

アニメーション要件:

  • 固定タイムステップまたは決定論的なフレームサンプリングを使用し、同じフレーム番号が常に同じポーズを生成するようにします。
  • 位置、回転、スケールをスムーズなイージングで補間します。
  • すべての手足の端点を個別に移動させるのではなく、関節の回転を使用します。
  • アクションをサポートする場合にのみ、微妙な二次的な動きを追加します。
  • スタイルが要求する場合を除き、弾性オーバーシュートを避けます。
  • 線の太さ、関節の見え方、プロポーションを一貫させます。

Canvas実装の場合:

  • requestAnimationFrame はインタラクティブプレビューのみに使用します。
  • 最終出力の場合、タイムスタンプ/フレームインデックスで決定論的なフレームをレンダリングします。
  • フレームを画像シーケンスとしてエクスポートし、FFmpegでエンコードします。最終品質のためにリアルタイム画面録画に依存しないでください。

3Dパイプライン

推奨実装:

  • Blender Python APIを使用して、シーン作成、リギング、アニメーション、カメラ、ライティング、レンダリングを行います。
  • 頭、胴体、上腕/下腕、上腿/下腿に適切なボーンピボットを持つシンプルなアーマチュアを使用します。
  • IKは足/手の配置を改善する場合にのみ使用し、それ以外は明確なFKキーフレームを使用します。
  • ユーザーが詳細な3Dスタイリングを要求しない限り、マテリアルとジオメトリはシンプルに保ちます。

アニメーション要件:

  • Blenderのキーフレームとベジェ補間を使用して、スムーズな動きを実現します。
  • ハンドルの種類を意図的に設定し、オーバーシュートや意図しない揺れを避けます。
  • 歩く、走る、跳ぶ、向きを変える、物を拾うなどのアクションに対して、予備動作、接触、フォロースルー、落ち着きを使用します。
  • 接地している足を安定させて、実用的な範囲で足の滑りを防ぎます。
  • 関節の曲がり、クリッピング、地面との接触、シルエットの読みやすさを確認します。
  • 安定したカメラと一貫したライティングをショット間で使用します。

フェーズ 4 — モーションを計画する

コーディング前に、短いモーションプランを作成します:

  • 開始ポーズ。
  • メインアクション。
  • キーポーズとおおよそのタイムスタンプ。
  • 接触の瞬間(足が地面に着く、手が物体に触れる、着地)。
  • 二次的な動き(頭の回転、腕のフォロースルー、体の落ち着き)。
  • 終了ポーズと次のショットへの遷移。

1つの大きな動きではなく、ポーズの分解を使用します。たとえば、ジャンプには準備、離陸、空中ポーズ、着地、回復が含まれます。正確なタイミングは、要求された長さとトーンに適合する必要があります。

フェーズ 5 — スムーズさと品質管理

すべてのシーンに以下のチェックを適用します:

タイミングと補間

  • 位置、回転、スケールの急激な変化を避けます。
  • 開始と停止にはイーズの効いた遷移を使用します。
  • 一定速度を維持すべき動きにのみ線形補間を使用します。
  • アニメーションをレンダリング間で決定論的に保ちます。
  • 要求されたフレームレートと長さに対して十分なフレーム数があることを確認します。

キャラクターの一貫性

  • レンダリングされたキャラクターを参照画像と比較します。
  • 頭のサイズ、胴体の長さ、手足の長さ、線の太さ/マテリアル、色、アクセサリーを確認します。
  • ショット間でデザインがずれないようにします。

動きの読みやすさ

  • シルエットでアクションが理解できるようにします。
  • 手足が不自然に交差するのを避けます。
  • バランス、重心移動、接触、間隔を確認します。
  • アクションを隠してしまう過度なモーションブラーを避けます。

連続性

  • 接続されたショット間でキャラクターの位置と向きを一致させます。
  • 小道具の位置とシーンの地理的関係を維持します。
  • カットまたは意図的なカメラ移動を使用します。理由なくカメラを動かさないでください。

レンダリング

  • 最初に低解像度のショートプレビューをレンダリングします。
  • 代表的なフレームを検査し、可能であればプレビューを再生してペーシングとスタッターを確認します。
  • プレビューが承認された後、またはユーザーが直接最終レンダリングを要求した後にのみ、最終出力をレンダリングします。
  • 最終ファイルの存在、長さ、解像度、フレームレート、ビデオコーデック、オーディオ同期を確認します。

フェーズ 6 — YouTube対応MP4をエクスポートする

FFmpegが利用可能な場合は使用します。典型的なH.264エクスポートコマンド:

ffmpeg -framerate 30 -i frames/frame_%06d.png \
  -c:v libx264 -pix_fmt yuv420p -r 30 \
  -movflags +faststart output.mp4

オーディオが提供されている場合は、慎重に多重化し、ビデオの長さと一致することを確認します。ユーザーから提供され、使用許可が確認されていない限り、著作権のある音楽や効果音を追加しないでください。

Blenderの場合、信頼性が重要な場合は最初にレンダリング出力を画像シーケンスに設定し、その後FFmpegでシーケンスをMP4にエンコードします。これにより、レンダリングが中断された場合の再開が容易になります。

フェーズ 7 — 成果物

可能な限り、以下を提供します:

  • output.mp4 — 完成した動画。
  • ソースプロジェクト/コード — 例: .blend、.py、.html、.js。
  • character_design.md — 参照に一致するキャラクターデザインメモ。
  • README.md — 依存関係とアニメーションの再実行・変更方法。
  • プレビューレンダリングまたは選択されたプレビューフレーム。

正常に作成されたファイルを正確に記述します。レンダリングを完了できなかった場合は、プロジェクト/ソースを提供し、何をインストールまたは実行する必要があるかを明確に記述します。

推奨プロジェクト構成

stickman-project/
├── references/
├── assets/
├── scenes/
├── src/
│   ├── 2d/
│   └── 3d/
├── renders/
│   ├── preview/
│   └── frames/
├── output/
│   └── output.mp4
├── character_design.md
└── README.md

ツールと環境の確認

実装前に、実際にインストールされているツールを確認します:

  • Blender (blender --version)
  • FFmpeg (ffmpeg -version)
  • Python (python --version または python3 --version)
  • Node.js(選択した2Dパイプラインで必要な場合のみ)

ツールがインストールされていると想定しないでください。Android専用環境では、レンダリングにはクラウドコンピュータ、互換性のあるオンライン環境、またはBlender/FFmpegがインストールされたコンピュータが必要になる可能性があることを説明します。モバイルブラウザやClaude自身が、利用可能なレンダリング環境なしで複雑な3D MP4をレンダリングできるとは暗示しないでください。

対話スタイル

  • 技術的なステップを平易な言葉で説明します。
  • ユーザーが初心者の場合は、一度に1ステップずつ進めます。
  • 断片的なコードスニペットよりも、完全で実行可能なファイルを優先します。
  • コードはモジュール化して編集可能に保ちます。
  • レンダリングが失敗した場合は、実際のエラーを診断して修正します。要求された出力を静かに静止画像やモックアップに置き換えないでください。
  • バイラルビュー、収益化承認、アルゴリズムのパフォーマンスを約束しないでください。

完了チェックリスト

タスクが完了したと宣言する前に、以下を確認します:

  • 正しい2D/3Dモードが使用された。
  • 参照キャラクターデザインが維持されている。
  • モーションがスムーズで読みやすい。
  • シーン連続性が維持されている。
  • プレビューが検査された。
  • MP4レンダリングが成功した。
  • 解像度、アスペクト比、フレームレート、長さが正しい。
  • オーディオが存在する場合、同期している。
  • ソースファイルと再実行手順が可能な限り含まれている。

関連スキル