Webサイトの制作やデザインをしていて、「ここに少し動きをプラスして、ユーザーの目を引きたいな」と思う瞬間はありませんか？今回は、「AIを使ったSVGアニメーション」の手軽さについてご紹介します。

やり方は驚くほど簡単で、手元にあるSVGファイルをAIに読み込ませ、動かしたいイメージを言葉で伝えるだけ。

試しに、シンプルな雨雲のSVGデータを読み込ませて、「このアイコンの雫を、本当に雨が降っているように動かして」と指示を出してみました。すると、必要なコードを瞬時に生成してくれて、滑らかに雨がしたたるアニメーションが完成したんです！

これまではCSSやJavaScriptを細かく手書きしたり、専用ツールでキーフレームを調整したりしていた作業が、自然言語だけで完結するのは本当に画期的です。

サイトの「ここぞ」というポイントにアクセントを加えたいとき、かなり心強い味方になってくれます。みなさんもぜひ、手元のアイコンで試してみてください！