GSAPをCodex・Claudeに頼む方法｜作りたい動きを実装へ渡す依頼文

GSAPは、自分で覚えて書くためだけのものではありません。作りたい動きと守る条件をCodexやClaudeへ渡せば、既存ページへ組み込むコード、必要なファイル、確認手順まで出してもらえます。

あなたが決めるのは、何を読ませたいか。いつ動くか。動くことで何を伝えたいかです。AIはそれをHTML、CSS、JavaScript、GSAPの実装へ翻訳します。

GSAPの基本機能と主要プラグインは無料で使えます。今はGSAPの全ツールが無料化されています。利用条件は変更される可能性があるため、制作前にGSAPのライセンスを確認してください。

作りたい画面をCodex・Claudeへの依頼に変える

次の文は、コードベースか対象ページを一緒に渡す前提です。まず「実装前に既存構造を確認して」と書くと、AIが見当違いの場所を直すのを減らせます。

依頼に入れる項目は5つです。対象ページかファイル、目的、動く要素、始まるきっかけ、守る条件。この順で渡すと、AIは実装と確認を切り分けやすくなります。

GSAPで表現できる動き10選

下のカードは実際に動きます。カードをタップすると、もう一度再生できます。動きの名前より、「何を伝えるために使うか」を見てください。

アクションを組み合わせると画面の役割ができる

好きなアクションを少しずつ覚えると、AIへ頼む言葉が具体的になります。下の9つは、単体の動きを組み合わせた小さな完成形です。再生して、コードもコピーできます。飾りではなく、読む・選ぶ・試す・戻るという画面の役割から選びます。

GSAPの使い方はCDNを1行読み込むところから

まず試すだけなら、HTMLにCDNを読み込みます。次に、動かしたい要素のクラス名と、動きの終点を書きます。

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
  gsap.to(".box", { x: 120, rotation: 12, duration: 0.7 });
</script>

この例では、.box を右へ120px動かし、少し回して、0.7秒で終えます。制作中のWebサイトでは、npmでインストールしてJavaScriptのモジュールとして読み込む方法もあります。読み込み方法はGSAP Docs: Installationを確認してください。

GSAPは「動きの時間割」を作る道具

たとえば、写真を出し、0.2秒後に見出しを出し、そのあとボタンを少し弾ませる。GSAPではこの流れをタイムラインとして書けます。

const tl = gsap.timeline();

tl.from(".photo", { opacity: 0, scale: 0.94, duration: 0.7 })
  .from("h1", { opacity: 0, y: 28, duration: 0.5 }, "-=0.3")
  .from(".button", { opacity: 0, y: 12, duration: 0.35 }, "-=0.15");

gsap.to() は今の状態から動かす命令です。gsap.from() は見せたい状態へ入ってくる動きです。timeline() は複数の動きの順番、重なり、再生と逆再生をまとめて扱います。公式ドキュメントでは、これらをTweenとTimelineとして説明しています。GSAP Docs: GSAP

スクロールでページを読ませる

GSAPのScrollTriggerを使うと、画面のどこまで読んだかを動きに使えます。要素が画面へ入った瞬間に出すだけでなく、スクロール量に合わせて写真を動かしたり、ある場面を固定したりできます。GSAP Docs: ScrollTrigger

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
  gsap.from(".chapter", {
    opacity: 0,
    y: 24,
    duration: 0.5,
    scrollTrigger: ".chapter"
  });
</script>

これで.chapterが画面に入ったとき、下から少し現れます。最初のGSAPアニメーション例としては十分です。動きを増やす前に、この一つが読みに効くかを確認します。

できることは、たとえば次の通りです。

• 記事の章ごとに、見出しと写真を静かに出す
• 読了率を上部の細いバーで示す
• 年表を下へ進むほど伸ばす
• 写真を一時固定し、横の説明だけを切り替える
• 製品の仕組みを、スクロールに合わせて一工程ずつ見せる
• 横へ送るギャラリーを、縦スクロールで操作する

派手にすると、読む邪魔になります。文章中心の記事なら、動きは一度だけ、短く、内容が画面に入ったことを伝える程度が合います。prefers-reduced-motion を読み、動きを減らしたい人には止める実装もCodexへ指定できます。

応用すると「読む画面」から「試せる画面」になる

GSAPは飾りだけの道具ではありません。状態が変わる画面や、手で触れて理解する説明にも使えます。

比較をその場で切り替える

Before / Afterのデザイン、料金プラン、写真の色調整を、スライダーやボタンで切り替える。切り替わった差をアニメーションでつなぐと、何が変わったかを見失いにくくなります。

並べ替えたカードを自然に移動する

フィルターで記事カードを絞る。並び順を変える。開いていた詳細を閉じる。こうしたレイアウトの変化は、GSAP Flipで前後の位置をつないで見せられます。GSAP Docs: Flip

Codexへの頼み方はこうです。

> 「タグで絞り込む記事カードを作って。消えるカードはフェードアウト。残るカードは新しい位置まで滑らかに移動。キーボード操作と動きを減らす設定にも対応して」

SVGを「説明が進む図」にする

矢印、地図、グラフ、手書き風の線はSVGで作れます。GSAPでは線を描くように見せたり、要素を経路に沿って移動させたりできます。複雑な仕組みを一枚の図に詰める代わりに、段階ごとに見せる使い方です。GSAP Docs: MotionPath

触った感覚のある小さな道具にする

ドラッグで並べ替える。スワイプしてカードを送る。つまみを動かして数値を変える。GSAPのDraggableやObserverと、表示する値の計算を組み合わせると、解説ページを小さな実験画面にできます。GSAP Docs: Draggable

Codexへ渡すときの依頼文

画面の目的、動く要素、きっかけ、動きの強さ、守る条件を一度に渡すと、実装と確認が速くなります。

GSAPで、記事ページの「3つのポイント」カードに動きを付けてください。

- 画面に入ったとき一度だけ、左から順に現れる
- 1枚ずつ0.12秒ずらす
- 移動量は小さく、派手にしない
- hoverできる端末だけ、カードを2px持ち上げる
- prefers-reduced-motionでは動かさない
- スマホでも文字とボタンが重ならないようにする
- GSAPの読み込み方法と、変更したHTML/CSS/JSを分けて示す

「Appleのように」だけでは、完成の判断が難しくなります。代わりに、何を読ませたいか、動きはいつ始まるか、触ったとき何を返すかを渡すと、Codexは直せる形にできます。

GSAPを使う前に決めること

GSAPは動きを作れます。ただし、動きが必要かどうかは別の判断です。

• 読む速さを上げたいなら、まず余白と見出しを整える
• 押せることを伝えたいなら、まずボタンの形と文言を整える
• 内容を段階的に見せたいなら、GSAPを使う
• 操作の結果を自然に返したいなら、GSAPを使う
• 動きがなくても伝わるなら、使わない

Codexは、既存ページを見て「ここはGSAPが効く」「ここはCSSだけで十分」と分けるところから頼めます。最初の依頼は、ページURLかHTMLと一緒に「読ませたい順番」を一文で渡すのがおすすめです。

参考リンク

• GSAP Docs: GSAP
• GSAP Docs: ScrollTrigger
• GSAP Docs: Flip
• GSAP Docs: MotionPath
• GSAP Docs: Draggable