motion-video

スクリプトからのモーション動画

モーショングラフィックス動画（アニメーションテキスト、グラフ、スクリーンショット、ライブWeb録画、アイコン、マップ）のための一般的なワークフローです。HTMLからレンダリングされます。プロジェクトのブランド、トーン、カラー、ジングル、音楽は、プロジェクトプロファイル VIDEO.md に保存されており、ここではありません。スクリプトとテンプレート：リポジトリ C:\Mydrive\Claude Projects\motion-video\（scripts/、templates/）。

言語： Petrとはチェコ語で話します。作成するすべてのファイル（コード、コメント、ドキュメント、プロファイル、README）は英語（簡単な英語、短い文章）で記述します。動画に表示されるテキスト（キャプション、タイトル）は、設定で指定された動画言語（通常はチェコ語）に従います。ストーリーボードとプレーヤーUIは、storyboard.jsonのlabelsでローカライズできます。

0. プロジェクトプロファイル

• 最初にプロジェクトプロファイルを見つけて読みます：プロジェクトフォルダ内のVIDEO.mdまたはbrand/video-profil.md、またはclaude.aiプロジェクト内のテキストコピー（claude/video-profil.md）。
• プロファイルは、このスキルのデフォルト（色、フォント、ロゴ、ジングル、音楽、トーン、オーディエンス、表現、ハッシュタグ、セーフゾーン、例の場所）を上書きします。
• プロファイルがない場合：ブランドとオーディエンスについて尋ね、templates/VIDEO.mdから作成します。

1. 設定（単一の信頼できる情報源）

スクリプトの先頭にある固定ブロックです。シーンの時間はここから導き出されます。

項目	例
トピック	Meteoblueのマルチモデル
プリセット	リール / 動画 / フィード 4:5 / スクエア
フォーマットとデザイン解像度	9:16 1080×1920 / 16:9 1920×1080 / 4:5 1080×1350 / 1:1 1080×1080
最終レンダリング	1080p、または4K（16:9の場合は--scale 2）
長さ	60～75秒 / 8分 / …
動画言語	cs
ナレーション	なし / 独自録音（ワード同期）
キャプション	焼き込み / 単語単位 / SRT
ジングル、音楽	プロファイルから（ファイル + ライセンス）
効果音	あり / なし
ライブWeb録画	なし / あり（どのサイトと手順か）

フォーマットプリセット

プリセット	フォーマット	長さ	コンテンツの適応
リール / ショート	9:16, 1080×1920	最大3分（リール、ショート）；FBリールを確認（多くの場合90秒と記載）	1つのアイデア、大きな焼き込みキャプション、セーフゾーン内のコンテンツ（上部と下部にアプリUI）、速いペース
動画	16:9、デザイン1920×1080、最大4Kでレンダリング	任意	チャプター（チャプターごとのスクリプトとストーリーボード、YouTube説明のタイムスタンプ：最初0:00、最低3チャプター）、ナレーションの可能性が高い、詳細を表示する余地、穏やかなペース
フィード 4:5	4:5, 1080×1350	約1～2分	Instagram（およびLinkedIn）フィード投稿、スクエアより縦長
スクエア	1:1, 1080×1080	約1分	フィード投稿（FB、IG）、中央にキャプション

「リール」はプリセットにすぎません：Petrが「リール」と言った場合、リールの長さ、フォーマット、ペースが適用されます。

2. ワークフロー：スクリプト → ストーリーボード → 承認 → レンダリング

出力は常にスクリプト + ストーリーボードのペアであり、変更のたびに同期が保たれます。 最終レンダリングは明示的な要求（「vygeneruj video」）があった場合のみ行われます。それまではスクリプト、ストーリーボード、低解像度プレビューのみです。

1. アウトラインをチャットで：セクションの短い番号付きリスト（動画の場合はチャプター）。簡潔にまとめます。
2. セクションごとに展開： 時間、見出し、画面に表示される通りのキャプション、画像、学べること、動きとトランジション、サウンド。言葉遣いの質問には、3～4つの短い選択肢と推奨を提示します。ユーザーの言葉遣いは文法のみ修正し、変更点を伝えます。
3. スクリプトを<プロジェクト>/<出力>/scenar.mdと、claude.aiプロジェクト内の同じコピーに保存します。 ヘッダー = 設定 + 最終レンダリング + ストーリーボードリンク + ステータス。
4. ストーリーボード = HTMLアーティファクト（1つのリンク、常に同じアーティファクトに再公開）：
   • project/video.html：シーンとseek(t)を含む（テクニックを参照）、レンダリング前でも可能、
   • project/storyboard.json：name、time、learn、motion、sound、items、changed（CHANGEDバッジは前バージョンからの変更のみ）を持つセクション、最も忙しい瞬間の1～6フレーム[time, caption]、オプションでUI言語のlabelsとlang、
   • scripts/storyboard.py project/video.html project/storyboard.json sb/、
   • scripts/player.py project/video.html sb/ --chapters project/storyboard.json [--audio mix.mp3]：ストーリーボード上部の再生可能なプレビュー、チャプタータイムライン（YouTube風）、コメント機能付き：コメントボタン → 要素をクリック → 時間、チャプター、要素を含むメモがチャットにコピーされます。オーディオはMP3である必要があります（アーティファクトは.m4aを提供しません）、
   • scripts/check.py project/video.html（チェックを参照）；発見事項を修正または報告、
   • publish_files（モードreplace）で公開し、スクリーンショット、クリップ、MP3を含めます；リンクをスクリプトに配置、
   • 最後に以下で終了：「Storyboard je aktualizovaný. Napiš ‚vygeneruj video', nebo co změnit.」
5. コメントのたびに： video.html → storyboard.json → ストーリーボード + プレーヤー → 再公開 → 両方のコピーのスクリプトを更新します。変更点を簡潔に返信します。
6. レンダリングは要求があった場合のみ、設定の解像度で行います。1つのシーンを変更 = そのシーンのみを再レンダリングします。 出力名はダイアクリティカルマークなしで、バージョンを含めます（reel1_multimodel_v5.mp4）；スクリプトに記録します。
7. 動画が承認された後、 公開テキストとサムネイルを生成するか尋ねます（公開を参照）。

3. コンテンツとペース

• 1つの出力 = 1つの主要アイデア；長尺動画ではチャプターごとに1つのアイデア。
• 密度：1分あたり約4～6の学習ポイントと12～18の視覚的変化；3秒以上の無音区間は禁止ですが、キャプションを読むのに十分な時間（1秒あたり約2～3語）。
• 見せる、列挙しない：グラフ、比較、原因と結果、Webサイトでの実際の手順。
• Webサイト、アプリ、機能に関する主張は、記憶ではなく実際のサイトで検証します。統計をでっち上げてはいけません。
• 例示データ：スクリプトに記録します；画面上にラベルを付けるかどうかはプロファイルが決定します（短尺フォーマット：視覚的ノイズを最小限に）。
• トランジション：デフォルトはクロスフェード；可能な場合はシーンを接続します（グラフが次のシーンに変化、カードがシーンに展開）。
• 実際のブランドとロゴは、正真正銘の歪みのないもののみ；例示データにサードパーティのロゴを決して配置してはいけません。

4. チェック

• scripts/check.py project/video.html [--step 0.5] [--safe t,r,b,l]：セーフゾーンまたはフレーム外のテキスト、テキストあふれ、低コントラスト（WCAG）、3秒以上の無音区間。フォーマットごとのデフォルトゾーン（9:16、4:5、1:1、16:9）；プロファイルで上書き可能。
• scripts/keys.py project/video.html out t1 t2 …：指定された時間のフレーム + コンタクトシート；それらを確認します。
• レンダリング後：MP4からの数フレーム（ffmpeg -ss t -frames:v 1）、長さ、ラウドネス。

5. オーディオ

• ジングルと音楽はプロファイルから；ライセンス（作者、タイトル、ID、ソース）をスクリプトに記述します。
• scripts/mix_audio.py out/video_only.mp4 music.mp3 jingle.mp3 output.mp4 [--music-start s] [--jingle-len s] [--voice f] [--voice-start s] [--sfx f] [--target -14]（ジングルや音楽がない場合はファイルの代わりに-）：音楽はジングルの下でダックされ、その後ランプアップし、ナレーションの下で自動的にダックされ、最後にフェードアウト；2パスのラウドノルムで-14 LUFS、トゥルーピーク-1.5 dBTP；動画は再エンコードされません。
• トラックの静かなイントロ（RMS per second）をスキップし、ジングル後のディップを防ぎます。
• 効果音：コンテンツに適合し、重要な変更時のみ、音楽よりはるかに小さい音量： scripts/sfx.py cues.json sfx.wav --dur <length> でコード生成：whoosh（シーントランジション）、click（フレーム）、pop（カード出現）、tick（ラベル）、swell（ハイライト）、riser（ビルドアップ）、thud（結論）。タイミング（cues.json）は、タイムラインTとストーリーボードの「sound」フィールドから取得します。オーディオファイルは保存されません；エフェクトはコードです。 Claude Codeではオプション：earshot（MCP；コードとして252個のサウンド、リスニングと同期チェック）、Petrがインストールした場合（約1.1 GBのモデル）。
• ワード同期付きナレーション： scripts/align_voice.py voiceover.wav project/ [--text script.txt]（Whisper、チェコ語）でvo.json、vo.js、vo.srtを作成します。video.htmlで<script src="vo.js">を読み込み、グラフィックを単語に同期します：voAt('word')で単語の時間を返します；単語単位のキャプションはwordCaption(el, t)（9:16、4:5、1:1に適しています）。 録音がマスタークロックです：それから長さとシーン時間を取得し、何もストレッチしてはいけません。 Whisperのタイミングは約0.1秒の精度です；聴いて確認します。--textは実際のテキストと聞き取られたテキストを比較します。
• ストック音楽はContent IDをトリガーする場合があります；ライセンスを使用して異議を申し立て、「エスカレーションして異議申し立て」は使用しません。

6. テクニック

1. ページ project/video.html（templates/start.htmlから開始）：window.FORMAT={w,h}（デザイン解像度）、 シーンは<div class="scene">、タイムラインT={s1:[0,3.5],…}、決定論的なseek(t)（CSSアニメーション、タイマー、Math.random()は使用不可；シード付き乱数）、最後にwindow.seek=seek; window.T=T;。 ローカルフォントはnpm i @fontsource/<font>経由（プレーヤーはGoogle Fontsに切り替え）。ロゴはインラインSVGとして配置。
2. ライブWeb録画（サイトのウォークスルーが重要な場合、静的スクリーンショットの代わり）： scripts/record_web.py steps.json out/ [--width 1280 --height 800 --scale 2]：Playwrightがサイトをステップごとに操作（click、type、hover、spot = 周囲を暗くしたフレーム、zoom/unzoom、scroll、wait、mark）、グライディングカーソルとクリック時のリップル効果あり；出力web.mp4 + ステップ時間付きmarks.json。 PetrのPC（Claude Code）で実行；クラウドサンドボックスは通常のWebサイトにアクセスできません。Cookieバナーを拒否します。 video.htmlで<video src="web.mp4" muted preload="auto">を追加し、vseek(video, time)で移動（テンプレート）；シークが完了するまでレンダリング、チェック、ストーリーボードは待機します。
3. WebサイトのスクリーンショットはClaude in Chromeで：document.documentElement.style.transform='scale(2)'（原点0 0）、カーソルを移動、save_to_disk；その後、動画内でズームとフレーミングを行います。
4. レンダリング scripts/render.py project/video.html out/ [--scale S] [--only s3 s6] [--workers 4]： シーンごとに並列で1つのMP4、CRF 18、連結-c copy。プレビュー--scale 0.5、1920×1080からの4Kは--scale 2。
5. オーディオ scripts/mix_audio.py（上記参照）。

必要条件：Python with playwright、pillow、numpy、Chrome/Chromium、ffmpeg、Node（フォント）；ナレーション用にfaster-whisper。

7. 公開（承認と同意後）

• プロファイルからのソーシャルテキスト（Instagram、Facebook、YouTube）：IGは3～5行の短いテキスト + 最後に質問；FBは別々にアップロード（IGから共有しない）、短いテキスト；YouTubeタイトルは約60文字以内でキーワードを先頭に、説明（何を、どこで、主なルール、関連動画、音楽）、長尺動画の場合はチャプタータイムスタンプ。 ハッシュタグはプロファイルセットからのみ。スクリプトに保存（セクション「Texty k publikaci」）。
• YouTube字幕：vo.srtをアップロード（ナレーションがある場合）。
• サムネイル：リールは1080×1920 + 1280×720、動画は1280×720（YouTube）；大きなテキスト、メインモチーフ、プロファイルスタイル。 YouTubeはShortsのカスタムサムネイルを許可しない場合があります。