Communitygithub.com

konka0812/narrated-explainer-video

ユーザーが確定したナレーション内容と手持ちの素材に基づき、ナレーション付き解説アニメーションをデザイン・改良します。テーマ選定、原稿、ナレーション・字幕、既存映像のいずれからでも開始でき、必要に応じて絵コンテ設計、編集可能なアニメーション制作、レイアウト最適化、タイミング同期、最終出力・公開素材の作成を行います。知識解説、原理実演、製品紹介、意見解説に適しています。音声のみの書き起こし、通常の実写編集、ポスター制作のみの場合は本スキルを使用する必要はありません。

narrated-explainer-video とは?

このスキルは、ユーザーが合意したナレーション原稿と提供された素材(画像、動画、スクリーンショット、録画など)を基に、ナレーション付き解説アニメーション(口播科普動画)をデザイン・制作・改善するための包括的なガイドです。主にClaude CodeなどのAIエージェント環境で使用されることを想定しており、テーマ選定や原稿作成から、絵コンテ設計、Remotionなどのツールを用いたアニメーション制作、最終的な動画出力・公開素材の作成までをカバーします。 このスキルの特徴は、ユーザーの現在の進捗状況(テーマのみ、原稿のみ、音声・字幕あり、既存プロジェクトあり)に応じて柔軟に開始できる点と、常に「視聴者に何を伝え、何を見せるか」という原則に基づいて判断する点です。具体的なワークフローとして、内容と時間の基準確立、視覚的方向性の決定、文意に沿った連続的な画面構成、実制作・アニメーション、プレビュー・修正・納品という5つのステップが定義されています。 さらに、素材の効果的な活用方法、字幕とナレーションの同期確認、編集可能なコードベースのアニメーション推奨、画面レイアウトやフォント選定のベストプラクティス、そして納品時のチェックリスト(静止画確認、連続再生確認、ファイル確認の3段階)まで、実践的なノウハウが詳細に記述されています。これにより、AIエージェントはユーザーの意図を正確に汲み取り、一貫性のある高品質な解説動画を効率的に制作できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/konka0812/narrated-explainer-video/tree/HEAD

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

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

ドキュメント

ナレーション付き解説アニメーション(口播科普動画)

まず、ユーザーが視聴者に何を理解させたいのかを明確にし、次に手持ちの素材で視聴者に何を見せられるかを検討します。双方で合意したナレーション内容、ユーザー指定の最終版、および今回の納品範囲を優先します。 実写映像でプロセスが十分に説明されている場合は、そのまま連続して再生します。素材が結果のみを捉えている場合は、その結果を示し、図解で原理を説明します。ナレーションの意味を変更する必要がある場合は、該当する文を個別に取り上げて検討します。

以下のワークフロー、絵コンテ表、ショット例は、プロジェクトに応じて取捨選択できます。手法を選択する際は、次の3つの根拠を保持します:引用が元の意味に沿っていること、字幕のタイミングが選択されたバージョンに基づいていること、納品時に実際に何を確認したかを説明できること。

現在の進捗から開始

ユーザーから提供された材料、既存のプロジェクト、確定した決定事項を確認した上で、エントリーポイントを選択します。ユーザーに完全なワークフローを再度要求することは避けます。

  • テーマや見解のみ:核心となる問題、対象視聴者、結論を整理し、自然に話せる原稿の作成を支援します。内容が多すぎる場合は、焦点を絞るか分割することを提案し、無断で複数の動画に分割しないでください。
  • 原稿のみ:まずビジュアル案と大まかな絵コンテを作成できます。正式な音声がない場合のタイミングはあくまで推定であり、同期済みと宣言することはできません。
  • 音声と字幕が既にある:直接入力を確認し、タイムラインを決定し、絵コンテを設計します。古い原稿に基づいてタイミングを再編成しないでください。
  • 既存のプロジェクトや完成済み動画がある:まずユーザーがフィードバックしている箇所を特定します。編集可能なソースプロジェクトがある場合は、該当するレイヤーを修正します。MP4のみの場合は、まず文字が画像に焼き付けられているか(焼き込み字幕か)を確認します。部分修正の手順に従い、実行可能な調整を選択します。
  • 公開・納品が要求されている:最終的な入力とプロジェクトを照合し、対応する完成動画、サムネイル、またはコピー文を作成します。今回必要な納品物のみを作成します。

情報が不足している場合は、まず素材とプロジェクトから推測します。結果に実際に影響を与える場合にのみ質問します(例:最終的な音声バージョンが不明な場合)。ユーザーが事前に案の確認を明示的に要求した場合は、具体的な案を提示して待機します。すでに許可や確認がある場合は作業を続行し、段階的に承認を求めるために繰り返し停止しないでください。

レイアウトとタイムラインの実装に入る前に、画面サイズと公開シーン、尺の根拠、今回の納品物を明確にします。既存のプロジェクトと確定済みの要求を優先します。最終的なナレーションがある場合は、実際の尺に基づいて配置し、目標の尺に合わせるために音声をカットしないでください。明確な要求がない場合は、適切なデフォルト案を提案し、その前提条件を説明します。合理的に推測できず、かつ大量の手戻りが発生する可能性がある重要な選択については、ユーザーに確認します。テーマ選定や原稿作成など、これらの選択に依存しない作業は継続できます。

制作に入る前:環境の確認と準備

タスクがプロジェクトの実装またはプレビュー段階に入った場合は、まず環境確認と初回セットアップを読んでください。Remotionを選択したが、ローカル環境が利用できない場合は、まずランタイム環境のセットアップ、プロジェクトの初期化、依存関係のインストール、プレビューとテストフレームの検証を行ってから、動画全体を制作してください。 このスキルがインストールされていればRemotionも自動的にインストールされていると想定しないでください。

以下の状況を区別します:Remotionのガイダンススキルがない、Node.jsなどのランタイム環境がない、プロジェクトの依存関係がない、プロジェクト自体がない。既存のプロジェクトがある場合はそれを優先的に再利用し、ロックファイルに従って依存関係をインストールし、再初期化やアップグレードを避けます。原稿やビジュアル案のみが要求されている場合は、ソフトウェアをインストールする必要はありません。

1. 内容と時間の基準の確立

現在の入力ファイル、音声の長さ、字幕の範囲、画面サイズ、フレームレート、プロジェクトのエントリポイント、目標納品物を記録します。ユーザー指定の最終バージョンを、古い原稿や古い出力よりも優先します。

  • 字幕の原文、番号、絶対時間を保持します。不足している文、空の字幕、逆順、重複、表示時間が短すぎる、音声を超えているなどの問題をチェックします。重複は意図的なデザインである可能性もあるので、まず判断します。
  • 確定稿を使用して文の意味を理解し、最終的なSRTを使用して字幕の位置を特定し、実際の発声と間を使用してアクションを配置します。ユーザーが「新しい字幕に従う」と指定した場合は、新しい字幕に従ってデザインします。音声とそれに実質的な差異がある場合は、具体的な文と時間帯を指摘し、無断で単語を変更したり、タイムコードを移動したりしないでください。
  • 時事性のある事実、数字、ポリシー、ニュースソースは検証する必要があります。比較を行う場合は、まず対象とバージョンを明確にし、定義、単位、適用条件が比較可能かどうかを確認します。最終的な録音に意味に影響を与える誤りが含まれている場合は、具体的な修正を提案し、映像とナレーションが矛盾しないようにします。
  • 新しい音声または字幕が届いたら、影響を受ける時間帯、字幕、トランジション、総フレーム数を再計算し、後続のショットが同期したままかどうかを確認します。

SRTがある場合は、scripts/inspect_media.pyを実行して構造と長さを確認できます。最終的な音声があり、アクションを同期させる必要がある場合は、絵コンテを配置する前に、変更された文や識別しやすいフレーズを事前に聞くことができます。方法は実装と同期を参照してください。

2. 判断可能なビジュアルの方向性を先に決定する

新しい方向性を提案する際は、原稿の一文を使って、どのような画面で説明するかを示すことができます。既存の素材がある場合は、どの詳細を拡大する価値があるか、どの間が視聴者に図を読ませるのに適しているかを指摘します。自作の図が必要な場合は、それがどのような関係を描くのかを説明します。配色、フォント、構図については、今回決定が必要な部分のみ展開します。

内容と素材を同時に考慮する

ユーザーが素材を説明しただけで、まず構想を話し合いたい場合は、説明に基づいて条件付きのデザインを提案できます(例:「写真に光源と机の両方が写っている場合は、両方をフレーム内に収める」)。画像の選択、トリミング、操作の位置合わせの段階になったら、実際のファイルを確認し、それが何を示しているか、どの詳細を保持する必要があるかを確認します。一つの素材で数文を説明できる場合は、十分な画面時間を割り当てます。

ユーザー提供の画像、スクリーンショット、画面録画、実写素材がある場合は、まず素材デザインと再利用を読み、それらとナレーションの対応関係を確立してから、そのまま表示するか、部分拡大するか、実データに基づいて描き直すか、説明アニメーションを組み合わせるかを選択します。既存の素材がない場合は、テーマと対象視聴者に基づいて、コードで生成したグラフィックや素材を準備できます。キャラクターと表情はその中の一つのオプションにすぎません。

  • 表現方法をテーマに適合させます。メカニズムには模式図アニメーション、プロセスにはオブジェクトの流れ、コメントには証拠と見解の明確な区別が適しています。すべてのコンテンツを同じカードレイアウトに押し込めないでください。
  • ユーザーが指定していない場合は、16:9、1920×1080、30fpsを提案できます。既存のプロジェクト、縦型画面の要件、プラットフォームの要求がある場合はそちらを優先します。フォントはコンテンツの雰囲気と言語に適合させる必要があり、丸ゴシックや特定のブランドに固定しないでください。
  • 冒頭では、できるだけ早く視聴者に問題と主体を見せます。初心者向けに複数の用語を紹介する場合は、まずこの動画が視聴者の何を理解するのを助けるのか、またはどのような決定を下すのを助けるのかを説明します。リストを表示する必要がある場合は、視聴者が理解できる問題ごとにグループ化し、その中に用語を配置します。
  • スタイルに満足できない場合は、構図、素材の言語、ショットのリズム、動きのロジックをチェックします。配色を変えるだけでは、テンプレート感を解消できないことがよくあります。

まず代表的な画面で方向性を検証する

レイアウトの問題は、最も処理が難しい画面を選んで試作し、静止画で判断します。新しいスタイルや大規模なリズムの変更を検証する場合は、異なる解説タスクを担当する2つのセクションを選んで短いサンプル動画を作成し、前後のつなぎを含めて連続再生します。動作がナレーションに追いついているか、視線が重要な情報に誘導されているか、結果に十分な読み取り時間が確保されているか、構図や登場方法が繰り返されていないかをチェックします。ユーザーが先に案の確認を要求した場合は、確認を待ってから展開します。明確な方向性がある場合や、部分修正のみの場合は、そのまま進めます。

3. 文意に沿った連続的な画面構成

まず、同じ問題を説明する数文のナレーションを一つのグループにまとめ、視聴者が追跡できる主体を選びます。一文ごとに、視聴者が今どこを見るべきかを判断し、画面はオブジェクトの変化、視線の移動、または結果の表示として応答できます。新しい問題に移る場合は、解説の必要性に応じて、主体、構図、動きの方法を再選択します。単純な断片は、一文で説明できるショットで十分です。ユーザーが一文ごとの動きや複雑なショットの連続を要求する場合は、字幕IDと時間を使用して、各文に対応する変化を明記します。絵コンテと意味アニメーションには、取捨選択可能な表と連続ショットの例があります。

変化が意味を表現するように優先します。出現理由、発生プロセス、状態比較、蓄積、分解、試行錯誤、フィードバック、結果などです。同じオブジェクトを全編にわたって使用することもできますが、それはナラティブに沿って発展する必要があります。静止素材の繰り返し使用は発展を代替できません。

一つのショットでは、主要な注意の中心を一つだけ確立します。字幕、タイトル、イラスト、ショットの動きが互いに競合しないようにします。複雑なメカニズムは、段階的に出現させ、安定して観察できるようにします。動きの数は品質の指標ではありません。

4. 画面とアニメーションの制作

Remotionを使用する場合は、公式の remotion-best-practices スキルを同時に使用し、実装と同期を読んでください。そのスキルがない場合は、環境確認と初回セットアップを参照して入手し、今回の実装に関連するガイダンスを読み込んでください。インストールが妨げられた場合は制限を説明し、公式ドキュメントを使用して処理可能な部分を続行します。既存の非Remotionツールチェーンが適切な場合はそれを継続して使用でき、このスキルを使用するためにプロジェクトを強制的に移行する必要はありません。

  • 図形、矢印、数値、グラフ、状態変化は、編集可能なコードまたはベクター要素として優先的に作成します。イラスト、テクスチャ、人物が必要な場合にのみ、ビットマップ素材を生成または選択します。
  • 独立した動きが必要な主体はレイヤー化する必要があります。画像生成はビジュアル素材を提供しますが、ショットと動きは依然としてタイムラインに沿って設計する必要があります。実際のスクリーンショットと画面録画は事実の提示を担当し、補助アニメーションは関係の説明を担当します。重要な操作を装飾アイコンで置き換えたり、すべての素材を常に同じ側に固定して表示したりしないでください。
  • ニュースと証拠は実際のソースを使用し、その出典を明記します。生成画像は、ニュースのスクリーンショット、テスト結果、統計的証拠になりすましてはいけません。スクリーンショットの拡大とハイライトは、関連領域を正確に指し示し、必要なコンテキストを保持する必要があります。
  • 用途に応じて画面内のテキストを保持します。タイトルは問題を提起したり、転換を示唆したり、ラベルはオブジェクト、データ、条件の識別を助け、字幕はナレーションを引き継ぎます。絵コンテの説明は、可能な限り画面の動きや状態変化に変換します。レビュー時には、一時的に追加のテキストを非表示にしても問題ありません。画面が容易に理解できる場合は削除できます。キーワード、数式、重要な結論は2箇所に出現しても構いませんが、明確な主従関係を持ち、必要に応じて時間をずらします。複雑な背景上のテキストは、安定した背景色、部分的なマスク、または独立したレイアウトを使用してコントラストを確保します。
  • タイトルとラベルは、ナレーションに合わせて登場させ、読み終わったら注意を主体または次のショットに戻します。具体的な方法はテキストとレイアウトの制御を参照してください。
  • 目標とする視聴サイズで、タイトル、図注、スクリーンショットの原文、字幕を確認します。主体の拡大、レイアウトの整理、重要部分のトリミングを、装飾を追加して空白を埋めることより優先します。
  • 字幕とプラットフォームのインターフェースのためにスペースを確保します。重要なアクション、出典、説明は字幕の後ろに隠れないようにします。フォントと素材は、プロジェクトと共に安定して読み込まれる必要があります。

5. プレビュー、修正、納品

今回の納品に応じて確認方法を選択し、以下の3種類のエビデンスを区別します。

  1. 静止画:構図、文字サイズ、コントラスト、隠蔽、スクリーンショットのハイライト位置。
  2. 連続再生:ナレーション、字幕、アクション、トランジションの同期状態、繰り返しや間の適切さ。
  3. ファイル確認:解像度、フレームレート、尺、オーディオトラック、コーデック、デコード可能性。

「ビルド成功」「数枚のスクリーンショットを見た」だけで、動画全体の動的な検証を代替してはいけません。実際の確認範囲を記録します。視聴または聴取できなかった部分は正直に説明し、全てをパスしたと宣言しないでください。

フィードバックを受け取ったら、まず具体的な画面を特定します(例:「字が小さい」は、タイトルのフォントサイズが不足しているのか、ページ全体のスクリーンショットを小さく縮小しすぎているのか)。修正後は、変更した時間帯とその前後のつなぎを再確認します。共有コンポーネントが関わる場合は、影響を受ける他のショットも確認します。

完成動画が必要な場合は、承認された範囲で出力し、最終ファイルを検証します。サムネイル、公開タイトル、コピー文は必要な場合のみ作成し、内容は最終動画を基準とします。タイトルは魅力的にしますが、結論を拡大解釈しないでください。公開素材の作成は、ユーザーに代わって外部プラットフォームに公開することと同義ではありません。

最終的な音声、字幕、編集可能なプロジェクト、参照素材、完成動画、必要な出典を保持します。ファイル名はテーマまたはプロジェクト名を使用し、話数、個人ディレクトリ、マシン環境をハードコードしないでください。クリーンアップする前に、プロジェクトの参照と共有依存関係を確認し、古いファイルの削除をデフォルトの手順としないでください。

今回の取り決めに従って、案、部分プレビュー、または完成動画を納品します。動画を納品する際は、位置、仕様、実際の確認結果を添付し、編集可能なプロジェクトがある場合はそのエントリポイントも提供します。

関連スキル