remotion-asset-coordinator

Name: remotion-asset-coordinator
Author: ncklrs

github.com/ncklrsクリエイティブ・メディア53173 回インストール35 週間前に更新

リポジトリ

remotion-asset-coordinator について

Remotion の動画プロジェクトで素材準備を調整するスキルです。デザイン仕様を制作向けファイルに整えるクリエイターや開発者向けに、素材一覧、形式や入手先の提案、準備手順、インポートコード、品質確認項目を提供します。

主な機能

01動画仕様から素材要件を抽出
02素材の入手先と形式を提案
03素材マニフェストと準備手順の作成
04Remotion のインポートコード生成
05チェックリストによる品質確認

活用シーン

01動画仕様から必要素材を整理
02画像・動画・音声の準備と最適化
03素材用の Remotion インポートコード作成
04制作要件に沿った素材の確認

インストール

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

$npx skills add https://github.com/ncklrs/startup-os-skills --skill remotion-asset-coordinator

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

同梱ファイルrules/_sections.md

詳細

Remotion アセットコーディネーター

モーションデザイン仕様から本番環境向けファイルまで、アセット準備のワークフローを効率化します。必要なアセットを特定し、入手先を推奨し、最適化をガイドして、適切なインポートコードを生成します。

このスキルでできること

アセットのライフサイクル全体を調整します。

要件の抽出 — 仕様を解析して、必要なアセットをすべて洗い出します
入手先の推奨 — 無料・有料のアセット入手先を提案します
フォーマットのガイド — アセットの種類ごとに最適なフォーマットを推奨します
準備ワークフロー — アセット準備の手順を段階的に案内します
インポートコードの生成 — 検証済みの staticFile インポートを作成します
品質の検証 — アセットが本番環境の基準を満たしているか確認します

入力／出力フォーマット

入力フォーマット：VIDEO_SPEC.md または CODE_SCAFFOLD.md

このスキルは次のいずれかを受け付けます。

オプション 1：VIDEO_SPEC.md（/motion-designer から）

# Video Title

## Assets Required

### Images
- Logo (800x800, transparent background)
- Product photo (1920x1080)

### Audio
- Background music (full duration, 0.4 volume)
- Whoosh sound effect (5s mark, 0.6 volume)

### Fonts
- Inter (weights: 400, 600, 700)

オプション 2：CODE_SCAFFOLD.md（/remotion-spec-translator から）

## TODO Markers

- [ ] **Assets Required**
  - [ ] Add `public/logo.png` (800x800)
  - [ ] Add `public/audio/background.mp3`
  - [ ] Add `public/audio/whoosh.mp3`

出力フォーマット：ASSET_MANIFEST.md

アセット準備の包括的なマニフェストを生成します。

# Asset Manifest: [Video Title]

## Status Overview
- 🔴 Not Started: 3 assets
- 🟡 In Progress: 0 assets
- 🟢 Ready: 0 assets

**Progress:** 0/3 assets ready

## Required Assets

### Images (2 required)

#### 1. Logo
- **Status:** 🔴 Not Started
- **File Path:** `public/images/logo.png`
- **Specifications:**
  - Format: PNG (transparency required)
  - Dimensions: 800x800 pixels (2x for retina)
  - Display size: 400x400px
  - File size target: < 200KB

- **Source Recommendations:**
  - Option 1: Export from Figma/design tool
  - Option 2: Create in Photoshop/Illustrator
  - Optimization: Use pngquant or tinypng.com

- **Preparation Steps:**
  1. Export at 800x800 resolution
  2. Ensure transparent background
  3. Optimize with `pngquant --quality=80-95 logo.png`
  4. Verify file size < 200KB
  5. Save to `public/images/logo.png`

- **Import Code:**
  ```typescript
  import { Img, staticFile } from 'remotion';

  <Img
    src={staticFile('images/logo.png')}
    alt="Logo"
    style={{
      width: 400,
      height: 400,
    }}
  />

2. 製品写真

ステータス： 🔴 未着手
ファイルパス： public/images/product.jpg
仕様：
- フォーマット：JPEG（透過は不要）
- 寸法：1920x1080 ピクセル
- 品質：85-90%
- ファイルサイズの目標：< 500KB
入手先の推奨：
- オプション 1：Unsplash（無料、高品質） - https://unsplash.com
- オプション 2：Pexels（無料） - https://pexels.com
- オプション 3：オリジナルの写真
準備手順：
1. 1920x1080 以上のサイズでダウンロードまたは撮影します
2. 1920x1080 に正確に編集／トリミングします
3. JPEG、品質 85-90% で書き出します
4. ファイルサイズが < 500KB であることを確認します
5. public/images/product.jpg に保存します

インポートコード：

import { Img, staticFile } from 'remotion';

<Img
  src={staticFile('images/product.jpg')}
  style={{
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  }}
/>

オーディオ（2 点必要）

3. BGM

ステータス： 🔴 未着手
ファイルパス： public/audio/music/background.mp3
仕様：
- フォーマット：MP3
- 長さ：30 秒
- ビットレート：192-256 kbps
- サンプルレート：44.1 kHz または 48 kHz
- チャンネル：ステレオ
入手先の推奨：
- オプション 1：YouTube Audio Library（無料） - https://studio.youtube.com
- オプション 2：Incompetech（無料、クレジット表記が必要） - https://incompetech.com
- オプション 3：Epidemic Sound（有料） - https://epidemicsound.com
準備手順：
1. 30 秒の楽曲をダウンロード／購入します
2. 必要に応じて、ちょうど 30 秒にトリミングします
3. 必要に応じて MP3 に変換します：ffmpeg -i input.wav -b:a 192k output.mp3
4. 必要に応じて、末尾にフェードアウトを適用します
5. public/audio/music/background.mp3 に保存します

インポートコード：

import { Audio, staticFile, useVideoConfig } from 'remotion';

const { durationInFrames } = useVideoConfig();

<Audio
  src={staticFile('audio/music/background.mp3')}
  volume={0.4}
  startFrom={0}
  endAt={durationInFrames}
/>

4. Whoosh 効果音

ステータス： 🔴 未着手
ファイルパス： public/audio/sfx/whoosh.mp3
仕様：
- フォーマット：MP3
- 長さ：1-2 秒
- ビットレート：192 kbps
- タイミング：5 秒時点で再生（30fps でフレーム 150）
入手先の推奨：
- オプション 1：Freesound（無料、Creative Commons） - https://freesound.org
- オプション 2：Zapsplat（無料、クレジット表記が必要） - https://zapsplat.com
- オプション 3：AudioJungle（有料） - https://audiojungle.net
準備手順：
1. whoosh／トランジション効果音をダウンロードします
2. 1-2 秒にトリミングします
3. 必要に応じて音量をノーマライズします
4. MP3 に変換します：ffmpeg -i input.wav -b:a 192k whoosh.mp3
5. public/audio/sfx/whoosh.mp3 に保存します

インポートコード：

import { Audio, Sequence, staticFile } from 'remotion';

<Sequence from={150} durationInFrames={60}>
  <Audio
    src={staticFile('audio/sfx/whoosh.mp3')}
    volume={0.6}
  />
</Sequence>

フォント（1 点必要）

5. Inter フォント

ステータス： 🟢 準備完了（Google Font）
必要なウェイト： 400（Regular）、600（Semibold）、700（Bold）
入手先： @remotion/google-fonts 経由の Google Fonts
インストール：
```
npm install @remotion/google-fonts
```

インポートコード：

import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont({
  weights: ['400', '600', '700'],
});

<div style={{
  fontFamily,
  fontWeight: 600,
}}>
  Text content
</div>

ディレクトリ構成

プロジェクト内に次のフォルダー構成を作成します。

public/
├── images/
│   ├── logo.png          # 🔴 Required
│   └── product.jpg       # 🔴 Required
└── audio/
    ├── music/
    │   └── background.mp3  # 🔴 Required
    └── sfx/
        └── whoosh.mp3      # 🔴 Required

クイックリファレンス：最適化コマンド

画像

# Optimize PNG
pngquant --quality=80-95 input.png -o output.png

# Convert to JPEG
magick input.png -quality 90 output.jpg

# Resize image
magick input.png -resize 1920x1080 output.png

オーディオ

# Convert to MP3
ffmpeg -i input.wav -b:a 192k output.mp3

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:00 -t 00:00:30 -c copy output.mp3

# Normalize volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" output.mp3

品質チェックリスト

アセットを準備完了にする前に、以下を確認してください。

次のステップ

上記の推奨事項に従ってアセットを収集する
アセットごとの準備手順に従ってアセットを準備する
チェックリストを使って品質を検証する
アセットの準備ができたら、ステータスを 🟢 Ready に更新する
提供されたインポート用スニペットを使ってコードを実装する
/remotion-video-reviewer を実行して、アセットの統合を確認する


**This document provides:**
- Complete asset inventory with specifications
- Source recommendations (free and paid)
- Step-by-step preparation workflows
- Ready-to-use import code snippets
- Quality validation checklist
- Progress tracking (🔴 🟡 🟢)

**Feeds into:** Developer implementation → `/remotion-video-reviewer` for quality check

## Asset Categories

### Images

**Types:**
- Product photos
- Background images
- Textures and patterns
- Icons and illustrations
- Logos and brand assets

**Optimal Formats:**
- **PNG**: Logos, icons, text overlays (transparency needed)
- **JPEG**: Photos, backgrounds (no transparency)
- **SVG**: Simple graphics, icons (scalable, small file size)
- **WebP**: Modern alternative, smaller file sizes

**Recommendations:**
```typescript
// Logo (transparency required)
Format: PNG
Resolution: 2x intended display size (retina)
Example: 400x400 element → 800x800 PNG

// Product photo
Format: JPEG (85-90% quality)
Resolution: Exact or slightly larger than display
Example: 1920x1080 display → 1920x1080 or 2560x1440 JPEG

// Icon
Format: SVG (preferred) or PNG
Resolution: 2x display size if PNG

動画

種類：

背景映像
製品デモ
画面録画
トランジション

最適な形式：

MP4 (H.264)：最も幅広く対応
WebM：新しい形式で、ファイルサイズが小さい
ProRes：高品質な元映像

推奨事項：

// Background video
Format: MP4 (H.264)
Codec: H.264, High profile
Resolution: Match composition (1920x1080)
Bitrate: 5-10 Mbps
Frame rate: Match composition (30fps)

// Product demo
Format: MP4 (H.264)
Resolution: 1920x1080 or 3840x2160 (4K)
Bitrate: 10-20 Mbps
Alpha channel: Use ProRes 4444 if transparency needed

音声

種類：

BGM
効果音（SFX）
ナレーション
環境音

最適な形式：

MP3：圧縮形式で、互換性に優れる
WAV：非圧縮形式で、最高品質
AAC：新しい形式で、MP3 より圧縮率が高い

推奨事項：

// Background music
Format: MP3 or AAC
Bitrate: 192-320 kbps
Sample rate: 44.1 kHz or 48 kHz
Channels: Stereo

// Sound effects
Format: WAV (for editing) → MP3 (for production)
Bitrate: 192 kbps (MP3)
Sample rate: 44.1 kHz
Channels: Stereo or Mono
Duration: Trim to exact needed length

// Voiceover
Format: WAV or MP3
Bitrate: 256-320 kbps
Sample rate: 48 kHz
Channels: Mono (sufficient for voice)

フォント

種類：

Google Fonts（無料で、Web で安全に使用可能）
カスタムフォント（ブランド固有）
システムフォント（フォールバック用）

推奨事項：

// Google Fonts (preferred)
Method: Import via @remotion/google-fonts
Weights: Only import needed weights
Example: 400 (regular), 600 (semibold), 700 (bold)

// Custom fonts
Format: WOFF2 (best), WOFF, TTF
Location: /public/fonts/
Import: Via CSS @font-face

アセットの入手先に関する推奨事項

無料の入手先

画像とイラスト：

Unsplash — 高品質な写真（無料、クレジット表記不要）
Pexels — 写真と動画（無料）
Pixabay — 写真、ベクター画像、動画（無料）
unDraw — カスタマイズ可能なイラスト（無料、SVG）
Heroicons — 美しく手作りされた SVG アイコン（無料）

音声：

Freesound — 効果音ライブラリ（クリエイティブ・コモンズ）
YouTube Audio Library — 音楽と SFX（商用利用無料）
Incompetech — ロイヤリティフリー音楽（クレジット表記が必要）
Zapsplat — 無料の効果音（クレジット表記が必要）

フォント：

Google Fonts — 1400 種類以上の無料フォント（Web で安全に使用可能）
Font Squirrel — 商用利用可能な無料フォント

有料／プレミアムの入手先

画像：

Adobe Stock — プロ品質
Shutterstock — 豊富なライブラリ
Getty Images — プレミアムコンテンツ

音声：

Epidemic Sound — 高品質な音楽ライブラリ
Artlist — 無制限の音楽ライセンス
AudioJungle — 個別のトラックを手頃な価格で提供

フォント：

Adobe Fonts — Creative Cloud に付属
MyFonts — 豊富なフォントマーケットプレイス

アセットの準備ワークフロー

画像の準備

# 1. Resize to appropriate dimensions
magick input.png -resize 1920x1080 output.png

# 2. Optimize PNG
pngquant --quality=80-95 input.png -o optimized.png

# 3. Convert to JPEG (if no transparency)
magick input.png -quality 90 output.jpg

# 4. Generate WebP (modern format)
magick input.png -quality 85 output.webp

手動ワークフロー：

Photoshop／GIMP／Figma で開く
正確なサイズ、または表示寸法の 2 倍にリサイズする
適切な品質で書き出す
ファイルサイズを確認する（ほとんどの画像で 1MB 未満）

動画の準備

# Convert to H.264 MP4
ffmpeg -i input.mov -c:v libx264 -preset slow -crf 20 -c:a aac -b:a 192k output.mp4

# Resize video
ffmpeg -i input.mp4 -vf scale=1920:1080 -c:v libx264 -crf 20 output.mp4

# Extract clip segment
ffmpeg -i input.mp4 -ss 00:00:10 -t 00:00:05 -c copy output.mp4

# Compress video
ffmpeg -i input.mp4 -c:v libx264 -crf 28 -c:a aac -b:a 128k compressed.mp4

音声の準備

# Convert to MP3
ffmpeg -i input.wav -codec:a libmp3lame -b:a 192k output.mp3

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:05 -t 00:00:10 -c copy trimmed.mp3

# Adjust volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" louder.mp3

# Fade in/out
ffmpeg -i input.mp3 -af "afade=t=in:st=0:d=2,afade=t=out:st=28:d=2" faded.mp3

インポートコードの生成

画像

仕様要件：「Logo.png (800x800)」

生成されるコード：

import { Img, staticFile } from 'remotion';

// In component
<Img
  src={staticFile('logo.png')}
  alt="Logo"
  style={{
    width: 400,
    height: 400,
  }}
/>

動画

仕様要件：「背景動画（1920x1080、30fps）」

生成されるコード：

import { Video, staticFile } from 'remotion';

<Video
  src={staticFile('background-video.mp4')}
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  }}
/>

音声

仕様要件：「BGM（全編）」

生成されるコード：

import { Audio, staticFile, useVideoConfig } from 'remotion';

// In component
const { durationInFrames } = useVideoConfig();

<Audio
  src={staticFile('background-music.mp3')}
  volume={0.5}
  startFrom={0}
  endAt={durationInFrames}
/>

フォント

仕様要件：「Inter フォント（400、600、700）」

生成されるコード：

import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont({
  weights: ['400', '600', '700'],
});

// In component
<div style={{
  fontFamily,
  fontWeight: 700,
}}>
  Text content
</div>

アセットの整理

ディレクトリ構成

project/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   ├── product.jpg
│   │   └── background.webp
│   ├── videos/
│   │   ├── intro.mp4
│   │   └── demo.mp4
│   ├── audio/
│   │   ├── music/
│   │   │   └── background.mp3
│   │   └── sfx/
│   │       ├── whoosh.mp3
│   │       ├── pop.mp3
│   │       └── ding.mp3
│   └── fonts/
│       └── CustomFont.woff2
└── src/
    └── remotion/
        └── compositions/

命名規則

// Good naming
logo.png              // Clear, simple
product-hero.jpg      // Descriptive
background-gradient.webp
whoosh-transition.mp3
background-music.mp3

// Bad naming
IMG_1234.jpg         // Not descriptive
final-FINAL-v2.png   // Confusing versions
my image.png         // Spaces (use hyphens)

品質検証チェックリスト

アセットを本番環境で使用する前に、次の項目を確認してください。

画像：

寸法が正しい（必要に応じてRetina用に2倍）
適切な形式（透過にはPNG、写真にはJPEG）
ファイルサイズが最適化されている（理想は500KB未満、最大1MB）
アーティファクトや圧縮の問題がない
必要に応じて背景が透過になっている

動画：

解像度が正しい（コンポジションに一致）
フレームレートが正しい（コンポジションに一致）
適切なコーデック（H.264）
ファイルサイズが適切（理想は50MB未満）
フレーム落ちがない
必要に応じて音声が含まれている

音声：

形式が正しい（MP3またはWAV）
適切なビットレート（192～320 kbps）
正確な長さにトリミングされている
音量レベルが正規化されている
クリッピングや歪みがない
必要に応じてフェードイン／フェードアウトが適用されている

フォント：

商用利用が認められたライセンスである
必要なウェイトがすべて揃っている
適切な形式（WOFF2を推奨）
コンポジションに正しく読み込まれている

他のスキルとの連携

連携するスキル：

/motion-designer — 仕様からアセット要件を抽出します
/remotion-spec-translator — 翻訳時にアセットのインポートコードを生成します
/remotion-video-reviewer — レビュー時にアセットの品質を検証します

ルールディレクトリ

アセットの詳細なガイダンスについては、以下を参照してください。

rules/image-assets.md — 画像の準備と最適化
rules/video-assets.md — 動画のエンコードと準備
rules/audio-assets.md — 音声の処理と統合
rules/font-assets.md — フォントの読み込みと管理

このスキルは、すべてのアセットが適切に調達、準備、統合され、本番環境で使用できるRemotion動画になるようにします。

Markdown 対応

ログインしてコメント

基本情報

作者: ncklrs
リポジトリ: ncklrs/startup-os-skills
カテゴリ: クリエイティブ・メディア
インストール数: 173
GitHub スター: 53

問題を報告