スキル

remotion-motion-graphics：Remotion でロゴとコピーを MP4 書き出し可能なモーションコードに変える

参考動画とロゴをコード化した動感タイポグラフィ／ブランドプロモーションモーションに変え、MP4 として書き出したいチームや個人に最適。使用前に Node.js 18+ と PATH 上の ffmpeg/ffprobe を確認する必要があり、初回レンダリング時には Chrome が自動ダウンロードされます。

公式ソース · agent-skill-remotion-motion-graphics

インストール

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

こんな人に向いています

このスキルは、モーションをコードとして管理したい人向けです。ブランド運用担当、ショート動画クリエイター、フロントエンド開発者など、参考動画 1 本とロゴ 1 つから kinetic-typography（動感タイポグラフィ）、ロゴアニメーション、ブランドプロモーション映像を作り、そのまま MP4 として書き出したい人に向いています。公式の説明によると、同じコードベースから 9:16 と 16:9 の 2 つのアスペクト比で出力できます。

次のような場合は向いていません：Node.js 18+（Remotion 4 に必要）がなく、PATH 上に ffmpeg / ffprobe がない環境では、分析・検査スクリプトが動作しません。また初回レンダリング時に Remotion が Chrome を自動ダウンロードするため、ネットワークが制限された環境ではこのステップで止まる可能性があります。公式エビデンスは他のランタイムやプラットフォームへの対応、およびどの言語のエージェントに対応するかについては言及しておらず、これらは不明です。

3 分で最初の試行を完了する

推奨されるメインの経路は Claude Code でのローカルインストールです：

  1. 前提条件：Node.js 18+、ffmpeg / ffprobe が PATH 上にあること。
  2. ターミナルで公式のインストールコマンドを実行し、スキルを ~/.claude/skills/ にコピーします：
git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg
  1. Claude Code で低リスクなタスクを起動します：参考動画 1 本とロゴ（SVG または Web サイト）を渡し、まずは分析のみを依頼します——エージェントに参考動画の contact sheets から beat map を生成させ、ブランド素材からカラー・フォント・コピーを抽出させ、ロゴのパスをマッピングして文字とグラフィックを別々にアニメーションできるようにします。分析段階ではまだレンダリングを依頼しないでください。

成功のサイン：エージェントが素材を読み込み、beat map とブランド要素の抽出結果を提示すれば、スキルのワークフローが機能しています。レンダリング段階ではコマンドの実行、ファイルの書き込み、Chrome のダウンロードが行われる点に注意してください。エビデンスにはレンダリング時に追加の確認が要るかどうかの記載がないため、実行前に出力先パスをエージェントと明確に合意してください。claude.ai / Cowork ユーザーにはこの経路がなく、公式が案内しているのは dist/remotion-motion-graphics.skill をダウンロードし、Settings → Capabilities → Skills からアップロードする方法で、これは別プラットフォーム向けの副次的な方法です。

使用例

事例 1：参考動画からリズムを抽出。競合のショート動画と自社ロゴをエージェントに渡し、beat map の生成とカラー・フォントの抽出を依頼し、最後にスキルの流れに沿ってコード化したモーションを生成して 9:16 の MP4 を書き出します。確認できるステップは素材の読み込みと beat map までで、レンダリングと完成映像の品質はエージェントの実際の実行に依存します。

事例 2：ロゴの登場アニメーション。ロゴの SVG を渡し、文字とグラフィックを別々にアニメーションさせたブランドプロモーション映像を 1 本作ります。スキルはロゴのパスをマッピングして要素を別々に動かします。書き出し前には公式の検証フローに従います：tsc の通過、0.3 倍スケールでの試しレンダリング、contact sheets の 1 枚ずつの確認、怪しいフレームの静止画レンダリングと修正、その後の最終レンダリング、そして完成映像からのフレーム抽出を証拠として取得します。確認できる最終シグナルは、MP4 とフレーム抽出の証拠を得たことです。

使用の境界

レンダリングでは tsc と Remotion のレンダリングコマンドが実行され、プロジェクトファイルに書き込まれ、初回実行時に Chrome がダウンロードされます——これらは公式に明記されている動作です。スキルの分析・検査スクリプトは ffmpeg / ffprobe に依存します。公式エビデンスに記載がない点：レンダリングにユーザー確認が必要か、具体的にどのパスに書き込まれるか、オフラインで動作するか、対応言語の範囲（README が英語だからといって英語素材のみと推測してはいけません）。スキルが出力するのはレンダリング済みの MP4 とコードであり、既存のユーザーファイルを直接変更するかどうかはエビデンスに記載がありません。ファイルシステムへの影響範囲はエージェントの実際の挙動を基準にしてください。2 つのプラットフォームでインストール方法が異なります：Claude Code は git clone + ディレクトリのコピー、claude.ai / Cowork は .skill ファイルのアップロードであり、互いに転用できません。