かし子🍩

かし子🍩

かし子🍩

@Kashiko_AIart

Jan 23

まったくゼロから、コピペ一発でAntigravityにRemotionをセットアップして、【MVテロップ自動挿入プロンプト】も使えるようになるプロンプト！ 🌟Remotionを使うとAI動画編集がめちゃくちゃ簡単でハイクオリティになります。画像のようにプレビューもできるので効率もめちゃくちゃアップします！ Remotionを全く使ったことがない人でも、このプロンプトをAntigravityに投げるだけで、**ワークフローファイルの自動生成から**環境構築、MV完成まで辿り着けるように設計しました。 👇以下の「プロンプト本文」をコピーしてAntigravityのチャット欄に貼り付けるだけで、あとはAntigravityがガイドしてくれます。 --- ## プロンプト本文 (ここからコピー) ```markdown あなたは「世界最高峰のWebフロントエンドエンジニア」かつ「映像クリエイター」です。私はRemotionを初めて使います。以下の要件に従って、環境構築からMV作成までを**完全サポート**してください。 ## ゴール - React (Remotion) を使って、提供する動画と歌詞から高品質なMVを作成する。 - 最終的に `mp4` ファイルを書き出す。 - **重要**: 今後のために、私が手元で使える「ワークフロー定義ファイル」も自動で作ってください。 ## 手順の概要 1. **環境チェック**: Node.js, npm が使えるか確認する。 2. **ワークフロー保存**: 以下の定義ファイルを私の環境（`.agent`フォルダ）に保存する。 3. **プロジェクト作成**: 保存したワークフローに従って、Remotionプロジェクトを立ち上げる。 4. **実装 & レンダリング**: ワークフローを完遂させる。 --- ## 必須アクション 1：定義ファイルの作成まず最初に、`.agent/workflows` と `.agent/knowledge` ディレクトリを作成し、以下の2つのファイルを作成してください。 ### File 1: `.agent/knowledge/mv_production_guidelines.md` (内容は以下の通り) ````markdown # MV Production Guidelines & User Preferences このドキュメントは、MV制作における「ユーザーの好み」「成功した演出」「技術的な注意点」をまとめたナレッジベースです。 `create_remotion_mv.md` を実行する際は、必ずこのファイルを参照して方針を決定してください。 ## 1. デザイン・フォント選定 (Typography) ### ❌ 避けるべきフォント・設定 * **Dela Gothic One**: インパクトはあるが、極太すぎて画数の多い漢字（「引」「越」など）が潰れやすい。特に縁取り（Stroke）をつけると致命的。 * **Potta One**: 可愛い文字だが、小さいサイズや太字設定で少し読みづらくなる場合がある。 ### ✅ 推奨フォント * **RocknRoll One**: 「元気・インパクト」枠。Dela Gothicより少し細身で、漢字の可読性が非常に高い。 * **Mochiy Pop One**: 「ポップ・可愛い」枠。Potta Oneより丸みが整理されており、歌詞テロップに最適。 ### 🎨 配色・可読性 * **文字色と縁取り**: 同系色で明度差がない組み合わせは避ける。（例: 黄色文字にオレンジ縁取りは×。黄色なら黒や紺、赤などコントラストをつける） ## 2. 演出・エフェクト (Visual Effects) ### 💮 デカ判子スタンプ (Stamp Effect) * **用途**: 「だいじょうぶ」「よいしょ！」「カンペキ」などのキメ台詞で使用。 * **配置**: 画面中央は避け、**下部（Top: 70%〜80%）** に配置する。キャラクターの顔を隠さないため。 * **スタイル**: * **背景色**: **透明 (Transparent)**。白背景にすると動画を隠してしまうためNG。 * **枠線**: 文字色と同じ色 (`currentColor`) の太枠推奨。 * **改行**: 長いフレーズ（「だいじょうぶ」等）は改行を入れること。`white-space: pre-wrap` を忘れない。 ### 📦 絵文字シャワー (Emoji Particle) * 歌詞の内容に合わせた絵文字（📦, 🚚, 🌸, 💨）を降らせる演出は非常に効果が高い。 * `EffectRouter` に組み込み、Lyricデータで簡単に呼び出せるように設計すると良い。 ### 🥁 ビート・シェイク (Beat Shaker) * サビのリズムに合わせて背景動画自体を `scale` / `translate` で振動させる。 * **効果**: 動画全体の一体感・迫力が劇的に向上する。 ## 3. Remotion 技術的Tips ### ⏳ レンダリング・パフォーマンス * `google-fonts` の大量リクエスト（Weights/Subsetsの読み込みすぎ）はタイムアウトの原因になる。 * レンダリングが重い場合は `--concurrency=1` を試す。 * 動画の長さと `durationInFrames` の不一致は、末尾でのフリーズやエラーの原因になる。「Fin」などの演出が切れないよう、尺管理を徹底する。 ### 📝 コード設計 * `lyrics.ts` ですべての演出（Effect type, Timing, Text）を管理するアプローチは正解。 * `EffectRouter` でコンポーネントを振り分ける設計を維持する。 ```` ### File 2: `.agent/workflows/create_remotion_mv.md` (内容は以下の通り) ````markdown --- description: Remotion (React) を使用して、超高品質なMV/AMVを作成するワークフロー --- # ROLE あなたは「世界最高峰のWebフロントエンドエンジニア」であり、同時に「天才的な映像クリエイター」です。 React, TypeScript, CSS, Remotion を駆使し、 Python(MoviePy)では到達不可能な、滑らかでリッチなMVを作成します。 ================================================== # INPUTS - 音声入り動画（歌あり） - 歌詞テキスト（全文） - 本ワークフロー ================================================== # PRE-FLIGHT CHECK (Knowledge Base) **作業を開始する前に、以下のナレッジベースを必ず参照してください。** ユーザーの過去のフィードバック（フォントの好み、スタンプ演出のルールなど）が記載されています。 `view_file .agent/knowledge/mv_production_guidelines.md` ================================================== # WORKFLOW STEP 0: INITIALIZATION (Remotion Setup) **【重要】既存のPython環境ではなく、新規Remotionプロジェクトを作成します。** 1. **プロジェクト作成**: \`\`\`bash npx create-remotion@latest mv-project --template=blank cd mv-project npm install @remotion/media @remotion/google-fonts \`\`\` 2. **フォントセットアップ**: \`src/Root.tsx\` 等で、以下のGoogle Fontsをロードする設定を行います。 **(※ Remotion v4以降は GoogleFontLoader コンポーネントは廃止されました。\`loadFont\` 関数を使用してください)** - \`Dela Gothic One\` - \`RocknRoll One\` - \`Potta One\` - \`Mochiy Pop One\` - \`Zen Maru Gothic\` - \`Shippori Mincho\` - \`DotGothic16\` **(※ 具体的な使い分けや推奨設定については、Guidelinesを参照してください)** Example: \`\`\`tsx import { loadFont as loadDelaGothicOne } from "@remotion/google-fonts/DelaGothicOne"; // コンポーネント外でロード loadDelaGothicOne(); export const RemotionRoot: React.FC = () => { // ... } \`\`\` ================================================== # WORKFLOW STEP 1: ANALYSIS & DATA STRUCTURE **動画をプログラムで制御するため、歌詞とタイミングを「データ化」します。** 1. **音声解析**: 従来通り Whisper 等でタイミングを取得しますが、 **出力形式は必ず \`src/data/lyrics.ts\` (TypeScript Object) とします。** Target Format (\`src/data/lyrics.ts\`): \`\`\`ts export type LyricLine = { time: number; // 秒 (またはフレーム) text: string; duration: number; type: "lyric" | "title" | "credit"; effect: "bounce" | "fade" | "glitch" | "typewriter" | "neon"; // 適用したいエフェクト名 style?: React.CSSProperties; // 個別のスタイル上書き }; // ★重要: このファイルが「編集指示書」を兼ねます。 // コメントで演出意図（サビ、強調、感情など）を記載し、人間が読んで理解できるようにしてください。 export const lyrics: LyricLine[] = [ { time: 0.5, text: "Song Title", duration: 3, type: "title", effect: "glitch" }, { time: 5.2, text: "First line of song", duration: 2.5, type: "lyric", effect: "fade" }, // ... ]; \`\`\` ================================================== # WORKFLOW STEP 2: EFFECT COMPONENT LIBRARY **Pythonの関数 \`make_xxx_text\` の代わりに、Reactコンポーネントを作成します。** \`src/components/effects/\` ディレクトリに、再利用可能なエフェクトを作成してください。 **必須実装コンポーネント:** 1. **\`<BounceText>\`** (pyon pyon): - \`spring\` 関数を使用し、各文字を遅延させてバウンスさせる。 2. **\`<GlitchText>\`** (biribiri): - \`random()\` と \`Math.sin()\` を使い、\`transform: translate(...)\` をランダムに振らす。 - \`clip-path\` でノイズを入れる。 3. **\`<NeonText>\`** (kira kira): - \`text-shadow\` を重ね掛けし、\`opacity\` をフリッカー（明滅）させる。 4. **\`<TypewriterText>\`** (kata kata): - 経過フレームに応じて \`text.slice(0, current)\` で表示文字を増やす。 5. **\`<DropText>\`** (dosun): - Y座標を画面外から \`interpolate\` で落下させ、\`spring\` で着地させる。 **推奨拡張エフェクト (create_mv.md 互換):** - **\`<ShakeText>\`**: \`Math.sin(frame)\` で位置をランダムに震わせる（恐怖・叫び）。 - **\`<ZoomText>\`**: \`scale\` を \`interpolate(frame, [0, 5], [2, 1])\` で縮小させながら着地（インパクト）。 - **\`<WaveText>\`**: \`Math.sin(frame index)\` で各文字を波打たせる（浮遊感）。 - **\`<RollText>\`**: \`rotate\` を使って回転しながら出現させる（コミカル）。 - **\`<StepText>\`**: 階段状（Y座標を文字ごとにずらす）に配置する。 - **\`<TurboText>\`**: 横方向へ高速スライド（疾走感）。 - **\`<WarpText>\`**: 手前から奥へ（またはその逆）急激にスケール変化。 - **\`<CrashText>\`**: 落下と同時に画面全体を \`useVideoConfig().width\` で少しずらして衝撃を表現。 **実装のコツ (Remotion Best Practices):** - \`useCurrentFrame()\`, \`useVideoConfig()\` を必ず使う。 - トランジションは \`interpolate(frame, [0, 20], [0, 1])\` のように制御する。 - 物理挙動には \`spring()\` を使い、滑らかな動きにする。 ================================================== # WORKFLOW STEP 3: COMPOSITION ASSEMBLY \`src/Composition.tsx\` で動画全体を組み立てます。 \`\`\`tsx import { Sequence, Audio, AbsoluteFill } from "remotion"; import { lyrics } from "./data/lyrics"; import { BounceText } from "./components/effects/BounceText"; // ... imports export const MyVideo = () => { return ( <AbsoluteFill style={{ backgroundColor: "black" }}> <BeatShaker> {/* Background Video */} <Video src={staticFile("audio.mp3")} /> </BeatShaker> {lyrics.map((line, index) => { // time(秒) を frame に変換 const startFrame = Math.round(line.time * 30); const durationFrames = Math.round(line.duration * 30); return ( <Sequence from={startFrame} durationInFrames={durationFrames} key={index}> {/* effect指定に応じてコンポーネントを切り替えるSwitch文 */} <EffectRouter line={line} /> </Sequence> ); })} </AbsoluteFill> ); }; \`\`\` ================================================== # WORKFLOW STEP 4: PREVIEW & REFINE **Remotionの最大の強みである「リアルタイムプレビュー」を活用します。** 1. **プレビュー起動**: \`\`\`bash npm start \`\`\` ブラウザが開くので、再生しながらタイミングやエフェクトの微調整を行います。 2. **調整項目**: - **Timing**: 歌詞の表示が早すぎないか？遅すぎないか？ - **Position**: キャラクター（中央）と被っていないか？ - 原則 **歌詞は下部 (\`top: undefined, bottom: 100\`)**、**タイトルは上部**、**クレジットは右下**。 - **デカ判子スタンプ**は**下部 (Top 70~80%)**。 - **Color**: 背景動画に埋没していないか？ \`text-shadow\` や \`backdrop-filter\` で視認性を確保する。 ================================================== # WORKFLOW STEP 5: RENDERING 調整が完了したら、MP4として書き出します。 \`\`\`bash npx remotion render src/index.ts MyComp out/video.mp4 --pixel-format=yuv420p \`\`\` ================================================== # QUALITY ASSURANCE (QA) CHECKLIST - [ ] **Frame Perfect**: 歌詞がリップシンク（歌のタイミング）と完全に合っているか？ - [ ] **No Overlap**: 重要な被写体（キャラクターの顔など）の上に文字が被っていないか？ - [ ] **Aesthetics**: フォント選定、色使い、エフェクトは「プロのMV」として恥ずかしくない品質か？ - [ ] **Performance**: レンダリングエラーが出ていないか？ ================================================== # FINAL RESPONSE RULE このワークフローを実行する準備ができたら、「**承知しました。それでは音声入りの動画と、歌詞全文を貼り付けてください。**」と応答して、ユーザーからの入力を待ってください。（すでに動画と歌詞が提供されている場合は、直ちにセットアップ作業を開始してください） ```` --- ## あなたへの指示 1. 上記の `File 1` と `File 2` を指定のパスに作成してください。 2. ファイル作成が完了したら、`create_remotion_mv.md` を読み込み、Remotionのセットアップを開始してください。 3. まず最初に、**「現在の環境で Node.js が使えるか（`node -v`, `npm -v`）」** をチェックし、結果を報告してください。 ```

247

37,831