CLAUDE.md / .cursorrules に書くアニメーション規約テンプレート【コピペ可】

規約ファイルとは何か

AI コーディングツールの多くは、リポジトリ内の特定ファイルをセッション開始時に読み込み、以降の応答の前提として扱います。Claude Code ではリポジトリ直下の CLAUDE.md、Cursor では .cursorrules や .cursor/rules/ 配下のファイルがこれにあたります。

ファイル名と置き場所はツール・バージョンによって変わるため、導入時に公式ドキュメントで確認してください。書く中身はどのツールでもほぼ同じです。以下のテンプレートは、ファイル名を変えればそのまま流用できます。

規約に書くべきなのは「毎回同じことを言っている内容」です。逆に、実装ごとに変わる数値（距離・周期・遅延）は規約に書かず、プロンプト側に残します。

規約に入れる4ブロック

1) 動かしてよいプロパティ — transform と opacity のみに絞ります。これ1行でレイアウトシフトの大半が消えます。

2) 時間とイージング — マイクロインタラクション 120〜240ms、出現 240〜400ms、遷移 400〜600ms。既定イージングを1つ決めておくと、サイト全体の手触りが揃います。

3) アクセシビリティ — prefers-reduced-motion: reduce での停止を必須にします。指示しない限りほぼ入らないため、規約に置く価値が最も高い項目です。

4) 受け入れ条件 — 実装完了の定義。reduce で止まる・コンソールエラーゼロ・レイアウトシフトゼロ・60fps 維持の4つ。

CLAUDE.md 用テンプレート（コピペ可）

リポジトリ直下の CLAUDE.md に、既存の内容へ追記する形で貼り付けてください。プロジェクト全体のルールが既にある場合は、その下にセクションとして足すのが安全です。

## アニメーション実装規約

### 動かしてよいプロパティ
- アニメーションさせるのは transform と opacity のみ。
- top / left / width / height / margin は動かさない（レイアウトシフトの原因）。
- 色や影を変化させる場合は値を直接補間せず、疑似要素の opacity で切り替える。

### 時間とイージング
- マイクロインタラクション（hover・押下・トグル）: 120〜240ms
- 要素の出現・退場: 240〜400ms
- ページ遷移・大きな移動: 400〜600ms
- 既定イージングは cubic-bezier(.4, 0, .2, 1)。linear はローディングの回転のみ。

### アクセシビリティ（必須）
- すべてのアニメーションを @media (prefers-reduced-motion: reduce) で停止させる。
- 停止時もレイアウトと可読性が崩れないこと（最終状態を初期値にする）。

### 実装方針
- CSS だけで表現できる動きに JavaScript を使わない。
- スクロール連動は IntersectionObserver を使う。scroll イベントで毎フレーム処理を書かない。
- GSAP / Framer Motion の導入は、CSS で書くと 50 行を超える場合のみ提案する。
- 既存のユーティリティクラス・CSS 変数を優先し、新しい色や単位を勝手に足さない。

### 受け入れ条件（実装完了の定義）
- prefers-reduced-motion: reduce でアニメーションが無効化される
- コンソールエラーがゼロ
- レイアウトシフトがゼロ
- 60fps を維持（DevTools の Performance で確認）

貼り付けたあとは、色やイージングの値を自分のプロジェクトの実値に置き換えてください。既存の CSS 変数名を書き加えるのが特に効果的で、AI が新しい色を発明するのを防げます。

.cursorrules 用テンプレート（コピペ可）

Cursor 向けは、出力形式と「触ってよいファイル」の制約を厚めにしてあります。エディタ統合型は変更範囲が広がりやすいためです。

# アニメーション実装ルール

## 前提
- 対象は静的な HTML / CSS / Vanilla JS。React 前提のコードを出さない。
- 変更してよいのは指示されたファイルのみ。ほかのファイルを勝手に整形しない。

## CSS
- 動かすのは transform と opacity のみ。top / left / width / height は動かさない。
- duration は hover 120〜240ms、出現 240〜400ms、遷移 400〜600ms。
- 既定イージングは cubic-bezier(.4, 0, .2, 1)。
- @media (prefers-reduced-motion: reduce) で animation と transition を無効化するブロックを必ず添える。

## JavaScript
- スクロール連動は IntersectionObserver。scroll イベントで毎フレーム DOM を読まない。
- mousemove のリスナは document に1つだけ登録する。要素ごとに張らない。
- ライブラリを追加しない。必要な場合は理由を書いて提案だけする。

## 出力形式
- HTML / CSS / JS を別々のコードブロックで出す。
- 変更点の要約を3行以内で添える。説明文でコードを埋めない。

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

React プロジェクトで使う場合は、冒頭の「対象は静的な HTML / CSS / Vanilla JS」を実際の構成に書き換えてください。ここを直さずに使うと、意図せず JSX を禁止してしまいます。

運用のコツ — 規約は増やしすぎない

規約ファイルは長くすればよいものではありません。長い規約は読み飛ばされ、矛盾も生まれます。目安はアニメーション規約で 40 行前後。上のテンプレートがちょうどその分量です。

追記するのは「実際に事故が起きたとき」だけにします。AI が新しい色を勝手に足した、scroll イベントで重い処理を書いた——そういう実害が出た項目を1行ずつ足していくと、規約が現場に合った形に育ちます。

逆に、一度も破られていないルールは削ってよいものです。規約は資料ではなく運用ツールなので、読まれる長さに保つことが優先されます。

規約を置いた後のプロンプトはこうなる

規約を置くと、毎回のプロンプトから制約と受け入れ条件が消えます。残るのは対象ファイルと実装内容、そして実装ごとに変わる数値だけです。

「@card.html @card.css カードにホバーの浮き上がりを追加。translateY(-4px)、枠線をアクセント色に。」——これだけで、prefers-reduced-motion 対応も transform 縛りも効いた実装が返ります。

ツール別の具体的な書き方は Claude Code でWebアニメーションを実装する と Cursor（AIコードエディタ）でCSSアニメーションを実装する にまとめています。カテゴリ別の指示文は CSSアニメーション AIプロンプト例文集 をご覧ください。