Communitygithub.com

文字起こしからキャプション生成

動画から正確で適切なタイミングのキャプションファイル(SRTまたはWebVTT)を作成します。

文字起こしからキャプション生成 とは?

このスキルは、動画のナレーションや音声から、正確なタイミングと整形済みのキャプションファイル(SRTまたはWebVTT)を生成します。アクセシビリティの向上、ミュート視聴のサポート、チュートリアルでのUI用語の正確な伝達などに役立ちます。まず、可能な限りナレーション台本を正解データとして使用し、それがなければ音声認識(Whisperなど)で書き起こした後、動画と照らし合わせて用語やコード、略語を修正します。キャプションのタイミングは音声に合わせ、1行あたりの文字数や表示速度を最適化し、読みやすさを確保します。出力形式はSRT(汎用)とWebVTT(ウェブプレイヤー向け)の2種類に対応し、装飾や焼き込みは後続のツールに委ねます。最終的には動画の複数箇所で同期を確認し、品質を保証します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/captions-from-transcript

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

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

ドキュメント

文字起こしからキャプション生成 は何をしますか?

キャプションは単なるオプションの仕上げではありません。アクセシビリティそのものであり、ミュートで視聴するユーザーを引きつけ、チュートリアルでは正確なUI用語を伝えるために不可欠です。このスキルは、クリーンで正確なタイミングのキャプションファイルを生成します。スタイル設定や焼き込みは後続処理で行います。

まず最も正確なテキストを入手する

正確さは出発点で決まります。

  • ナレーション台本が存在する場合は、それを正解データとして使用します。 技術用語やUIラベルはすでに正しいので、再書き起こしするのではなく、音声に合わせて調整します。
  • それ以外の場合は音声を書き起こし(Whisper、プラットフォームの自動キャプション、またはその他のASR)、その後動画に合わせて修正します。ASRは製品名、コード、略語を確実に誤認識します。画面上に表示されているものと完全に一致するよう、1つずつ修正してください。

加工されていないASR出力をそのまま提供してはいけません。エラーは常に最も重要な単語に発生します。

キャプションのタイミングを音声に合わせる

  • 各キャプションは、その行が話された瞬間に表示され、終了したら消えます。任意の間隔ではなく、音声に合わせて調整します。
  • 最低表示時間は約1秒(短いキャプションでも)、最大は約7秒。それ以上長い場合は分割します。
  • 文の途中にギャップを作らない。文と文の間の小さなギャップは問題なく、読みやすさを向上させます。

行数と読みやすさのルール

  • 1キャプションあたり1〜2行。3行にしてはいけません。
  • 1行あたり約32〜42文字。それを超えると画面に収まりきらず、安全領域をはみ出します。
  • 読み取り速度は約17文字/秒以下(約160〜180語/分)。キャプションがこれを超えると文字が一瞬で過ぎ去るため、キャプションを分割するか、表示時間を延ばしてください。
  • 文節の切れ目で行を区切り、途中で切らない。"to the Settings page" はまとめて表示し、「the」だけを一行に残さない。

フォーマットの選択

  • SRT - 汎用。インデックス + HH:MM:SS,mmm --> HH:MM:SS,mmm + テキスト。ほとんどのプラットフォームや編集ソフトにアップロードする場合に使用します。
  • WebVTT(.vtt) - WEBVTT ヘッダー、HH:MM:SS.mmm タイムスタンプ、キャプションの位置やスタイル設定に対応。HTML5の <track> やウェブプレイヤーで使用します。

有効でパース可能な出力を生成するには、タイムスタンプの句読点を正しく使用し(SRTはミリ秒の前にカンマ、VTTはピリオド)、キャプション間は空行で区切り、末尾の空白を入れないでください。

クリーンか逐語か

チュートリアルでは、キャプションはクリーンにします。フィラー(「えーと」「あのー」、言い直し)は削除し、意味はそのままにします。技術用語、コード、UIラベルは正確に保持します。厳密な逐語が必要な場合(法的、研究、正確な引用のコンテキスト)のみ、厳密逐語にします。

同期のQA

動画の開始点、中間、終了点で実際の動画とスポットチェックを行います。ドリフトが蓄積されていないか確認します。キャプションが各行に正しく表示され、次のキャプションが始まる前に消えることを確認します。間違ったショットにキャプションが残っている場合は修正します。

引き継ぎ

完成した .srt / .vtt ファイルは、social-video-formatter(焼き込みとプラットフォームスタイル設定用)や、ウェブプレイヤーの <track> 要素に直接渡します。色、フォント、位置、アニメーションはこれらの手順に任せます。このスキルは、正確でタイミングの合ったテキストのみを出力します。

禁止事項

  • キャプションのスタイル設定、色付け、位置指定、フレームへの焼き込みを行わないでください。これらはsocial-video-formatterの役割です。
  • 単語を一語ずつアニメーションさせないでください。それはkinetic-typographyの役割です。
  • 未修正のASRを出荷しないでください。間違いは、重要な用語に集中して発生します。
  • キャプションの分割を避けるために3行にしたり、読み取り速度の制限を超えたりしないでください。分割してください。

Individual skills in this repo

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

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

Sound and Music Sync

Score a video like an editor: beat-match cuts to the music, land SFX on transitions, pace the voiceover so it breathes, source royalty-free tracks safely, and duck the music so the VO sits clearly on top. Use when adding music, sound effects, or voiceover to a video, when asked to

関連スキル