言語: 日本語

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

コードを貼り付けるか、ファイルをドロップするだけ。ブラウザの中で1フレームずつ描画するので、ファイルはどこにもアップロードされません。登録不要・透かしなしで、最長2分の動画を書き出せます。

サンプルで試す：

AIにコードを書いてもらうなら

プレビュー

HTMLを貼り付けると、ここですぐに再生されます。

描画が終わるまで、このタブを前面に表示しておいてください。

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

お使いの端末内で処理します。ファイルがアップロードされることはありません。

そのまま書き出せるHTMLをAIに頼む

AIへの依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。きれいに描画できる可能性がぐっと高まります。

使い方は3ステップ
  1. 1
    貼り付ける
    HTMLを貼り付けるか、.html / .zip ファイルをドロップします。すぐにプレビューが始まります。
  2. 2
    確認する
    動画を使う場所に合わせて縦横比を選びます。長さはアニメーションから自動で読み取り、あとから変更もできます。
  3. 3
    書き出す
    MP4、GIF、透過WebM、PNG静止画から形式を選んで、ファイルをダウンロードします。
そのまま書き出せるHTMLをAIに頼む
AIへの依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。きれいに描画できる可能性がぐっと高まります。
このアニメーションを、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か data 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フレームに対応します。SNS、プレゼンアプリ、動画編集ソフトなど、幅広い環境で使えます。
GIF
README、ドキュメント、チャット、メールに。自動でループし、プレーヤーも要りません。短く、小さめのサイズで作るのがおすすめです。
透過WebM
編集ソフトで映像に重ねる素材に。タイトル、テロップ、ステッカーなどに使えます。ページの背景は透明のまま書き出されます。
PNG（静止画）
指定した瞬間の1枚を書き出します。サムネイルやカバー画像に。
まとめ
htmlto.videoは、HTMLアニメーションを動画ファイルに変換できる無料のオンラインツールです。HTMLを貼り付けるほか、.html ファイルや .zip アーカイブも読み込めます。書き出せる形式は、MP4（H.264、最大4K・60fps）、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で使えないのはなぜですか？
このツールは、描画されたHTMLをフレームとして取り込むためのブラウザ機能を使っていますが、Safariはその機能に対応していません。同じリンクを、パソコンのChrome・Edge・Firefoxで開いてください。
動画に画像やフォントが表示されないのはなぜですか？
そのファイルが、外部サイトからの読み取りを許可していないサーバーにあるためです。画像は data URL にしてHTMLに埋め込むか、フォントならGoogle Fontsなど、読み取りを許可している配信元を使ってください。
書き出しにはどのくらい時間がかかりますか？
パソコンの性能とページの内容によって変わります。1080p・毎秒60フレームで10秒の一般的な動画なら、20〜40秒ほどです。4Kや重いWebGLでは、さらに時間がかかります。
背景を透過した動画も書き出せますか？
はい。WebM（透過）を選び、ページの背景は指定しないままにしてください。アルファ付きWebMに対応した編集ソフトなら、アルファチャンネルがそのまま保たれます。