GitHub CLI (gh) は認証済みです
playwright-interactive を使って、ゼロから Remotion の動画アプリを作ってください。
プロンプト本文
text
playwright-interactive を使って、ゼロから Remotion の動画アプリを作ってください。
前提:
- GitHub CLI (gh) は認証済みです
- GitHub リポジトリの新規作成から始めてください
- 作業ディレクトリは Windows の `D:\Prj` 配下を使ってください
- `D:\Prj` にリポジトリを clone / 作成して問題ありません
- GitHub Pages への公開は手動ではなく、CI/CD で自動化してください
- 最終的に GitHub Pages 上の公開URLを Playwright で確認してください
リポジトリ命名:
- リポジトリ名は機械的な名前ではなく、ロマンティックで印象に残る名前にしてください
- ただし意味不明になりすぎず、星、月、夢、記憶、旅、都市の灯り、箱庭、夜空のようなニュアンスを感じる名前を優先してください
- 候補をいくつか考えたうえで、最終的に1つ選んで採用してください
作るもの:
- Remotion を使った動画アプリ
- この動画アプリは、ユーザーが指定する内容を「解説動画・紹介動画」として見やすく表現するためのものにしてください
- 単なる文字の羅列ではなく、見出し、要点整理、補助ビジュアル、場面転換を用いて理解しやすい構成にしてください
- UI は Material Design を参考にしてください
- プレビューUIや補助UIが必要な場合は、Material Design の思想を参考にして、余白、階層感、視認性、一貫性を重視してください
- 世界の有名な都市をモチーフにしたミニチュア的な要素を、背景演出、象徴カット、シーン装飾として取り入れてください
- 完全再現ではなく、デフォルメされた美しい都市断片として表現してください
- 少なくとも複数の都市文化を感じられるようにしてください
- 例として、塔、橋、高層ビル群、水辺、歴史的建造物、広場、運河、寺院風シルエット、ネオン感のある街並みなどを適切に取り入れてください
- 一目見て「世界の都市を小さな箱庭として巡るような雰囲気」が伝わるようにしてください
動画の基本方針:
- 【動画にしてほしい内容】は、その内容自体を作品として再現するというより、「その内容を視聴者に分かりやすく伝える解説動画」として扱ってください
- その内容をそのまま順番に並べるだけでなく、視聴者にとって理解しやすいように再構成してください
- 必要に応じて、導入、概要、要点整理、詳細説明、補足、まとめ、締め、の流れを作ってください
- テロップ、見出し、図解的なレイアウト、カメラワーク風の演出、場面転換を活用してください
- 説明的になりすぎず、映像として気持ちよく見られるテンポを意識してください
- 内容に合う範囲で、世界都市のミニチュア表現を補助的に使ってください
- UI や情報整理は Material Design を参考にしてください
動画設計要件:
- 最初に【動画にしてほしい内容】を読み取り、動画の構成案を作ってください
- 構成案には少なくとも以下を含めてください
- 想定尺
- シーン一覧
- 各シーンの役割
- 主なテキスト
- 主な演出
- 使う都市モチーフ
- その構成案に沿って Remotion の Composition を実装してください
- 複数 Composition に分けても、1本の主力 Composition にまとめても構いません
- props でタイトル、色味、文言、都市テーマなどを切り替えられる設計は歓迎します
- 必要であれば、解説内容を切り替えやすい構成にしてください
実装方針:
- 構成は任せますが、GitHub Pages のサブパス公開で壊れないようにしてください
- アセット参照、base path、ビルド設定、公開パスを Pages 前提で調整してください
- GitHub Pages への公開は CI/CD で行ってください
- GitHub Actions などを使い、main ブランチへの push を契機に build と deploy が自動で走るようにしてください
- 必要なら Pages 用の workflow、設定ファイル、デプロイ設定を追加してください
- GitHub Pages には静的に確認できるプレビュー環境を公開してください
- 公開後、Playwright でそのページを実際に開いて確認してください
作業手順:
1. 最初に QA inventory を作成する
- ユーザー要求
- 実装対象
- 完了報告で主張する内容
をそれぞれ検証可能な項目に分解する
2. 【動画にしてほしい内容】を読み取り、動画構成案を作成する
- シーン構成
- テキスト構成
- 演出方針
- 想定尺
- 都市モチーフの使い方
- 情報整理の方針
を定義する
3. GitHub リポジトリを新規作成する
- ロマンティックな候補名を複数考える
- その中から最も雰囲気がよく、用途にも合う名前を1つ選ぶ
- public リポジトリを作る
- `D:\Prj` 配下で作業開始する
4. ローカル実装を行う
- Remotion プロジェクトを構築する
- 必要な依存を導入する
- ローカルで Studio または Player ベースの確認環境を起動する
- Playwright でローカルURLを開いて確認する
5. 反復実装を行う
- 同じ Playwright セッションを維持する
- 変更後は reload して確認する
- シーン遷移、表示崩れ、テキスト、タイミング、視認性を確認する
- 必要に応じて構成や演出を調整する
6. functional QA と visual QA を分離して実施する
- functional QA:
- Composition が正しく表示される
- プレビューUIが動作する
- 必要な props 切替ができる
- レンダリング手順が成立する
- visual QA:
- シーン遷移が自然
- テキストが読みやすい
- 要点の整理が分かりやすい
- 都市モチーフが視覚的に識別できる
- ミニチュア感がある
- 色調や雰囲気が統一されている
- Material Design 参考のUIとして自然
- clipping / overflow / レイアウト崩れがない
7. exploratory pass を行う
- 実際に視聴者目線で通して確認する
- 理解しづらい箇所、テンポが悪い箇所、視認性が低い箇所があれば修正する
- 特に「内容がきちんと解説として伝わるか」を重視して見直す
8. 動画を書き出して確認する
- 少なくとも1本は実際にレンダリングして確認する
- Windows 環境では props をインラインJSONではなくファイルで扱うことを優先する
- 書き出し結果に問題があれば修正する
9. GitHub Pages 用の CI/CD を構築する
- GitHub Actions などで build と deploy を自動化する
- main ブランチへの push で GitHub Pages が更新されるようにする
- Pages 公開に必要な設定をリポジトリに含める
- 手動作業前提にせず、リポジトリを clone した後でも CI/CD で再現可能な状態にする
10. GitHub Pages にデプロイする
- 必要な変更を commit / push する
- CI/CD が正常に完走することを確認する
- GitHub Pages の公開URLを取得する
11. 公開版 QA を実施する
- GitHub Pages のURLを Playwright で開く
- ローカル確認とは別に公開版でも確認する
- アセット読込、パス解決、公開環境での表示崩れを確認する
- 公開版で問題があれば修正して再度 push し、CI/CD 経由で再デプロイする
12. README を整備する
- `README.md` を英語版、`README.ja.md` を日本語版にする
- 両方の README 冒頭に相互移動できる言語切替バッジを置く
- README に技術スタックのバッジを載せる
- 少なくとも主要技術が分かるようにする
- Remotion
- React
- TypeScript または JavaScript
- GitHub Pages
- GitHub Actions
- 必要なら Vite など
- README の先頭付近に、アプリのスクリーンショットをヘッダー画像として掲載する
- ヘッダー画像は、作品の雰囲気、情報設計、都市モチーフが伝わる代表スクリーンショットにする
- README には以下を記載する
- アプリ概要
- 動画コンセプト
- 解説動画としての設計方針
- ローカル起動方法
- レンダリング方法
- GitHub Pages URL
- CI/CD 概要
- 使用方法
- 日本語版 README にも同等の情報を記載する
13. 最後に結果を報告する
- 採用したリポジトリ名
- 名前に込めたニュアンス
- ボツにした候補名
- GitHub Pages 公開URL
- 動画構成案
- 実装した Composition
- 追加した都市モチーフ要素
- UIデザイン方針
- 構築した CI/CD の概要
- README の言語構成
- 使用した技術スタックバッジ
- 確認済み項目
- 未確認項目
- 残課題
- README に使ったスクリーンショット
【動画にしてほしい内容】
- このセクションに書かれた内容を、視聴者に分かりやすく伝える解説動画として表現してください
- 単なる読み上げ動画ではなく、紹介動画・説明動画として見やすく構成してください
- 要点の整理、順序立て、強調、場面転換、図解的な見せ方を工夫してください
- テキストが多すぎる場合は、重要なポイントを抽出し、映像として自然な密度に整理してください
- 必要に応じて、導入、概要、詳細説明、まとめ、締め、の流れに再構成してください
ーーー
ここに実際に動画化したい内容を書くソース文脈
出典
- primary post: 2030280559919005794
- published at: 2026-03-07 22:53:00 JST
- archive doc: 2030280559919005794