Claude CodeでGSAPスクロール演出サイトを作る方法
「スクロールすると画像や文字がぬるっと動くサイトを作りたいけれど、何から手をつければいいのか分からない」——動きのあるサイトに憧れて調べ始めると、多くの方がこの入り口でつまずきます。
結論から言うと、動くサイトの土台はGSAPというアニメーションライブラリと、スクロールに動きを紐づけるScrollTriggerで決まります。そしてこの実装は、Claude Codeに手を動かしてもらいながら組み立てると、非エンジニアでも現実的に進められます。
株式会社Fyveは、実際にGSAPを使ったコーポレートサイトを制作してきました。この記事では、私たちが現場で使っている「動くサイトを破綻させないための型」を、Claude Codeと組み合わせて作る手順として具体的にお伝えします。
GSAPのスクロール演出とは｜「パラパラ漫画型」の正体
GSAP（ジーサップ）は、Webサイトに滑らかなアニメーションを付けるための定番ライブラリです。その中のScrollTriggerという機能を使うと、「スクロール位置」と「アニメーションの進み具合」を結びつけられます。
よく見かける、Apple製品ページのようにスクロールに合わせて製品がくるくる回ったり、シーンが切り替わったりする演出——あれの正体が、まさにこの仕組みです。私はこれを社内で「パラパラ漫画型」と呼んでいます。指を動かした量だけ、絵が1コマずつ進むイメージだからです。
ポイントは、動画の自動再生とはまったく別物だということです。スクロールを戻せば絵も戻り、止めれば止まります。読者が自分の手で映像を動かしている感覚が生まれるので、印象に残りやすく、商品や世界観をじっくり見せたいページと相性が良いのです。
技術的には、GSAPの「タイムライン」に複数の動きを並べておき、それをScrollTriggerの scrub という設定でスクロールに連動させるだけです。難しいのは書き方そのものより、どこにどんな意味の動きを置くかという設計のほうにあります。
なぜ動画やCSSではなくGSAPなのか
「動くなら動画を貼ればいいのでは」と思うかもしれません。しかし、スクロールに合わせて自在に進めたり戻したりする表現は、動画やCSSアニメーションだけでは作りにくいのが実情です。それぞれの向き・不向きを整理すると、次のようになります。
手段 | 向いていること | 苦手なこと |
|---|---|---|
CSSアニメーション | ホバーや軽いフェードなど短い動き | スクロールと精密に連動させる複雑な演出 |
動画の埋め込み | そのまま再生する映像を見せる | 指の速さで進む・戻る双方向の操作 |
GSAP＋ScrollTrigger | スクロールに連動した複雑な演出全般 | 使いどころを絞らないと重くなる |
つまりGSAPは「スクロールという操作そのものを表現に変えたいとき」の選択肢です。逆に、動きが軽いものだけならCSSで十分なこともあります。道具を目的で選ぶ、という当たり前がここでも効きます。
動くサイトを破綻させない3つの設計原則
動きは足せば足すほど良くなるものではありません。むしろ、意味のない動きが増えるほどページは重く、うるさくなります。私たちが制作時に必ず最初に確認している原則が、次の3つです。
原則1：モーションは必ず意味から始める
「かっこいいから動かす」は最初に捨てます。残すのは、情報の階層を伝える・物語を進める・操作へのフィードバックを返す・状態の変化を示すのいずれかに紐づく動きだけです。この基準を持つと、動きが多いページでも視線が迷いません。
原則2：生のスクロールリスナーを使わない
初心者がやりがちなのが、addEventListener("scroll") で毎回位置を計算する書き方です。これはスクロールのたびに大量の処理が走り、スマホでカクつく原因になります。GSAPのScrollTriggerや、要素の表示を検知するIntersectionObserverに任せれば、間引きや発火のタイミングを自分で書かずに済みます。Claude Codeにコードを書いてもらうときも、この方針を最初に伝えておくと安定します。
原則3：軽さと「動きを減らす設定」を先に決める
画像は事前に軽量化し、モバイルでは動きを間引く。さらに、OS側で「視差効果を減らす（reduced-motion）」を選んでいる方には動きを自動で止める——ここまでを最初の要件に含めておきます。後から付け足そうとすると作り直しになりがちなので、着手前に決めておくのが結局いちばん速いです。
読者特典・無料ダウンロードClaude Codeを「素のまま」使うな無料でダウンロード →Claude CodeでGSAPスクロール演出を組む手順
設計方針が決まったら、実装はClaude Codeと一緒に進めます。ここでは、私たちが実際にたどっている3ステップを紹介します。
手順1：環境を整える
まずは土台づくりです。Next.jsなどのプロジェクトを用意し、GSAPとScrollTriggerを導入します。この「環境構築」はエラーが起きやすい工程ですが、Claude Codeに「Next.jsにGSAPとScrollTriggerを入れて、動作確認用の簡単なアニメーションまで作って」と頼めば、必要なインストールから初期コードまで一気に用意してくれます。
手順2：スクロールに動きを紐づける
次に、特定のセクションに来たら要素をフェードインさせる、といった基本の動きを作ります。ScrollTriggerには「この要素が画面に入ったら発火」「スクロール中はずっと連動」といった指定があり、pin（画面に固定して見せる）や前述の scrub を組み合わせると表現の幅が一気に広がります。「このセクションを画面に固定したまま、スクロールで背景を切り替えたい」のように日本語で意図を伝えるのが、Claude Codeを使ううえでのコツです。
手順3：画像シーケンスで「パラパラ漫画」にする
本命の演出がこれです。連番の画像（またはコマ）を用意し、スクロールの進行度に応じて表示するコマを切り替えます。実装のポイントは、画像をあらかじめ読み込んでおく（プリロード）ことと、枚数を欲張りすぎないこと。コマが多いほど滑らかになりますが、その分だけ重くなります。まずは少ない枚数で動きを確認し、必要な部分だけ足すのが安全です。
実制作で効いたのは「動きの理由」だった
以前、建設会社（左官業）のコーポレートサイトをNext.jsとGSAPで制作したことがあります。この案件で私が最も時間をかけたのは、実はアニメーションの書き方ではなく、「なぜ動かすのか」という理由づけでした。
依頼の背景にあったのは、伝統ある職人の仕事を、若い世代にも古臭く感じさせずに伝えたいという課題でした。そこで、縦書きの見出しや落ち着いた配色といった「和」の要素はそのままに、GSAPのモダンな動きだけを重ねて古臭さを払拭するという方針を立てました。動き一つひとつを「伝統×若さ」というコンセプトから逆算したのです。
結果として、動きは決して派手ではないのに、スクロールするたびに世界観が伝わるサイトになりました。技術そのものより、原則1の「意味から始める」を徹底したことが仕上がりを分けたと感じています。ここは、ツールが賢くなっても人が決めるべき部分です。
非エンジニアがつまずかないための注意点
最後に、実際に手を動かすときに気をつけたい点をまとめます。
- 動きを盛りすぎない：1画面に動く要素が多すぎると、読者は内容ではなく動きに気を取られます。主役の演出は1ページに1〜2個で十分です。
- スマホでの見え方を必ず確認する：PCで滑らかでも、スマホでは重いことがあります。実機で触って、指の動きに絵がついてくるかを確かめます。
- 「読めること」を最優先にする：演出のために文字が読みにくくなっては本末転倒です。動きは情報を邪魔しない範囲に収めます。
- Claude Codeには方針をセットで渡す：「動かして」だけでなく「生スクロールリスナーは使わず、reduced-motionにも対応して」まで伝えると、後から直す手戻りが減ります。
そもそもスクロール演出を入れるべきか
ここまで作り方を説明してきましたが、いちばん大切な判断は「このサイトに動きが本当に必要か」です。凝った演出が効くのは、ブランドの世界観や商品の魅力をじっくり見せたいページ——たとえばコーポレートサイトのトップや、製品の紹介ページなどです。
反対に、予約や問い合わせといった行動をすぐ起こしてほしいページでは、動きはむしろ邪魔になることがあります。読者が目的の情報に最短でたどり着けることのほうが、売上に直結するからです。私たちも、店舗集客が主目的のサイトではあえて動きを抑える判断をよくします。
「動かせるから動かす」のではなく、そのページの目的から逆算して演出の量を決める。この一手間が、自己満足のサイトと成果の出るサイトを分けます。
まとめ｜「型」を持てば動くサイトは怖くない
GSAPのスクロール演出は、難しそうに見えて、実は「スクロール量とアニメの進行度をつなぐ」という一つの仕組みに集約されます。あとは、意味のある動きだけを・軽く・読みやすく置く、という設計の型を守るだけです。
コードを書く部分はClaude Codeに任せられる時代になりました。だからこそ、どこをどう動かすかを決める設計力が、これからのサイト制作でいっそう効いてきます。株式会社Fyveでは、この型をベースに、動きに意味のあるサイトづくりを進めています。
サイトの見た目や動きの改善そのものをAIと進めたい方は、こちらの記事も参考になります。
ページを量産しながらデザインの統一感を保つ考え方は、こちらで詳しく解説しています。
そもそも動きのある凝ったサイトが必要か、シンプルな構成で十分かを判断したい場合は、こちらもあわせてご覧ください。
Claude Codeを「素のまま」使うな
設定で差がつく——CLAUDE.md・権限・スキルの実物を公開（全24ページ）
素のClaude Codeは"優秀な新入社員"。仕事を教えるほど、自分専用になります。覚えさせる4点セット——会社の説明書（CLAUDE.md）・権限の柵・手順書（スキル）・フォルダの地図——を、1人会社の実運用からコピペで使える型つきで公開します。
- そのまま書き換えて使えるCLAUDE.mdの型
- お金と送信をAIに触らせない「3段階の柵」
- 1回教えたら何度でも動く、手順書のコピペ雛形
- AIが迷子にならないフォルダ構造の3原則
毎週金曜の無料ニュースレター「ひとりAI経営」の購読特典です。メール登録後すぐ、ダウンロードページのご案内が届きます。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。