アニメーション・トランジションを指示する方法

Claude Designにアニメーションを指示したとき、最初は「なんかぼやっとした説明しか返ってこない」という体験をした。「フェードインを追加して」と書いたら、CSSではなく「フェードインを追加しました」という一文だけ出てきて、何も動いていない、という具合に。

ここで気づいたのは、Claude Designがアニメーションをどう解釈するかを先に把握しないと、ただ会話が空回りするということだ。

Claude Designがアニメーションに返してくれるもの

Claude DesignはUIやスライドのビジュアルを生成するツールなので、アニメーションに関しては大きく2パターンの出力になる。

1. CSS/JSコードとして出力 — デザインをコードで書き出すモードのとき、animation や transition プロパティを含むCSSを返してくれる
2. 「どう動くか」の説明テキスト — ビジュアルプレビューモードのとき、静止画しか出せないので動きは文章で示される

これを理解せずに「アニメーションつけて」と投げると、どちらを求めているか曖昧なままになる。だから最初に**「CSS/JSコードとして出力してほしい」か「動きのイメージを説明してほしい」かを明示する**のが基本になる。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

具体的なプロンプト例

うまく動いたパターンをそのまま載せる。

フェードイン＋スライドアップをCSSで指示する場合:

このヒーローセクションのテキストに、
ページ読み込み時に下から上に20px移動しながらフェードインするアニメーションをCSSで追加してください。
duration: 0.6s, easing: ease-out, delay: 0.2s

ホバーエフェクトを追加する場合:

このカードコンポーネントに、ホバー時に以下の変化をCSSで追加:
- scale: 1.02
- box-shadow: 軽い浮き上がりの影
- transition: 0.2s ease

スタッガー（順番にアニメーション）の場合:

リストアイテム3つが上から順番に、
0.1秒ずつ遅れてフェードインするようにしてください。
CSS animationで書いてほしいです。

ポイントは「duration」「easing」「delay」の3つを数値で渡すこと。これを省略すると、Claude Designが適当に決めた値が返ってきて、意図と違うことが多い。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

やってしまった罠

罠1: 「自然な感じに」という指示

「自然に動くようにして」と書いたら、animation: none に近い、ほぼ何も動いていないCSSが返ってきた。Claude Designの「自然」と自分の想像する「自然」が全然違った。具体的な数値を渡すべきだった。

罠2: アニメーションライブラリを前提にした指示

「Framer Motionで実装して」と書いたら、対応していないのにそれっぽい構文が返ってきてコンパイルエラーになった。Claude DesignのコードはプレーンなCSS/JSを基本に考えたほうが安全で、特定ライブラリが必要なときは「このコードをFramer Motionに書き直して」とClaude Codeに渡す運用にしている。

罠3: アニメーションと静止ビジュアルを同時に要求する

「このデザインを見せて、かつアニメーションも入れて」という二つの指示を同時にしたとき、どちらかが省略された返答になることがあった。ビジュアル確認とアニメーション実装は分けて指示する方がよい。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。

実用的な運用フロー

自分たちが落ち着いたのはこのフローだ。

1. まずビジュアルを静止画で固める（アニメーションは後回し）
2. デザインOKが出たら「このCSSにアニメーションを追加してほしい。要件:〇〇」と投げる
3. 返ってきたCSSを確認して、Claude Codeに渡してブラウザで動作確認

Claude Designでアニメーションを完結させようとすると余計なやり取りが増える。あくまでデザインのアニメーション仕様を固める場として使い、実装はClaude Codeに渡すのが今のところベストプラクティスになっている。

まとめ

• アニメーション指示には duration / easing / delay を必ず数値で渡す
• 「自然に」「いい感じに」は通じない。具体的な値に翻訳して渡す
• 出力はプレーンCSS前提で。ライブラリ依存はClaude Codeに任せる
• ビジュアル確認とアニメーション指示は分けてやる

Claude Designがアニメーション指示をどこまで解釈できるかは、正直まだ発展途上だと思っている。ただ「数値を渡す」という基本を守るだけで、返ってくるコードの質が明らかに変わった。