HTML を動画に変換、ブラウザで 1 フレームずつ

しくみ

3 ステップ、すべてブラウザで

ツールがページの時計を制御し、1 フレームずつ進めて描画します。そのため、遅いノートパソコンでも速いマシンと同じ動画になります。

1. <style>

   h1 { animation: rise 1.2s }

   @keyframes rise { … }

   </style>

   <h1>Hello</h1>

   HTMLanimation.html
   01

   貼り付けるか、ファイルをドロップ

   CSS と JavaScript を含むページ全体、.html ファイル、または画像やフォントを含む .zip。CDN のライブラリも通常どおり読み込まれます。

2. 16:9

   9:16

   1:1

   ⏱ 4.5 s · auto
   02

   形式とサイズを選ぶ

   MP4・GIF・WebM、または PNG の静止画。16:9・9:16・1:1、720p〜4K、24・30・60 fps。アニメーションに終わりがあれば、長さは自動で設定されます。

3. 142 / 180

   →

   MP4GIF60 fps
   03

   レンダリングしてダウンロード

   各フレームをお使いのパソコンで描画・エンコードし、完了したらダウンロードできます。画面共有の確認もアップロードもありません。

対応範囲

ブラウザで動くものなら何でも

ブラウザのタブで動くものは動画にできます。ツールは CSS、Web Animations API、タイマー、requestAnimationFrame の時間を制御します。どのアニメーションライブラリもこの上で動いています。

• CSS アニメーションとトランジション

  キーフレーム、トランジション、@property、フィルター。書いたとおりのタイミングで再現します。

• GSAP と anime.js

  CDN から読み込んだタイムラインとトゥイーンに対応。GSAP タイムラインの長さは自動で検出します。

• SVG アニメーション

  stroke-dashoffset による線画、モーフィング、グラデーションのアニメーション。

• Canvas 描画

  requestAnimationFrame で動く 2D Canvas の描画やパーティクル。

• Three.js と WebGL

  3D シーンやシェーダーを、どのサイズでも 1 フレームずつ。

• p5.js クリエイティブコーディング

  ジェネラティブなスケッチやクリエイティブコーディングを、コマ落ちなしで書き出し。

• Tailwind と UI モックアップ

  クラス、タイマー、Web Animations API で動かすプロダクトのヒーローやアプリ画面。

• AI が作ったページ

  Claude・ChatGPT・Gemini が 1 つの HTML ファイルとして書いたアニメーション、解説、グラフ。

形式

1 回の貼り付けで、すべての形式に

使う場所に合わせてファイルを選べます。同じページをどの形式にも、3 つの画面比のどれにでも書き出せます。

• MP4

  H.264 · 720p、1080p、4K · 24/30/60 fps

  SNS 投稿、スライド、動画編集ソフト向け。どこでも再生できます。

• GIF アニメ

  360p〜720p · 10/15/25 fps · ループ

  README、Slack のメッセージ、メール、ドキュメントに。

• 透過 WebM

  アルファ付き VP9 · 720p〜4K

  ページの背景を抜いて書き出し。Premiere、DaVinci Resolve、Final Cut、CapCut のオーバーレイに。

• PNG 静止画

  1080p または 4K · 任意の瞬間 · 透過可

  1 フレームを静止画に。ポスター、サムネイル、スライドの画像に。

使い道

アニメーションの活用先

• SNS

  投稿とストーリー

  X や LinkedIn には 16:9、TikTok・Reels・Shorts には 9:16、フィードには 1:1。各プラットフォームが受け付けるのは HTML ではなく動画です。

• スライド

  PowerPoint、Keynote、Google Slides

  プレゼン資料は MP4 や GIF は再生できても、HTML アニメーションは再生できません。

• 編集

  動画編集ソフトのタイトルやオーバーレイ

  テロップやロゴアニメーションを透過 WebM にして、映像の上に重ねられます。

• ドキュメント

  README とドキュメント

  コンポーネントやグラフの GIF を、読まれるその場所に。

• ポートフォリオ

  Dribbble、Behance、事例紹介

  CodePen や自分のプロジェクトのモーション作品を、クリアで鮮明な動画に。

• プロダクト

  ローンチとデモ

  HTML で作ったプロダクトのヒーローやアプリ画面のアニメーションを、ローンチ投稿用のクリップに。

AI チャットから

Claude・ChatGPT・Gemini のアニメーションを動画にする

1. 01

   HTML ファイル 1 つで頼む

   「CSS と JavaScript を中に含めた、単体で動く HTML ファイル 1 つ」を、ウィンドウいっぱいのサイズで頼みます。アニメーションに終わりができるよう、長さも伝えましょう。

2. 02

   コードをコピーするか、ファイルをダウンロード

   チャットからページ全体をコピーするか、.html ファイルをダウンロードします。フォルダや .zip で書き出すツール（Claude Design など）なら、.zip のまま使えます。

3. 03

   ここに貼るかドロップして、レンダリング

   プレビューで再生されます。MP4・GIF・WebM を選んでレンダリングしましょう。修正したいときは AI に頼み、新しいバージョンを貼って、もう一度レンダリングします。

1 フレームずつ描く理由

どのパソコンでもなめらか、しかもプライベート

画面録画では、パソコンが表示できたものだけが残り、コマ落ちもそのまま記録されます。このツールでは、各フレームを描き終えるまでページの時間が止まります。

• フレーム単位で正確

  各フレームをそれぞれの瞬間で描くので、60 fps なら 1 秒に 60 枚の異なるフレーム。遅いノートパソコンでも同じです。

• アップロードなし

  ページはブラウザ内のサンドボックス化されたフレームで動き、ファイルもそこでエンコードされます。コードがサーバーに届くことはありません。

• 無料、透かしなし

  アカウントもクレジットも不要。動画にロゴは入りません。

HTML を動画にする方法の比較

次へ

さらに一歩先へ