HTML を動画に変換
Web アニメーション、Canvas、Three.js のコードを MP4 に
テンプレートから始める
- ライブ解説ウィンドウ 角丸の話者ウィンドウ+LIVE バッジ+名札。動画の音声もタイムラインに
- フレーム付きメディア 白枠と光彩のウィンドウ+左上ラベル。拡大して登場し、一部にズームも(画面録画向け)
- フォトウォール 縦長写真が並んで順に登場、各写真にキャプション
- 三連クローズアップ 画像を全面で横に並べ、それぞれにラベル、下に章番号 + タイトル
- 大画像+サムネイル列 下のサムネイルが順に光り、大きな画像が切り替わる
- 絵コンテ+メイン 左に絵コンテの列、右にラベル付きメインウィンドウ
- 分割解説 左に大きな文字(2 行目は強調色)、右にメディア、下にタイムラインの区切り
- 映像入り大文字 大きな文字の中に動画や画像が見え、上に小見出し・下にサブタイトル
- スマホモックアップ 映像をスマホの枠に入れてふわっと浮かせる
- コーナーロゴ ロゴと文字を隅に常時表示
- グレイン入りグラデーション 青緑からオレンジへ流れるグラデーション+フィルムグレイン。最下段に背景として
- タイトル ポップ 大見出しが下線とサブタイトル付きで登場
- 単語ごとに登場 リズムに合わせて単語が順に現れる
- データの成長 棒グラフが伸び、数字がカウントアップ
- ロワーサード 名前と肩書きのテロップ
- 光のスイープ 光の帯が画面を横切る
- カウントダウン 3・2・1 が弾み、外側のリングが減っていく
- タイプライター 1 文字ずつ打ち出し、カーソルが点滅
- 円形プログレス リングが目標の割合まで埋まり、数字が増える
- 丸で囲む 手書き風の丸で大事なところを囲む
- 3D 回転体 金属調の結び目がゆっくり回る（Three.js）
- 音楽バー タイムラインの音楽に合わせてバーが跳ね、ビートで光ります
- 字幕カード 同じ時間の字幕を一枚ずつカードで表示、強調色の縦線付き。字幕トラックを隠せばカードだけ残る
- ハイライト見出し クリーム色の背景に蛍光ラインが走り、大きな文字が一つずつ落ちる
- キネティック大文字 一語ずつ画面いっぱいに叩きつけ、黒・黄・クリームの色面が斜めに切り替わる
- 問いかけカード 小さなタグ+大きな 2 行。2 行目に明るい帯
- 斜めステッカー クリーム色の紙片が左右に傾いて順に登場(| で区切る)
- カラーブロック カウントダウン 大きな数字が一つずつ、そのたびに色面が押し込まれる
- カプセルタグ 大見出し + 濃色のカプセルタグが順に浮かび、下に強調の結論
- 状態カード 左のカード列が順に中央へスクロールしてフォーカス、右に大きな文字の対比説明
- タグ対照表 濃色パネルに「タグ → 意味」を一行ずつ表示、左列は等幅フォント
- 引用カード 左上に小さなラベル、中央に長い引用が一行ずつ浮かび上がる
クリックするとモーションが追加された状態でエディターが開きます。素材スロットのあるテンプレートは、動画や画像をカードにドラッグするか「自分の素材を使う」でファイルを選ぶと、開いたときにはもう収まっています。ファイルは端末の中だけにあり、アップロードされません。
Canvas・SVG・GSAP・Three.js で作った Web アニメーションを貼り付けると、時間に沿って 1 フレームずつ描画し、動画に重ねて MP4 や GIF で書き出せます。ブラウザで完結、無料・透かしなし。
Web アニメーションのコードを貼り付けるか .html ファイルを読み込むと、タイムライン上のモーションクリップになります。背景は透明で動画や画像の上に重なり、ほかのクリップと同じように位置の移動・拡大縮小・不透明度の調整・キーフレーム・イン／アウトのアニメーションが使えます。
エディターは画面を録画するのではなく、時間に沿って 1 フレームずつ描画します。同じ時刻からは必ず同じフレームが描かれるので、プレビューで見たものがそのまま書き出されます。コード内の Math.random・Date・requestAnimationFrame は決定的な時計に置き換えられ、GSAP と Three.js は組み込み済みなので外部スクリプトを読み込む必要はありません。
コードは隔離されたサンドボックスで動き、ネットにはつながりません。外部の画像やフォントは読み込めないので、必要なら data: URL でインライン化してください。作品が宣言したパラメーター（文字・色・数値）は右側の設定パネルに表示され、変更したらそのまま MP4 や GIF で書き出せます。
よくある質問
- どんな書き方に対応していますか？
- よくある 4 つの書き方がそのまま使えます。window.__seek(t) を定義して t 秒時点の 1 フレームを描く方法、一時停止した GSAP タイムラインを作って window.__timelines に入れる方法、Three.js のシーンを __seek の中で時刻どおりに配置してレンダリングする方法、そして普通の requestAnimationFrame ループです。ページにキャンバスが 1 枚だけならそのキャンバスを直接取り込み、そうでなければページ全体（SVG・CSS・文字）を 1 フレームとして描画します。
- CDN のライブラリは使えますか？
- GSAP（CustomEase・MotionPath・MorphSVG・DrawSVG・SplitText プラグインを含む）と Three.js は組み込み済みで、コード内でそれらを指す CDN の URL は自動的に組み込み版に置き換えられます。サンドボックスはネットにつながらないため、それ以外の外部ライブラリは読み込めません。
- 書き出した動画に音は入りますか？
- モーション自体には音がなく、コードで再生した音声も記録されません。音楽やナレーションはタイムラインに別途追加すれば、モーションと一緒に書き出せます。
- コードでエラーが出たら？
- プレビューの上部とクリップ上にエラーが表示され、エラーの原文はコードのダイアログに出ます。「AI に直してもらう」をクリックすると、AI がコードを読んで修正し、結果をもう一度確認します。直るまでプレビューは最後に正常だったフレームで止まり、ほかのクリップには影響しません。
- コードはアップロードされますか？
- いいえ。コードはプロジェクトと一緒にブラウザ内に保存され、お使いの端末でレンダリング・書き出しされます。自分でプロジェクトをクラウドに保存したときだけ、プロジェクトと一緒にアップロードされます。