【Next.js】クリックされる CTA セクションの作り方を解説

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

Next.js の最終 CTA を、入場と余白で強く見せる方法を解説します。ヒーローの繰り返しにしない型、マイクロコピー、完成セクションの流用。ボタンが埋もれる理由もまとめます。

先に結論：最終 CTA はヒーローのコピーではない

ランディングページの最後に置く CTA は、ファーストビューの見出しを貼り直す場所ではありません。料金と FAQ を読んだあとの人に、「今やること」を1つ示す場所です。

見た目は、余白・対比・短い入場の3点で足ります。全面パーティクルより、背景を一段落として、ボタンを大きくする方がクリックされます。

作り方は3つです。静的な帯。入場付き。完成している CTA を載せる。

1つ目は、主 CTA と副 CTA が同じ強さなことです。「無料で試す」と「資料を見る」が並ぶなら、片方をアウトラインにしてください。

2つ目は、料金の不安が残ったまま最終ボタンだけが出ることです。直前に FAQ を置くと、クリック前の疑問が減ります。FAQ の作り方は https://design-layer.com/articles/nextjs-faq-accordion-guide です。

3つ目は、動きが強すぎて文言が読めないことです。最終 CTA の入場は、見出しとボタンの遅延だけで十分です。

背景をページの他セクションと一段変え、見出し1行、補足1行、ボタン1つにします。ボタン下に「カード不要」「1日3回まで無料」のようなマイクロコピーを置きます。

幅はコンテナに収め、全面フルブリードにするなら左右の余白をスマホで確認してください。

whileInView か CSS の animation で、見出し → 本文 → ボタンの順に出します。ループやマウス追従は付けません。

モバイルでは delay を短くするか、入場を切ると体感が速くなります。

背景がゆっくり動き、ボタンだけホバーで縮尺が変わる、といった塊は、自分で揃えると半日かかることがあります。

DesignLayer では最終 CTA をライブで確認してから Copy for Cursor できます。無料枠は日本時間で1日3回です。https://design-layer.com/components

貼り付け後の指示は、「見出し・CTA・リンクをプロダクト名に差し替える。配置は FAQ のあと」が安定します。

1. 主 CTA がページ内で1種類か。2. リンク先と計測タグが正しいか。3. フォーカスリングが見えるか。4. ヒーローと同じ文言の繰り返しになっていないか。5. スマホでボタンが親指の届く位置にあるか。