mcpField
R
reel

reel

github.com/andreoliveirasクリエイティブ・メディア28184 回インストール3 週間前に更新
リポジトリ

reel について

文字を中心にした縦型Instagram Reelを制作し、RemotionでMP4をローカルレンダリングするスキルです。台本作成から任意のElevenLabsナレーションや音楽、プレビュー確認、書き出しまでを案内します。

主な機能

  1. 01シーンごとのReel台本
  2. 02RemotionによるローカルMP4レンダリング
  3. 03任意のElevenLabsナレーション
  4. 04音声に同期するアニメーション字幕
  5. 05提供された音楽の任意ミキシング
  6. 06プレビューと出力の確認

活用シーン

  1. 01文字中心の縦型Reel制作
  2. 02編集アプリを使わないReelのレンダリング
  3. 03任意のナレーションと提供音源の追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/andreoliveiras/skills-de-conteudo --skill reel

インストール後、Claude Code で/reelを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.env.exemplo
.gitignore
README.md
exemplos/
cenas.exemplo.json
scripts/
_comum.mjs
checar.mjs
mixar.mjs
narrar.mjs
template/
cenas.json
package.json
remotion.config.ts
tsconfig.json
template/public/
LEIA.txt
template/src/
cenas.tsx
fontes.tsx
index.ts
Legenda.tsx
Reel.tsx
Root.tsx
tempo.ts
tipos.ts

詳細

お使いのマシンでレンダリングする、すぐに投稿できるリール

「ランニングを始めた人がやりがちな3つのミスについて、私のランニングアカウント用にリールを作って」という依頼だけで、フック、シーンごとの台本、ナレーション、音楽、そしてRemotionでローカルにレンダリングした縦型1080x1920のMP4まで、完成したリールを作成します。編集アプリに送信するものはありません。

動画はタイポグラフィ中心です。暗い背景に柔らかな光彩を加え、大きなタイトルのシーン、番号付きリスト、アニメーションする数字、ビフォーアフターのカード、最後に「「キーワード」をコメント」と表示するブロックを配置します。キャプションは画面中央に一語ずつ表示され、太字とイタリックが切り替わります。

以下の<skill>は、このスキルのフォルダー(このSKILL.mdがある場所)です。

前提条件

  • Node 18以降(node -v)。必須です。
  • ffmpeg(任意)。音楽の音量を均一にするためだけに使います。なくても、音楽はそのまま入ります。 Mac:brew install ffmpeg。Windows:winget install ffmpeg。Linux:sudo apt install ffmpeg。
  • ElevenLabsのキー(任意)。キーがない場合、リールは音声なしで、アニメーション付きキャプションと音楽のみになります。
  • Remotion(初回のみインストール)と、初回レンダリング時にダウンロードするブラウザー用に、約600 MBの空き容量。Google Fontsのダウンロードに、初回レンダリング時のインターネット接続が必要です。

7つのステップで進める

1. 簡単なヒアリング(メッセージ1回)

標準的な提案をかっこ書きで添えて、質問をまとめて一度に尋ねます。相手が1行で答えられるようにしてください。依頼の中ですでに答えている内容は、もう一度尋ねないでください。

  1. ジャンルとアカウント:どんな内容のアカウントですか?
  2. 視聴者:誰が見ますか?(そのテーマの初心者)
  3. リールの目的:リーチ、保存、それとも資料を送るためのコメント獲得ですか?(コメント)
  4. CTA:相手にコメントしてもらうキーワードと、その見返りは何ですか?(例:「『ガイド』とコメントしてくれたら、ガイドを送ります」)
  5. トーン:率直、解説的、挑発的、親しみやすい、のどれですか?(率直)
  6. 音声と音楽:ElevenLabsのキーはありますか?音楽(自分のMP3またはフリー素材)はありますか?特定の色を使いたいですか?(音声なし、音楽なし、黄色をアクセントにした暗いテーマ)

チャットにキーを貼り付けるよう、相手に頼んではいけません。キーは.envファイルに設定します(ステップ4)。

2. フックと台本

コードを書く前に台本を作成し、ブロックで提示します。フック、番号付きのシーン(種類+画面に表示する内容+セリフ)、推定時間を含めてください。ナレーションを生成する前に、必ず了承を得てください。ナレーションの生成にはElevenLabsのクレジットを使うためです。「作るだけでいい」と頼まれた場合は、ナレーションなしでそのまま進めてかまいません。

フック(シーン1、最長2秒)

  • セリフは最大6〜7語です。それ以上必要なら、フックではなく導入になっています。
  • 最初のフレームですでにフック全体が画面に表示されます(ganchoタイプがそのように処理します)。
  • 視聴を引きつける形式:悩みを問う質問(「毎日トレーニングしているのに、何も変わらない?」)、常識に反する断言(「毎日投稿すると、かえって逆効果です」)、具体的な数字(「初めての5 kmを阻む3つのミス」)、結果の提示(「これをすると、DMで顧客を逃します」)。
  • 「こんにちは、みなさん」「この動画では」「ご存じですか?」や自己紹介は使いません。

台本(合計20〜45秒)

  • シーンは4〜8個。それぞれ1.5〜6秒です。1秒あたり2.9語のペースなら、各シーンのセリフは5〜17語になります。
  • **セリフは途切れさせず、自然につなげます。**すべてのシーンのテキストを続けて読んだとき、1人の話者が止まらずに話しているように聞こえる必要があります。各シーンは、前のシーンの文や考えを続ける形にします。1語だけの文や、「間を置く」ための省略記号、動詞のない箇条書きの読み上げは避けてください。まず全体を文章として書き、その後でシーンに分けます。
  • 1シーンにつき1つのアイデアにします。画面には短い形(タイトル、項目、数字)を表示し、セリフで説明します。
  • キャプションを読みやすくするため、セリフ内の短い数字は数字で書きます(「23時間」「1.6グラム」)。
  • 本当のことだけを約束します。統計を捏造してはいけません。出典がない場合は、別の種類のシーンを使ってください。
  • **最後のシーンは必ずcta**にし、セリフでキーワードを読み上げます(「『ガイド』とコメントしてくれたら、手順を送ります」)。
3. スタジオ(最初の1回だけ)とリール用フォルダーをセットアップする

スタジオは Remotion をインストールしたフォルダーです。新しいリールごとに必要なのは、cenas.json を入れたサブフォルダーだけなので、npm install は1回だけ実行します。

# primeira vez
cp -R <skill>/template ~/reels-estudio
cd ~/reels-estudio && npm install

# a cada reel (troque <slug> por um nome curto, ex.: 3-erros-corrida)
mkdir -p ~/reels-estudio/reels/<slug>/public

~/reels-estudio/reels/<slug>/cenas.json(以下の形式)を作成します。スタジオのルートにある cenas.json は、Studio で開くサンプルです。変更する必要はありません。

4. ナレーション(ElevenLabs のキーがある場合のみ)

キーは ~/reels-estudio/.env に保存します(<skill>/.env.exemplo からコピーしてください)。

ELEVENLABS_API_KEY=sua_chave
ELEVENLABS_VOICE_ID=id_da_voz   # opcional

スクリプトは環境変数またはこの .env から読み込み、キーを表示することはありません。キーを読んだり、表示したり、ほかの場所にコピーしたりしないでください。

cd ~/reels-estudio
node <skill>/scripts/narrar.mjs --projeto reels/<slug> --simular   # valida, mostra custo, não chama a API
node <skill>/scripts/narrar.mjs --vozes-pt                         # vozes pt-BR da biblioteca pública
node <skill>/scripts/narrar.mjs --projeto reels/<slug>             # gera de verdade
  • 必ず先に --simular を実行してください。cenas.json を検証し、ナレーションで消費する文字数(クレジット数)を知らせます。
  • 音声:選ぶのはユーザーです。--vozes-pt では公開ライブラリにあるブラジルポルトガル語の音声を一覧表示します。そのいずれかを使うには、ユーザー自身がサイトの Voice Library で自分のアカウントに追加(「Add to my voices」)し、--voz <id> を渡すか、.env に ELEVENLABS_VOICE_ID を設定します。--vozes ではアカウントに追加済みの音声を一覧表示します。選択がない場合、スクリプトは ElevenLabs の既成音声を使います。この音声はポルトガル語を非ネイティブのアクセントで話すため、その旨を伝えてください。
  • テキスト全体を1回の呼び出し(/v1/text-to-speech/{voice_id}/with-timestamps)で処理するため、イントネーションが途切れません。各文字のタイミングから単語ごとのタイミング(同期字幕)と各シーンの長さを算出します。
  • 出力先は reels/<slug>/public/narracao.mp3 と public/palavras.json で、cenas.json はこれらを参照するようになります。同じテキストと音声で再実行してもクレジットは消費されません。別テイクを作るには --refazer を指定します。--velocidade 1.08 を指定すると速度が上がります(0.7~1.2)。
  • ナレーションの後で話す内容を変更した場合は、narrar.mjs を再実行してください。 字幕は音声から生成されます。

キーがない場合は、この手順を省略してください。リールは音声なしで書き出され、推定した話速(1秒あたり2.9語)に合わせて字幕がアニメーション表示されます。音楽を指定した場合は、音楽も再生されます。

5. 音楽(ユーザーが提供した場合のみ)

音楽はユーザーから提供してもらいます。本人の曲、またはライセンス条件を守ったうえで、フリーライブラリ(YouTube Audio Library、Pixabay Music)から選んだ曲を使います。「MP3ダウンロード」サイト、YouTube 動画、その他ライセンスが不確かなソースから音楽をダウンロードしたり、そうするよう提案したりしないでください。 音楽がない場合、リールには音楽を付けません。

node <skill>/scripts/mixar.mjs /caminho/da/musica.mp3 --projeto reels/<slug>
node <skill>/scripts/mixar.mjs /caminho/da/musica.mp3 --projeto reels/<slug> --inicio 12   # pula a introdução

ffmpeg がある場合、スクリプトはリールの長さに合わせて音楽をカットし(短い場合は繰り返します)、音量を調整して、フェードインとフェードアウトを加えます。ffmpeg がない場合は、そのままコピーします。レンダリング時、音楽の音量は低く設定され、音声があると自動的に小さくなります(コンポジション内で簡易ダッキングします)。音量は cenas.json の volumeTrilha で設定します。値は0~1で、デフォルトはナレーションありの場合0.3、なしの場合0.8です。

ナレーションの後でユーザーから音楽が提供された場合は、実際の長さに合わせてカットするため、narrar.mjs の後に mixar.mjs を実行してください。

6. 確認、プレビュー、レンダリング
cd ~/reels-estudio
node <skill>/scripts/checar.mjs --projeto reels/<slug>

すべての ✖(エラー)を修正し、!(警告)を確認してください。その後、レンダリング前に3つのフレームを確認します(フック、中盤、CTA)。narrar.mjs の出力から時刻を取得するか、秒数に30を掛けます。

npx remotion still Reel out/<slug>-q1.png --props=reels/<slug>/cenas.json --public-dir=reels/<slug>/public --frame=30
npx remotion still Reel out/<slug>-q2.png --props=reels/<slug>/cenas.json --public-dir=reels/<slug>/public --frame=<meio>
npx remotion still Reel out/<slug>-q3.png --props=reels/<slug>/cenas.json --public-dir=reels/<slug>/public --frame=<fim-20>

画像を開き、文字の切れ、孤立した行、重なりがないか確認してください。その後、レンダリングします。

npx remotion render Reel out/<slug>.mp4 --props=reels/<slug>/cenas.json --public-dir=reels/<slug>/public

30秒のリールのレンダリングには1~4分かかります。低性能のマシンでは --concurrency=2 を追加してください。簡易プレビューを作るには --scale=0.5 を指定します(出力は540x960です)。

7. チェックリストを添えて納品する

MP4 のパス(~/reels-estudio/out/<slug>.mp4)、最終版の台本、投稿用キャプション案を納品してください。その前に、以下を確認し、確認済みであることを伝えてください。

  • コントラスト:背景の上でも字幕が読みやすい(checar.mjs で測定。最小値は4.5:1)。
  • 約3秒を超えて画面が変わらない状態がない:6秒を超えるシーンがなく、字幕のない長い間もありません。
  • 2秒以内にフックを表示:最初のフレームですでに表示されています。
  • 最後にCTAを表示:画面と音声の両方に、適切な文言が入っています。
  • 尺が20~45秒です。
  • 音声がある場合:字幕と音声が一致しています(MP4 の中盤を確認してください)。
  • out/ にあるプレビュー PNG は削除できます。

cenas.json

{
  "cores": { "fundo": "#0E0F12", "texto": "#F4F4F2", "destaque": "#FFC94A", "suave": "#9A9CA3", "sobreDestaque": "#0E0F12" },
  "fonte": "Inter",
  "fonteItalica": "Instrument Serif",
  "legenda": true,
  "narracao": null,
  "palavras": null,
  "trilha": null,
  "cenas": [
    { "tipo": "gancho", "titulo": "Treina todo dia e nada muda?", "destaque": "nada muda",
      "fala": "Treina todo dia e nada muda?" },
    { "tipo": "titulo", "titulo": "O problema não é o treino.", "subtitulo": "É o que acontece nas outras 23 horas.",
      "fala": "O problema quase nunca é o treino, é o que você faz nas outras 23 horas." },
    { "tipo": "lista", "titulo": "Os 3 vilões",
      "itens": ["Dormir menos de 7 horas", "Comer pouca proteína", "Repetir a mesma carga"],
      "fala": "São três vilões: dormir menos de sete horas, comer pouca proteína e repetir a mesma carga por meses." },
    { "tipo": "numero", "de": 0, "ate": 1.6, "decimais": 1, "sufixo": " g", "rotulo": "de proteína por quilo de peso, por dia",
      "fala": "Uma referência comum para quem treina é 1,6 grama de proteína por quilo, todo dia." },
    { "tipo": "antes-depois", "antes": "Treino novo toda semana", "depois": "Mesmo treino, carga subindo",
      "fala": "Em vez de trocar o treino toda semana, mantenha o mesmo e suba a carga." },
    { "tipo": "cta", "chamada": "Comenta", "palavra": "PLANO", "promessa": "que eu te mando o checklist das 23 horas",
      "fala": "Comenta PLANO que eu te mando o checklist das 23 horas." }
  ]
}

同じサンプルが <skill>/exemplos/cenas.exemplo.json にあります。

シーンの種類

すべてのシーンにfala(必須)と秒単位のduracao(任意。ナレーションがない場合のみ有効)があります。

タイプフィールド用途
ganchotitulo、destaque最初のシーンです。タイトルは大きく表示されます。destaqueはアクセントカラーの斜体部分です。タイトルがセリフと同じ場合、字幕では繰り返されません。
titulotitulo、subtitulo、destaque印象的な主張です。タイトルは約50文字までです。
listatitulo、itens(2~5)項目が1つずつ番号付きで表示されます。各項目は約30文字までです。
numeroate、de、prefixo、sufixo、decimais、rotulo指定した値までカウントする数字です。例:"prefixo": "R$ "、"sufixo": "%"。
antes-depoisantes、depois、rotuloAntes、rotuloDepois2つのカードです。「depois」はシーンの途中で目立つように表示されます。
ctapalavra、chamada、promessa最後のシーンです。「コメントして」+ブロック内のキーワード+受け取れるものを表示します。キーワードは9文字までです。
色とフォント
  • cores:任意の#rrggbbカラーを指定できます。デフォルトは、黄色をアクセントにした暗いニュートラルカラーです。明るいテーマにするには、fundoとtextoを入れ替え、十分に暗いdestaqueを選んでください。コントラストが低いとchecar.mjsでエラーになります。
  • fonteとfonteItalica:Google Fontsのファミリー名を指定します(例:"Montserrat"、"Playfair Display")。fonteにはウェイト900が必要です。ダウンロードを避けるには"sistema"を使ってください。ファミリーが存在しない場合やインターネットに接続できない場合、レンダリングではシステムフォントが使われます。
  • legenda: falseにすると、単語ごとの字幕がオフになります。

よくある問題

  • 「palavras.jsonは別バージョンのcenas.jsonのものです」:ナレーションの後にセリフが変更されています。narrar.mjsをもう一度実行してください。
  • ElevenLabs 401:キーが間違っているか、テキスト読み上げの権限がありません。404:その音声はアカウントにありません。Voice Libraryから追加してください。
  • テキストが画面からはみ出す:タイトルや項目を短くしてください。長すぎる場合はchecar.mjsが警告します。
  • レンダリングが遅い、または停止する:--concurrency=2を指定し、ブラウザーを閉じて、ディスクの空き容量を確認してください。
  • 初回のレンダリングに時間がかかる:Remotionがヘッドレスブラウザーをダウンロードするためです(ダウンロードは1回だけです)。

このスキルでできないこと

  • 撮影したり、録画した動画、画像、アバターを使ったりはしません。リールはタイポグラフィ(テキスト、数字、カード)で構成されます。撮影映像を編集する場合は、別のツールを使ってください。
  • 音声のクローン作成や、本人のElevenLabsキーを使わない音声生成は行いません。
  • 音楽の選択やダウンロードは行いません。音源は常にユーザーが用意します。
  • Instagramへの投稿や投稿予約は行いません。
  • ダッキングは簡易的なものです(セリフがあると音楽の音量が下がります)。プロフェッショナルなミキシングの代わりにはなりません。

コメント