GitHub Copilot でCSSアニメーションを実装する — 補完・Chat・Edits の使い分け

2026-08-16 公開 · Motion Lab

GitHub Copilot は、エージェント型のツールとは入口が違います。Claude Code や Cursor が「指示を出して、まとまった変更を受け取る」形なのに対し、Copilot の中心にあるのは今も書きかけの行を補完する機能です。この違いを踏まえずにエージェント型と同じ投げ方をすると、期待した変更が返ってきません。このガイドでは、補完・Chat・Edits の3つをアニメーション実装のどの場面で使い分けるか、共通指示ファイルに何を書いておくか、そして補完主体のツールで起きやすい失敗を整理します。

3つのモードは「変更の粒度」で選ぶ

Copilot には大きく3つの使い方があります。インライン補完（書きかけの行の続きを提案する）、Chat（対話で相談し、コードを受け取る）、Edits（複数ファイルにまたがる変更をまとめて適用する）です。

アニメーション実装ではこう割り振ると噛み合います。キーフレームの続きを書かせるなら補完、方式を決めるなら Chat、既存の要素にまとめて適用するなら Edits です。

逆に、補完に「サイト全体をいい感じに」と期待しても返ってきません。補完が見ているのは開いているファイルとその周辺であって、リポジトリ全体の意図ではないからです。粒度を間違えると、ツールが悪いのではなく投げ方が噛み合っていません。

補完が最も効くのは @keyframes の続き

アニメーションのコードは反復が多く、補完と相性が良い部分がはっきりしています。典型は @keyframes です。0% と 100% を書いた時点で、中間のステップは高い精度で提案されます。

コツは先にコメントで仕様を書くことです。/* 6秒で1周・ふわっと上下・移動は8pxまで */ と1行書いてから @keyframes float { を打つと、提案の精度が目に見えて変わります。コメントが実質のプロンプトとして働きます。

同じ理屈で、変数名とクラス名も仕様の一部です。.card-hover-lift と書けば持ち上げる実装が、.card-hover-tilt と書けば傾ける実装が提案されます。名前を先に決めるほど、補完は当たります。

完成形の挙動を先に見ておきたいときは Floating Shapes や Glow Pulse Text のような常時ループ系のページが参考になります。

Chat は「実装させる」より「方式を決める」ために使う

Chat にいきなり完成コードを求めると、それらしいが要件を満たさないコードが返ってきがちです。効くのは、実装前に選択肢を出させる使い方です。

たとえば「スクロールで順に現れる演出を、ライブラリなし・ライブラリあり・CSSのみの3案で、それぞれの前提と欠点を添えて出して」と頼みます。ここで方式が決まれば、実装そのものは補完か Edits で足ります。

方式の判断材料が要るときは CSS vs JavaScript アニメーション使い分けの基準とスクロールアニメーション完全ガイドを先に読んでおくと、返ってきた案の良し悪しを自分で判定できます。AIに判定まで委ねると、根拠のない断定を受け取ることになります。

Edits に渡すときは対象と完了条件を必ず書く

複数ファイルをまとめて変更する Edits は、エージェント型に最も近い使い方です。ここでは指示の形がそのまま結果に出ます。必要なのは、対象ファイル・制約・完了条件の3点です。

対象は index.html と assets/style.css のみ。他は触らない のようにパスで書きます。完了条件は目視ではなく機械的に判定できる形（コンソールエラー0件・レイアウトが動かない・追加行数の上限）にします。

この3点の書き方はエージェント型と共通なので、詳しくは Claude Code でWebアニメーションを実装するの3原則をそのまま流用できます。ツールが変わっても、良い指示の条件は変わりません。

共通指示ファイルに規約を置く

毎回同じ制約を書くのは無駄なので、リポジトリの .github/copilot-instructions.md に一度書いておきます。共通指示に対応した環境であれば、Copilot はこのファイルを読んで以降の提案に反映します。

アニメーションで書いておく価値があるのは、動かしてよいプロパティ・duration とイージングの既定値・prefers-reduced-motion の必須化・出力形式の4ブロックです。次がそのまま使える形です。

.github/copilot-instructions.md

# Copilot への共通指示

## アニメーション実装のルール
- 動かしてよいのは transform と opacity のみ。
  top / left / width / height / margin は動かさない（レイアウトシフトの原因）。
- duration は 150〜400ms を既定とし、装飾目的の常時ループは 4s 以上にする。
- イージングは ease-out を既定。跳ねる表現が要るときだけ cubic-bezier を使い、値をコメントで残す。
- @media (prefers-reduced-motion: reduce) で animation と transition を必ず無効化する。
- 外部ライブラリは追加しない。必要と判断した場合はコードを書かず、理由だけ提案する。

## 出力の形式
- HTML / CSS / JS はそれぞれ別のコードブロックに分ける。
- 変更点の説明は3行以内。
- 既存のクラス名・CSS変数を優先して使い、新しい命名を発明しない。

同じ内容を Claude Code / Cursor 向けに書いたものは CLAUDE.md / .cursorrules 規約テンプレートにあります。ツールを併用している場合は、同じ規約を各ファイルに置いておくと出力のばらつきが減ります。

繰り返す作業はプロンプトファイルにする

「スクロールで順に出す」「ホバーで持ち上げる」のような定型の実装は、依頼文そのものをファイルにして再利用できます。Markdown の冒頭にメタ情報を書き、本文に依頼内容を書く形式です。

scroll-reveal.prompt.md

---
mode: edit
description: セクションにスクロール表示アニメーションを追加する
---

対象は ${file} の .feature-card 要素です。

実装内容:
- IntersectionObserver で画面内に入ったら .is-visible を付与する
- .feature-card は初期状態 opacity:0 / transform:translateY(24px)
- .is-visible で opacity:1 / translateY(0)、duration 320ms、ease-out
- 複数枚あるときは 80ms ずつ遅延をずらす

制約:
- observer は1つだけ作り、表示後は unobserve する
- ライブラリは追加しない
- prefers-reduced-motion: reduce のときは遅延なしで即表示にする

完了条件:
- コンソールエラーが0件
- 要素が増減してもコードを書き換えずに動く

この形にしておくと、次に同じ演出が必要になったとき対象ファイルを差し替えるだけで済みます。プロンプトを書き直すたびに条件が抜け落ちる、という事故が起きなくなります。

なお、ここに書く条件は CSSアニメーション AIプロンプト例文集のカテゴリ別テンプレをそのまま流用できます。

※ 設定ファイルの置き場所やプロンプトファイルの書式は、ツール側の更新で変わることがあります。うまく読まれないときは、まず使用中のバージョンの公式ドキュメントで現在の仕様を確認してください。本ガイドで変わらないのは、規約に何を書くか（動かしてよいプロパティ・既定値・アクセシビリティ・出力形式）のほうです。