AIが作ったHTMLアニメーションを動画に変換
ChatGPTやClaude、Geminiが返してくれるのはコード。でも、SNSやスライド、動画編集ソフトで使うには動画ファイルが必要です。ここにコードを貼り付ければ、動画ファイルをダウンロードできます。
チャットから動画へ
- 1
HTMLファイル1つで頼む
何を動かしたいかをAIに伝え、1つのHTMLファイルで作ってもらうよう頼みます。下のプロンプトを添えれば、そのまま書き出せる形で返ってきます。
- 2
コードをコピーする
ChatGPT、Claude、Geminiでは、コードブロックのコピーボタンを使います。ライブプレビューが表示されている場合は、先にコード表示に切り替えてください。
- 3
貼り付けて書き出す
このページ上部に貼り付け、投稿先に合った縦横比（Reels・Shorts・TikTokなら9:16、YouTubeやスライドなら16:9）を選んで書き出します。
そのまま書き出せる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つのコードブロックにまとめて返してください。
画面録画やコマンドラインではだめなのですか？
画面録画は動きがカクつき、カーソルが映り込み、サイズも思いどおりになりません。コマンドラインツールなら正確に書き出せますが、Node、ヘッドレスブラウザ、FFmpegのインストールが必要です。このページなら、同じように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シーンは、処理の遅いパソコンでは失敗することがあります。