【Next.js】押される CTA セクションの作り方を実装例つきで解説
公開日: 2026年9月12日 · 読了目安 10 分
Next.js の LP の最後に置く CTA セクションを、コード付きで作る方法を解説。ボタンが埋もれる原因、主ボタンと副ボタンの差の付け方、マイクロコピー、whileInView の入場、スマホで押しやすくする工夫までまとめます。
CTA セクションのボタンが押されないときの直し方
Next.js で LP を作り、最後に「無料で始める」ボタンを置いた。ところが、ヒーローのボタンは押されるのに、最後のボタンはほとんど押されない。
CTA セクション（登録や申し込みを促す区画）でよくある悩みです。
解決の方向ははっきりしています。ページ最後のセクションでは、押してほしいボタンを1つに絞り、背景を変えてページの他の部分と区切ります。
そのうえで、見出しとボタンだけを短く順番に表示します。派手な演出を足すより、余白と対比を整える方が効きます。
この記事で分かることは次のとおりです。
最後のセクションをヒーローの繰り返しにしない理由
ボタンが埋もれる3つの原因
Next.js と Tailwind CSS で作る CTA セクションの基本コード
画面に入ったら見出しとボタンを順番に出す方法
ボタンの文言とマイクロコピーの決め方
スマホで押しやすいボタンにする方法
最後の CTA をヒーローの繰り返しにしない理由
ページの最後まで読んだ人は、ファーストビューを見た人とは状況が違います。機能を見て、料金を確かめ、よくある質問にも目を通したあとです。
ここでヒーローと同じ見出しをもう一度見せても、新しく伝わることがありません。
最後のセクションで伝えるべきなのは、「ここまで読んだあなたが、次にやること」です。たとえば「3分で最初のページを公開する」のように、行動と、その結果がすぐに得られることを短く示します。
もう1つの理由は、迷いを減らすことです。ボタンが2つ以上同じ強さで並ぶと、人はどちらを押すかを考え始めます。
選択肢を1つに絞るほど、クリックまでの距離は短くなります。
CTA ボタンが埋もれる3つの原因
最後のボタンが押されないとき、原因はたいてい次の3つのどれかです。コードを書く前に、自分のページに当てはまるものがないか確認してください。
CTA の主ボタンと副ボタンが同じ強さ
「無料で試す」と「資料を見る」が同じ色、同じ大きさで並んでいる状態です。主ボタンを塗りつぶし、副ボタンはアウトラインかテキストリンクにして、強さに差を付けます。
料金や解約の不安が残ったまま
料金や契約の疑問が解けていないと、最後のボタンだけを強くしても押されません。
最後のボタンの直前に FAQ を置き、クリック前に浮かぶ疑問に答えておきます。FAQ の作り方は https://design-layer.com/ja/articles/nextjs-faq-accordion-guide で解説しています。
動きが強すぎて文言が読めない
背景のパーティクルや大きな回転が目立つと、見出しとボタンの文言が頭に入りません。最後のセクションの動きは、見出しとボタンが順番に出る程度で十分です。
Next.js で作る CTA セクションの基本コード
まずは動きのない形で、構成を固めます。背景を他のセクションと一段変え、上から次の順に並べます。
見出し1行
補足1行
主ボタン
副リンク
ボタンの下には、不安を消す短い一文（マイクロコピー）を置きます。
このコードは動きを使わないので、サーバーコンポーネント（サーバーで組み立てる部品）のまま使えます。ページ内の移動や新規登録ページへの遷移には、next/link の Link を使います。
import Link from "next/link";
export function FinalCta() {
return (
<section className="px-6 py-24">
<div className="mx-auto max-w-4xl rounded-3xl bg-zinc-950 px-8 py-16 text-center text-white">
<h2 className="text-3xl font-semibold tracking-tight md:text-4xl">
3分で、最初のページを公開する
</h2>
<p className="mx-auto mt-4 max-w-xl text-zinc-300">
テンプレートを選んで文言を差し替えるだけ。設定はあとからでも大丈夫です。
</p>
<div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
<Link
href="/signup"
className="inline-flex min-h-12 w-full items-center justify-center rounded-full bg-white px-8 font-medium text-zinc-950 transition hover:bg-zinc-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white sm:w-auto"
>
無料で始める
</Link>
<Link href="/demo" className="text-sm text-zinc-300 underline-offset-4 hover:underline">
デモを見る
</Link>
</div>
<p className="mt-4 text-xs text-zinc-400">クレジットカード不要・いつでも解約できます</p>
</div>
</section>
);
}全面に広げるか、角丸のカードにするか
背景を画面の端まで広げると力強く見えます。角丸のカードにしてコンテナに収めると、フッターとの境目が分かりやすくなります。
どちらでも構いませんが、全面にする場合はスマホで左右の余白が詰まりすぎていないかを確認してください。
CTA の見出しとボタンを順番に出すアニメーション
構成が固まったら、入場の動きを足します。最後のセクションはスクロールして到達する場所なので、読み込み時ではなく、画面に入ったときに動かします。
Motion（旧 Framer Motion）では whileInView（画面に入ったら動かす指定）を使います。
さらに stagger で子を少しずつずらすと、見出しから補足、ボタンの順に出せます。
ループする背景やマウス追従は付けません。once: true で一度だけ動かせば、何度もスクロールし直す人の邪魔にもなりません。
Motion の導入手順は https://design-layer.com/ja/articles/nextjs-framer-motion-guide を参照してください。
"use client";
import Link from "next/link";
import { motion, stagger, type Variants } from "motion/react";
const container: Variants = {
hidden: {},
show: { transition: { delayChildren: stagger(0.12) } },
};
const item: Variants = {
hidden: { opacity: 0, y: 16 },
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
};
export function FinalCtaMotion() {
return (
<motion.div
variants={container}
initial="hidden"
whileInView="show"
viewport={{ once: true, amount: 0.4 }}
className="mx-auto max-w-4xl rounded-3xl bg-zinc-950 px-8 py-16 text-center text-white"
>
<motion.h2 variants={item} className="text-3xl font-semibold md:text-4xl">
3分で、最初のページを公開する
</motion.h2>
<motion.p variants={item} className="mt-4 text-zinc-300">
テンプレートを選んで文言を差し替えるだけ。
</motion.p>
<motion.div variants={item} className="mt-10">
<Link href="/signup" className="inline-flex min-h-12 items-center rounded-full bg-white px-8 font-medium text-zinc-950">
無料で始める
</Link>
</motion.div>
</motion.div>
);
}CTA ボタンのホバーは小さく
ボタンのホバーで大きく拡大すると、周りの文字が押し出されたように見えます。
拡大するなら 1.03 倍程度にとどめるか、背景色の変化だけにすると落ち着きます。スマホではホバーがないため、ホバーにしか出ない情報は置かないでください。
CTA ボタンの文言とマイクロコピーの決め方
ボタンの文言は、押したあとに何が起きるかが分かる言葉にします。「送信」「こちら」のような言葉より、「無料で始める」「デモを予約する」の方が行動を想像しやすくなります。
マイクロコピーは、ボタンのすぐ下に置く短い補足です。押す直前の不安を1つだけ消す役割があります。
よく使われるのは次のような内容です。
費用の不安を消す：「クレジットカード不要」「14日間無料」
手間の不安を消す：「1分で登録」「設定はあとからでも可」
やめにくさの不安を消す：「いつでも解約できます」
ここに書く内容は、実際のサービスの条件と必ず一致させてください。事実と違う一文は、クリックを増やしても信頼を失います。
スマホで押しやすい CTA ボタンにする
スマホでは、ボタンを画面幅いっぱいにすると親指で押しやすくなります。上のコードでは w-full で全幅にし、sm 以上では w-auto に戻しています。
高さは 44〜48px 程度を確保すると、押し間違いが減ります。
入場の遅延は、スマホでは短くするか、なくしても構いません。スクロールが速い環境では、ボタンが出てくるのを待たされる方が気になります。
完成した CTA セクションをコピーして使う方法
背景がゆっくり動き、ボタンだけがホバーで反応する。そんな仕上がりを自分でそろえると、半日かかることもあります。
見た目を先に決めたいときは、完成したセクションから始める方法もあります。
DesignLayer は、人が組んだ React + Tailwind のモーション付きセクションを、ブラウザでライブプレビューできるカタログです。フッター前に置く CTA ブロックや CTA ボタンも、実際の動きを確かめてから Copy for Cursor でコピーできます。
無料サンプル10個を無料アカウントで回数制限なくコピーでき、動画プロンプトは月1回です。Free では MCP に接続できません。カタログ全体は30日ビルドパス（$19の1回払い、自動更新なし）、Lifetime Access（先着100名の$79の1回払い）、Plus（月額 $9、いつでも解約可）です。https://design-layer.com/ja/components
貼り付けたあとに AI エージェントへ頼むときは、「見出し・ボタンの文言・リンク先を自分のプロダクトに差し替える。配置は FAQ のあと」のように、変える場所と置く場所を具体的に伝えると結果が安定します。
CTA セクションを公開する前の確認リスト
主ボタンがセクション内で1つだけになっているか
リンク先と計測タグが正しく設定されているか
キーボード操作でフォーカスリングが見えるか
ヒーローと同じ見出しの繰り返しになっていないか
マイクロコピーが実際の条件と一致しているか
スマホでボタンの高さが 44px 以上あるか
CTA セクションについてよくある質問
CTA セクションの実装で、よく出る質問をまとめました。
ヒーロー、料金表、ページ最後のセクションの3か所が基本です。どこに置いても、押してほしい行動は同じ1種類にそろえます。
まとめ：Next.js で CTA セクションを作る手順
最後の CTA は、ここまで読んだ人の「次にやること」を1つだけ示す
主ボタンは塗りつぶし、副ボタンはアウトラインかテキストリンクにする
直前に FAQ を置き、料金や解約の不安を先に消す
動きは、見出しとボタンを一度だけ順番に出す程度にする
マイクロコピーは実際の条件と一致させ、スマホではボタンを全幅にする
最後のセクションの手前に置く料金表は https://design-layer.com/ja/articles/nextjs-pricing-table-guide で、ページの最後を締めるフッターは https://design-layer.com/ja/articles/nextjs-footer-section-guide で解説しています。
