こんにちは、動画好きの尾谷です。
観るのも好きですが、作るのがもっと好きです。
本ブログでは、Kiro を使ってアニメーション SVG を作る方法をご紹介します。
はてブロに SVG ファイルが貼れなかったので、収録した動画を YouTube にアップしました。
www.youtube.com BGM が流れますので、ご注意ください。
2 月から始めたので、まだまだ少ないですが、製作した SVG アニメーションを GitHub リポジトリで公開しています。
Kiro のアニメーションが SVG だと知る
昨年の JAWS-UG 忘年会で、Kiro のアニメーションは SVG アニメーションという技術で動いていると教えてもらいました。
画面収録した動画を YouTube にアップロードしました。
僕は WEB で画像を動かすなら、GIF アニメーションか作り込んだ JavaScript が必要と思っていたので、技術の進化には大変驚きました。
実際のSVGアニメーションの仕様
SVG 自体にはアニメーションを記述できる仕組みがあります。
例えば <animate> や <animateTransform> といった要素を用いると、SMILベースのアニメーションも実装可能です。
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="75" y="75" width="50" height="50" fill="blue"> <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite" /> </rect> </svg>
それで、コードでアニメーションするということは「AI を使って、SVG アニメーションを生成できるのでは？」と気づいてしまいまして、製作を始めることにしました。
本ブログでは、Kiro で SVG アニメーションをうまく作る方法と成果物をご紹介します。
生成 AI が扱いやすい SVG データを用意する
持論になりますが、現時点で良質な SVG アニメーションを作るには、AI が扱いやすい SVG データをあらかじめ人が用意しておくのがベストプラクティスだと感じています。
タイムラインをレイヤーで表現して生成 AI に渡す
明確な指示を出せなかった例をご紹介します。以下は失敗例です。
スクリーンショット左側の upload.svg を作り、Kiro に矢印が上に上がるアニメーションをお願いしたところ、右側のような潰れたアニメーションが仕上がりました。
明確な指示を出すには、各 Scene に分けたデータを渡すのが良さそうです。
例えば、以下のファイル file.svg ですと、 ファイルだけのベクターデータと
ファイルを重ねて表現したいベクターデータと
ファイルが折り込まれた後のイメージデータをそれぞれのレイヤーに分けて配置します。
各要素にレイヤーに分けた状態で Illustrator の標準機能で SVG ファイルに書き出すと、レイヤー情報が保持されます。
それを Kiro に読み込ませると、構造を理解してアニメーション生成してくれます。
要素に分ける
複雑なイメージでも細分化するといい感じにアニメーションしてくれます。
弊社のロゴを使って方法をご紹介します。
まず、Adobe Illustrator を用いて SVG ファイルを作ります。
弊社のコーポレートサイトから SVG のファイルロゴをダウンロードしてきました。
上記ロゴ（SVG ファイル）は、一つの要素にまとまっているので、以下のスクリーンショットのように一文字ずつレイヤーに分けていきます。
ForgeVision の「g」と二つ目の「o」の文字は曲線で繋がっているので、カットツールでパスを切り離して、別レイヤーに入れます。
こんな感じです。
これを Kiro に渡すと、Kiro が SVG の構造を把握し、いい感じでアニメーションしてくれました。
文字を書くアニメーションは困難
ファイルだけ渡して、人がペンで書くようなアニメーションを生成させるのは現段階で難しいと考えます。
例えば、フォージビジョンのスローガンである「共に着実に歩む。」を SVG アニメーションにしました。
一文字ずつレイヤーに入れて、Kiro に依頼しました。
最初は文字を書くように線を描画して欲しいと依頼しましたが、何度やってもエラーになりました。
生成 AI は文字を文字ではなく一つのベクターデータとして認識します。どのラインからレンダリングするか？といった処理をベクトルデータから取得するのは複雑すぎるようです。
現時点で実現するには全ての線を別レイヤーで書き出す必要がありそうです。
イメージを認識する能力は、意外と高い
Kiro のサイトから svg ファイルを拝借してアニメーションにしてもらいました。
イメージを認識する能力は高そうです。
Claude Opus 4.6
とはいえ、モデルの選定は重要です。
モデルは、Hike や Sonnet よりも、Opus を選択したほうが、より人の考えを汲み取り生成してくれるように感じています。
例えば、Sonnet で 2 回やりとりするよりも、Opus で一発で出力した方が、結果、短時間で少ないクレジットで生成できます。
製作物ごとにセッションを分ける
Kiro は [+] ボタンからセッションを分けることができます。
SVG アニメーションを生成したセッションを使い回すと、情報が濁るので、クリアーにして試行した方が明確なアニメーションが生成できます。
また、後から少し変えたいなと思ったときに History から restore して続きから生成できます。
なお、一つのプロジェクト内で生成を繰り返した方が、他のファイルも参照してスタイルを合わせてくれるので、統一感が生まれます。特に WEB サイトの素材を作るときなんかに効果がありそうです。
アニメーションのタイミングを調整する
アニメーションの切り替えタイミングを調整したい場合は、各 animation の delay 値（0.3s, 1.2s など）を変更すれば調整できます。
svg ファイルは、Kiro エディタで開くとプレビュー表示になるため、svg ファイルを右クリックして「Open With...」から「Text Editor」を選ぶとコードとして開けます。
Kiro に頼んでもやってくれますが、クレジットも消費しますし、微妙なタイミングの調整はプレビューしながら、値を 0.1 ずつ調整した方がスムーズかも知れません。
.kiroignore で ai ファイルを除外
Kiro は ai ファイルがバイナリデータのため読み込めません。
.kiroignore ファイルを追加して除外しておくと効率的です。
AWS アイコンは比較的認識力が強い
Kiro に AWS のアイコンを読み込ませると、サービスの特性を理解しているためか、いい感じでアニメーションしてくれました。
AWS の SVG アイコンは、公式サイトからダウンロードできます。
成果物を GitHub で公開しています
これ以外にもちょくちょく製作しています。
成果物のアニメーション SVG は、GitHub リポジトリで公開していますので、是非、ご覧ください！
Adobe Illustrator の代替アプリケーション
本ブログ記事では、Abobe Illustrator で SVG ファイルを作成する方法を中心に制作手法を紹介しました。
ですが、Adobe 製品は年々高額になり、個人で用意するのがますます難しくなっています。僕も、会社に申請して用意してもらうのも申し訳ないので代替案を検討しています。
Apple Creator Studio はベクターデータが使えるようなので、4 月ごろから乗り換えの検証を進めようと思っています。
まとめ
Kiro を使ってアニメーション SVG を作る方法と、作品のご紹介でした。
環境が用意できれば、Adobe After Effects でタイムラインを作り込み、Bodymovin プラグインで SVG アニメーションを書き出すといった方法も取れますが、環境を用意するコスト（ランニングコスト & ラーニングコスト) もかかりますので、お手軽に始めてみたい方は検討されてはいかがでしょうか。
他にもベクターデータを扱える製品はあると思うので、良い製品があればご紹介ください！
以上です。
