【Next.js】Framer Motion の使い方｜入場とスクロールをコード例で解説
公開日: 2026年9月12日 · 読了目安 10 分
Next.js で Framer Motion を使う手順を解説します。"use client" の置き方、入場アニメーション、スクロール連動、よくあるビルドエラー。全部を自分で書く必要はない、という選び方もまとめます。
先に結論：Framer Motion は「ページ全体」に入れない
Next.js（App Router）で Framer Motion を使うときは、page.tsx に "use client" を書かず、動かす部品だけをクライアントコンポーネントに切り出します。入場とスクロール連動が必要なヒーローや CTA に限定すると、JS の量もレビュー範囲も小さくなります。
入場だけなら CSS で足りることが多いです。スクロール量に応じて背景や写真を動かしたい、要素が画面に入った瞬間だけ一度動かしたい、というときに Framer Motion を足します。
この記事では、導入、入場、スクロール、失敗パターン、完成セクションを載せる選択肢までを順に解説します。
導入：パッケージと "use client"
パッケージは framer-motion です。motion/react という新しい入口もありますが、既存の LP 例では framer-motion の import がまだ多いです。コピーしたコードの import に合わせて入れてください。
動かすファイルだけクライアントにする
"use client";
import { motion } from "framer-motion";
export function HeroMotion() {
return (
<motion.h1
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
>
見出し
</motion.h1>
);
}入場：同時に出さない
カッコよく見える入場は、遅延の段差です。見出し、本文、CTA、画像を同じ timing で animate すると、動いていないのと同じに見えます。
目安は 0.08〜0.16 秒ずつ遅らせることです。イージングは減速寄り（ease-out）にすると、LP のテンポが崩れにくいです。
画像は最初から見えていた方が LCP が安定します。透明度 0 のまま 1 秒待つより、少しだけ上げてフェードする方が計測にも優しいです。
スクロール：背景だけ数パーセント動かす
useScroll と useTransform で、背景画像だけ数パーセント動かします。全面を追従させると文字が読みにくくなります。
whileInView で「一度だけ入場」する方が、スクロール量に常時連動するより軽いです。スマホへの負荷も小さくなります。
prefers-reduced-motion では入場を切るか、フェードだけにしてください。情報は動きに依存させません。
よくある失敗 3 つ
失敗1：page.tsx 全体をクライアントにする。データ取得やメタ情報までブラウザに寄ります。ヒーローだけ切り出してください。
失敗2：全セクションに同じ強さの motion を付ける。ヒーローと最終 CTA 以外は、薄いフェードで足ります。
失敗3：依存を入れ忘れる。ビルドエラーの大半は framer-motion 未インストールです。エラー文をエージェントに貼るのが最短です。
方法3：完成しているモーションを載せる
イージングと delay を1pxまで決めたい場合は、この記事の方法で足します。世界観の演出を先に決めたい、既存の shadcn/ui のページにセクションを足したい、というときは、ライブで動く完成品を載せる方が早いです。
DesignLayer は、人間が組んだ React + Tailwind のセクションをブラウザでライブプレビューできるカタログです。閲覧にカードは不要です。https://design-layer.com/components
Copy for Cursor の無料枠は日本時間で1日3回です。今日ヒーロー1本、で足ります。使い方は https://design-layer.com/articles/cursor-react-motion-components-guide です。
よくある質問
導入時に繰り返し出る質問です。
サーバーコンポーネントのまま動かせますか？
CSS なら可能です。useScroll や whileInView を使うなら、そのファイルだけ "use client" にします。
GSAP の方がよいですか？
複雑なタイムラインやピン留めが中心なら GSAP も候補です。入場と弱いスクロールなら Framer Motion で足ります。
スマホで重いときは？
blur と大きな box-shadow のアニメーションを先に外します。transform と opacity だけにすると安定します。