Communitygithub.com

iaquetrabaja/skill-animados

説明アニメーション動画(Reels、TikTok、Shorts)を、録画も編集もせずに作成します。Claudeがテーマを調査、4つのフック付き脚本を作成、AI音声を生成、各イラストと音声をRemotionで同期、フレーム単位で動画をチェックし、投稿文とサムネイルと共に納品します。「〜のアニメ動画が欲しい」「〜を解説するリール」「豆知識系の動画」「録画なしで動画を作って」と頼まれたら使ってください。

skill-animados とは?

このスキルは、Reels、TikTok、Shorts向けの短い説明アニメーション動画を、撮影や動画編集ソフトを使わずに完全にコードで生成するためのAIエージェント(Claude Codeなど)向けのツールです。ユーザーが「〜のアニメ動画が欲しい」と依頼すると、Claudeがテーマを調査し、4つの異なるフックを含む脚本(70〜110語)を執筆します。その後、AI音声(ローカル音声クローンまたはElevenLabs)を生成し、Remotionというコードベースの動画フレームワークを使って、各単語とイラストを完全に同期させたアニメーションをレンダリングします。最大の特徴は、フレーム単位での徹底的なレビュー工程です。専用のツールで動画をフレームごとに確認し、イラストと音声の同期ずれやUIの問題をすべて修正してから納品します。対応プラットフォームは主にClaude Codeですが、Remotionを使える環境であればCursorやCodexでも応用可能です。ユーザーは事前に参考資料(`referencias/`フォルダ)と好みのスタイルガイド(`gusto.md`)を読んでおくことで、より品質の高い動画生成が可能になります。

対応✓Claude Code~Codex CLI~Cursor
npx skills add iaquetrabaja/skill-animados

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

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

ドキュメント

Animados:録画しない動画、書く動画

この手の動画は約1,000~2,000枚のイラスト(毎秒30枚)で構成され、声が各単語を発する正確なタイミングでイラストが切り替わります。動画編集ソフトは一切使いません。Remotionでコードを書き、自動レンダリングします。

以下の順序で作業します。手順を飛ばさないでください。最も飛ばされがちな工程はレビューですが、これこそが「見られる動画」と「300再生で止まる動画」を分ける決定的な工程です。

0. 開始前

  • referencias/05-taller.md を読み、テンプレートを使って動画用フォルダを準備します。
  • referencias/gusto.md を読みます。これがAIっぽさを消すポイントです。
  • ユーザーが voz.md や自身の音声サンプルを持っている場合はそれを使用します。持っていない場合は、ただ一つだけ質問します:動画のターゲットは誰ですか?

1. 調査(referencias/04-investigacion.md)

  • テーマに関する実際の回答を、少なくとも3つの情報源から見つけます。そのうち1つは一次情報源(メーカー、規格、研究、著者付きの記事)にします。
  • 各データとその出典を investigacion.md に記録します。出典のないデータは脚本に入れません。
  • 誰も語らない詳細を探します。動画の見どころは「知らなかった」という驚きです。

2. 脚本とテキスト(referencias/01-guion-y-texto.md)

  • 最初の1秒間に向けた4つの異なるフックを書き、ユーザーと一緒に選ぶか、ユーザーが不在の場合は評価基準に最も合うものを選びます。
  • 脚本を書きます:70~110語(25~40秒)、一文4~12語、一文につき一つのデータ、そしてフックに戻る締めくくり。
  • 投稿文と3つのサムネイル案を書きます。

3. 音声

  • デフォルト:無料のローカル音声 python herramientas/voz_local.py guion.txt voz.wav --muestra mi_voz.wav --texto-muestra "サンプルで話す内容" これにより、ユーザーの音声サンプル10~20秒から声をクローンします(高速処理にはNVIDIA GPUが必要)。
  • 数字や略語:guion.txt では [ISO 11540|ISO 一一五五〇〇] のように記述します。音声は右側を読み上げ、字幕は左側を表示します。
  • ユーザーがElevenLabsを希望する場合、APIを使ってそのユーザーの声で voz.wav を生成します。動画1本あたり数セントのコストです。
  • 結果全体を聞くか、palabras.py で文字起こしして確認します。単語の発音が変な場合は、無理に発音させずに文全体を書き直します。

4. 単語ごとの同期

  • python herramientas/palabras.py voz.wav plantilla/public/cues.json --guion guion.txt これにより cues.json が作成され、各単語とその正確な秒数が記録されます。--guion オプションを使うと、テキストは脚本から取得され、音声からはタイミングだけが抽出されるため、文字起こしの誤りが混入しません。
  • フレーズ→イラスト対応表を作成します(referencias/02-frase-a-dibujo.md):各フレーズに対して、何が見えるか、どの単語で切り替わるか、どのような動きがあるかを記述します。

5. アニメーション(referencias/03-movimiento-y-sincro.md)

  • シーンを plantilla/src/escenas.tsx に記述します。各シーンはSVGまたはReactコンポーネントで、cue("単語") で開始します。手動で秒数を指定して開始してはいけません。
  • 新しい要素は最大でも0.5秒に1つまで。何も表示されずに動くことはなく、理由なく動くこともありません。
  • 字幕は2~4語で、キーワードを強調表示します。テンプレートにあらかじめ用意されています。

6. フレームごとのレビュー

  • npx remotion render src/index.ts Video ../salida/video.mp4 を実行後、python herramientas/revisa.py salida/video.mp4 を実行します。これにより、0.5秒ごとに1フレームを切り出したチェックシートが出力されます。
  • チェックシートを確認し、以下を検証します:
    • 各イラストが対応する単語のタイミングで表示されているか(前後3フレーム以内のずれは許容、それ以上は不可)。
    • イラストが画面端で切れていないか。
    • テキストが字幕と重なっていないか。
    • ちらつきがないか。
  • 問題を修正し、再レンダリングします。チェックシートが完全になるまで繰り返します。確認せずに納品してはいけません。

7. 納品

  • salida/video.mp4(1080×1920、30fps)と、投稿文、3つのサムネイル(salida/portada-*.png)、情報源リスト。
  • 1行で、何を確認したか、何を確認できなかったかを報告します。

サンプル

ejemplos/ には3本の完全な動画(ボールペン、地下鉄、缶)と、その脚本、調査と情報源、シーンが含まれています。初めてアニメーションを作る前に必ず読んでください。目指す水準を最も早く理解できます。

絶対に破ってはいけないルール

  • 創作は禁止:出典がないデータは脚本に入れません。
  • ブランド名や他者の動画は引用のみ許可。イラストや音楽のコピーは禁止。
  • 画面上に絵文字は使わず、有名人の声も使いません。

関連スキル