【Next.js × GSAP】 ポートフォリオに2D表現を導入するために考えたこと

Share this post

🚪はじめに

管理人のTKGです！

以前投稿した3D表現に関する記事に続き、

今回はNext.jsにGSAPを導入して、動きのある演出を加えた体験についてまとめます。

ポートフォリオに「静的なページ以上の体験」を加えたい、という思いから、より見せる・魅せるサイトを目指して取り組んだ内容です。

これから初めてGSAPを触る方でもわかるように、具体的に噛み砕いて紹介していきます！

🎯想定読者

ポートフォリオにインパクトある演出を取り入れたい方
GSAPでどんな表現ができるか、Next.jsとの組み合わせ例を探している方
Next.js初心者・GSAP初心者の方

📘本記事でわかること

Next.jsプロジェクトへのGSAP導入方法と基本の使い方
実際にどんな演出ができるかのサンプル
アニメーション導入時に意識したポイントや注意点

🔍コンテンツ

1. 🎯なぜGSAPを導入しようと思ったか

ポートフォリオ制作を進める中で、次のような課題感がありました。

文字や画像だけではどうしても単調になってしまう
初回訪問時に、もっと印象に残る体験を作りたい
2D表現でも、動きで「インタラクティブな雰囲気」を出したい

これらを解決するために、簡単に・高品質なアニメーションが作れるライブラリとして

GSAP（GreenSock Animation Platform）を導入することを決めました。

2. 🛠技術選定：なぜGSAPだったか

JavaScriptでアニメーションを作る方法は色々あります。

たとえば：

CSSアニメーション
Framer Motion（React用）
GSAP（汎用的かつ高機能）

その中でも、GSAPを選んだ理由は次の通りです。

項目	内容
パフォーマンス	軽く、スムーズな動きを実現できる
タイムライン制御	複雑な動きを簡単に作れる（順番・タイミングも自由自在）
柔軟性	スクロール連動、マウス連動など拡張がしやすい
導入の簡単さ	少ないコードで動きを作れるので、初心者にもやさしい

※「ちょっとした動きから本格的な演出まで対応できる」のがGSAPの強みです！

3. 🚀Next.js × GSAPの導入手順

導入自体は非常にシンプルです。

✅ Step 1：GSAPパッケージをインストール

npm install gsap

✅ Step 2：使いたいコンポーネントでインポート

import { gsap } from 'gsap'

必要に応じて、ScrollTriggerなどのプラグインも使えます。

import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

※「registerPlugin」はGSAPの拡張機能（プラグイン）を使うためのおまじないです。

4. 🎨実際に作ったアニメーション例

✅ ページロード時のフェードイン

import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'

export default function HeroSection() {
  const textRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (textRef.current) {
      gsap.fromTo(
        textRef.current,
        { opacity: 0, y: 50 },
        { opacity: 1, y: 0, duration: 1 }
      )
    }
  }, [])

  return (
    <div ref={textRef}>
      <h1>Welcome to My Portfolio</h1>
    </div>
  )
}

📝 ポイント解説：

useRefを使ってアニメーション対象（HTML要素）を取得
useEffectで「ページ読み込み後」にアニメーション発火
fromToメソッドで「どの位置から、どの位置へ」動かすかを設定

これだけで、簡単にプロっぽい演出が作れます！

5. 🔧工夫したポイント・注意点

✅ パフォーマンス意識

アニメーションを付ける対象は本当に必要な要素だけに絞る
ページ全体にアニメーションをかけすぎると、逆に見づらくなったり重くなったりするので注意

✅ Next.jsとの相性

Next.jsでは、**「サーバーコンポーネント」と「クライアントコンポーネント」**の違いに注意が必要です。

GSAPでDOM操作をする場合は、必ずそのコンポーネントの一番上に

'use client'

と書いて、クライアントコンポーネントとして認識させる必要があります。

これを書かないと、ブラウザでしかできない処理（アニメーション）がエラーになります！

🧠やってよかったこと・学び

ポートフォリオ制作を進める中で、実際に体験して気づいた大切なことをまとめます。

✅ 1. 「アニメーションを付ける目的」を事前に整理すること

アニメーションは、「かっこいいから」だけで入れると失敗します。

動きを加えることで、

ページの印象をよくする
コンテンツを自然に誘導する
ユーザー体験（UX）を向上させる

といった「目的」をしっかり意識することが大切です。

私の場合も、

ファーストビューで印象づけたい
読み進めるきっかけを作りたい

という具体的な目的があったから、必要な場所にだけ絞ってアニメーションを付けることができました。

🔵 ポイントまとめ：

良かったこと	理由
動きを付ける前に「なぜ付けるのか」を整理した	結果、不要なアニメーションを省き、ページのスピードや見やすさを守れた
派手さよりもUXを重視した	"伝わるサイト" を目指すなら、過剰演出はむしろマイナスになると実感

✅ 2. Next.jsのレンダリング方式を理解すること

Next.jsにはページを表示する方法（レンダリング方式）がいくつかあります。

代表的なのは以下の2つ：

SSR（サーバーサイドレンダリング）：サーバー側でページを作ってからブラウザに送る
CSR（クライアントサイドレンダリング）：ブラウザ側でページを作る（JavaScriptが動く）

GSAPのようにブラウザ操作（DOM操作）が必要なアニメーションは、CSRでないと動きません。

今回、Next.jsでアニメーションを動かすためには、

対象コンポーネントを必ず「クライアントコンポーネント」にする必要があると学びました。

'use client'

とファイルの一番上に書くことで、

「このコンポーネントはブラウザ側で動かすよ！」という宣言になります。

🔵 ポイントまとめ：

学び	理由
アニメーションにはCSR（クライアントサイドレンダリング）が必須	そうしないと、ブラウザの動きにアクセスできない
`'use client'` を忘れないこと	サーバーコンポーネントではエラーになるので注意

💬まとめ

アニメーションを付ける前に「なぜ必要か？」「どこに必要か？」を整理する
長いアニメーションはユーザーの体験を損なう可能性があることを理解する

この2つを意識するだけで、

UXを意識したアニメーション設計ができるようになると実感しました。

🚀成果物リンク

👉 Takashi Sekiguchi | Portfolio

🏁おわりに

GSAPは、直観的にアニメーションを追加できるので、初学者でも簡単にアニメーションを設計できるライブラリだと感じました。

ただ、複数のアニメーションを実装すると雑多な感じになるので、必要な分だけ実装するのが重要だと思います。

ポートフォリオやWebサイトに動きを加えたいと考えている方に、この記事が少しでも参考になれば嬉しいです！