HTMLアニメーションを動画に変換

コードを貼り付けるか、ファイルをドロップしてください。ブラウザ内で1フレームずつ描画するため、どこにもアップロードされません。登録不要、透かしなし、1本あたり最大2分まで書き出せます。

サンプルから始める:

AIにコードを書いてもらう場合:

プレビュー

貼り付けると、ここでアニメーションが再生されます。

描画中は、このタブを前面に表示したままにしてください。

ダウンロード
形式
縦横比
秒

処理はお使いの端末で行われます。ファイルはアップロードされません。

書き出しやすいHTMLをAIに書いてもらう

依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。一度で問題なく描画できるHTMLになります。

使い方は3ステップ
  1. 1
    貼り付ける
    HTMLを貼り付けるか、.html または .zip ファイルをドロップします。すぐにプレビューが始まります。
  2. 2
    確認する
    投稿先に合わせて縦横比を選びます。長さはアニメーションから読み取られ、変更もできます。
  3. 3
    書き出す
    MP4、GIF、透過WebM、PNG静止画から選んで、ファイルをダウンロードします。
書き出しやすいHTMLをAIに書いてもらう
依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。一度で問題なく描画できるHTMLになります。
このアニメーションを、htmlto.videoで動画に書き出せるよう、単体で動作する1つのHTMLファイルに書き直してください。
- 16:9 のフレームを前提にデザインしてください。ブラウザのウィンドウにぴったり収まるようにし(100vw × 100vh、スクロールなし)、どの解像度でも拡大縮小できるよう、サイズはすべて vw と vh で指定してください。
- ページの読み込みと同時に自動で始まり、マウス、キーボード、スクロールの操作を必要としないこと。
- 長さを固定してください。長さは1行目に <!-- duration: 8s --> のようなコメントで記載してください。
- アニメーションには、CSSアニメーション、Web Animations API、GSAP、またはタイムスタンプ引数を使った requestAnimationFrame を使ってください。video、audio、iframe は使わないでください。
- CSSとJavaScriptはすべてインラインで記述してください。画像はインラインSVGまたはデータURLで埋め込んでください。フォントとライブラリは、Google Fonts、cdnjs、jsDelivr など、クロスオリジンでの読み込みを許可しているCDNのものだけを使ってください。
- 完全なHTMLを、1つのコードブロックにまとめて返してください。
描画できるもの
  • CSSのアニメーションとトランジション
  • GSAP、anime.js、MotionなどのJavaScriptライブラリ
  • Canvas 2D
  • CSSまたはJavaScriptで動かすSVG
  • WebGLとThree.js
  • Web Animations APIと requestAnimationFrame
まだできないこと
  • Safari、iPhone、iPadでは書き出せません。プレビューは使えます。
  • ページ内の動画、音声、iframeは書き出しに含まれません。
  • クロスオリジンでの読み取りを許可していないサーバーの画像やフォントは表示されません。
  • クリック、ホバー、スクロールを待つアニメーションは進みません。
  • <animate> などのSMILタグで動かすSVGはキャプチャされません。
  • 非常に重いWebGLシーンは、性能の低いパソコンでは失敗することがあります。
形式の選び方
MP4
SNSへの投稿、スライド、動画編集ソフト向け。H.264で、720p、1080p、4K、毎秒24、30、60フレームに対応します。どの環境でも再生できます。
GIF
README、ドキュメント、チャット、メール向け。自動でループし、プレーヤーも不要です。短く、小さいサイズにするのが向いています。
透過WebM
編集ソフトで重ねる素材向け。タイトル、テロップ、ステッカーなどに。ページの背景は透明のまま残ります。
PNG（静止画）
指定した時点の1枚を書き出します。サムネイルやカバー画像に。
要点
htmlto.videoは、HTMLアニメーションを動画ファイルに変換する無料のオンラインツールです。貼り付けたHTML、.html ファイル、.zip アーカイブを受け付け、MP4(H.264、最大4K・60 fps)、GIF、背景が透明なWebM、PNGの静止画1枚に書き出せます。描画は1フレームずつ、利用者のブラウザ内で行われます。ファイルがアップロードされることはなく、パソコンの速さにかかわらずフレームレートは正確です。登録、透かし、料金はありません。長さは最大120秒(GIFは30秒)です。パソコンのChrome、Edge、Firefoxと、AndroidのChromeで動作します。Safari、iPhone、iPadでは動作しません。また、埋め込み動画、iframe、クロスオリジンでのアクセスを許可していないサーバーの画像やフォントはキャプチャされません。
よくある質問
ChatGPTやClaudeが作ったHTMLアニメーションをMP4にするには?
AIが書いたHTMLをコピーして、このページ上部の入力欄に貼り付け、プレビューを確認してから書き出しボタンを押します。描画が終わるとMP4がダウンロードされます。10秒のアニメーションなら、通常1分以内に終わります。
ファイルはどこかにアップロードされますか?
いいえ。動画の描画とエンコードは、お使いの端末で行われます。HTMLも完成したファイルも、当サイトのサーバーには送られません。
本当に無料ですか? 透かしや長さの制限はありますか?
無料です。透かしはなく、アカウントも必要ありません。長さは最大120秒、GIFは30秒までです。
画面録画と比べて何がよいのですか?
画面録画は、パソコンの負荷が高いとフレームが落ち、カーソルが映り込み、ウィンドウの大きさのまま記録されます。このツールは、指定したサイズとフレームレートで、すべてのフレームを1枚ずつ描画します。
SafariやiPhoneで使えないのはなぜですか?
Safariでは、ページがHTMLの描画結果を画像として読み取ることができません。このツールはその仕組みに依存しています。同じリンクを、パソコンのChrome、Edge、Firefoxで開いてください。
動画に画像やフォントが表示されません。なぜですか?
そのファイルが、他のサイトからの読み取りを許可していないサーバーに置かれているためです。画像はデータURLとしてHTMLに埋め込み、フォントはGoogle Fontsなど、読み取りを許可している配信元のものを使ってください。
描画にはどのくらい時間がかかりますか?
パソコンの性能とページの内容によります。1080p、毎秒60フレームで10秒の一般的な動画なら、20〜40秒ほどです。4Kや重いWebGLでは、さらに時間がかかります。
背景が透明な動画を書き出せますか?
はい。WebM（透過）を選び、ページの背景は指定しないでおいてください。アルファ付きWebMに対応した編集ソフトであれば、アルファチャンネルが保たれます。