Claude Code でWebアニメーションを実装する — 指示の書き方と実例5選

エージェント型ツールに渡す指示は「発注書」に近い

チャット型のツールに投げる指示は、返ってきたコードを人間が読んで貼り付ける前提です。多少あいまいでも、読んだ人が補正できます。

対してエージェント型は、指示をそのまま実ファイルへの変更として反映します。あいまいさは「勝手な解釈」としてリポジトリに書き込まれます。ボタンのホバーだけ直してほしかったのに、CSS 全体が整形され直して差分が 800 行になる——よくある事故です。

そのため指示は感想文ではなく発注書の形にします。必要なのは3つ、対象ファイル・受け入れ条件・制約です。順に見ていきます。

原則1：対象ファイルを明示する

最初に書くのは「どのファイルを触ってよいか」です。components/hero.html と assets/hero.css のようにパスで指定し、あわせてそれ以外は触らないと書きます。

パスがわからないときも「探して直して」と丸投げせず、まず該当箇所を検索させて候補を出させ、確認してから実装させる二段構えにします。エージェントは探すのが速いので、この一手間はほとんどコストになりません。

既存の CSS 変数やユーティリティクラスを使ってほしい場合も、この段落で指定します。指定がないと、エージェントは新しい色や新しいクラス名を発明します。

原則2：受け入れ条件を数値と状態で書く

「いい感じに」「なめらかに」は受け入れ条件になりません。実装が終わったかどうかを機械的に判定できる形にします。アニメーションの場合、次の4つがそのまま使えます。

1) prefers-reduced-motion: reduce でアニメーションが無効化される — アクセシビリティの必須項目。ここを条件に入れておくと、エージェントは対応 CSS を自分から書きます。

2) コンソールエラーがゼロ — JS を伴う実装で最も多い戻りの原因。条件に入れると自己チェックが走ります。

3) レイアウトシフトがゼロ — transform と opacity だけで動かすことの言い換えでもあり、Core Web Vitals の CLS 悪化を構造的に防げます。

4) 数値の指定 — 距離 150px、強さ 30%、周期 6 秒、遅延 0.08 秒ずつ。数値があると出戻りが激減します。

原則3：制約で「やらせないこと」を先に閉じる

受け入れ条件が「どうなったら完了か」なら、制約は「その過程で何を禁じるか」です。アニメーション実装で効く制約は、だいたい次の4つに収束します。

ライブラリを勝手に追加しない — 「必要なら理由を書いて提案だけする」と添えると、package.json が黙って増えるのを防げます。

動かすのは transform と opacity のみ — top / left / width / height を動かす実装を封じます。

リスナの張り方を指定する — カーソル追従なら「mousemove は document に1つだけ」。要素ごとにリスナを張る実装は、要素が増えた瞬間に重くなります。

出力形式を決める — 「HTML / CSS / JS を別のコードブロックで」「変更点の要約は3行以内」。説明文でレスポンスが埋まるのを防げます。

CLAUDE.md に規約を置いて、毎回書かなくて済むようにする

3原則のうち、制約と受け入れ条件はプロジェクト全体で共通です。毎回プロンプトに書くのは無駄なので、リポジトリ直下の CLAUDE.md に一度書いておきます。Claude Code はセッション開始時にこのファイルを読み込むため、以降のプロンプトは「原則1（対象ファイル）＋やりたいこと」だけで済みます。

書く内容は、動かしてよいプロパティ・duration とイージングの既定値・アクセシビリティ要件・受け入れ条件の4ブロックが基本形です。CLAUDE.md / .cursorrules 規約テンプレート にコピペできる全文を用意しています。

規約を置くとプロンプトが短くなり、短いプロンプトは意図がぶれません。長い指示を書き続けるより、規約に逃がすほうが結果は安定します。

実例1：Magnetic Hover — カーソルに引き寄せられるボタン

カーソルが近づくと要素が吸い寄せられる演出です。距離と強さを数値で渡すのがコツ。完成形は Magnetic Hover で動作を確認できます。

対象: components/hero.html と assets/hero.css

実装内容:
CTA ボタンにマグネットホバーを実装する。
カーソルが要素中心から 150px 以内に入ったら、
オフセットベクトルの 30% だけ要素を translate で引き寄せる。
半径外に出たら原点へ戻す。

制約:
- Vanilla JS のみ。ライブラリを追加しない。
- 動かすのは transform だけ。top / left は使わない。
- mousemove のリスナは document に1つだけ。
- prefers-reduced-motion: reduce では transform を無効化する。

受け入れ条件:
- reduce 設定でアニメーションが止まる
- コンソールエラーがゼロ
- レイアウトシフトがゼロ

実例2：Border Beam — カードの枠を光が周回する

料金表の「おすすめ」プランに視線を集める定番。CSS のみで作れるため、JS を使わせない制約が効きます。完成形は Border Beam。

対象: components/pricing-card.html と assets/pricing.css

実装内容:
料金カードの枠線に沿って光が周回するボーダービームを実装する。
周期は 6 秒、光の長さは辺の 20% 程度。おすすめプランの1枚にだけ付ける。

制約:
- CSS のみ。JavaScript は使わない。
- 疑似要素 + conic-gradient + mask で作り、カード本体の高さを変えない。
- 光の色は既存の CSS 変数 --accent を参照する。新しい色を定義しない。

受け入れ条件:
- prefers-reduced-motion: reduce で周回が止まる
- カードの高さが変化しない（レイアウトシフトがゼロ）
- コンソールエラーがゼロ

実例3：GSAP Scroll Reveal — スクロールで順に現れる

ライブラリ導入済みの前提で、既存 API の使い方まで指定する例です。markers や scrub のような「入れてほしくないもの」を先に閉じるのがポイント。完成形は GSAP Scroll Reveal。

対象: pages/about.html と assets/about.js（GSAP と ScrollTrigger は導入済み）

実装内容:
セクション見出しと本文を、ビューポートに 20% 入った時点で
下から 24px フェードアップさせる。同一セクション内は 0.08 秒ずつずらす。

制約:
- gsap.utils.toArray でセクションを取得し、ループで1つの ScrollTrigger を作る。
- markers は入れない。scrub は使わない（一度だけ再生）。
- prefers-reduced-motion: reduce の場合は ScrollTrigger を作らず、
  最初から最終状態を表示する。

受け入れ条件:
- reduce 設定で要素が最初から見えている
- 戻りスクロールで要素が消えない
- コンソールエラーがゼロ

実例4：Bento Grid — 機能紹介をベントー配置にする

レイアウトとホバーを同時に頼む例。レスポンシブの折り返し条件を書かないと、モバイルで1枚目が崩れます。完成形は Bento Grid。

対象: pages/features.html と assets/features.css

実装内容:
機能紹介を 6 枚のベントーグリッドにする。
1 枚目を横 2 列 × 縦 2 行、残り 5 枚を 1 マスで配置。
ホバーでカードを 4px 持ち上げ、枠線をアクセント色にする。

制約:
- CSS Grid のみ。JavaScript は使わない。
- 768px 未満では 1 カラムに落とす。
- 持ち上げは transform: translateY のみで行う（margin を変えない）。
- prefers-reduced-motion: reduce では transition を無効化する。

受け入れ条件:
- 1 カラム時に 1 枚目が崩れない
- ホバー時にレイアウトシフトが起きない
- コンソールエラーがゼロ

実例5：Aurora Background — ヒーロー背景をオーロラにする

装飾が主役になる実装ほど、範囲とコントラストの制約が要ります。body 全体に広げさせない一文が事故を防ぎます。完成形は Aurora Background。

対象: pages/index.html と assets/hero.css

実装内容:
ヒーローセクションの背景にオーロラを敷く。
ぼかした radial-gradient のブロブを3つ重ね、
それぞれ 9 秒 / 11 秒 / 13 秒の異なる周期でゆっくり漂わせる。

制約:
- CSS のみ。ヒーロー領域の内側に限定し、body 全体には広げない。
- 動かすのは transform と opacity だけ。filter の値自体はアニメーションさせない。
- 前面テキストのコントラスト比 4.5:1 を下回らない濃さに抑える。
- prefers-reduced-motion: reduce では静止画として表示する。

受け入れ条件:
- reduce 設定でブロブが停止する
- ヒーローの高さが変化しない
- コンソールエラーがゼロ

失敗パターン3つ

失敗1：スコープを切らずに投げる — 「サイト全体のアニメーションをいい感じにして」は最悪の指示です。差分が巨大になり、レビューできず、結局は捨てることになります。1回の指示は1つの要素・1つのファイル群に絞ります。

失敗2：受け入れ条件を書かず、目視だけで判定する — 見た目が合っていても、prefers-reduced-motion 非対応・コンソールエラー・CLS 悪化が残ります。この3つは目で見てもわかりません。条件に書けばエージェントが自分で潰します。

失敗3：直らないときに同じ指示を繰り返す — 2回同じことを言って直らないなら、伝わっていないのは要求ではなく前提です。実際の DOM 構造や既存 CSS を読ませ、「今どうなっているか」を説明させてから指示し直すほうが速く着きます。

あわせて読みたい

CSSアニメーション AIプロンプト例文集 — カテゴリ別にそのまま使える指示文テンプレ

Cursor（AIコードエディタ）でCSSアニメーションを実装する — Rules 設定とプロンプト実例

CLAUDE.md / .cursorrules に書くアニメーション規約テンプレート — コピペできる規約全文

AIコーディングでアニメーションを実装するコツ — 3ツールの特徴とプロンプト設計の総論