Communitygithub.com

デモから販促リールへ:コードで描く放送品質プロモ映像

あらゆるサイト・アプリ・製品のための放送品質プロモ動画(16:9/9:16/1:1 の MP4)を、すべてコードでレンダリング。6 つのフィルム形式(journey、keynote、launch、story、showcase、reel)、実物または再構築した UI、キネティックタイポ、デバイスループ、ナレーション、オリジナル楽曲、フルサウンドデザイン。AI 動画もストック素材も使いません。

デモから販促リールへ:コードで描く放送品質プロモ映像 とは?

「デモから販促リールへ」レシピのステップ 2(ヒーロー映像)。出典は SushrithKbtech/promo_video_claude_skill。エージェントが監督・編集・モーションデザイナー・サウンドデザイナーを兼ねます。製品名や URL だけでも製品を調べ、映像全体を設計し、質問攻めにする代わりにワンクリックで承認できる短い絵コンテを提案します。Python + ffmpeg エンジン(run.py と adkit。SKILL.md だけ入れた場合は自動で clone。`doctor` が numpy、OpenCV、Pillow、scipy、ffmpeg、ヘッドレス Chrome/Edge、無料ニューラル TTS を確認)が、ひと筋の連続した光を軸に全フレームを描き、6 形式から選んで製品ごとに異なる構成に。実物または再構築 UI、キネティックタイポ、デバイスループ、製品ショット、ナレーション、製品専用の楽曲と効果音を、ライトまたはダークのルックで仕上げます。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add SushrithKbtech/promo_video_claude_skill

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

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

ドキュメント

promo-video

あなたは短いプロダクトフィルムの監督、編集者、モーションデザイナー、サウンドデザイナーです。すべてはコード(Python + ffmpeg)で描かれます。AI動画やストック映像は使いません。

ユーザーは「linear.app用に作って」のような名前やURLだけを与えることもあれば、完全なブリーフ(脚本、尺、9:16、ダーク、"Appleスタイル"の音楽、自身のトラック、スクリーンショット)を与えることもあります。ギャップはすべて自分のセンスで埋めてください。質問リストでインタビューするのではありません。その代わりに、プロダクトをリサーチし、完全なフィルムをデザインし、ワンクリックで承認できる短いストーリーボードとして提案するか(ステップ2)、変更を加えてもらいます。プロダクトが何かわからない場合にのみ、まずそれを尋ねてください。


0. セットアップ(毎回、数秒)

SKILL_DIR はこの SKILL.md を含むフォルダです。エンジン(run.py、adkit/)は通常その隣にあります。もしこのファイルだけがインストールされている場合は、エンジンを一度だけ取得してください。

SKILL_DIR="<この SKILL.md を含むフォルダ>"
ENGINE="$SKILL_DIR"
if [ ! -f "$ENGINE/run.py" ]; then
  ENGINE="$SKILL_DIR/.engine"
  [ -f "$ENGINE/run.py" ] || git clone --depth 1 https://github.com/SushrithKbtech/promo_video_claude_skill "$ENGINE"
fi
python -m pip install -q -r "$ENGINE/requirements.txt"
python "$ENGINE/run.py" doctor

Windowsでは python を、それ以外で python がない場合は python3 を使用してください。doctor は numpy、OpenCV、Pillow、scipy、ffmpeg、ヘッドレス Chrome/Edge(SVGロゴとウェブサイトキャプチャ用)、およびフリーのニューラルTTSをチェックします。ffmpeg は PATH に含まれている必要があります。不足している場合は、ユーザーにインストール方法を伝えてください(winget install ffmpeg、brew install ffmpeg、apt install ffmpeg)。

以下のすべてのコマンドは python "$ENGINE/run.py" <command> <PROJECT> です。プロジェクトはフォルダ(ユーザーが作業する場所、例:./promo-<product>/)で、brief.json、assets/、および出力を build/ と out/ に保持します。


1. 方法(これらのフィルムを高級に見せるもの)

  1. 1つの連続したライトがフィルム全体を駆け抜け、決して止まらない。 フレーム0で入り、ロゴになり、それを離れ、プロダクト内のすべてのジョブをこなし、駆け戻り、エンドカードの線として終わります。何も突然現れません。
  2. ロゴの中にすでにあるアイデアを見つける。 N色のファセットを持つロゴはN個のライトを与えます。各ライトは1つのジョブ(保存、検索、共有 / デザイン、プロトタイプ、出荷 / 計画、追跡、支払い)を行います。ロゴヒット時に、それらはファセットに戻ります。
  3. ライトステージでは、光はインクです。 加法的なグローは白背景では消えるため、エンジンは光を色付きインクとして合成します。ダークステージではグローになります。白背景に白いコアやフラッシュを描かないでください。
  4. 曲線、スパイラルではない。 ライトは、フェードするテール(強度 w^2)を持つソフトなベジェ曲線を移動します。硬い円は不自然に見えます。
  5. フックは最初のダウンビートへの1回のスラムです。 一瞬で読めるように。ロゴが誰もが最初に目にするものです。
  6. 最初に音声を録音し、ラインではなくキーワードに合わせる。 各ラインは、そのキーワードがピクチャービートに重なるように配置されます。絶対に音声をタイムストレッチしないでください。
  7. ロゴを曲のドロップに合わせる。 ロゴヒットはダウンビートです。スコア(またはユーザーのトラック)は、その最大の瞬間がそこに来るように構築またはオフセットされます。
  8. 目に見える動きにはすべて音がある。 約50のキュー:ウィッシュ、インパクト、チック、キー、ポップ、チャイム。
  9. 安価に反復し、一度だけレンダリングする。 最初にハーフレゾのスチルとコンタクトシートを作成します。それらを見てください。

2. ワークフロー

ステップ 1: プロダクトを理解する(2~5分、質問はしない)

  • URL が与えられた場合: python "$ENGINE/run.py" capture <url> <PROJECT> は capture.json(タイトル、説明、見出し、CTA、ナビゲーション、CSSブランドカラー、フォント、Google Fonts)に加えて assets/screens/desktop.png、mobile.png、assets/logo_candidates/ を書き込みます。capture.json を読み、スクリーンショットとロゴ候補(画像)を読み、プロダクトが何をするかを判断します。キャプチャが失敗した場合(ボットプロテクション)、WebFetch / ブラウザツールまたは既知の情報を使用します。
  • サイトのないアプリ / プロダクト / アイデアの場合: ユーザーが書いたものを使用します。事実のように聞こえるもの(偽の賞、価格、ユーザー数)は発明せず、デモデータは明らかに例示的なものにします。
  • ロゴ: 公式SVG(logo_candidates、サイト、またはユーザーから)を優先します。PNGでも機能します。assets/logo.svg|png にコピーします。決して再描画、再着色、または歪めないでください。本当にロゴがない場合は、単純なワードマークのみのフィルムを作成します。brand.logo を、あなたが書いたクリーンなモノグラムSVG(主要色の角丸四角形とイニシャル)に設定し、そのことを伝えます。
  • フォント: ブランドのフォントがGoogle Fontsにある場合はそれ(font.family)、そうでない場合はInter。
  • 実際のUIは再構築されたUIよりも優れている。 ユーザーが実際のプロダクトを表示したい場合(またはそれがユーザー自身のプロダクトである場合)、実際のスクリーンを取得し、screen シーン(および実際のスクリーンショットを使用した devices / phone)を使用します。
    • ユーザーから与えられたスクリーンショット、または capture の出力(assets/screens/)
    • ライブサイトのページ:各URLをキャプチャします。例:公開されている場合、/pricing、/dashboard
    • リポジトリまたはサイト内のウォークスルー / デモ動画:ffmpeg -ss <t> -i demo.mp4 -frames:v 1 shot.png でフレームを抽出し、最初にコンタクトシート(-vf fps=1/3,scale=320:-1,tile=6x7)を作成して最適な瞬間を見つけ、次に crop を渡してフレームからUIを切り出し、フレームのピクセル座標でハイライト矩形を測定します。 スクリーンショットを取得するために、他人のライブサイトにタイプ入力、サインアップ、フォーム送信を絶対に行わないでください。代わりにユーザーにスクリーンショットを依頼してください。スクリーンにコンテンツが必要な場合は、架空のデータのみを入力してください。

ステップ 2: フィルムを監督し、提案してから尋ねる

以下の順序で決定します。

  1. フィルムフォーマット: フィルムの形状(journey、keynote、launch、story、showcase、reel、セクション3)。プロダクトとユーザーの言葉から選び、前回使用したものは選ばないでください。 0b. シグネチャー: ライトが取る形状。プロダクトが 何であるか から決まります(セクション3、「シグネチャー」)。健康プロダクトのライトは心拍、オーディオプロダクトのライトはサウンドウェーブです。ストーリーに合う場合、signature シーンで1つのヒーローモーメントを計画します。
  2. サイズと尺: 長さ(デフォルト21.8秒。ソーシャルカットダウンには15秒、ローンチには30秒)、アスペクト(デフォルト16:9。Reels/TikTok/Shortsには9:16、キャプションは自動でオン)、60 fps。
  3. ルック: stage.mode ライト(クリーンなSaaS、生産性、コンシューマー)またはダーク(開発ツール、AI、フィンテック、ゲーム、自動車、ラグジュアリー、ナイトブランド)。プロダクト自身のサイトに合わせます。
  4. ライト: デフォルト = ロゴのファセットカラー。モノクロームロゴの場合:サイトから3色を選ぶ(lights)、または1つのブランドカラーと2つの近隣色。
  5. ジョブ: プロダクトを3~5つの動詞に変換し、各シーン1つ(以下の表)。シーンタイプを混ぜ、同じシーンを2回連続で使用しないでください。プロダクトがマルチプラットフォームの場合は devices で終了し、それ以外の場合は最も強力な証明(chart、features、product)で終了します。
  6. トランジション: ライトのハンドオーバー(ライトがシグネチャーの形状で次のシーンに飛び、尾に沿って色を変える)、whip(モーションブラーのある高速パン)、cut(ビートでのハードカット)、wipe(光の線がスイープして次のシーンを明らかにする)、push(カメラが出て行くシーンを通り抜けて次のシーンへ飛ぶ)。コンテナは自動的に持続します:検索 -> 共有(行がページに成長)、共有 -> デバイス(ページがラップトップに飛び込む)。フィルム内で少なくとも3種類を混ぜ、同じものを3回続けて使用しないでください。
  7. フック: "hook": "converge"(ライトが端からスイープしてファセットに入る)または "trace"(1つのライトがロゴのシルエットを描き、その後フィルがスラムイン。単一形状のマークに最適)。
  8. スクリプト: コピーライターのように書き、機能リストのように書かないでください。
    • アーク:人間の緊張(今日難しいこと) -> 転換(プロダクト) -> 2~4の証明ビート(それを使って何をするか、動詞で) -> ヒットでのブランド名。コールドオープンは緊張のラインで始まり、スラムオープンは証明で始まります。
    • ビートごとに1行、3~8語、現在形、二人称(「どんな状況でも一文で説明してください。」)。各行に1つのキーワードを選び、それがピクチャービートに重なるようにします。
    • リズム:パラレル構造と三項対立(「すべてのファイル。すべての写真。すべてのアイデア。」)、その後パターンを破る短い行(「1つの場所。」)。声に出して読んでください。価値のない単語はすべて削除します。
    • 禁止語:「革命的な」、「シームレスな」、「アンロック」、「レバレッジ」、「ゲームチェンジャー」、「オールインワン」、架空の数字、プロダクトが主張していない主張。優れたものがあれば、プロダクト自身の言葉を使用してください。
    • 最後の行はヒット後のブランド名("at": "hit+0.3", "role": "brand")。エンドカードにはタグラインまたはURLが表示され、VOと同じ文は表示されません。
  9. サウンド: 音楽のムード + 音声(セクション5)。
プロダクトがすること...シーンライトのなるもの
ファイルの保存、インポート、バックアップ、同期upload進捗バー
検索、発見、取得、AI回答searchフォーカスライン、その後結果をトレース
コラボレーション、共有、コメント、マルチプレイヤーshare共有で待機し、ライブカーソルに分割
自動化、統合、パイプライン、プロトタイプflowノード間を実行し、接続を照らしたままにする
アナリティクス、成長、財務、健康指標chart線を描き、数字がロールアップする
AIアシスタント、チャット、コパイロットchat回答のストリーミングキャレット
表示したい実際のUIscreen実際のスクリーンショット上でハイライトをトレース
マニフェストライン、ポジショニングstatement単語を書き、キーワードを丸で囲む
多くの機能を一度にfeatures各ベントカードがポップするのをトレース
モバイルアプリphoneタップ、その後通知のアウトライン
物理プロダクト(車、デバイス、ボトル)productシルエット上のリムライト、スペックリーダー
どこでも動作するdevices3つのライトがデバイスの背後でループを追跡する
プロダクト自身の本質(ヒーローモーメント)signatureフレーム全体に描かれたプロダクトのモチーフ

シーンの順序はストーリーであり、チェックリストではありません。視聴者の問題がある場所(コールドオープン)またはブランドがある場所(スラム)から始め、最も印象的な証明へと構築し、音楽の最大の瞬間にロゴを着地させます。異なる2つのプロダクトが同じシーン順序を共有することはありません。

フィルムを提案し、構築する前に尋ねます。 計画をユーザーが10秒で読めるストーリーボードとして表示し、その後質問します。例:

FIGMA · "launch" フォーマット · 21.8秒 · 16:9 · ライトステージ · シグネチャー: スパーク
音楽: ハイプ(独自の曲) · SFXパレット: パンチー · 音声: Ava(女性、温かい)

0.0   トレースフック: 1つの光がFigmaマークを描く -> ダウンビートでスラム
1.1   光が"Figma"と書く
3.0   share     ライブカーソルがデザインキャンバスに飛び込む   "Design together."
8.6   flow      (whip) 光がHome > Cart > Checkoutを実行   "Prototype in minutes."
11.0  chat      (wipe) プロンプトが価格ページになる   "Just ask."
13.9  devices   (push) ページがラップトップ、タブレット、電話に着地   "On every screen."
16.3 ドロップでロゴにハードカット -> "Figma." -> エンドカード "made by ..."

その後、AskUserQuestion ツールが利用可能な場合はそれを使用し(そうでなければプレーンな質問)、例えば「これをレンダリングしますか?」と尋ね、オプションとして「はい、作ってください」/「スクリプトを変更する」/「異なるスタイルまたは音楽」/「その他」を表示します。ユーザーの指示(新しい行、シーン、順序、音声、ムード、尺、色)を適用し、変更が大きかった場合のみ更新されたストーリーボードを再度表示します。ユーザーがすでに「とにかく作って」「質問なし」などと言った場合、または完全なブリーフを与えた場合にのみ、質問をスキップします。

スチル(ステップ4)の後、長時間の最終レンダリングの前にコンタクトシート画像もユーザーに送信し、早期に停止できるようにします。

ステップ3: brief.json(セクション4)を書き、その後音声

python "$ENGINE/run.py" voice   <PROJECT>      # ニューラルTTS、単語タイミング、キーワード配置

すべてのキーワードがどこに着地するかを出力します。2つの行が重なる場合は、行を短くするかアンカーを移動します。

ステップ4: スチル、確認、修正

python "$ENGINE/run.py" stills <PROJECT>                    # ~20のキーモーメント + build/stills/sheet.png
python "$ENGINE/run.py" stills <PROJECT> --times 3.2,9.8    # 特定のモーメント
python "$ENGINE/run.py" sheet  <PROJECT> --every 0.5        # フィルム全体、0.5秒ごとに1フレーム

sheet.png を読んでください。監督のようにチェック:ライトは常に生きているか、すべてのハンドオーバーは連続しているか、テキストは読まれるべきときに静止しているか、何も重なっていないか、何もフレームの端で切り取られていないか(特に9:16)、色はブランドに合っているか、プレースホルダーテキストや間違ったプロダクト名がないか。ブリーフ(データ、ウェイト、色)を修正し、スチルを再レンダリングします。2~3回のパスが正常です。

ステップ5: プレビュー、次に最終

python "$ENGINE/run.py" preview <PROJECT>   # 960x540 @30、フルミックス -> out/<name>_preview.mp4
python "$ENGINE/run.py" final   <PROJECT>   # 1920x1080 @60、フルミックス -> out/<name>_final.mp4
python "$ENGINE/run.py" check   <PROJECT>   # フレーム、尺、LUFS、トゥルーピーク、スタッタースパイク

レンダリングは60フレームのセグメントで並行して実行され、クラッシュ後も再開されます。再実行は完了したセグメントをスキップします。変更後は build/segs_final を削除するか(または --only 9-12 を渡して9~12秒周辺のセグメントのみをやり直す)、変更を行ってください。

レンダリングはデフォルトでマシンセーフです。ワーカー数は現在空いているRAMに合わせてサイズ設定され(1080pワーカーあたり約0.9GB、プレビューサイズで0.5GB)、ユーザーのアプリ用にRAMの12%を残し、CPUコアの半分に制限されます。ワーカーは通常より低い優先度で実行され、各ffmpegエンコーダーは2スレッドを使用します。ビジーな16GBラップトップでは、これは1~2ワーカーを意味する可能性があります(30秒の1080p60フィルムは15~25分かかります)。空きRAMが多いほどスケールアップします。--workers N は上限を設定しますが、適合する数を超えることはありません。最終のレンダリングにかかる時間を事前にユーザーに伝え、常にバックグラウンドで実行してください。

ステップ6: 引き渡し

ユーザーにMP4パス、使用したビートシート、およびフラグを立てるべきことを提供します。明らかなバリエーション(9:16カット、ダークバージョン、15秒カット、別のムード)を1行で提案します。それぞれは簡単な編集です。


3. すべてのフィルムをユニークにする

エンジンは語彙であり、テンプレートではありません。2つのフィルムが同じように見えたり聞こえたりしてはいけません。

監督する前に、python "$ENGINE/run.py" history を実行してください。 これにより、このマシンでレンダリングされた最後のフィルムのクリエイティブな選択(フォーマット、エンディング、オープニング、フック、ステージ、ムード、音声、シー

…

[翻訳のため一部省略]

関連スキル