Claude Design で Web サイトのアニメーションを作る

期間限定の特設サイトを作る案件で、UI は Figma、動きは Claude Design のプロンプトという分担で進めました。スクロール連動のアニメーションを含む Web サイトのデザイン初稿完成まで約 5 日間で作成しました。

---

案件の前提：デザインシステムを作らない特設サイト

デザイン室が普段扱うシステムのデザイン案件では、デザインシステムを作り、カラーやテキストスタイルをバリアブル（変数）化しておきます。長期の運用と改修を見込むので、拡張性と保守性を優先してデザインデータを組み立てます。

今回作ったのは、ある企業のキャンペーン用の特設サイトでした。ユーザーから寄せられたコメントの動画やプレゼントキャンペーンを載せる、参加型のイベントページです。長期運用を前提にしないため、カラーやテキストを変数化しておく価値は薄く、装飾とアニメーションの多いページを短納期で作ることが最優先になりました。

Figma だけでは届かなかった 2 つの領域

これまではデザインを Figma で作り、そのデータをエンジニアに渡して実装してもらう流れでした。今回の案件では、この流れで足りない部分が 2 つありました。

1 つは、Figma ではアニメーションを作れないことです。静止画としての UI は作れても、スクロール連動の動きやファーストビューのアニメーション表現は Figma 単体では再現できません。Figma Motion を使えばアニメーション自体は作れますが、キーフレームを打って組み立てる方式なので、1 つ作るのにも時間がかかります。

もう 1 つは、動きの意図をエンジニアに伝えづらいことです。「ふわふわ浮かせたい」「スクロールで色が変わる」といった挙動を、言葉と静止画だけで正確に共有するのは難しく、認識の齟齬が残ります。

Figma と Claude Design を並列で回す

そこで今回は、UI を Figma で作りながら、動きは Claude Design にテキストのプロンプトで指示する形を取りました。この 2 つを並列で進めると、アニメーション付きの完成イメージまで一気に作れます。

最初のプロンプトは参考サイトの構造から作る

参考にしたい特設サイトの構造を、Chrome 拡張機能の Claude in Chrome で解析しました。出力された構成をテキストとして書き出し、「特設ページのファーストビューになるアニメーションを作ってください」というプロンプトの後ろに貼り付けて Claude Design に渡しています。ゼロから言葉で説明するより、参考サイトの構成をそのまま素材にしたほうが意図が早く伝わりました。

UI は Figma から SVG かスクリーンショットで渡す

コメントのカード UI は、Figma で作ったものを SVG データとして書き出すか、画面のスクリーンショットを撮って Claude Design に渡しました。「このカードをコメントの位置に入れてほしい」と指示すれば読み取ってくれるので、デザインをゼロから説明する必要がありません。

Coming soon の状態と公開後の状態を 1 つのデータで作成可能

ページの一部で、Coming soon 表示のデザインと公開後のデザインの両方を作成する必要がありました。 その場合も、Claude Design 上で Coming soon の状態と公開後の状態を同じデータ内に作り、ボタン 1 つで切り替えられるようにしています。

動きの制作にかかる時間が変わった

この種のアニメーションは、これまで Adobe After Effects でフレームごとに少しずつ作っていました。今回はスクロール連動の色変化や要素が浮遊する動きをプロンプトで指示するだけで再現でき、書き出しの待ち時間もなくなっています。修正のコストが下がったぶん、思ったとおりになるまで何度でもやり直せました。完成までのやり取りは数日にわたり、回数は覚えていないほど繰り返しています。

一方で、細かい調整は Figma で直したほうが早い場面が今も多く残ります。UI の作り込みまで Claude Design に寄せるのではなく、Figma で仕上げたデータを土台として渡すのが今回はいちばん速いやり方でした。

制作期間は、デザイン初稿完成まで約 5 日です。通常の 1 ヶ月の納期であればボタンのインタラクション程度しか入れられないところに、簡単なアニメーションまで含められた感覚があります。

エンジニアへの連携は HTML を渡すだけで済む

Claude Design はエクスポート形式が複数あり、その中に Standalone HTML があります。フォントや画像を含めた 1 つの HTML ファイルをボタン 1 つで書き出せるので、渡すファイルが 1 つで済みました。

制作の途中では Claude Design の共有リンクも使えます。ブラウザで開くだけで動きを確認してもらえるため、参考事例を探してきて「こういう動きにしたいです」と説明していたときより、認識の齟齬が減りました。

今回、フロントエンドの実装はデザイン室ではなく外部の委託先が担当しています。書き出した HTML を渡し、それをベースに実装してもらいました。動きのイメージを視覚的に共有するだけでなく、実装のたたき台としてそのまま渡せるところまで来ています。

Claude Design だけでは作れなかったもの

Web サイト内に使用した素材は Claude Design だけではうまく出せませんでした。既存の素材を持ってきたり、画像生成 AI を併用したりしています。

ビジュアルの案そのものも Claude Design が考えてくれるわけではありません。チャット形式の AI で壁打ちしてアイデアを出し、決めた案を Claude Design に指示する形を取りました。

まとめ

• デザインシステムを整備する必要がない案件では、データの整備よりスピードを優先できる
• UI は Figma、動きは Claude Design のプロンプトと分けて並列に進めると速い
• 出力が HTML なので、エンジニアにそのまま渡して実装の土台にできる
• 3D イラストやビジュアルの案出しは、別の AI と組み合わせる

デザインシステムを軸に据える案件では、AIDD デザイン として AI が参照できる規範ドキュメントを整備するアプローチを取っています。デザインの標準化で開発工数を短縮した事例は AIDD デザインの導入事例 をご覧ください。

デザインツールの選択肢が広がったと感じています。みなさんも案件の性格に合わせて使い分けてみてください！