Communitygithub.com

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

リンク(リポジトリ、製品ページ、告知)やアイデアから、縦型(9:16)のペーパーカット・エクスプレイナー動画(MP4)をエンドツーエンドで作成します。部分的な依頼は各ステージのスキルに振り分け、他のツール向けのスタイルプロンプトも提供します。

モーション・エクスプレイナー とは?

このスキルは、Remotion を使って約20~45秒の縦型 (9:16) 短尺エクスプレイナー動画をフルパイプラインで生成します。動画はまるで段ボール紙を重ねたようなペーパーカット・アニメーション風で、質感のある紙の小道具、ドロップシャドウ、カクカクした切り抜きアニメーション、ストップモーション調の紙の微振動(ペーパーボイル)、ビートごとのテープで留めた見出しバナー、単語ごとに破れた紙のキャプションタグなどが特徴です。 ストーリー構成は「戦略→フック→スクリプト→ストーリーボード→設計→音声→シーン制作→QA→公開後分析」の9ステージに分かれ、各ステージは専用のスキル(motion-strategy など)が担当します。各ステージはファイルベースで連携するため、中断後の再開が容易です。ミニマル(スキルとスクリプトのみ)、スタンダード(レンダリングとプレースホルダ音声含む)、フル(ローカルTTSとワード単位のキャプション含む)の3つのインストールモードがあり、プローブにより自動判定します。 スタイルガイドやモーションプリンシパルは共有ライブラリで管理され、生成AIでアセットを作るためのプロンプトテンプレートも用意されています。再利用可能なキットコンポーネントやシーンテンプレートを優先して使うことで、無駄なコード記述を避けます。対応プラットフォームは Claude Code, Cursor, Codex などの AI エージェントハーネスです。

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

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

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

ドキュメント

ペーパーカット・エクスプレイナー

約20~45秒の縦型エクスプレイナー動画で、まるで重ねた工作用紙が命を吹き込まれたように見えます:質感のある紙の小道具とドロップシャドウ、カクカクした切り抜きアニメーション、スローなカメラのプッシュインとストップモーション調の紙の微振動、ビートごとにテープで留めた見出しバナー、単語ごとに破れた紙のキャプションタグ。Remotion、オプションのAI生成テクスチャアセット、任意のTTSを使って構築します。

各ビートは3つのトラックで構成されます:

  • ナレーションがストーリーを語る
  • テープバナーがナレーションでは触れられない確かな事実を追加する
  • 新しいペーパーセットがナレーションの言葉を図解し、製品UIを大まかなペーパーカットで再現してデモを行う

スタイルとストーリーテリングの方法は再利用しますが、サンプルの内容は再利用しません。サンプル内の製品、会社、数字はすべて架空のものです。スタイルルールは $MOTION_LIB/style/$MOTION_STYLE/docs/style-guide.md(セクション2がStyle DNA)にあります。

事前準備

  • ライブラリ. $MOTION_LIB が解決されていなければ、${XDG_CONFIG_HOME:-~/.config}/motion-explainer/config.env 内の MOTION_LIB= 行を参照し、それもなければ一度だけユーザーに尋ねます。マシンのパスをハードコードしてはいけません。ステージ1~4はライブラリを必要としません。
  • インストールモード. ステージを約束する前にプローブします(下記のインストールモードを参照)。
  • シリーズ. シリーズフォルダ(episodes/ を含む)を見つけます。存在すれば SERIES.md を読み込みます。

実行モード(先に確認)

  1. フルリール、アイデアからmp4まで:ステージ1~8、その後投稿後にステージ9。
  2. スクリプトのみ:戦略、フック、スクリプト(ステージングテーブルまでで停止)。
  3. 既存スクリプトからのストーリーボード:motion-storyboard。スクリプト、事実、HOOKブロックを尋ねます。
  4. 他のツール向けスタイルプロンプト:$MOTION_LIB/style/$MOTION_STYLE/docs/style-prompt.md の該当ブロックを提供して終了。
  5. 1シーンの修正または再構築:motion-build(シーンステップ)、その後 motion-qa。

インテーク(不足分だけ尋ねる)

  • ソース: 通常はリンク(リポジトリ、製品サイト、告知)。その他はすべてそこから調査します。
  • 動画が証明する唯一の主張、およびトピック。
  • 役割のフレーミング: 誰(何)が作業を行い、誰が助言・承認するか。ユーザーと確認し、製品の動作を勝手に作り出さない。
  • CTAキーワード と視聴者が得るもの(成果物)。
  • 長さ: デフォルト22~30秒。
  • 視聴者レベル(SERIES.md から)およびアクセントカラーやマスコット。

回答は episodes/NN-slug/research/facts.md の先頭にあるBRIEFブロックとして書き込みます(形式は motion-strategy に従う)。

ステージ

#ステージスキル読み込み書き込み
1戦略motion-strategySERIES.md、ソースresearch/facts.md のBRIEF、SERIES.md
2フックmotion-hookBRIEFvideo/STORYBOARD.md 先頭のHOOKブロック
3スクリプトmotion-scriptBRIEF、HOOKresearch/facts.md、narration/script.json、STORYBOARD.md のステージングテーブル
4ストーリーボードmotion-storyboardscript.json、STORYBOARD.mdSTORYBOARD.md のカメラ/カットテーブル、シーンブロック、SFX計画
5スキャフォールドと計画motion-buildSTORYBOARD.mdプロジェクト、episode.json
6音声とタイミングmotion-voicescript.json、voice/voice.jsonnarration/ テイク、public/vo/captions.json、src/plan.json
7シーン、サウンド、レンダリングmotion-buildplan.json、STORYBOARD.mdsrc/scenes/*、tools/cues.json、out/*.mp4
8QAmotion-qa静止画、STORYBOARD.md修正、納品サマリー
9投稿後motion-strategy(検証)、motion-build(収穫)プラットフォームの数字、プロジェクトresearch/analytics/、ライブラリのプロモーション

プロジェクトファイル

パイプラインはチャット内ではなくファイルで動作します。各ステージは上記のファイルを読み込み、自身のファイルを書き込むため、新しいセッションはどのステージからでも再開できます。

<シリーズ>/
  SERIES.md                  オプション: 視聴者、音声、パレット、マスコット、キーワードログ
  voice/voice.json           オプション: 音声設定(library/voice/voice.example.json をコピー)
  video-assets/              オプション: オーバーレイテクスチャと小道具
  research/analytics/        オプション: 競合調査と検証
  episodes/NN-スラッグ/
    research/facts.md        BRIEF + 出典付き事実
    narration/script.json    [{"id": "l1_hook", "text": "..."}, ...]
    video/
      episode.json           シーン、バナー、フック、ギャップ、BGM、カット
      STORYBOARD.md           HOOK、ステージングテーブル、カメラ/カットテーブル、シーンブロック

ライブラリカタログ:style/$MOTION_STYLE/remotion/CATALOG.md(全キットコンポーネント)と $MOTION_LIB/core/audio/CATALOG.md(全SFXとBGM)。これらは自動生成されるため、新規チェックアウト時には存在しないか古い場合があります。再構築するには python3 $MOTION_LIB/core/tools/catalog.py を実行します。エージェントはカタログを読み、キットのソースは読みません。

新しいコードを書く前に既存のものを再利用:キットコンポーネント、小道具セット、シーンテンプレートを優先します。SFXとBGMは名前で選択します。

インストールモード

  • ミニマル(スキルのみ):戦略、フック、スクリプト、ストーリーボード、スタイルプロンプト。レンダリングなし。
  • スタンダード:ミニマル + プレースホルダ音声(無音、またはmacOSの say)を使ったビルドとレンダリング($MOTION_LIB/core/tools/placeholder_vo.py 経由)、静止画QA、SFXとBGMオーディオ、完全なmp4。
  • フル:スタンダード + ローカルQwen3-TTSによるナレーションと実際の音声からのワード単位のキャプション。

プローブ(読み取り専用):

. "$(grep '^MOTION_LIB=' "${XDG_CONFIG_HOME:-$HOME/.config}/motion-explainer/config.env" | cut -d= -f2-)/env.sh"   # MOTION_PY, QWEN_TTS_PY を設定
node -v; ffmpeg -version | head -1
"$MOTION_PY" -c 'import numpy, PIL, soundfile'
"$QWEN_TTS_PY" -c 'import qwen_tts'

最初の3行が通ればスタンダード。qwen_tts のインポートも通ればフル。ステージが必要とする機能をインストールが満たさない場合は、1行でその旨を伝え、リポジトリルートから ./install.sh --doctor を実行し、アドリブで対処せずに motion-setup に引き継ぎます。ルートはインストールされたスキルフォルダ(.claude/skills、.agents/skills、.config/opencode/skills など)への readlink、または設定ファイル内の MOTION_HOME で見つけます。

全ステージ共通のルール

  • 戦略ノートはスタイルノートよりも優先:22~30秒、ニュース風のフックは使わない。
  • 独立した作業(シーングループ、背景と小道具、再レンダリング)は一度にエージェントで並列化する。
  • レンダリングは依頼があった時のみ行う。プレビューはRemotion Studioで行う。

共有リファレンス

  • $MOTION_LIB/style/$MOTION_STYLE/docs/style-guide.md:Style DNA、ペーパーカットの描画、パレット、フォント、テクスチャ、カメラとジッター、モーションタイミング、キャプション、サウンド。
  • $MOTION_LIB/style/$MOTION_STYLE/docs/style-prompt.md:他のエージェントやジェネレータ向けのポータブルプロンプト。
  • $MOTION_LIB/style/$MOTION_STYLE/docs/motion-principles.md:アニメーションの12原則をキットコンポーネントとヘルパーにマッピングし、各ステージでの使用方法を記載。
  • $MOTION_LIB/style/$MOTION_STYLE/remotion/RECIPES.md:Remotionコンポーネントのスケッチ。ライブラリがない場合に使用。
  • $MOTION_LIB/style/$MOTION_STYLE/docs/asset-prompts.md:何を生成し、何をコードでビルドするかの判断基準とプロンプトテンプレート。
  • $MOTION_LIB/style/$MOTION_STYLE/docs/frame-breakdown.md:約28秒の実例を0.2秒単位で分解。イベント密度は参考にしても内容はコピーしない。

ハンドオフ

フルリールの場合はステージ1から開始するか、実行モードで指定されたステージから開始します。インテーク後、motion-strategy を実行します。これは SERIES.md とBRIEFを読み込み、motion-hook に引き継ぎます。各ステージのスキルは次のスキルを指定します。

Individual skills in this repo

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

関連スキル