Communitygithub.com

atultiwari/remotion-motion-explainer

自己完結型のRemotionキットとランブックで、カラフルなモーショングラフィックス解説動画を「インシデントレポート」スタイルで作成:ニュースやインシデント解説、ケーススタディ、「何が問題で、医師が何を学ぶべきか」といった動画に最適。

remotion-motion-explainer とは?

このスキルは、ニュース解説やインシデントレポート、ケーススタディなど、タイポグラフィ、地図、新聞ページ、ゲージを多用したモーショングラフィックス解説動画を効率的に制作するための完全なプロジェクトテンプレートとランブックです。Claude CodeなどのAIエージェント向けに設計されており、テンプレート、スクリプト(Sarvam TTSやマスタリング用スクリプトを含む)、実例(`examples/fridge-hack/`)がすべてスキル内に自己完結して含まれています。ワークフローは9つのゲート(事実確認、ストーリー作成、動画プレビュー、静止画QA、音声生成、ワードキュー設定、サウンド、レンダリング、チャプター作成)で構成され、各ステップで参照する詳細なドキュメントが整備されています。また、非ネゴシエイトルールとして、実在のロゴや攻撃コードの禁止、推測による帰属の回避など、安全で倫理的な動画制作を徹底します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/atultiwari/remotion-motion-explainer/tree/HEAD

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

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

ドキュメント

モーションエクスプレーナー

完全な動画プロジェクトテンプレートと、『冷蔵庫がハッキングされた:医師がAIセキュリティについて学ぶべきこと』(11分05秒、49シーン、2026年10月)を制作したランブックが同梱されています。このスキルに必要なものはすべて含まれています: テンプレート(template/)、そのスクリプト(Sarvam TTSとマスタリングスクリプトのコピーを含む)、および実例(examples/fridge-hack/)。元のプロジェクトフォルダを参照するものはありません。

どのスキルをいつ使うか

動画の種類スキル
ニュース、インシデント、ケーススタディ、「Xからの教訓」:タイポグラフィ、地図、新聞ページ、ゲージ本スキル
描かれた絵、ペンと手、一筆一筆の解剖図や図解remotion-whiteboard(変更なし;描かれたものすべてに必要)
作業順序、クレーム、スクリプト、音声、ゲート(あらゆる動画)youtube-video-production(そのmotionモードはここを指します)
サムネイル、カルーセル、LinkedIn/Instagram/WhatsApp用コピー、YouTubeアップロードvideo-promo-kit

クイックスタート

node ~/.claude/skills/remotion-motion-explainer/scripts/install.mjs ~/Projects/remotion-projects/<name>
cd ~/Projects/remotion-projects/<name> && npm run dev

テンプレートは冷蔵庫ハックのストーリーで開き、見た目がすぐに確認できます。 src/data/scenes.json を新しいストーリーに置き換えてください。

作業の順序(ゲートは太字)

  1. まず事実。 ナレーションの前に、出典付きのファクトシートを作成します。画面上のすべての数値には sourceCitation が必要です。
  2. ストーリー → scenes.json。 シーンごとのナレーション、コンポーネント+プロパティ、引用。 npm run estimate && npm run narration;npm run tts:lint で lint します。
  3. 仮のキャプション付きサイレントプレビュー。 文単位のキャプション、推定時間。 ここでオーナーがストーリーを承認します。これより前には TTS は行いません。
  4. 静止画 QA: npm run stills、コンタクトシート、重なりを修正(references/05)。
  5. 音声: npm run tts → npm run tts:check(Whisper、すべてのテイク) → 再テイクまたは再ワード → npm run tts:master → npm run captions。シーンの長さはオーディオから決まります。
  6. ワードキュー: イベントを特定の単語に合わせる必要があるプロパティに {"atWord": "…"} を追加します。
  7. サウンド: エフェクトはコンポーネントから発火します。オーディオのみのレンダリングでフルミックスを確認します(目標 −14 LUFS、≤ −1 dBTP)。
  8. レンダリング はオーナーが許可した場合のみ行います(references/05)。
  9. チャプター(npm run chapters)、その後 video-promo-kit に引き継ぎます。

詳細情報の所在

ファイル参照タイミング
references/01-look-and-story.mdステップ1–2:ビジュアル言語、ストーリーアーク、モチーフ、記述ルール
references/02-scene-graph.mdステップ2:scenes.jsonのすべてのフィールド、ワードキュー、トランジション
references/03-components.mdステップ2–4:コンポーネントカタログ、プロパティ、レイアウトルール、追加方法
references/04-voice-and-sound.mdステップ5–7:Sarvam、Whisperチェック、マスタリング、キャプション、エフェクト、音楽、レベル
references/05-qa-render.mdステップ4、8、9:静止画、コンタクトシート、レンダリング、検証、チャプター
references/06-lessons.md何かがおかしい場合:これまでに犯したすべてのミスとそのルール
examples/fridge-hack/実例:scenes.json、ナレーションスクリプト、ステータス、教訓、見た目の静止画

非ネゴシエイトルール

  • 実在のロゴやブランドマークは使用禁止。アウトレット名や会社名はプレーンテキストで。見出しは言い換える。創作したビジュアルには「イラスト」と明記する。
  • セキュリティ関連動画では、攻撃の手順、コード、方法を決して含めない。
  • 帰属について推測しない。「<日付>時点では公には帰属されていない」と記載する。
  • オーナーがスクリプト、サムネイル、レンダリングを承認する。不明な点があれば質問する。

関連スキル