AI に動画編集を任せていて、こんな瞬間はありませんか。
タイムラインで範囲をつまんで、カット。
✓ 3秒で完了・保存すれば AI 側にもそのまま反映手を動かせば一瞬で終わることを、わざわざ自然言語にして、AI の返事を待つ。カット位置・テロップの数文字・効果音のタイミング——大部分を AI が組み立ててくれるからこそ、最後の「ちょっとだけ直したい」が逆に遠回りになる。この「間」を埋めるために作ったのが SuperMovie Editor です。
ブラウザで動く、仕上げ専用の動画エディタです。AI(Claude Code などのエージェント)が生成した動画プロジェクトをそのまま開き、見たまま微修正して保存すると、プロジェクトのデータファイルに直接書き戻されます。AI 側の続きの作業とも矛盾しません。
非破壊カット(分割 / 結合 / 範囲カット)、波形表示、動画サムネ、タイムライン直接操作。字幕の単語をタップしてその区間だけカット、も可能
テロップの文字・位置・タイミングをプレビュー上でドラッグ編集。挿入画像・サブ動画・図形注釈にも対応
効果音 / BGM(フェードつまみ)、ナレーション連動の自動ダッキング、ノイズ除去、音量正規化
「書き出し」ボタン一発で自動保存 → レンダリング → 進捗表示 → Finder で完成品を表示。エンジンは Remotion
お配りした ZIP をダブルクリックで解凍し、フォルダを開く
初回セットアップ(数分)。「開発元が確認できません」と出たら右クリック → 開く
ブラウザが自動で開いてエディタが起動。初回は 14 ステップのチュートリアル「はじめての1本」が案内します
じっくり派には、画面の動き(GIF)を見ながら進められる docs/はじめてガイド.md と、AI 連携の docs/MCP接続マニュアル.md(5分)を同梱しています。
SuperMovie-Editor/ ├─ setup.command ← ★初回セットアップ(ダブルクリック) ├─ start.command ← ★起動(ダブルクリック) ├─ README.md ← 全体の説明書 ├─ docs/ │ ├─ はじめてガイド.md ← GIF を見ながら最初の1本を仕上げる │ ├─ MCP接続マニュアル.md ← AI エージェント連携(5分セットアップ) │ ├─ claude-bridge-loop.md ← 画面から AI へ指示を出す仕組み │ └─ status-file-spec.md ← ホームの進行状況表示を自作ツールから使う規約 ├─ project-template/ ← 「動画を作成する」で使われる新規プロジェクトの雛形 ├─ src/ ← エディタ本体(Vite + React + TypeScript) ├─ scripts/ ← 補助スクリプト(軽量プレビュー生成など) └─ tests/ ← 自動テスト一式(ユニット 2,000 本超 + ブラウザテスト)
動画プロジェクト側のフォルダは SME_PROJECT_ROOT で指定できます(詳しくは README へ)。
講座で作った自作の編集スキル(カットスキルなど)は、そのまま SuperMovie Editor と一緒に使えます。エディタは特別な連携をせず、プロジェクトのデータファイル(cutData.ts や telopData.ts など)を読み書きするだけだからです。スキルがファイルを書き換えると、エディタが外部変更を自動検知して「再読み込み」を促します。
必要なのは「置き場と形式を合わせる」ことだけ。下のプロンプトを Claude Code に貼れば、確認から調整まで自動でやってくれます。< > の2箇所をご自身のパスに書き換えてから送ってください。
SuperMovie Editor のセットアップをお願いします。 材料: - 配布 ZIP を解凍したフォルダ: <解凍したフォルダのパス> - 私の動画プロジェクト置き場: <既存プロジェクトが並ぶフォルダのパス> - 仕様の参照: この共有ノート https://supermovie-editor-note.pages.dev/ の 「Claude Code 向け技術メモ」と、解凍フォルダの README.md / project-template/ やってほしいこと: 1. 解凍フォルダで npm install を実行する(setup.command と同じ内容) 2. SME_PROJECT_ROOT=<プロジェクト置き場> npm start で起動し、 http://localhost:2109 が開くことを確認する 3. 置き場にある既存プロジェクトがエディタの認識条件(技術メモ参照)を 満たすか確認し、足りないファイルは project-template/ を雛形に補う。 既存の telopData / cutData などのデータは壊さず温存すること 4. 私の自作編集スキル(カット・テロップ等)が書き込むファイルのパスと データ形式が、このプロジェクト構成と一致しているか確認し、 ズレていればスキル側の書き込み先を合わせて更新する 5. エディタで私のプロジェクトが開けること、スキルで編集した結果が エディタに反映されること(外部変更バナー → 再読み込み)を確認して報告する 最後に、毎回使えるよう SME_PROJECT_ROOT 込みの起動コマンド (または start.command の複製)を用意してください。
npm install(Node.js 20 以上)。起動は SME_PROJECT_ROOT=<プロジェクト置き場> npm start → http://localhost:2109src/videoConfig.ts と src/テロップテンプレート/telopData.ts の両方があること(この条件を満たすフォルダだけがホーム一覧に出る)transcript.json(文字起こしが無ければ空でよい: {"engine":"none","language":"ja","duration_ms":<動画長ms>,"words":[],"segments":[]})と、public/ 配下に videoConfig の videoFile が指す動画(既定 main.mp4)project-template/ が最小構成。足りないファイルはここからコピーして流用するsrc/cutData.ts、テロップ= src/テロップテンプレート/telopData.ts のように「データファイルを書く」スキルはそのまま共存できる。エディタ表示中に外部から書き換わると「外部変更」バナーが出て再読み込みできる.sme/status.json を書くとホームのカードに「AI 作業中」等を出せる(規約は docs/status-file-spec.md)claude mcp add --transport http sme-editor http://localhost:2109/mcp で接続(手順は docs/MCP接続マニュアル.md)来週 7/19、この SuperMovie Editor が MIT ライセンスの OSS として、れんさんの GitHub アカウントから一般公開されることになりました!
公開されたら、X などでのシェア・応援をぜひお願いします!!
ひと足先に受け取ったみなさんの「使ってみた」の声が、いちばんの追い風になります。
この ZIP は公開に先立つ先行共有版です。触ってみて気づいたこと(分かりにくい・動かない・こうだと嬉しい)は、どんな小さなことでもたきさん(瀧澤 拓也)宛に教えてください。公開までに反映していきます。