SVGロゴを“要素ごと”に動かせる無料ツールを作った — SVG Motion Studio
結論: SVGロゴを、パスやグループといった「要素ごと」に、タイムライン上で時間差をつけて動かせる無料ツール「SVG Motion Studio」を作った。登録不要・ブラウザだけで動き、仕上げたアニメーションはHTML/CSSや動画として書き出せる。この記事では、何ができて、既存の簡易ツールと何が違うのかを紹介する。使う場所はこちら → svg.tdmo.org
何ができるのか
手元のSVG（企業ロゴやアイコン）を読み込むと、中身がパス・グループ・円・矩形・テキストといった要素ごとに一覧化される。あとは動かしたい要素を選び、開始時刻・長さ・イージングをタイムライン上で指定していくだけだ。SVG全体にまとめて効果をかけるのではなく、「シンボルの輪郭を描いてから、少し遅れて社名を出す」といった演出を、要素単位で組み立てられる。
編集中はその場で再生して確認でき、Undo/Redo にも対応。元のSVGは壊さずに保持されるので、気軽に試して戻せる。
ふつうの簡易ツールと何が違うのか
「SVGにフェードを付ける」だけのツールは多い。しかしプロっぽく見えるロゴアニメーションは、たいてい要素が時間差で順番に登場する。この“ずれ”を要素ごとに設計できるかどうかが分かれ目だ。SVG Motion Studio は最初からこの「要素ごと・順番に」を中心に据えている。全体一括ではなく、階層構造（グループの中の個別要素）を保ったまま、それぞれにタイミングを与えられる。
使い方は4ステップ
難しい準備はいらない。svg.tdmo.org を開けば、その場で始められる。用意がなければサンプルSVGでも試せる（SVG・最大2MB・1,500要素まで）。
- SVGを開く — 手元のロゴを読み込む（またはサンプルを使う）。
- 動きを追加 — 要素を選び、プリセット・詳細設定・AIの下書きから効果を付ける。
- 人の手で調整 — 右パネルで数値を、タイムラインで開始時刻と長さを整える。
- 書き出す — HTML＋CSSやSVG、GIF・MP4などへ出力し、コピーして自分のサイトに貼る。
12種類の効果と、開始のきっかけ
扱える効果は、透明度・移動・拡大縮小・回転・線描画・塗り色・線色・線幅・破線・モーフィング・マスク表示・ぼかしの12種類。移動はパスに沿った動きにも対応する。タイミングは、開始時刻・継続時間・イージング（cubic-bezier含む）・繰り返し・逆再生・キーフレームまで細かく指定できる。開始の“きっかけ”も、ページ表示時・クリック・hover・スクロールから選べるので、Webサイトに埋め込んだときの見せ方まで作り込める。
書き出しは「依存ゼロ」を基本に
主対象はWebサイト埋め込み用のHTML＋CSS。外部ランタイムに依存しないので、書き出したコードをそのまま貼れる。加えて、アニメーションSVG・Lottie、動画/画像として使えるAPNG・GIF・WebM・MP4・WebPにも対応する。用途に合わせて選べる。
AIは“下書き”だけ — この製品の設計思想
自然言語からアニメーションを提案するAI機能もあるが、思想は「AIに丸投げしない」だ。この製品の核心は、AIが直接CSSを書くことではなく、編集可能で検証可能な「内部アニメーション形式」とタイムラインにある。AIはその内部形式を自然言語から操作するインターフェースにすぎず、生のHTML・CSS・JavaScriptを勝手に書くことはない。AIが出すのは許可リストで検証されたJSONだけで、速さ・強さ・時間差といった仕上げは人が手で詰める。
無料・登録不要・プライバシー
SVG Motion Studio は有料プランを設けず、無料・登録不要で提供している。通常の編集はすべてブラウザ内で完結する。AIを使うときだけ、自分のAPIキーを使う方式（BYOK。OpenAI・Gemini・Anthropic・Kimiに対応）で、キーはタブを閉じると消える。SVG本体やパスの座標そのものはAIへ送らず、送信内容と料金が発生する可能性を生成前に確認できる。アップロードされたSVGはそのままDOMに挿入せず、危険な要素を検査・除去したうえで扱う。
まとめ
SVG Motion Studio は、「要素ごとに・時間差で動かす」というロゴアニメーションの本質を、ブラウザだけで手早く形にするための道具だ。無料で登録もいらないので、まずはサンプルSVGで触ってみてほしい。CSSの仕組みから理解したい人は、あわせてSVGロゴをWebアニメーションさせる方法もどうぞ。