【Next.js】アニメーションを使ったカッコいいヒーローセクションの作り方を解説

要約すると、Next.js のヒーローを今っぽく見せるには、大きな見出しより先に動きの設計が必要です。入場で要素が遅れて揃う、スクロールで背景や写真が追従する、ホバーで一点だけ反応する。この3つのどれかが見えると、同じ文言でもファーストビューの印象が変わります。

作り方は3つあります。CSSだけで入場を付ける。Framer Motion でスクロールに連動させる。すでに完成しているヒーローを自分のページに載せる。ゼロから全部書く必要はありません。

この記事を読み終える頃には、自分の LP に「動くヒーロー」を1本出せるようになります。

見出し、短い説明、ボタンが縦に並んでいるだけ。多くの Next.js のトップは、ここから始まります。悪い構成ではありません。ただ、画面を開いた瞬間に何も起きないと、写真つきの静的なバナーと同じに見えます。

1つ目は、全部が同時に出ることです。見出し・本文・CTA・画像が同じタイミングで揃うと、目線の順番がありません。人が「今っぽい」と感じるのは、要素が少しずつ揃うときです。

2つ目は、スクロールしてもヒーローが終わっていることです。100vh を過ぎた瞬間に次のセクションへ切れると、ファーストビューはポスターになります。背景がゆっくり追従する、画像が重なる、見出しが途中まで残る。こうした追従があると、ページ全体の導入になります。

3つ目は、動きを付けすぎることです。全要素が弾み、無限にループし、マウスを追うと、カッコよさより疲れが先に来ます。ヒーローで動かす箇所は、入場・スクロール・ホバーのうち2つまでにすると破綻しにくいです。

目指す動きは次のとおりです。

ページを開くと、小さなラベルが先に薄く現れ、続いて見出しが下から20pxほど上がる。本文とボタンはさらに0.1秒遅れる。右（または下）のビジュアルは、見出しより少し遅く、透明度だけが変わる。

少しスクロールすると、背景画像は本文より遅く上へ動く（パララックス）。CTA にカーソルを乗せると、背景色ではなく少しだけ縮尺が変わる。これだけでも、よくある「中央揃えの静的ヒーロー」とは別物に見えます。

独自の3Dやシェーダーは扱いません。まずは、LP の8割で効く入場とスクロールです。

同じ完成形でも、手数は分かれます。

方法1は CSS（と Tailwind）だけです。入場とホバーなら十分です。依存は増えません。スクロール連動は苦手です。

方法2は Framer Motion です。表示領域に入ったとき、スクロール量に応じた変化が書きやすいです。代わりに "use client" とパッケージが必要です。

方法3は、動きまで組んであるヒーローを自分のアプリに載せる方法です。タイミングを一から決めなくて済みます。見出しと写真の差し替えが仕事になります。演出を1pxまで自前で決めたい場合は向きません。

迷ったら、まず方法1で入場だけ付けて公開し、物足りなければ方法2か3に進むのが早いです。

サーバーコンポーネントのまま始められます。keyframes で「下からフェードイン」を1つ作り、見出しと本文にだけ delay をずらします。

入場だけなら CSS で足りることが多いです。スクロール量に応じて位置や透明度を変えたいとき、Framer Motion が向きます。

Next.js では、useScroll や motion を使うファイルの先頭に "use client" が必要です。ページ全体をクライアントコンポーネントにせず、ヒーローだけ切り出します。

スクロールで草木の後ろから見出しが出る、最初の2秒でロゴが抜ける、写真がピンされたまま切り替わる。こうした塊は、方法1と2を組み合わせても半日かかることがあります。

その場合は、ブラウザで実際の動きを見てから、React と Tailwind でできたヒーローを自分の Next.js に載せる方法があります。DesignLayer のカタログは、その置き場です。閲覧にカードは不要です。https://design-layer.com/components

向き不向きを先に言います。世界観の演出を先に決めたい、タイミングを自分でチューニングしたくない、既存の shadcn のページにセクションを足したい、というときに向きます。デザインシステムの色を1pxまで合わせたい、ヒーロー自体がプロダクトの核、というときには方法2の方が制御できます。

載せるときの仕事は3つです。ライブでスクロールして「この動きでいいか」を決める。ソースを自分のリポジトリに置く。見出し・CTA・画像だけ差し替える。余白やイージングから作り直す必要はありません。

無料のソースコピーは日本時間で1日1回です。今日ヒーロー1本、で足ります。完成した1ページをまるごと使いたい場合は Templates です。

動きが付いたあとに見るのは、次の5点です。

1. prefers-reduced-motion で入場を切れるか。OS の設定を尊重します。

2. モバイルでファーストビューに、見出しと CTA が入るか。アニメーションの開始位置が画面外だと、何も起きていないように見えます。

3. LCP の画像をアニメーションで透明にしたままにしていないか。最初の写真は最初から見えていた方が、体感も計測も安定します。

4. ヒーロー以外に同じ強さの動きを並べていないか。次のセクションは静止、または薄いフェードで十分です。

5. "use client" を page.tsx 全体に書いていないか。ヒーローだけクライアントに切り出します。

失敗1：全部を同時に animate する。方法1の delay を忘れている状態です。段差がない動きは、動いていないのと同じに見えます。

失敗2：動画を黙って自動再生する。音が出ると離脱します。poster 画像なしだと、読み込み中が黒になります。動画ヒーローが必要かは、別の判断です。まずは静止画＋入場で足りることが多いです。

失敗3：何が動くかを決めないままライブラリを足すこと。「カッコよく」だけでは、パーティクルとグラデーションが同時に来ます。入場・スクロール・ホバーのどれを付けるかを先に決めてください。

実装で繰り返し出る質問です。