Communitygithub.com

JEO-tech-ai/oh-my-unity3d

Remotionを使用して、シーン計画、アセットオーケストレーション、検証ゲートを備えたプログラム可能なビデオを生成し、ブランドに一貫した自動化ビデオコンテンツを実現します。

oh-my-unity3d とは？

このスキルは、プログラマブルなビデオ制作フレームワークRemotionを活用して、テキスト指示から自動的にビデオを生成するためのものです。マーケティング担当者や開発者は、一貫したブランドスタイルを維持しながら、製品紹介、オンボーディング動画、プロモーションコンテンツを高効率で量産できます。スキルは5つのステップに分かれており、最初にビデオの仕様を定義し(YAML形式)、次にシーン構成を計画、アセット(ロゴ、スクリーンショット、音声、フォント)を準備した後、Remotionコンポーネント(React/TSX)を実装し、最後にプレビューとQAを経てレンダリングを行います。各ステップには具体的なテンプレートやコード例が含まれ、Claude、ChatGPT、Gemini、Codexなどのマルチエージェント環境で動作します。検証ゲートを組み込むことで、レンダリング前の品質チェックが保証され、マルチエージェントワークフローによる協調的なレビューも可能です。

対応✓Claude Code✓Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/JEO-tech-ai/oh-my-unity3d/tree/HEAD/.unity-skills/video-production
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Remotion ビデオ制作

Remotion を使用したプログラム可能なビデオ制作スキル。テキスト指示から自動的にビデオを生成し、一貫性のあるブランドに沿ったビデオコンテンツをスケールして作成できます。

このスキルを使用するタイミング

  • 自動ビデオ生成: テキスト指示からビデオを生成
  • ブランドビデオ制作: 一貫したスタイルの大量ビデオ
  • プログラム可能なコンテンツ: ナレーション、ビジュアル、アニメーションの組み合わせ
  • マーケティングコンテンツ: 製品紹介、オンボーディング、プロモーションビデオ

手順

ステップ1: ビデオ仕様の定義

video_spec:
  audience: [ターゲットオーディエンス]
  goal: [ビデオの目的]
  duration: [合計時間 - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [ナレーションスタイル]
    language: [言語]

ステップ2: シーンの概要作成

シーン構成テンプレート:

## シーンプラン

### シーン1: フック (0:00 - 0:05)
- **ビジュアル**: 製品ロゴのフェードイン
- **オーディオ**: アップビートなイントロ
- **テキスト**: 「ワークフローを変革」
- **トランジション**: フェード → シーン2

### シーン2: 問題 (0:05 - 0:15)
- **ビジュアル**: 問題状態のイラスト
- **オーディオ**: ナレーション開始
- **テキスト**: キーメッセージオーバーレイ
- **トランジション**: 左にスライド

### シーン3: 解決策 (0:15 - 0:30)
...

ステップ3: アセットの準備

# アセットチェックリスト
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

アセット準備ルール:

  • ロゴ: SVG または高解像度 PNG
  • スクリーンショット: ターゲットアスペクト比に正規化
  • オーディオ: MP3 または WAV; 音量を正規化
  • フォント: Webフォントまたはローカルフォントファイル

ステップ4: Remotion コンポジションの実装

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60秒 (30fps)
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// シーンコンポーネント例
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>ワークフローを変革</Title>
    </AbsoluteFill>
  );
};

ステップ5: レンダリングとQA

# 1. プレビューレンダリング (低品質)
npx remotion preview src/Video.tsx

# 2. QAチェック
- [ ] タイミング
- [ ] オーディオ同期
- [ ] テキストの読みやすさ
- [ ] スムーズなトランジション

# 3. 最終レンダリング
npx remotion render src/Video.tsx ProductIntro out/video.mp4

例

例1: 製品紹介ビデオ

プロンプト:

6シーン、アップビートなトーン、16:9出力で60秒の製品紹介ビデオを作成してください。最後にCTAを含めてください。

期待される出力:

## シーン分解
1. フック (0:00-0:05): ロゴ + タグライン
2. 問題 (0:05-0:15): ペインポイントの視覚化
3. 解決策 (0:15-0:30): 製品デモ
4. 機能 (0:30-0:45): 主要なメリット (3項目)
5. 社会的証明 (0:45-0:55): お客様の声/統計
6. CTA (0:55-1:00): 行動喚起 + 連絡先

## Remotion 構造
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

例2: オンボーディングウォークスルー

プロンプト:

スクリーンショットを使用した45秒のオンボーディングウォークスルーを、コールアウト付きで、モバイル用の9:16フォーマットで生成してください。

期待される出力:

  • 5ステップのシーンプラン
  • アセットリスト (スクリーンショット、コールアウト矢印)
  • テキストオーバーレイとトランジション
  • モバイルセーフマージン適用

ベストプラクティス

  1. 短いシーン: 各シーンは5〜10秒で明確に保つ
  2. 一貫したタイポグラフィ: タイポグラフィスケールを定義する
  3. オーディオ同期: ナレーションの合図をビジュアルに合わせる
  4. テンプレートの再利用: 再利用可能なコンポジションを保存する
  5. セーフゾーン: モバイルアスペクト比のために余白を確保する

よくある落とし穴

  • テキスト過多: シーンごとのテキスト量を制限する
  • モバイルセーフゾーンの無視: 9:16出力で端を確認する
  • QA前の最終レンダリング: 必ず最初にプレビューで確認する

トラブルシューティング

問題: オーディオとビジュアルが同期しない

原因: フレームタイミングの不一致 解決策: フレームを再計算し、タイムスタンプを調整する

問題: レンダリングが遅い、または失敗する

原因: 重いアセットまたはエフェクト 解決策: アセットを圧縮し、アニメーションを簡素化する

問題: テキストが読めない

原因: フォントサイズが小さすぎる、またはコントラストが不十分 解決策: 少なくとも24pxのフォントと高コントラスト色を使用する

出力形式

## ビデオ制作レポート

### 仕様
- 時間: 60s
- アスペクト比: 16:9
- FPS: 30

### シーンプラン
| シーン | 時間 | ビジュアル | オーディオ | トランジション |
|-------|----------|--------|-------|------------|
| フック  | 0:00-0:05 | ロゴフェード | BGM開始 | フェード |
| ...   | ...      | ...    | ...   | ...  |

### アセット
- [ ] logo.svg
- [ ] スクリーンショット (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### レンダリングチェックリスト
- [ ] プレビューQA合格
- [ ] オーディオ同期確認
- [ ] セーフゾーン確認
- [ ] 最終レンダリング完了

マルチエージェントワークフロー

検証と振り返り

  • ラウンド1 (オーケストレーター): 仕様の完全性、シーンカバレッジ
  • ラウンド2 (アナリスト): ナラティブの一貫性、ペーシングレビュー
  • ラウンド3 (エグゼキュータ): レンダリング準備完了チェックリストの検証

エージェントの役割

エージェント役割
Claudeシーン計画、スクリプト作成
Geminiアセット分析、最適化提案
CodexRemotionコード生成、レンダリング実行

メタデータ

バージョン

  • 現在のバージョン: 1.0.0
  • 最終更新日: 2026-01-21
  • 互換プラットフォーム: Claude, ChatGPT, Gemini, Codex

関連スキル

タグ

#video #remotion #animation #storytelling #automation #react

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community