Communitygithub.com

モーション・グラフィックス

コードからアニメーションビデオを作成する際に使用します。モーション・グラフィックス、キネティックタイポグラフィ、説明・製品発表ビデオ、アニメーションタイトル、ロワーサード、ロゴスティング、アニメーションチャートや統計、Reels/Shorts/TikTokクリップなど、「これを動かして」というリクエスト全般に対応します。16種類のビジュアルスタイルを提供し、HTMLシーンとして映像を構築、フレーム単位でMP4/WebM/MOV/GIF（必要に応じて透明化）にレンダリングし、結果を検証します。また、より適切なエンジン（Remotion、HyperFrames、Manim、Motion Canvas、Lottie）があれば振り分けます。既存の映像編集、スライドショー、単純なFFmpeg処理には「video-making」スキルを使用してください。

モーション・グラフィックス とは？

このスキルは、AIエージェント（Claude Code等）向けに設計されたモーション・グラフィックス制作ツールです。ユーザーの依頼に基づき、コードからアニメーションビデオを生成します。主な特徴として、16種類のビジュアルスタイルから選択可能、シーンベースのストーリーボード作成、HTMLページとしてのビルド、フレーム単位でのレンダリング（MP4/WebM/MOV/GIF）、透明化対応、検証機能を備えています。`scripts/mg.py`という単一のPythonスクリプトと`assets/mg.js`ランタイムで駆動し、レンダリングは決定論的で、毎回同一の結果が得られます。ワークフローは、ブリーフィング、スタイル選択、ストーリーボード作成、ビルド、レンダリング、検証の順に進みます。また、品質基準として、フック、フォーカス、可読性、動きの継続、セーフエリアなどを厳格にチェックし、結果を確認したうえで納品します。他のエンジン（Remotion、Manim等）へのルーティングも可能で、適切なエンジンを自動的に推奨します。このスキルは、マーケティング動画、製品デモ、ソーシャルメディアクリップ、データビジュアライゼーション、プレゼンテーションなど、短いアニメーションビデオを迅速かつ高品質に制作したいあらゆる場面で役立ちます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SahilRakhaiya05/Father-Using-This-Skills/tree/HEAD/private/motion-graphics
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

モーション・グラフィックス は何をしますか？

あなたはディレクター、デザイナー、そして編集者です。仕事は意図的に作られた短編映画です。一つのルック、明確なストーリー、意味のある動き、そしてどこでも再生できるファイルを提供します。

すべては一つのツール、scripts/mg.py、そして小さなランタイムassets/mg.jsによって駆動されます。映画はシーンのHTMLページであり、すべてのフレームは時間のみから計算されるため、レンダリングは毎回同一になります。

Python 3.8以上、pip install playwright pillow、python -m playwright install chromium、ffmpegが必要です。最初にこれらを確認し、何かをインストールする前にユーザーに尋ねてください。

ワークフロー

手順を順番に実行してください。手順1〜2は会話です。ルックとストーリーボードが合意されるまではレンダリングしないでください。ただし、ユーザーが「ただ作って」と言った場合は除きます。

1. ブリーフ — 不足している情報のみを尋ねる

決定事項デフォルト（指定がない場合）
メッセージ — 視聴者が覚えておくべきこと尋ねる; 決して推測しない
再生場所 → フォーマット16:9 (YouTube/Web/スライド) · 9:16 (Reels/Shorts/TikTok) · 1:1 または 4:5 (フィード)
長さ15〜30秒 (ソーシャル) · 30〜60秒 (ローンチ) · 60〜90秒 (説明)
ブランド — 色、フォント、ロゴスタイルを選び、そのアクセントカラーを上書き
サウンド — 音楽、ナレーション、無音まず無音のドラフトを作成; ミュートでも機能する必要あり

2. スタイル — ユーザーに選ばせる

python scripts/mg.py styles                          # 16のルックとその動きの特性
python scripts/mg.py pick styles.png --format 9:16 --title "彼らの見出し"

pickは、ユーザーの見出しをすべてのスタイルで一枚のシートにレンダリングします。それを表示し、ユーザーにどのスタイルが欲しいか尋ねます。ユーザーに意見がない場合は、以下の表から一つを推奨し、その理由を一文で説明します。

その映画が…開始スタイル
製品または機能ローンチ、UIsaas-glass、clean-minimal、sunset-gradient
フックファーストのソーシャルクリップ、誇張、大きな言葉bold-kinetic、neo-brutal、sunset-gradient
数字、レポート、年間総集編data-story、corporate
ストーリー、エッセイ、引用、ドキュメンタリーeditorial、cinematic-dark、paper-craft
開発者ツール、CLI、アーキテクチャmono-terminal、blueprint、neon-cyber
プレミアムブランド、招待状、不動産luxury、cinematic-dark
子供向け、教育、お祝いplayful、paper-craft
レトロ、ゲーム、音楽retro-vhs、neon-cyber

スタイルとは、色 + タイプ + 動き方（登場、イージング、速度、トランジション）です。一つの映画で2つのスタイルを混ぜると、ミスのように見えます。ブランドルックの場合は、スタイルを拡張する小さなJSONを作成します — references/styles.mdを参照してください。

3. ストーリーボード — HTMLの前に書く

storyboard.jsonを書きます: 順序付けられたシーンのリスト。シーンごとに一つのアイデア、画面上のテキストは12語以内、最初のシーンはフックにします。

{"scenes": [
  {"type": "title",   "kicker": "Launch week", "title": "Ship faster with *Orbit*", "subtitle": "Deploys your team will like"},
  {"type": "bullets", "title": "Three things change", "items": ["One command", "4-second rollbacks", "Previews per branch"]},
  {"type": "stat",    "kicker": "Median deploy", "value": 4.2, "suffix": " s", "label": "down from 3 minutes"},
  {"type": "bars",    "title": "Deploys per week", "items": [{"label": "Before", "value": 12}, {"label": "After", "value": 58}]},
  {"type": "cards",   "title": "Built for teams", "items": [{"title": "Secure", "text": "SSO and audit log"}]},
  {"type": "quote",   "text": "We stopped fearing *Fridays*.", "by": "Head of Platform"},
  {"type": "end",     "title": "Try *Orbit* today", "cta": "orbit.example"}
]}

*単語*はアクセントワードを示します。シーンの長さは、"dur"を指定しない限り、単語数から計算されます。カスタムマークアップ用に、どのシーンでも{"type": "html", "html": "…", "dur": 4}を設定できます。ストーリーボードを短い表（シーン · 画面表示 · 秒数）としてユーザーに表示し、承認を得ます。

4. ビルド

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

これにより、film/index.html、film/theme.css、film/mg.jsが書き込まれます。index.htmlをブラウザで開くと、スクラバー付きのライブプレビューを確認できます。その後、HTMLを手動で編集して演出を指示します: ビートの並べ替え、登場方法の変更、チャートやSVGの追加など。アトリビュートリファレンス — アニメーション、イージング、トランジション、カメラ移動、ループ、カスタムキャンバスコード — はreferences/authoring.mdにあります。手動編集の前にこれを読んでください。

レンダリングを正確に保つためのルール（リンターが強制します）:

  • モーションはdata-*アトリビュート、またはMG.frame(t) / MG.scene()コールバックからのみ発生します。CSSのtransition/animation、タイマー、Date.now()、Math.random()は使用しないでください — 代わりにMG.rand(seed)を使用します。
  • フォント、画像、スクリプトはプロジェクトフォルダ内に配置します。ネットワークが必要なレンダリングは再現可能ではありません。
  • 映像素材はここではレンダリングしません。--alphaフラグを使用してグラフィックスをレンダリングし、クリップの上に重ねます（ステップ6）。

5. レンダリング前に確認

python scripts/mg.py lint film                 # 決定論性、未知の名前、読み取り時間、長時間ホールドの確認
python scripts/mg.py sheet film sheet.png      # コンタクトシート + フレーム外/クリッピング/テキスト重複レポート

シートを開いて確認します。 references/motion-craft.md（階層、セーフエリア、フレームごとのフォーカス）に照らして確認します。修正し、再実行し、繰り返します。レンダリングは遅いステップです。シートは数秒で完了します。

6. レンダリング

python scripts/mg.py render film draft.mp4 --scale 0.5            # タイミングを判断するための高速ドラフト
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # 変更した部分のみ
python scripts/mg.py render film final.mp4 --audio music.mp3      # フル品質、最後に音楽がフェードアウト
python scripts/mg.py render film lower-third.mov --alpha          # 透過ProRes 4444（または.webm）
python scripts/mg.py render film loop.gif --scale 0.4             # チャットやドキュメント用GIF

ドラフトを表示し、メモを取り、変更し、変更範囲のみを再レンダリングします。最後に1回だけフル品質のレンダリングを行います。透過グラフィックスを映像に重ねるには:

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7)'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

サウンド、ナレーションのタイミング、キャプション: python scripts/mg.py cues film cues.jsonは、すべてのシーンとアニメーションの開始時間を一覧表示します。これを使用して、効果音と字幕を正確に配置します。詳細はreferences/sound-and-captions.mdを参照してください。

7. 検証、そして納品

python scripts/mg.py check final.mp4 --project film

サイズ、フレームレート、長さ、コーデック、ピクセルフォーマットをプロジェクトに対して確認し、デッドホールド（何も動いていない）、黒フレーム、クリッピング、またはほぼ無音のオーディオについて警告します。OKが表示された後にのみ納品してください。ユーザーにファイル、1行の事実（長さ、サイズ、スタイル）、および変更可能な内容を伝えます。

品質基準 — すべての映画をこれに照らしてチェックする

  1. 最初の2秒以内にフックがあること。 フレーム15までに判読可能で動いているものがあること。
  2. フレームごとにフォーカスを一つに。 2つのものが同時に入ってくる場合は、それらは一つのグループであること。
  3. ミュート時、スマートフォンで読めること。 本文テキストは短辺の4%以上。ホールド時間は最後の登場後、約0.4秒 + 単語あたり0.16秒。
  4. 約2.5秒以上、何も静止してはいけない — シーンはデフォルトでゆっくりとしたカメラプッシュを伴う; それを維持すること。
  5. 登場は速く、退場はさらに速く、ホールドは正直に。 登場0.3〜0.8秒、退場はその約70%。
  6. スタッガー（ずらし）を使い、一斉に動かさない。 兄弟要素間は0.04〜0.1秒; スタッガーの合計は約0.8秒以内。
  7. 映画全体で一つのトランジション言語を使用。大きな瞬間のためにのみ、第二の言語を使用してもよい。
  8. セーフエリア。 すべての端から5%。9:16では、下部20%と上部12%はテキストを配置しない。
  9. アクションで終わる — 最終フレームは次に何をすべきかを示し、1.5秒以上ホールドすること。

別のエンジンが適している場合

mg.pyは、タイポグラフィ、レイアウト、チャート、UIスタイル、透過オーバーレイを、ビルドステップなしでカバーします。ジョブがそれ以外の場合は切り替えます — references/engines.mdにコマンド、ライセンス、トレードオフが記載されています:

必要なもの使用するエンジン
Reactコンポーネント、データ駆動のバッチ、既存のRemotionプロジェクトRemotion（会社向けライセンスに注意）
GSAPタイムライン、コンポジション内のビデオ/オーディオクリップ、エージェントファーストのHTMLHyperFrames（Apache-2.0）
数学、方程式、幾何学、アルゴリズムのビジュアルManim Community
エディター付きの手書きTypeScriptアニメーションMotion Canvas
アプリやサイト内に組み込むアニメーションLottie / CSS / GSAP — ビデオではない
3Dシーン、シェーダーThree.js（MG.frame(t)から駆動）、またはBlender
映像のカット、スライドショー、クリップへのキャプションvideo-makingスキル

動作中のプロジェクトを、依頼なしに別のエンジンに移行しないでください。

リファレンスファイル — タスクに必要なものだけを読み込む

ファイル読むタイミング
references/authoring.mdシーンを手動編集するとき; アトリビュート、イージングまたはトランジション名、カスタムキャンバス/SVGコード
references/styles.mdスタイルの選択、混合、作成; ブランドカラーとフォント
references/motion-craft.mdコンタクトシートまたはドラフトの評価; ペーシング、階層、タイポグラフィ、よくある間違い
references/sound-and-captions.md音楽、効果音、ナレーションのタイミング、字幕、ラウドネス
references/engines.mdRemotion、HyperFrames、Manim、Motion Canvas、Lottie、3D
references/recipes.md既成パターン: ロワーサード、ロゴスティング、キネティック歌詞ライン、チャートレース、UIモック、カウントダウン、エンドカード

正直な制限事項

  • フォントはマシンにあるものにフォールバックします。正確に一致させるには、フォントファイルをプロジェクトに配置し、@font-faceを宣言します（事前にフォントのライセンスを確認してください）。
  • --scale 0.5のドラフトはタイミングの判断には使えますが、シャープネスは判断できません。
  • チェックは機械的な欠陥を検出します。味付けには依然として目視が必要です。常にシートとドラフトを自分で確認し、あなたが見たものを（推測ではなく）伝えてください。
  • ユーザーが所有しているか、使用ライセンスがあるアセットのみを使用してください。持ち込んだものの出典とライセンスを明記してください。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

video-making

Use this skill whenever the user wants to create, edit, or convert a video file (.mp4, .mov, .webm, .gif) — slideshows from images, clips with text or captions, trimming, merging, adding music or voiceover, resizing for social media, or rendering animations to video.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community