mcpField
C
content-video

content-video

github.com/vstorm-coクリエイティブ・メディア2645 回インストール28 週間前に更新
リポジトリ

content-video について

content-videoは、動画スクリプトと絵コンテを作成するスキルで、Remotionによるプログラム生成用コードにも対応します。ショート動画、解説、データストーリー、トーキングヘッド動画を制作する人向けに、ブランドの語調やビジュアル、尺、レビューを支援します。

主な機能

  1. 01シーンごとの絵コンテを作成
  2. 02ナレーションと映像指示を執筆
  3. 034種類の動画形式から選択
  4. 04RemotionのTSXコンポジションを生成
  5. 05ブランドの語調とビジュアルを反映
  6. 06尺、テンポ、トランジションを確認

活用シーン

  1. 01ソーシャルショートや解説動画を企画
  2. 02編集チーム向けの絵コンテを準備
  3. 03Remotion動画のコードを生成
  4. 04データに基づく動画プレゼンを作成

インストール

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

$npx skills add https://github.com/vstorm-co/content-skills --skill content-video

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

同梱ファイル

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

remotion-patterns.md
storyboard-template.md
templates/
data-story.tsx.template
explainer.tsx.template
social-short.tsx.template
talking-head.tsx.template

詳細

動画スクリプトとRemotionコンポジションの生成

始める前に

  1. ブランドアイデンティティを確認する：brand/VOICE.mdとbrand/VISUAL.mdが存在する場合は読みます。動画コンテンツには、ナレーションやスクリプトのトーンに関わるボイスと、色、フォント、ロゴアニメーションに関わるビジュアルアイデンティティの両方が必要です。これらのファイルが存在しない場合は、妥当なデフォルトを使用し、ユーザーにcontent-setupスキルの実行を提案します。

  2. ユーザーが必要としているものを確認する：このスキルでは、次の2種類の出力を生成できます。

    • ストーリーボード／スクリプトのみ -- ナレーション、ビジュアルの指示、タイミングを含むシーンごとのドキュメントです。編集者や録音チームへの引き継ぎに適しています。
    • ストーリーボード＋Remotionコード -- 上記すべてに加え、Remotionを使ってプログラムからレンダリングできるTSXコンポジションです。コード駆動の動画をユーザーが希望する場合に使用します。

  3. テンプレートの種類を決める：ユーザーに確認するか、プロンプトから判断して、適切な形式を選びます。

    • ソーシャルショート（15～60秒） -- インパクトを重視し、冒頭で視聴者を引きつける、縦型または正方形の形式（templates/social-short.tsx.template）
    • 解説動画（2～5分） -- セクション、図解、コードアニメーションを含む構成化された解説（templates/explainer.tsx.template）
    • データストーリー -- アニメーション付きチャート、数値の表示、データの切り替え（templates/data-story.tsx.template）
    • トーキングヘッド -- カメラの前にいる人物、ローワーサード、名前カード、トピックオーバーレイ（templates/talking-head.tsx.template）

  4. 入力情報を集める：トピック、ターゲットオーディエンス、主要なメッセージ、希望する長さ、プラットフォーム（YouTube、TikTok、LinkedIn、X、Instagram Reels）、既存のアセット（画像、ロゴ、データ）を確認します。

生成の流れ

次の段階に沿って進めます。いずれの段階も省略しないでください。

Stage 1：ブリーフ

次の項目をユーザーに確認するか、プロンプトから抽出します。

  • トピックと中核となるメッセージ（1文）
  • ターゲットオーディエンスとプラットフォーム
  • テンプレートの種類（social-short、explainer、data-story、talking-head）
  • 希望する長さ
  • Remotionコードが必要かどうか
  • 利用可能なアセット：ロゴファイル、ブランドカラー、フォント、映像素材、データ
  • ナレーションのスタイル：ボイスオーバー、画面上のテキストのみ、またはトーキングヘッド
  • 音楽の雰囲気：アップビート、落ち着いた、ドラマチック、企業向け、遊び心のある、なし
Stage 2：ストーリーボード

storyboard-template.mdで定義されている形式を使って、シーンごとのストーリーボードを作成します。

  • シーン番号とタイムスタンプの範囲
  • ビジュアルの説明（視聴者に見えるもの）
  • ナレーションまたは会話（正確なスクリプト、または主要な話題）
  • 動きに関する注記（カメラの動き、トランジション、アニメーション）
  • 音声の指示（音楽の変化、効果音、無音）
  • シーンごとの長さ

Remotionコードを書く前に、ユーザーにストーリーボードを提示して承認を得ます。

Stage 3：スクリプトの仕上げ

ナレーションや会話を洗練させます。

  • brand/VOICE.mdのブランドボイスを適用する
  • ペースが目標時間に合うようにする（ナレーションはおよそ1分あたり150語）
  • 自然なリズムになるよう、文の長さに変化をつける
  • 目で読む文章ではなく、耳で聞く文章にする -- 短い文、能動態、会話のような流れ
  • 話し手が強調する箇所に強調マーカーを追加する
  • 間が必要な箇所にポーズの指示[PAUSE]を含める
Stage 4：Remotionコンポジション（希望する場合）

remotion-patterns.mdのパターンと適切なテンプレートを使って、TSXコンポジションを生成します。

  • durationInFrames、fps、width、heightを正しく設定してCompositionを構成する
  • アニメーションのタイミングにuseCurrentFrame()とuseVideoConfig()を使う
  • brand/VISUAL.mdのブランドカラーとフォントを適用する
  • <Series>および<Sequence>コンポーネントを使ってシーン間のトランジションを実装する
  • 自然な動きになるようスプリングアニメーションを追加する
  • ストーリーボードの指定に従い、テキストオーバーレイ、ローワーサード、データビジュアライゼーションを含める
  • すべてのコンポジションを単一のRoot.tsxからエクスポートする
ステージ 5：レビュー

パッケージ全体を、次の基準に照らしてレビューします。

  • 冒頭の 3 秒で注目を集めていますか？
  • プラットフォームと動画の長さに適したテンポですか？
  • すべてのシーンが中心となるメッセージに役立っていますか？
  • トランジションは滑らかで意図的ですか（単なる装飾になっていませんか）？
  • ビジュアルスタイルはブランドアイデンティティに合っていますか？
  • ナレーション原稿は声に出して読んだときに自然ですか？
  • 音声の指示は、制作担当者が具体的に対応できる内容ですか？

ストーリーボードの形式

すべてのストーリーボードで、storyboard-template.md に定義された形式を使用します。各シーンには、次の項目を含めてください。

項目説明
シーン番号連番
タイムスタンプ開始時刻と終了時刻（例：0:00-0:05）
ビジュアル画面に表示されるもの――構図、色、動き
ナレーション実際に話す言葉、またはテキストとして表示する内容
モーションカメラの動き、要素のアニメーション、トランジション
音声音楽、効果音、環境音、無音
長さ秒数

Remotion との統合

Remotion コードを生成する際は、次の原則に従ってください。

  1. 動画の種類ごとに 1 つのコンポジション：各テンプレートを、それぞれ独自の props インターフェースを持つ Remotion コンポジションに対応させます。
  2. ブランドトークンを定数として定義：brand/VISUAL.md の色、フォント、余白を共通の theme.ts ファイルに抽出します。
  3. シーンベースのアーキテクチャ：ストーリーボードの各シーンを React コンポーネントにし、<Sequence> 内でレンダリングします。
  4. アニメーションパターン：要素の表示・非表示にはスプリングアニメーションを使用します。連続的な動きには interpolate() を使用します。remotion-patterns.md を参照してください。
  5. レスポンシブテキスト：useVideoConfig() の寸法に基づいてテキストのサイズを調整し、複数の解像度でコンポジションが動作するようにします。
  6. アセット管理：画像やフォントは、Remotion の staticFile() ヘルパーを介して参照します。

テンプレートの参照

テンプレート長さ最適な用途
social-short.tsx.template15-60sTikTok、Reels、X のクリップ、LinkedIn のショート動画
explainer.tsx.template2-5 min製品の紹介、チュートリアル、機能の発表
data-story.tsx.template30s-3 min指標のプレゼンテーション、四半期ごとの更新、データジャーナリズム
talking-head.tsx.template1-10 minインタビュー、解説、ソートリーダーシップ

ブランドとの統合

動画コンテンツは、音声とビジュアルの両方の面でブランドを反映する必要があります。

ビジュアルの一貫性（brand/VISUAL.md より）：

  • 背景、テキスト、アクセントに使用するメインカラーとサブカラー
  • タイトル、本文、ローワーサードに使用するブランドフォント
  • ロゴのアニメーション：イントロでの配置、ウォーターマークの位置、アウトロでの演出
  • 一貫したパディング、マージン、レイアウトグリッド

声の一貫性（brand/VOICE.md より）：

  • ナレーションのトーンをブランドの個性に合わせる
  • 語彙の選択をブランドガイドラインに沿わせる
  • ユーモア、フォーマルさ、エネルギーのレベルをブランドに合わせる

音声のガイダンス：

  • 音楽の雰囲気をブランドの個性に合わせます（例：遊び心のあるブランドには、アップテンポな曲を使用します）
  • 効果音は控えめで意図のあるものにし、奇をてらったものは避けます
  • ナレーションの速度：エネルギーのレベルに応じて、1 分あたり 130～160 語

出力チェックリスト

最終パッケージを納品する前に、次の点を確認します。

  • すべてのシーンが記録され、ストーリーボードが完成している
  • ナレーション原稿は、声に出して読んだときに自然である
  • 合計時間が指定された範囲に収まっている
  • 冒頭の 3 秒以内にフックで注目を集めている
  • ブランドカラー、フォント、ロゴが正しく適用されている（Remotion の場合）
  • Remotion コードがエラーなくコンパイルされ、レンダリングできる（該当する場合）
  • すべてのコンポジションが Root.tsx からエクスポートされている（Remotion の場合）
  • シーン間のトランジションが滑らかで、意図が明確である
  • 音声の指示が具体的で、対応可能な内容になっている
  • スクリプト全体を通して、声がブランドのプロフィールに合っている

コメント

Markdown 対応