AI（Claude / Cursor / v0）でアニメーション付きサイトを作る方法

AIコーディングツールの特徴

Claude（Anthropic） — 長文プロンプトを正確に理解。UIライブラリ・複雑なロジックに強い。

Cursor — VS Codeベースのエディタ。コードベース全体を理解して提案してくれる。

v0（Vercel） — UIプレビュー付きでReact/Next.jsコードを生成。デザイン優先で試行錯誤しやすい。

GitHub Copilot — エディタ内の自動補完。既存コードの文脈を引いてくれる。

良いプロンプトの書き方

1. 具体的なエフェクト名を指定 — 「カッコいい動きを」より「Magnetic Hover を CSS+JS で」

2. パラメータを数値で指定 — 「ゆっくり」より「duration .8s, ease-out」

3. 例示する — 「Stripe の LP のボタンのように」「Apple の AirPods Pro ページの3Dカードのように」

4. 制約を伝える — 「JavaScript はなし」「外部ライブラリは不可」「モバイル対応必須」

プロンプトテンプレート

本サイト Motion Lab の各エフェクトページには、Claude/Cursor/v0 用に最適化された AI Prompt が用意されています。

例：Magnetic Hover の AIプロンプト

そのままコピーしてお使いのAIツールに貼り付ければ、動作確認済みコードが生成されます。

AIコーディングでハマるポイント

1. クロスブラウザ対応の見落とし — AIは Chrome で動くコードを生成しがち。Safari/Firefox での動作確認は人間が必須。

2. アクセシビリティの欠落 — prefers-reduced-motion や ARIA属性 を AI は忘れがち。レビューで補完を。

3. パフォーマンスの最適化不足 — GPU レイヤー昇格、will-change、debounce などはプロンプトで明示が必要。

4. 既存コードとの統合 — 単体では動くが既存のCSSと競合することも。

Motion Lab × AIツールの活用フロー

Step 1: Motion Lab で実装したい効果を探す

Step 2: 「AI Prompt」セクションのテキストをCOPY

Step 3: お使いのAIツール（Claude/Cursor/v0）に貼り付け

Step 4: 生成されたコードを実装・調整

所要時間: 5分以内。手書きで30分かかる作業が大幅短縮される。