Remotion の代替：HTML でモーションを書き、ブラウザで動画に編集
Node.js も React も不要。HTML / CSS / GSAP のモーションが、手持ちの動画や画像と同じタイムラインに並びます。
テンプレートから始める
- ライブ解説ウィンドウ 角丸の話者ウィンドウ+LIVE バッジ+名札。動画の音声もタイムラインに
- フレーム付きメディア 白枠と光彩のウィンドウ+左上ラベル。拡大して登場し、一部にズームも(画面録画向け)
- 映像入り大文字 大きな文字の中に動画や画像が見え、上に小見出し・下にサブタイトル
- 分割解説 左に大きな文字(2 行目は強調色)、右にメディア、下にタイムラインの区切り
- フォトウォール 縦長写真が並んで順に登場、各写真にキャプション
- キネティック大文字 一語ずつ画面いっぱいに叩きつけ、黒・黄・クリームの色面が斜めに切り替わる
- ハイライト見出し クリーム色の背景に蛍光ラインが走り、大きな文字が一つずつ落ちる
- 3D 回転体 金属調の結び目がゆっくり回る（Three.js）
- データの成長 棒グラフが伸び、数字がカウントアップ
クリックするとモーションが追加された状態でエディターが開きます。素材スロットのあるテンプレートは、動画や画像をカードにドラッグするか「自分の素材を使う」でファイルを選ぶと、開いたときにはもう収まっています。ファイルは端末の中だけにあり、アップロードされません。
TutuCut は Remotion の代替として使えます。HTML・CSS・Canvas・GSAP・Three.js でモーションを書き、ブラウザでそのままタイムラインに置いて実写動画や画像と一緒に編集し、MP4 で書き出せます。Node.js のインストールも React も不要で、AI に書いてもらうこともできます。できないこと：データからサーバーで数千本を一括レンダリングすることはできず、それは Remotion のほうが向いています。
Remotion は React コンポーネントで動画を書きます。Node.js をインストールし、プロジェクトを作り、コードを書いてからレンダリングします。TutuCut は別の方法をとります。モーションはただの HTML で、CSS アニメーション・Canvas・SVG・GSAP・Three.js で書いたものをそのまま貼り付けられます。ブラウザで 1 フレームずつ描かれ、手持ちの動画・画像・字幕と同じタイムラインで編集して、MP4 や GIF で書き出せます。
素材はモーションに直接入れられます。コードに tutu-asset 記法を書けば、メディアライブラリの画像・動画・GIF・フォントを参照できます。テンプレートには素材スロット（ライブ配信のワイプ、フォトウォール、デバイスモックアップ……）があり、動画をドラッグするだけで収まります。処理はすべてブラウザ内で行われ、素材はアップロードされません。
Remotion に劣る点もはっきり書きます。Remotion はサーバー（AWS Lambda を含む）でデータから数万本の動画を一括レンダリングできますが、こちらにはそうした一括レンダリングの API はありません。React コンポーネントのエコシステムも向こうのほうが大きいです。「1 行のデータから 1 本、全自動で量産」なら Remotion を、「モーション入りの動画を 1 本、見ながら直して作る」ならこちらのほうが手軽です。
TutuCut と Remotion の比較
| 比較項目 | TutuCut | Remotion |
|---|---|---|
| モーションの書き方 | TutuCut普通の HTML / CSS / JS（Canvas、SVG、GSAP、Three.js） | Remotion React コンポーネント |
| 必要な知識 | TutuCutテンプレートの編集はコード不要、自作は HTML が書ければ OK | Remotion React |
| 実写動画や画像と一緒に編集 | TutuCut同じタイムラインで、素材をモーションに直接入れられる | Remotion ドラッグ＆ドロップ編集に対応 |
| インストールが必要なもの | TutuCut何も不要、Web ページを開くだけ | Remotion Node.js、コマンドラインでプロジェクトを作成 |
| AI が書いてくれる | TutuCut内蔵 AI アシスタントが書いてタイムラインに置く | Remotion コーディング AI と組み合わせて使える |
| 料金 | TutuCut無料、透かしなし | Remotion 個人、3 人以下の会社、非営利団体は無料。それ以外は会社向けライセンスが必要 |
| データからサーバーで一括レンダリング | TutuCut非対応 | Remotion 対応（AWS Lambda を含む） |
2026-10-04 に確認。セル横の ↗ が出典で、開いてご自身で確認できます。
よくある質問
- TutuCut で Remotion のプロジェクトをそのまま開けますか？
- いいえ。Remotion のプロジェクトは React のコードで、Node.js でバンドルしてレンダリングします。TutuCut が動かすのは普通の HTML です。移行するには、アニメーション部分を 1 枚の HTML ページに書き直します。GSAP のタイムラインか window.__seek(t) で時刻ごとに 1 フレームを描き、パラメーターは __PARAMS__ から読み、素材は tutu-asset 記法で参照します。ほしい効果を AI に伝えて書いてもらうこともできます。
- 何かインストールが必要ですか？
- いいえ。ページを開けばすぐ使えます。Node.js のインストールも、プロジェクトの作成も、コマンドラインも不要です。モーションはブラウザ内で 1 フレームずつ描かれて書き出され、素材もコードもアップロードされません。
- モーションに自分の動画や画像を使えますか？
- 使えます。コードに tutu-asset 記法を書けば、メディアライブラリの画像・動画・GIF・フォントを参照できます。素材スロットのあるテンプレートなら、ファイルをドラッグするだけです。動画スロットは「音声あり」をオンにでき、その音声は別の音声クリップとしてモーションに付いていきます。素材が見つからなくなるとプレースホルダーを表示して再リンクを促し、書き出し前に止めるので、画像が欠けた版が黙って書き出されることはありません。
- 数百本の動画を一括で作れますか？
- 自動の一括レンダリングはできません。TutuCut は 1 本ずつ編集します。表計算のデータから数百〜数千本の動画を自動生成したいなら、Remotion のサーバー / Lambda レンダリングのほうが向いています。
- Remotion は有料ですか？TutuCut は？
- Remotion の公式ライセンスでは、個人、3 人以下の会社、非営利団体は無料で使えます。それより大きい会社は会社向けライセンスの購入が必要です。TutuCut は編集も書き出しも無料で、透かしなし、登録不要です。