Communitygithub.com

motion-storyboard (紙上ストーリーボード)

コードを書く前にペーパーカット風のスクリプトをストーリーボード化します。シーンごとにカメラ/カットテーブル、フレーム単位のイベント、SFX計画、プルーフビートを作成します。「このスクリプトをストーリーボード化して」「カメラの動きとカットを計画して」などの指示で使用します。

motion-storyboard (紙上ストーリーボード) とは?

このスキル「motion-storyboard」は、Papercut(ペーパーカットアニメーション)スタイルの動画制作において、コード記述に先立って視覚的な設計図(ストーリーボード)を作成するためのClaude Code用ツールです。Camera/Cutテーブルを生成し、各シーンに割り当てるカメラ動作(例:OrbitCamera、Crane、DollyZoomなど)とカット種別(ハードカット、ワイプ、ページめくりなど)を明確に定義します。これにより、シーンエージェントが独自にカメラを発明することを防ぎ、キットのカメラ動作を一貫して使用できるようになります。 ストーリーボードは、narration/script.jsonとvideo/STORYBOARD.md(HOOKブロックとステージングテーブルを含む)に依存します。各シーンブロック(1.5〜5秒)には、VOの各ストレスワードに対するフレーム単位のイベント、アンビエントモーション、SFX、プルーフビート(実際のスクリーンショットをペーパーカードに貼り付けたもの)が含まれます。エアサウンドの間隔制限(2.5秒あたり最大1つ)や、CameraPushの使用上限(全シーンの3分の1以下)などの品質ゲートも設定されています。 このスキルはClaude Code向けに設計されており、エージェントはこれに基づいて後続のmotion-build(プロジェクトスキャフォールディングとepisode.json生成)に引き継ぎます。タイミングセクションは後で音声収録後に生成されるため、この段階では出力しません。

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

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

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

ドキュメント

Papercut ストーリーボード

ストーリーボードはすべてのシーンの設計図です。各シーンのカメラ動作とカットを指定するため、シーンエージェントが独自にそれらを発明することを防ぎます。「CameraPushまたは独自のトランスフォーム」とだけ書かれた簡単な指示では、すべてのシーンで単調なプッシュか手作りのズームが使用され、キットのカメラ動作は使われなくなります。

事前準備

  • インストール: 最小構成で十分です。ライブラリを使用する場合は、style/$MOTION_STYLE/remotion/CATALOG.md(「paper/camera.tsx」および「paper/transitions.tsx」セクション)を確認し、各動作のプロパティと適切な使用場面を把握してください。ファイルがない、または古い場合は、python3 $MOTION_LIB/core/tools/catalog.py を実行してください。$MOTION_LIB は環境変数から解決し、なければ ~/.config/motion-explainer/config.env の MOTION_LIB= 行を参照し、それもなければ一度だけユーザーに問い合わせてください。
  • narration/script.json と、HOOKブロックおよびステージングテーブル(バナー、セット、小道具、UIモーメント、マスコット、ギャグを行ごとに記載)を含む video/STORYBOARD.md が必要です。ない場合は、motion-hook と motion-script を実行してください。
  • セット選択のための背景シート: style/$MOTION_STYLE/remotion/public/bg/backdrops/_sheet.jpg。現在のステップに必要なものだけ開いてください。

1. グローバルルール

以下を STORYBOARD.md の先頭、HOOKブロックの下に記述します。役割ごとにパレット(セットごとに背景色をローテーション): $MOTION_LIB/style/$MOTION_STYLE/docs/style-guide.md のセクション5。フォント: セクション6。キャンバスとゾーン: セクション4。単一の拡張メタファーに適した機能アンロックは、セクション12を使用できます。

  • 1080x1920、30 fps。バナーは高さ14〜21%、キャプションバンドは68〜80%(顔の位置に応じてシーンごとにずれます)、下部20%はクリア。
  • 光源は左上から。彩度はキャラクター、キャプション、シグナルのみに適用。

2. カメラ/カットテーブル

シーンブロックの前に、シーンごとに1行のテーブルを記述します。各行はキットの paper/camera.tsx のコンポーネントと、そのシーンへのカットインの CutSeries 種別(paper/transitions.tsx から)を指定します。

シーンカメラ (paper/camera.tsx)カットイン (CutSeries 種別)
S01HookOrbitCamera + Depth, <単語> で SnapZoomなし
S04NameCrane で <焦点小道具> まで上昇tearAway
S09PeakCrabTrack で <ラインアップ> に沿って移動whip
S10CTARackFocus <小道具> から電話へtapePull
  • カメラオプション: OrbitCamera + Depth、SnapZoom、Crane、CrabTrack、DollyZoom、RackFocus、ForegroundPass、DutchTilt、FocusPulse、FreezeFrame、PullBack、PovMask、TimeRamp、TiltShift、FocusHunt、Handheld、CameraPush(paper/kit.tsx から)。カタログの paper/camera.tsx セクションに各々の使用条件が記載されています。
  • カットオプション: hard、whip、zoomThrough、pageTurn、tearAway、tapePull、stampCut、infiniteZoom、popUpBook、keyhole、burnAway。
  • 単純な CameraPush は全シーンの3分の1以下にのみ使用できます。
  • 各行のカメラを対応するシーンブロックのヘッダーにコピーします。カット列は episode.json に "cuts": {"S04Name": {"kind": "tearAway"}} として書き込まれ(エントリがない場合はハードカットを意味します)、motion-build がそれを補完します。

3. シーンブロック

シーンごとに1ブロック、各1.5〜5秒、文の区切りでカットします。

## S03: <ビート>  (5.6-8.2 s, 78 f)   BANNER: <大文字のテイクアウェイ>
Location/bg: <ワールド上の場所 + 背景色>     Camera: <テーブルからコピーした camera.tsx コンポーネント + パラメータ>   Cut in: <種別>
Cast: <キャスト、アクセサリー>                       Caption band: y=0.76
| VO 単語 (強調) | フレーム | イベント                                    | モーション仕様                   |
| "<単語>"       | +6    | <小道具が入場 / 状態が切り替わる / 動作>       | <spring/slide/swap + フレーム数> |
Ambient: <LED点滅、アイドルボブ、星、画面波形>
Boil: バナー + ラベル、±1.5 px を2フレームごとに
SFX: <ポップ、チャイム、クリック...>
  • ステージングテーブルの各行をフレーム単位のイベントに展開します: 強調された単語ごとに1つ(0.4〜0.8秒ごと)、アンビエントモーションは常にオン。フレームは単語からのオフセットで、後で cueOf(ID)(word, n) で読み取られます。
  • 製品UIは、紙のモニターやラップトップ上でのラフな再構築であり、偽のインタラクション(カーソルクリック、タイピング、プログレス、波形、リストスクロール)を含みます。
  • プルーフ: リールごとに1回、ソースページの実際のスクリーンショット($MOTION_LIB/core/tools/capture.mjs によるブラウザキャプチャ、再描画ではありません)を紙のカードに貼り付け、赤いマーカーで主要なラインの周りに円を描くようにセルフドローイングします。他のすべての要素はラフなペーパーカット再構築のままです。
  • CTAの前に、以前のセットへのコールバックを1つ含めます。

4. カメラとトランジションのルール

  • すべてのシーンに1つの動きがあります。スロープッシュが基本です。明るいセットでは奥行き感を出すためにパララックスオービット、数字やジョークには強調単語でのパンチインまたはスナップズーム、前景通過(ぼかした紙オブジェクトをレンズの前で通過)、ラックフォーカス、スケールを明らかにするためのプルバック、苦闘するマスコットのビートではフリーズフレームとラベルを追加します。
  • バナー変更時はほとんどの場合ハードカット。トピック変更時2〜3回にモーションブラーのあるワイプパン、画面、ドア、ミラーの「内部」に入る際はズームスルー、リールあたり最大1回のページめくりまたは引き裂き(キャッチまたはビフォー/アフターのコントラスト時)、そしてCTAへのテーププル(シンプルなクラフトストリップ、オプションで単語を印刷する label 付き)を使用します。
  • フックからのカットアウトは動きを継続します。motion-hook のルールをS01とS02に適用します。
  • トランジションは6〜12フレームで実行され、それぞれにSFX(ワイプ、ズーム、ページめくり、引き裂き、テープはがし)が付随します。
  • ライブラリプロジェクトでは、キットのトランジションシリーズでシーンをチェーンします。これにより、各シーンの開始が plan.json のフレームに保たれ、音声との同期が維持されます。

5. SFX計画

  • エアサウンド(ウィッシュ、スライド、ワイプ、ズーム)はまとめて: リールの2.5秒あたり最大1つ。cues.py はそれを超えると注意書きを出力します。目安として、33秒で12個は許容範囲、26秒で24個は気が散ります。
  • 入場には接触音(ポップ、サッド、スタンプ)または無音を使用します。オーディオレンダリング前に tools/cues.json でカウントしてください。
  • SFXは各ブロックの SFX: 行で $MOTION_LIB/core/audio/CATALOG.md から名前を指定します。シーンエージェントは実際の行を tools/cue_sheet.d/<Scene>.json に書き込みます。
  • ベッドプリセット(episode.json の「bed」)を選択し、cutSfx をカット種別に合わせて設定します: tearAway → 引き裂き音、tapePull → テープはがし音。

ゲート

  • すべてのシーンにカメラとカットインが設定され、単純な CameraPush は全シーンの3分の1以下であること。

  • すべての強調単語にイベントがあり、アンビエントモーションがリストされていること。

  • プルーフビートが1つ、コールバックが1つ、CTAへのテーププルまたはワイプがあること。

  • ページめくりまたは引き裂きは最大1つ。エアサウンドは予算内であること。

  • 各シーンブロックのイベントテーブルで、予期と1つの誇張されたビートを指定します。12の原則とキットコンポーネントのマッピングは、$MOTION_LIB/style/$MOTION_STYLE/docs/motion-principles.md にあります。

引き継ぎ

次は motion-build です。これがプロジェクトをスキャフォールディングし、カメラ/カットテーブルとシーンの境界を episode.json に変換します。STORYBOARD.md と narration/script.json を読み取ります。STORYBOARD.md のタイミングセクションは、音声収録後に後で生成されるため、ここでは省略してください。

Individual skills in this repo

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

関連スキル