お久しぶりです。デザイナーの田中です。

今年は6月中が涼しかったので、このまま涼しい夏なのかな～なんて甘いことを考えていたら、しっかり暑い8月になってしまいました。体調管理には気を付けて過ごしたいですね。

そんな中、デザイン制作でも気になるアップデートがありました。Figmaに「Figma Motion」が追加され、これまでより手軽にアニメーションを作れるようになりました。

今回は、実際にClaudeと組み合わせて使ってみたので、その感想をご紹介します。

Figma Motion

2026年6月、Figmaに新機能「Figma Motion」が導入されました。

これまでFigmaでアニメーションを作るには、バリアブルやプロトタイプを組み合わせて動きを設定する必要がありましたが、Figma Motionではタイムラインとキーフレームを使って、動画編集ソフトのような感覚でアニメーションを作成できるようです。Premiere Proを使うこともあるので、似たような操作感で扱えるのは新しいものを覚えていくのが遅い私にとってはすごく助かります。

ただ今回は私自身ではなく、Figmaと連携できるAI「Claude」を使って、実際にアニメーション制作を試してみました。どこまでAIで作れるのか、使ってみて感じたことや操作感を交えながら書いていきたいと思います。

横に流れ続けるテキスト

画像のような「吹き出しの中でテキストが左に流れ続ける」パーツを用意しました。重要なお知らせや更新情報などでよく使われるアニメーションですが、Claudeでどこまで再現できるのか試してみます。

Claudeに指示

以下のような内容でお願いしました。

「横に文字が途切れず流れ続けるアニメーションを作ってください。」

Claudeが完成したと言っているのでまずfigmaを見てみます。

作ったデータを見てみると、「テキスト」というフレームの中に「Marquee」というフレームを作って、そのフレームにモーションを設定してれたみたいです。そして恥ずかしながら今回初めて知ったのですが、このような文字が横に流れ続けるアニメーションは「マーキーアニメーション」というそうです。

名前を知らなかったので「文字が流れ続けるアニメーション」とお願いしていましたが、正式な名前が分かったので、次からは「マーキーアニメーションを作って」と伝えれば済みそうです。AIに作ってもらうだけでなく、こういう名称まで教えてもらえるのは地味にありがたいなと思いました。

完成

そして実際に完成したのがこちら。

結果は、想像していた通りに吹き出しの中を文字が左へ流れ続けるアニメーションを作成してくれました。フレームのサイズが変わっていたりしたので細かな調整は必要でしたが、「まずは形にする」という点では十分満足できる仕上がりです！

今までは、このような動きをFigmaで作ろうとすると、コンポーネントを作りバリアブルをいくつか用意して、プロトタイプでそれぞれにアニメーションを設定し、さらにループが自然につながるように位置を細かく調整したり、速度を何度も確認したりと、意外と手間がかかっていました。

今回は、そのあたりをClaudeに「もう少しゆっくり流して」「やっぱり右から左に変更して」といった感じでお願いするだけ。修正も含めて2分ほどで完成したので、かなり楽になったと感じます。

もちろん細かな微調整は必要になることもありますが、ベースとなるアニメーションを短時間で作ってくれるだけでも十分便利です。Claudeが作っている間は他の作業もできるので助かります。今後も「まずはClaudeに作ってもらって、最後に自分で仕上げる」という使い方が増えそうです。

腕が動くイラスト

次にイラストが動かせるか試してみます。Webサイトでは、サービス紹介や使い方の説明などで、イラストが動いているのを見かけることがあります。腕や指先が少し動くだけでも、画面全体がぐっと分かりやすい印象になりますよね。

Claudeに指示

以下のような内容でお願いしました。

「動かす腕1」と「動かす腕2」を肩を支点に、小さくリズミカルに振るアニメーションを作成してください。自然でかわいらしい動きになるように、イージングを設定してループさせてください。

前回のマーキーアニメーションの時にはなかった回転のアニメーションも追加してくれたようです。

完成

そして実際に完成したのがこちら。

ほぼイメージ通りに作ってくれました！

腕の振り幅が少し大きくてフレームからはみ出してしまっていたので、そこだけ少し調整すれば完成です。

それよりも驚いたのは、「肩を支点に動かす」という意図をしっかり理解していたこと。腕全体を平行移動させるのではなく、肩を軸に自然に回転するよう設定されていて、「どこを支点にすればいいのか」まで判別できているのはすごいなと感じました。

手動で作業していると、支点を設定したつもりでも思わぬ場所を中心に回転してしまい、「なんでここが動くんだろう…」となることがよくあります。

それが今回は、「肩を支点に動かして」と伝えただけで、一発でこちらの意図を理解してくれました。このあたりは、想像以上に賢いなと感じたポイントです。

AIは英語で指示したほうが精度が高いという話もよく耳にしますが、今回試した範囲では、日本語だけでも十分イメージ通りに動いてくれました。もちろん複雑な内容になると違いがあるのかもしれませんが、普段の業務で使うようなアニメーションであれば、日本語だけでも問題なく使えそうです。

次は数字で見るページの動きなど試してみたですね。

ここ1年のAIの進化には驚かされるばかりです。これからFigma Motion自体も進化していくと思うので、今後どこまでできるようになるのか楽しみです。

最期に

AIが盛り上がっているのは感じていましたが、デザイナーとしてはどうしても著作権のことが気になってしまい、これまで業務で積極的に使いたいと思える機能にはあまり出会えていませんでした。

そんな中で、今回触ってみたFigma Motion × Claudeは、実際の制作でも活用できそうだと感じます。

画像やイラストを生成するのではなく、自分で作ったデザインにアニメーションを付ける作業をサポートしてくれるので、安心して使えます。今まで自分でキーフレームや支点、速度を調整していた作業を任せられるだけでも、かなり助かるなと感じました。

これまでは、動きのあるデザインは実装してから確認することがほとんどでしたが、これからは提案の段階からアニメーション付きでお見せできそうです。

実際のサイトに近い状態でご提案できるので、お客様にも完成イメージをより伝えやすくなりそうですね。

作る作業を任せられるとなると、今後は私自身のアイデアの引き出しを増やすことが大切だなと改めて感じました。AIとうまく役割分担をしながら、これからも便利な機能があれば実際に試して、ブログで紹介していきたいと思います。