Communitygithub.com

サウンド&ミュージックシンク

エディターのように動画をスコアリングします。音楽に合わせてカットをビートマッチさせ、トランジションにSFXを合わせ、ボイスオーバーに呼吸感を与え、ロイヤリティフリーのトラックを安全に調達し、VOがはっきりと聞こえるように音楽をダッキングします。動画に音楽、効果音、ボイスオーバーを追加する際、または「カットをビートに同期」「音楽が声をかき消している」「トランジションに風切り音を追加」「ロイヤリティフリーの音楽はどこで入手できる」「オーディオをミックス」「VOが急ぎすぎ」と依頼された場合に使用します。

サウンド&ミュージックシンク とは?

このスキルは、動画編集におけるサウンドデザインとミキシングの全工程を、編集者の判断力で実現するための包括的なガイドです。BPMからビートグリッドを算出し、カットを正確にビートに乗せる方法、トランジションに合わせてSFXを配置するルール、ボイスオーバーの適切な速度と間の取り方、そして最も重要な、音楽を自動的に下げてVOを際立たせる「ダッキング」の具体的な数値設定を提供します。各ステップは依存関係を持って順序立てられており、最終的にはRemotionのコンポーザーやレンダラーに引き渡すための具体的なフレーム数や音量レベルの数値(ビートフレーム、SFXタイムスタンプ、ダックレベル)を生成します。このスキルは、クリエイティブなオーディオ判断に重点を置き、コードの実装自体は行いません。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/sound-and-music-sync

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

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

ドキュメント

サウンド&ミュージックシンク は何をしますか?

サウンドは動画の半分であり、忘れられがちな半分です。音楽のビートに合わせ、クリーンなボイスオーバーが乗った平凡なアニメーションはプロフェッショナルに映ります。一方、美しいアニメーションでもカットが浮遊し、VOが音楽に埋もれているとアマチュアにしか見えません。これがオーディオの「味付け」レイヤーです。あなたは、カットをどこに置くか、効果音でどこを強調するか、ボイスオーバーにどう呼吸感を与えるか、ミックスをどう調整するかを決定します。その後、具体的な数値(ビートフレーム、SFXタイムスタンプ、ダックレベル)をremotion-composeに渡してタイムラインに配線し、remotion-renderに渡してエクスポートします。あなたは<Audio> JSXを書いたり、レンダラーを実行したりするのではなく、それらに渡すクリエイティブな判断を行います。

これは、motion-video-directionパックの残りの部分と連携します。video-storyboardのシーンリストとmotion-design-principlesのタイミング決定があなたへの入力であり、あなたは既存のビートに対してスコアリングを行います。テキストがオーディオに合わせてアニメーションする場合は、kinetic-typographyと同期します。カットのリズムが製品ウォークスルーを運ぶ場合は、product-demo-directorと連携します。縦型/ソーシャル版をカットする場合は、social-video-formatterでプラットフォームごとにビートを再生成します。オーディオミックスはそれ自身のレイヤーです。視覚的なルック(カラーグレーディング、照明、コントラスト)はmotion-color-and-lightに任せ、あなたはそれらのグレーディング結果に合わせてスコアリングします。

ワークフロー

以下の順序で実行します。カットがビートロックされる前にSFXを配置し始めたり、VOのタイミングが適切になる前にミックスを確定したりしないでください。各ステップは前のステップに依存しています。

  1. トラックを選び、テンポを固定する。 動画のエネルギーと長さに合った音楽を選び、ライセンスを確認し(参考文献/royalty-free-sourcingを参照)、そのBPMを取得します。ほとんどのロイヤリティフリーライブラリはBPMを表示しています。ない場合は、タップアウトするか、検出器を使用します。BPMは、以降すべての工程の基盤です。1ビートは 60 / BPM 秒続き、プロジェクトのfpsでは fps * 60 / BPM フレームになります。

  2. ビートグリッドを構築し、カットをスナップする。 ビートをフレーム番号に変換し、すべてのハードカットと主要なシーンチェンジをビート上に配置します(以下 beat_grid.js を実行)。強調するにはダウンビート(4/4拍子の1、5、9拍目)でカットします。通常のトランジションには任意のビートでカットします。ビートから2、3フレーム外れたカットは、理由がわからなくとも視聴者には「間違っている」と映ります。スナップされたフレームリストを Remotion-compose に <Sequence from={...}> の境界として渡します。

  3. トランジション上に効果音を配置し、トランジションを跨がない。 SFXはモーションを物理的に感じさせるために存在します。ルール:サウンドのピークはモーションのピークと正確に一致します。風切り音はスワイプに 先行して 入ります(カットの約3〜5フレーム前から開始し、その末尾がカットに重なるようにします)。インパクト/サウンドはカードが叩きつけられる フレームに 着地します。クリック/ポップはUI要素が現れるフレームに着地します。ライザーはカットの10〜20フレーム前から かけて 盛り上がり、カットで解決します。トランジションあたりSFXは1つ。重ねると強調がノイズになります。参考文献/sfx-placementを参照してください。

  4. ボイスオーバーのペースを調整し、呼吸感を与える。 VOが動画の実際のペースを決めます。ビジュアルはそれに従うものであり、その逆ではありません。目標は会話調の約150語/分(約2.5語/秒)です。それより速いと急ぎすぎに、遅いと人質映像のように聞こえます。キーラインの前とCTAの後には、ビート1つ分の無音(8〜15フレーム)を残します。耳で聞くために書きます:短い文、一文一意、短縮形。単語の途中でシーンをカットしてはいけません。シーンの境界は文と文の 間 に合わせます。最初にVOのタイミングを決め、それに合わせてシーンの長さを伸縮します(これがRemotion-composeが使用する durationInFrames になります)。

  5. ミックス:VOが最前面に来るように音楽をダッキングする。 これは最も一般的なオーディオの失敗です。音楽とフルボリュームのVOは同じ周波数帯域で競合し、言葉が聞き取れなくなります。 VOが話している間は 音楽をそのレベルの約25〜35%まで下げ、ギャップでは元のレベルに戻します。具体的なレベルとタイミングの数値は mix_levels.js を実行してください。VOは約-3〜-6 dB(クリアで、クリッピングしない)、ダッキング後の音楽は約-18〜-22 dBを目標にします。ダックエンベロープ(ダッキングするフレーム範囲とフロアレベル)をRemotion-composeに渡します。Remotion-composeはこれを各<Audio> の volume コールバックを介して適用します。

  6. エクスポートをスポットチェックする。 remotion-renderがMP4を生成した後、高性能ヘッドホンだけでなく、ラップトップスピーカーとスマートフォンスピーカーでも聴いてください。ほとんどの視聴者はスピーカーの質が良くありません。確認事項:音楽に重なってもVOのすべての単語が聞き取れること、SFXがクリッピングしたり驚かせたりしないこと、カットがビートに同期していること、最も音量の大きい瞬間が歪まないこと。単語が聞き取れない場合は、その範囲でより深くダッキングします。SFXが驚かせる場合は、6 dB下げます。

品質基準

以下のすべてが満たされた場合のみ、オーディオはA+です。

  • すべてのハードカットがグリッドのビートフレームに正確に乗っていること。ビートの間を漂うカットがないこと。
  • すべてのトランジションSFXのピークが、そのモーションのピークが発生する正確なフレームにあること。ライザーはカットの瞬間に解決し、その前後ではないこと。
  • VOは約140〜160 wpmで、キーラインの前とCTAの後に意図的な無音があること。単語の途中でシーンカットがないこと。
  • VOがスマートフォンスピーカーでも音楽に打ち消されず完全に聞き取れること(確認済み、想定ではない)。音楽はスピーチ中は約30%のレベルにダッキングされていること。
  • トランジションあたりSFXは正確に1つであること。トラックがループするか、最終フレームで不自然に途切れずにクリーンに終了すること。
  • すべてのオーディオアセットのライセンスが意図された使用(商用/有料広告/クライアントワーク)を許可しており、クレジット要件が記録されていること。

やってはいけないこと

  • シーンの「自然な」長さを維持するために、カットをビートから外れたままにしないこと。代わりに、シーンを最も近いビートに伸縮またはトリミングすること。
  • ボイスオーバー中に音楽をフルレベルで再生しないこと。ダッキングしていない音楽は、VOがこもって聞こえる原因です。誰かが話すたびに必ずダッキングすること。
  • 1つのトランジションに複数のSFXを重ねたり、すべてのカットで同じ風切り音を使い回したりしないこと。変化をつけないと、耳がその音を認識しなくなります。
  • ここで<Audio> JSXを書いたり、startFrom/volumeコールバックを設定したり、レンダラーを呼び出したりしないこと。数値を生成し、それらをRemotion-compose/Remotion-renderに渡すこと。
  • YouTubeからのリッピング、ライセンスが明記されていない「無料」サイト、クライアントのSpotifyなどからトラックを取得しないこと。商用利用には、正規のロイヤリティフリーまたはライセンス供与されたソースが必要です。
  • ミックス全体を可能な限り大きな音量にノーマライズしないこと。ヘッドルームを残し、最も大きなインパクトがクリッピングしないようにすること。
  • 固定のランタイムに合わせてVOを急がせないこと。VOに合わせてビジュアルを再カットし、その逆をしてはいけません。

計算ツール:ビートグリッド

自己完結型のNodeスクリプトです。beat_grid.js として保存し、node beat_grid.js で実行します。BPMとfpsから、カットを配置すべき正確なフレーム番号を算出し、ダウンビートをマークします。依存関係はありません。出力されたフレームリストをRemotion-composeに <Sequence from={...}> の境界として渡します。

// ビートグリッド。入力を編集後、node beat_grid.js を実行
const input = {
  bpm: 120,            // 選択したトラックのテンポ
  fps: 30,             // プロジェクトのフレームレート
  durationSeconds: 12, // 動画の長さ
  beatsPerBar: 4,      // 4/4拍子。ダウンビートは4拍ごと
}

const framesPerBeat = (input.fps * 60) / input.bpm
const totalFrames = Math.round(input.durationSeconds * input.fps)
const beats = []
for (let b = 0; ; b++) {
  const frame = Math.round(b * framesPerBeat)
  if (frame > totalFrames) break
  beats.push({ beat: b + 1, frame, downbeat: b % input.beatsPerBar === 0 })
}

console.log('1ビートあたりのフレーム数:', framesPerBeat.toFixed(2), '(' + (60 / input.bpm).toFixed(3) + '秒)')
console.log('以下のフレームでカット (* = ダウンビート、ハードカットに最適):')
for (const b of beats) {
  console.log('  beat ' + String(b.beat).padStart(2), '-> frame', String(b.frame).padStart(4), b.downbeat ? '*' : '')
}
console.log('ダウンビートフレームのみ:', beats.filter((b) => b.downbeat).map((b) => b.frame).join(', '))

実行例出力

上記の入力でスクリプトは以下を出力します。

1ビートあたりのフレーム数: 15.00 (0.500秒)
以下のフレームでカット (* = ダウンビート、ハードカットに最適):
  beat  1 -> frame    0 *
  beat  2 -> frame   15 
  beat  3 -> frame   30 
  beat  4 -> frame   45 
  beat  5 -> frame   60 *
  beat  6 -> frame   75 
  beat  7 -> frame   90 
  beat  8 -> frame  105 
  beat  9 -> frame  120 *
  ...
ダウンビートフレームのみ: 0, 60, 120, 180, 240, 300, 360

解釈:120 BPM、30 fpsの場合、1ビートは正確に15フレームです。通常のトランジションはリストされた任意のフレームに配置し、最もハードなカット(イントロからコンテンツへのカット、CTAの出現など)はダウンビート(0、60、120…)に配置します。シーンを70フレームにしたい場合、カットを70フレームに浮かせるのではなく、75フレーム(ビート6)にスナップします。これらのスナップされた数値が、Remotion-composeが <Sequence from={...}> に投入する正確な値です。

計算ツール:ミックスレベルとダックタイミング

自己完結型のNodeスクリプトです。mix_levels.js として保存し、node mix_levels.js で実行します。ダッキング後の音楽レベルと、VOの各行に対してダッキングすべきフレーム範囲を計算するため、感覚的な指示ではなく、具体的なエンベロープをRemotion-composeに渡すことができます。依存関係はありません。

// ミックスとダッキングプランナー。入力を編集後、node mix_levels.js を実行
const input = {
  fps: 30,
  musicVolume: 0.8,       // 無音時の音楽レベル (0-1)
  duckToPercent: 0.30,    // VO中に音楽をこの割合まで下げる
  voVolume: 1.0,          // ボイスオーバーレベル (VOを常に最も大きな要素に保つ)
  duckFadeFrames: 8,      // フェードイン/アウトのフレーム数。急激な変化を避ける
  // VOラインを [開始秒, 終了秒] で指定。これらの間、フェードパッドを考慮して音楽をダッキング
  voLines: [
    [0.5, 3.2],
    [4.0, 7.5],
    [8.2, 11.0],
  ],
}

const duckedLevel = +(input.musicVolume * input.duckToPercent).toFixed(3)
const toFrame = (s) => Math.round(s * input.fps)
// 参考用dB: 20*log10(レベル)
const dB = (v) => (v <= 0 ? '-inf' : (20 * Math.log10(v)).toFixed(1) + ' dB')

console.log('VOレベル:           ', input.voVolume, '(' + dB(input.voVolume) + ')  <- 最も大きな要素')
console.log('音楽 (無音時):  ', input.musicVolume, '(' + dB(input.musicVolume) + ')')
console.log('音楽 (VO中ダック後):', duckedLevel, '(' + dB(duckedLevel) + ')')
console.log('ダックフェード:          ', input.duckFadeFrames, 'フレーム イン/アウト')
console.log('以下のフレーム範囲で音楽をダッキング (フェード用に両側に' + input.duckFadeFrames + 'fのパッドを含む):')
for (const [start, end] of input.voLines) {
  const a = toFrame(start) - input.duckFadeFrames
  const b = toFrame(end) + input.duckFadeFrames
  console.log('  VO ' + start + 's-' + end + 's  -> ダックフレーム', Math.max(0, a), 'to', b)
}

実行例出力

VOレベル:            1 (0.0 dB)  <- 最も大きな要素
音楽 (無音時):   0.8 (-1.9 dB)
音楽 (VO中ダック後): 0.24 (-12.4 dB)
ダックフェード:           8 フレーム イン/アウト
以下のフレーム範囲で音楽をダッキング (フェード用に両側に8fのパッドを含む):
  VO 0.5s-3.2s  -> ダックフレーム 7 to 104
  VO 4s-7.5s    -> ダックフレーム 112 to 233
  VO 8.2s-11s   -> ダックフレーム 238 to 338

解釈:VOはフルレベル(ミックス内で最も大きな要素)に保ち、音楽はギャップでは0.8、誰かが話している間は約3分の1の0.24にダッキングします。フェードは8フレームかけて行うため、急激な変化にはなりません。フレーム範囲は、Remotion-composeが音楽の<Audio> volumeコールバックに渡す正確な範囲です。範囲外ではフルレベル、範囲内ではduckedLevel、フェードパッド全体で線形ランプされます。これにより、音楽が消えてしまうことなく、言葉が明瞭に聞こえるのです。

テンプレート:オーディオキュ―シート

以下をコピーし、FILLフィールドをビートグリッドとミックスレベルの出力で埋め、完成したシートをremotion-composeに渡します。これは動画内のすべてのオーディオ判断に関する唯一の情報源です。

AUDIO CUE SHEET. [FILL: 動画名]. fps [FILL] / [FILL] BPM / [FILL]秒 合計

音楽
  トラック:                 [FILL: タイトル + ソース]
  ライセンス:               [FILL: 例 Epidemic Sound 商用 / CC0] - クレジット: [FILL: 必要/不要、テキスト]
  通常時レベル:     [FILL: 0-1]    VO中ダック後: [FILL: 0-1] (~30%)

ビートグリッド (beat_grid.js より) - カットはここに配置
  ダウンビートフレーム:       [FILL: 0, 60, 120, ...]
  ハードカット配置:          [FILL: 主要なカットが置かれるダウンビート]

効果音 (トランジションあたり1つ。モーションのピークに合わせてピーク)
  フレーム    SFX            役割
  [FILL]   [FILL 風切り音]  スワイプに先行 (カットの約4f前から開始、末尾がカットに重なる)
  [FILL]   [FILL インパクト] カードスラムイン。カットフレームに着地
  [FILL]   [FILL ライザー]   10-20fかけて盛り上がり、出現で解決
  [FILL]   [FILL ポップ]    UI要素出現

ボイスオーバー (~150 wpm。シーンはVOに合わせ、その逆ではない)
  ライン                                  開始    終了    シーン
  [FILL ライン]                            [FILL]  [FILL] [FILL]
  (キーライン前 / CTA後 8-15fの無音)

ダックエンベロープ (mix_levels.js より) - 音楽を下げるフレーム範囲
  [FILL: 7-104, 112-233, ...]  フェード [FILL]f イン/アウト

引継ぎ: remotion-compose が <Audio> + volume コールバックを配線。remotion-render がエクスポート。

references/royalty-free-sourcing

商用動画には、実際に使用許諾のある音楽が必要です。「YouTubeで見つけた」はライセンスではなく、クライアントのSpotifyも同様です。ユースケース別のライセンス/ロイヤリティフリーソース:

  • サブスクリプションライブラリ(クライアント/商用/広告に最も安全): Epidemic Sound、Artlist、Musicbed、Soundstripe。定額料金で幅広い商用ライセンス、大規模なSFXライブラリ、動画ごとのクレジットは不要。有料案件のデフォルトです。
  • 条件付き無料(各トラックの…

…

Individual skills in this repo

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

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

関連スキル