【Next.js】スクロールでセクションを出す方法を解説

公開日: 2026年9月12日 · 読了目安 9 分

Next.js でスクロール連動の入場（scroll reveal）を付ける方法。一度だけ出す、ピン留めとの違い、完成セクションの流用。

先に結論：全セクションを reveal しない

画面に入ったときに薄く上がる演出は、2〜3セクションまでです。全部に付けると、ページが遅く、テンポが単調になります。

スクロール量に常時連動するパララックス、ピン留めギャラリー、ただの入場は別物です。ギャラリーは https://design-layer.com/articles/nextjs-scroll-gallery-guide です。

作り方は3つです。CSS と Intersection Observer。Framer Motion の whileInView。完成セクションに同梱された動きを使う。

1つ目は、一度出した要素を、スクロールのたびに戻すことです。一度だけにしてください。

2つ目は、大きな blur をスクロールに載せることです。

3つ目は、page 全体をクライアントにすることです。動かすブロックだけ切り出します。Framer Motion の導入は https://design-layer.com/articles/nextjs-framer-motion-guide です。

Intersection Observer で is-visible を付け、CSS の transform と opacity を変えます。依存は増えません。

viewport={{ once: true }} を忘れない。amount は 0.3 前後が、早すぎず遅すぎません。

ピン、切り替わり、パララックスが組み合わさった塊は、whileInView の延長では半日かかります。

DesignLayer でライブスクロールしてから選んでください。https://design-layer.com/components

無料コピーは1日3回です。強い動きはヒーローと1セクションに留めます。

1. reduced-motion で最初から見えているか。2. 情報が動きのあとにしか出ない箇所が無いか。3. モバイルで遅延しすぎないか。