Communitygithub.com

robertomanfroi/videos-opus

縦型撮影(カメラに向かって話す人)をMeta広告向けクリエイティブに編集します。最初の5秒にヘッドライン、その後は話の内容をアニメーション図解(フロー、Before/After、✕/✓、アプリ画面、実際のスクリーンショット+カウンター)で表示、単語単位の字幕、Meta広告のセーフゾーンを考慮し、ポーズや繰り返しを削除します。

videos-opus とは?

このスキルは、縦型動画(人物がカメラに向かって話す)を、Meta(Facebook/Instagram)広告用のクリエイティブアセットに変換するために設計されています。主な機能は、動画の最初の5秒間に大きなヘッドラインを挿入し、その後の各発言内容に対応したアニメーション図解(スキーム)を自動生成することです。スキームは、フローチャート、Before/After比較、チェックマーク/バツ印、アプリの画面遷移、実際のスクリーンショットと数字カウンターなど、15種類のテンプレートから選択・調整可能です。このスキルは、`robertomanfroi/videos-opus` というスキルセットの一部であり、`editar` スキルが「広告」スタイルを指定した場合や、ユーザーが「anúncio(広告)」「criativo(クリエイティブ)」「ad」「patrocinado(スポンサー付き)」「para vender(販売用)」といったキーワードを使用した場合に自動的に呼び出されます。処理の流れは、動画の書き起こし、不要な間や繰り返しのカット、各種アセット(画像、プロフィール情報)の読み込み、テンプレートHTMLへのスキームの埋め込み、そしてMeta広告のセーフゾーン(上部14%、下部35%、両側6%)を厳守した最終レンダリングまでをカバーします。このスキルは、ユーザーが手動で細部を調整できる柔軟性を残しつつ、高品質な広告クリエイティブを効率的に生成することを目的としています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/robertomanfroi/videos-opus/tree/HEAD/kit/.claude/skills/estilo-anuncio

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

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

ドキュメント

スタイル: 広告

ルールは1つ: 上半分(または胸の高さの帯)には、彼女が話している仕組みを表示すること。フレーズをそのまま書き写さないでください — 字幕がそれを伝えます。話された各アイデアは、単語のタイミングで切り替わる図解に変換します。

始める前に ../perfil-criadora.md を読み、ルートにある perfil.json をロード(または作成)してください。また、1つのメッセージで、不足している情報を尋ねてください: 商品/オファー名、最終的なCTA(「コメントにXXと書いて」または「リンクをクリック」)、そして彼女が表示したい実際の画像(商品の表紙、結果のスクリーンショットと数字、彼女の動画のフレーム)。画像はプロジェクトの assets/img/ に保存します。ロゴ、表紙、数字、価格、結果をでっち上げないでください。

src/index.template.html(template/index.template.html からコピー)は、15個の既製スキームとサンプルタイミングのカタログです。CSSとヘルパーはそのままに、ヘッドラインを書き換え、彼女のスピーチに合わせてスキームを選択/タイミング調整し、使用しないブロックは削除してください。テキストのみの旧モデルは src/classico.template.html にあります(彼女がこのビジュアルを希望した場合のみ使用: index.template.html の上にコピーしてください)。

構造: ヘッドライン、その後スキーム(必須)

  1. 0 → ~5秒: ヘッドラインのみ。 大きなタイトル(白い行 + アクセントカラーの行、約90–125 px、キーワードをスキャンするオプションの下線)。スキーム、アプリ画面、画像はなし。
  2. ヘッドライン後: 話された各アイデアに1つのスキーム、単語のタイミングで切り替え。 スキーム内のテキストは短いラベルのみ(1–3語: 「Before」「with AI」「your business」など)。
  3. 商品がプロセスを販売する場合、古い方法の複雑さを新しい方法のシンプルさと並べて表示します(いっぱいのタイムライン + 時計 + ✕ × 1つの注文 + ✓)。

カタログのスキーム(再利用しタイミングを調整):

話されたアイデアスキームブロック
「Xをした → Yを経由 → Zになった」スマホカード(実際のフレーム)→ 破線矢印 + 移動する点 → 丸ノード → 矢印 → 結果カードB2
エラー/ポーズを削除オーディオ波形: 問題部分が青/赤のラベル付きで表示され、消える; 時計が減少B3
自動で起こる要素が自動で現れるスマホ + カウンター「0 クリック」B4
古い方法 × 新しい方法2つのパネル: いっぱいのタイムライン + 時計 + ✕ × 1つの注文 + ✓B5
反論(「時間がない」「わからない」)✕ / ✓: 問題カードが ✕ → 矢印 → 解決策カードと ✓B6
疑問 → 証明疑問の吹き出し → テストカードと ✓B7
「ちゃんと説明する必要がある」一般的なリクエスト → 灰色の結果 ✕ × 詳細な指示が入力中 ✓B8
提供するもののリスト空欄が実際の画像またはアイコンで埋まる、話された項目ごとに1つB9
コース / 商品実際の表紙 + 中に飛び込むチップ + 上昇するグラフB10
ソーシャルプルーフ実際のスクリーンショットと上昇するビューカウンター(スクリーンショットからカウンター部分を切り抜く)B11
スタイルのコピー参照 → ノード → 同じスタイルを受け取る彼女のフレーム + 「= 同じスタイル」B12
オファー / ローンチタグ + スタンプ → 送信バー付き投稿 → 「✓ 公開済み」B13
3つのステップ(「録って、編集して、投稿する」)3つのノードが各単語で順に点灯B14
コメントCTA単語をタイプするコメントボックス(「私も欲しい」)+ DirectカードB15
リンクCTA白いバー「もっと詳しく ›」が点滅B16

レンダリング前に各ブロックを読み、「この領域はアイデアを示しているか、それとも単に字幕を繰り返しているだけか?」と自問してください。

数字: B3、B5、B11のカウンターにはプレースホルダー(__B3_SEG_ANTES__、__B5_SEG_NOVO__、__VIEWS_PRINT_1__…)が付いています。montar.mjs はプレースホルダーが残っているとエラーで停止します。実際の数字(彼女が言った、またはスクリーンショットから読み取った)に置き換えるか、カウンターを削除してください。

画像: bruto.jpg はビデオから自動で抽出されます(novo-anuncio.mjs)。その他(表紙、スクリーンショット、他の動画のフレーム、参照画像)は、生徒が提供した場合のみ使用します。画像がない場合 → スキームを削除するか、SVGで描いたアイコンやテキストカードで再デザインします。サンプルの空欄を絶対に残さないでください。名前/ハンドルとアバターは perfil.json から取得します(montar.mjs が __USUARIO__、__NOME__ を置き換え、アバターを配置します。写真がない場合は、イニシャル入りの円)。

セーフゾーン(Meta Reels広告 — 必須)

上部14%、下部35%、両側6% を空けてください。1080×1920の場合、安全な領域は x 65–1015、y 270–1248 です。すべての単語、数字、シール、CTA、字幕、スキームラベルはこの範囲内に収めてください(アニメーションのスケール/回転のピーク時も含む)。装飾(暗い帯、パネルの影)のみが範囲外に出ても構いません。$K --em video-projects/<slug> node ../../$E/scripts/zonas-seguras.mjs renders/<file>.mp4 assets/seguras.jpg t1 t2 … で確認してください(各フレームに赤い枠が表示されます)。

スキームのゾーン(プロジェクトルートの reel.json)

ブロックは1080×340の領域に描画され、montar.mjs がこの領域を配置・スケーリングします:

フレーミングreel.json
頭が低め、上部に余裕あり(頭頂部がy ≈ 450より下){"faixa":"topo","zonaTop":280,"zonaAltura":<頭頂部 − 290>,"capTop":<顎 + 20、最大 1165>}
頭がフレーム内で高い(近距離セルフィー、車内など){"faixa":"peito","zonaTop":<顎 + 20>,"zonaAltura":<≈ 1150 − zonaTop>,"capTop":<zonaTop + zonaAltura + 10、最大 1165>}

peito モードでは、顎から安全領域の終わりまで暗い帯が覆い、スキームと字幕はその上に表示されます。字幕(高さ80 px)はy 1248までに収まる必要があります。

ビジュアル

要素ルール
暗い帯topo: 上部から rgba(0,0,0,.66) グラデーション → 透明。peito: 顎から ~y 1300 まで暗い帯。
スキームキットパネル rgba(16,16,19,.92) 半径22、1pxの明るい境界線; スマホカード 160×284 (9:16) 実際のフレーム入り; AIの丸ノードは cor_ia 色; アクセントカラーの点が移動する破線矢印; 赤 #ff453a の✕と緑 #30d158 の✓の丸スタンプが単語のタイミングで出現; インターフェーステキストはInterフォント。繰り返し装飾(波形バー、タイムラインクリップ)はテンプレートのシードを使用した rnd() を使用 — 決して Math.random や GSAP の from:"random" を使用しないでください。
タイポグラフィヘッドライン、ラベル、字幕にはタイトルフォント(Archivo Black またはプロフィールの fonte_titulo)。白; アクセントは cor_destaque 色(デフォルトは黄色 #FFD21F)。
動き短い出現: 0.45–0.6秒で上昇+フェードイン(power3.out / expo.out); スタンプは back.out; カウンターはカウントアップ; バーは満たされる; 矢印は成長する。退出は0.28秒。スキームは話された単語のタイミングで切り替わる。
字幕1単語ずつ、46 px、白、ソフトシャドウ付き(アウトラインは不可)、顎のすぐ下(reel.json の capTop)。
CTA単語をタイプするコメントボックス + Directカード、または白いバー「もっと詳しく ›」。

色、サイズ、禁止事項: template/DESIGN.md(各プロジェクトにコピー)。

カットルール

  • すべてのポーズ(−30 dB / 0.15秒)とすべての繰り返しを削除。可能であれば ≤ 90秒。2回言われたフレーズ: 最後のもの(修正された方) を採用。強調の繰り返し(「大事、大事」)はエラーではありません。
  • 広告は J/L カットなし(cortar.mjs --no-jl)でカット: 映像はスピーチに正確に同期。
  • カット後、clean.mp4 を再書き起こし、重複フレーズや途切れた単語がないか確認します。書き起こし全体は繰り返しを隠します: 短いウィンドウでビデオ全体をスキャンします。1回の呼び出しで、$K --em video-projects/<slug> node ../../$M/transcrever.mjs assets/clean.mp4 --janelas 1,3,5,7,…(終わりまで2秒ごと)を実行し、比較します。

速度に関するルール(生徒のPCが遅い可能性があります — 以下の手順よりも優先されます)

  • novo-anuncio.mjs の書き起こしは既に --rapido(カット選択のみ)。clean.mp4 の再書き起こし(字幕用)は正確なモデルを使用 — カットのバージョンごとに1回のみ。
  • 継ぎ目と繰り返しは 1回の呼び出し で --janelas を使用して確認。ウィンドウごとに1回ずつ実行しないでください。
  • フレームを確認するためだけにラフドラフト全体をレンダリングしないでください。$K --em video-projects/<slug> hyperframes snapshot --at t1,t2,… -o snapshots を使用し(スキームごとに1つのタイム)、PNGを確認します。スナップショットが正しくなったら、1回だけ レンダリングします。
  • raw.mp4 / clean.mp4 のエンコーダーは自動選択。変更しないでください。
  • 各時間のかかる手順の前に、何が実行されているかを短い日本語の1行で警告します(「広告をレンダリング中 — 数分かかる場合があります。」)。待機中にフリーズしたように見えないようにします。

フロー(すべてのコマンドはランチャー $K 経由)

E=.claude/skills/estilo-anuncio · M=.claude/skills/_motor · K = videos-opus スキルのランチャー: "<VO>\bin\node.exe" "<VO>\scripts\video.mjs" kit。ここで <VO> は videos-opus スキルのフォルダ(このガイドを読むように指示した SKILL.md がある場所)。ポータブルプログラムをパスに追加し、キットの作業ディレクトリで実行します($K pasta で現在のディレクトリを表示; プロジェクトは <pasta>\video-projects\<slug> に配置)。$K --em <subfolder> … はそのサブフォルダ内で実行。npx、Python、または単独の node は使用しないでください。すべて $K 経由で実行します。

  1. プロジェクト作成 + 高速書き起こし: $K node $E/scripts/novo-anuncio.mjs "<video>" <slug> → video-projects/<slug>/ に raw.mp4、raw.json、assets/palavras.txt、両方のテンプレート、assets/img/bruto.jpg、reel.json が作成されます。
  2. フレーミング: グリッド付きコンタクトシート($K --em video-projects/<slug> ffmpeg -i assets/raw.mp4 -vf "fps=1/5,drawbox=x=65:y=270:w=950:h=979:color=red:t=6,drawgrid=w=1080:h=100:[email protected]:t=2,scale=270:-1,tile=7x2" -frames:v 1 assets/contato.png)を見て: 黄色の線が100pxごと、赤い枠が安全領域。頭頂部と顎の位置を見つけ、reel.json を記入します(「スキームのゾーン」の表を参照)。
  3. カット: assets/palavras.txt を読み、assets/keeps.json を記述; assets/ 内で: $K --em video-projects/<slug>/assets node ../../../$M/cortar.mjs --no-jl。
  4. 確認: プロジェクトルートで: $K --em video-projects/<slug> node ../../$M/transcrever.mjs assets/clean.mp4 assets/transcript.json --nomes "<プロフィールの用語>"; 内容を読み、--janelas スキャンを実行; カットがクリーンになるまで調整; 誤って書き起こされた単語 → assets/caption-fixes.json。
  5. コンポジション: src/index.template.html を書き換え: ヘッドラインは0–5秒、その後は話された各アイデアに1つのスキーム; タイミングは $K --em video-projects/<slug> node ../../$M/ancoras.mjs "フレーズ" …(プロジェクトルート); 実際の画像は assets/img/。
  6. 組み立て + チェック: $K --em video-projects/<slug> node ../../$E/scripts/montar.mjs(プレースホルダーや画像不足があるとエラーで停止)→ $K --em video-projects/<slug> hyperframes lint(0 エラー)→ $K --em video-projects/<slug> hyperframes snapshot --at … を各スキームで実行し見て(顔が隠れていない、ラベルが読める、数字が正しい、サンプルが残っていない)→ zonas-seguras.mjs をスナップショット/タイムに対して実行 → レンダリングと納品(ランチャー経由、キットの作業ディレクトリ): $K node $M/renderizar.mjs <slug> — ロックを確認し、バックグラウンドでレンダリングし、検証して prontos/ にコピー。出力3 = まだレンダリング中: $K node $M/renderizar.mjs <slug> --esperar を「準備完了」と表示されるまで実行。$K --em video-projects/<slug> hyperframes render や prontos.mjs を直接実行しないでください。その後、スキームのタイミングで zonas-seguras.mjs renders/<slug>-final.mp4 … を実行。
  7. 納品: 日本語で簡潔に回答: 保存場所、カット内容、使用した画像、疑問点、動画がMetaの安全領域を尊重していること。決して広告を公開またはアップロードしないでください。

広告のバリエーション(生徒が「複数のバージョン」を求めた場合)

同じカット、別のヘッドラインおよび/またはCTA: プロジェクトをコピーし(video-projects/<slug>-v2)、ブロックB1とCTAのみを変更し、組み立て、ヘッドラインのスナップショットを撮り、レンダリング。カットや書き起こしはやり直さないでください。

納品後の調整

「価格の部分を削除」→ keeps.json、手順3–4、ancoras.mjs で該当部分以降のスキームタイミングを再計算し、手順6。「ヘッドラインを変更」→ B1と手順6。「字幕を上に移動」→ reel.json の capTop と手順6。彼女が変更を要求しなかった部分をゼロからやり直さないでください。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル