使いたい場面を普段の言葉で説明するだけで、AI が完成したアニメーション SVG を書き上げます。
Web サイト、アプリ、SNS 素材、製品デモに。ダウンロードも、コピーも、編集も自由です。
すでにロゴをお持ちですか？「手持ちの SVG を動かす」に切り替えてアップロードしてください。
サンプルをクリックすると実際のコードを確認できます。上のフォームにご自身のアイデアを書いても構いません。
動画でも GIF でもありません。どれも自動再生で、容量はわずか数 KB です。
一文から新しいアニメーションを生成する方法と、手持ちの SVG に動きを足す方法。どちらも、繰り返し使える商用テンプレートづくりに向いています。
図解、ロゴ、ローディングアイコン、地図。作りたいものを普段の言葉で説明すれば、数秒で動く SVG が返ってきます。
静止した SVG をお持ちなら、アップロードして「手持ちの SVG を動かす」に切り替えるだけ。パスはそのままに、動きだけを追加します。
ここに並ぶデモは、ビジネス用途に向いた SVG アニメーションの型です。アプリのローンチ、商品パッケージ、ロゴのオープニング、注文ステータス、SNS 素材。本当の商機は、画像・文字・ロゴ・ブランドカラー・尺・書き出し形式をユーザー自身が差し替えられるテンプレートにすることです。
複数のスマホ画面と情報の階層で製品の機能を手早く伝えます。公式サイトのファーストビュー、広告出稿、ストア掲載用の素材に。
パッケージ、フルーツのあしらい、軌道線、わずかな浮遊感。静止した商品カードを、使い回せる EC のメインビジュアルに変えます。
機能をカードに分け、スライドと重なりと強調で価値を伝えます。抽象的なアプリの機能が理解しやすくなります。
ロゴリビールはテンプレート商品にしやすい分野です。ブランドマークをアップロードするだけで、オープニングとエンディングが生成できます。
ステータス表現は商用価値が高い分野です。注文、配送、デプロイ、承認、決済完了。どれも明確なフィードバックを必要とします。
SNS テンプレートは、業種とサイズごとに揃えたライブラリにすると効果的です。画像、見出し、タグを差し替えて書き出すだけで完成します。
「とりあえず格好いいアニメーション」から始めないでください。先に使う場面を決め、そのうえで対象・ブランドカラー・文言・テンポを変えていく。そうすると、そのまま公開できる SVG に近づきます。
タイムライン編集ソフトは習得に何時間もかかり、動画で書き出すと拡大したときにぼやけます。ここでは一文書くだけで、本物のアニメーション SVG が返ってきます。読めるコードなので、編集も、どこへ埋め込むのも自由です。
何が動いて、どんな感じにしたいかを書くだけ。AI が図形を設計し、キーフレームをすべて書き上げます。ほとんどのアニメーションは 1 分もかかりません。
ロゴ、アイコン、イラストをアップロードして、動きを説明するだけ。線を描いていく演出、やさしい浮遊、装飾の回転など。元の図形はそのまま、アニメーションだけが加わります。
いつでもコードビューに切り替えられます。CSS キーフレームを内包した、きれいな SVG マークアップ。そのままプロジェクトに貼っても、タイミングや色を自分で調整しても構いません。
ここで作るアニメーション SVG は数十キロバイト程度。どんな解像度に拡大してもぼやけず、動画プレーヤーなしで永遠にループします。
サイトの仕上げから授業用の図解まで。同じ「一文書くだけ」の流れが、実際に発生するアニメーション業務をひと通りカバーします。
決済ステップ、登録ステップ、ローディング、空の状態、動く 404 ページ。ユーザーが待っている瞬間、迷っている瞬間のための表現です。img タグに置くだけで自動的に再生され、配線も保守も必要ありません。
回る太陽系、動くタイムライン、仕組みの図解、伸びる棒グラフ。概念を説明するだけで、スライド・記事・講座ページにそのまま置ける素材になります。動画プレーヤーは要りません。
自ら書かれる手書き文字、動く見出し、ロゴリビール、ゆっくり流れる hero 背景。どんな画面でもベクターの鮮明さを保ち、軽さのおかげで一瞬で表示されます。
GitHub の README、Notion のページ、共有ドキュメント、スライド。たいていのアニメーションファイルは、作られたサイトを離れた瞬間に止まってしまいます。これは動きを持ったまま移動できます。
選ぶのはモデル ID ではなくティアです。エンジンを切り替えて同じプロンプトをもう一度走らせれば、違いをご自身で確かめられます。
速さ優先で 10 クレジット。言い回しを試行錯誤していて、次の結果を早く見たいときに向いています。
既定のティアで 10 クレジット。当サイトのアニメーション用プロンプトで唯一、通しで検証したエンジンです。きれいなマークアップ、安定した CSS キーフレーム、所要時間はおおむね 12〜32 秒。
15 クレジット、推論を有効にした状態。遅くて高価ですが、要素が多く動きの組み立てが複雑なシーン向けです。
SVG が本来の出力形式です。GIF と MP4 はブラウザ内で書き出されます。追加クレジットも、アップロードも不要です。
本命の成果物です。CSS キーフレームがファイルの中に入っているので、実行用ライブラリなしで再生されます。img タグに置いても、インラインで貼り付けても構いません。
SVG のアップロードを受け付けない場所、たとえばチャットアプリや SNS 向けにワンクリックで。お使いの端末上で、アニメーションを 1 コマずつ描き出します。
ショート動画、スライド、講座教材向け。対応ブラウザではローカルで書き出します。対応していない場合でも、SVG と GIF はそのまま使えます。
動く画像を作るだけではありません。プロンプト、プレビュー、ソースコード、書き出し、再利用までを 1 つの流れでカバーします。
ローディング、自動描画ロゴ、タイプライター文字、波の背景、線画リビール、伸びるグラフ。テンプレートを選び、言葉を少し変えて、生成するだけです。
JavaScript なし、外部ファイルなし、実行用ライブラリなし。アニメーションは SVG 自身の中に書かれた宣言的な CSS です。インラインでも安全、キャッシュも効き、img タグの中でも再生されます。
ベクターなので、同じファイルが 16px のアイコンでも全画面の hero でも完璧に鮮明です。サイズごとに書き出し直す必要はありません。
AI が書いた内容をそのまま確認できます。マークアップをコードベースに貼り、再生時間を変え、色を差し替える。丁寧な人が書いたコードのように読めます。
SVG からアニメーションへの経路です。手持ちの SVG をアップロードして動きを説明するだけ。すでに公開したロゴや、気に入っているアイコンに最適です。
既定では Claude Sonnet 5 がマークアップを書きます。精密なベクターコードは、このモデル系列がとりわけ得意とする領域です。もっと速く、あるいはもっと重厚に処理したい場合は、ティアを切り替えるか、詳細設定でエンジンを直接指定してください。
アニメーション SVG の生成についてよくいただく質問です。その他のご質問は support@imagesv2.ai までお寄せください。
得意なのは、あらかじめ決めた動きを再生する「宣言的なモーション」です。
(1) Web・UI 素材 — ローディング、自動描画ロゴ、波の背景、動く 404 ページ。
(2) 文字の演出 — タイプライター、キネティックタイポグラフィ、自ら書かれる手書き文字。
(3) 説明用の図解 — 惑星の公転、タイムライン、伸びるグラフ、仕組みのループ図。
向いていないもの：JavaScript による シミュレーションやゲーム（数値がリアルタイムに変わる物理表現、対話型アプレット）。静止したロゴやイラストは GPT Image 2 SVG ジェネレーターを、フローチャートや図表は AI SVG 図表ジェネレーターをお使いください。
はい。このページは既定でまさにそうやって動いています。Anthropic の Claude Sonnet 5 が、SVG のマークアップと CSS キーフレームを図形ごと・フレームごとに直接書いています。テキストの説明からベクターコードを書き起こす作業は、最前線のモデルが著しく得意になった領域のひとつで、Claude はその中でも一貫して上位にいます。ただし選択肢はこれだけではありません。ティア切り替えでは Gemini 3.6 Flash と Kimi K3 も動きますし、詳細設定では GPT-5.6、DeepSeek V4 Flash、MiniMax M3 を直接指定できます。上のフォームに一文入力し、コードビューを開いて、選んだエンジンが何を書いたかご覧ください。
Web サイトで使うものなら、あらゆる面でアニメーション SVG が有利です。メガバイトではなく数十キロバイト、どの拡大率でも鮮明、なめらかな無限ループ、そして焼き付いたピクセルではなく編集できるコード。GIF の利点はひとつだけ、SVG のアップロードを受け付けないプラットフォーム（一部のチャットアプリや SNS）で再生できることです。目安としては、自社サイト・スライド・ドキュメントには SVG、プラットフォームの都合でやむを得ない場面だけ GIF。最初に決め打ちする必要はありません。生成結果はどれも、同じ結果から GIF と MP4 に書き出せます。ブラウザ内で処理されるので追加クレジットもかかりません。
2 通りあります。
(1) 画像として — .svg をアップロードして、通常の img タグで参照します。ファイル内の CSS キーフレームが自動的に再生されます。
(2) インラインで — コードビューからコードをコピーして HTML に貼り付けます。ホバーで反応させたい場合は、インタラクションが効くのは SVG がページ内にあるときだけなので、インラインを選んでください。
どちらの方法でも、読み込むスクリプトや追加でインストールするものはありません。
不要です。出力されるのは純粋な宣言的アニメーション、つまり SVG ファイル自身の中に書かれた CSS キーフレーム（まれに SMIL）です。GSAP も、Lottie プレーヤーも、実行用ライブラリもありません。だからこそインラインでも安全で、読み込みが速く、現代のブラウザ全般で動きます。正直にひとつだけ注意点を挙げると、多くのメールクライアントは SVG のアニメーションを止めてしまうので、メールマガジンでは GIF のほうが確実です。
はい、それが 2 つ目のモードです。SVG をアップロードし、望む動き（輪郭を一筆ずつ描く、やさしく浮かせる、アクセントカラーを脈打たせるなど）を説明すると、元の図形はそのままにアニメーションだけが追加されます。ロゴが PNG や JPG しかない場合は、まず GPT Image 2 SVG ジェネレーターで変換してから、ここで動かしてください。
はい、どちらも無料です。SVG が本来の成果物で、GIF と MP4 はお使いのブラウザ内でアニメーションを 1 コマずつ再生して作られます。どこにもアップロードされず、追加クレジットもかかりません。SVG のアップロードが通らない場所では GIF を、ショート動画・スライド・講座教材には MP4 をお使いください。MP4 の書き出しには WebCodecs 対応ブラウザ（Chrome、Edge、最近の Safari）が必要です。非対応の環境では SVG と GIF はそのまま使え、MP4 ボタンだけが無効になります。
1 回あたり 10 クレジットで、当サイトの他の SVG ツールと同じです。新規登録の方には無料クレジットをお配りしているので、まずお試しいただけます。
ほとんどのアニメーションは 1 分もかからず仕上がります。要素が多いシーンや長い演出では 2 分ほどかかることもあります。AI が図形とキーフレームをひとつずつ手書きしているためです。
できます。生成したアニメーションはお客様のものであり、商用利用も無料です。クライアント案件でも、製品の中でも、有料コンテンツでもお使いいただけます。
