【Next.js】1ページテンプレートの選び方と載せ方

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

Next.js の完成1ページテンプレートを選ぶ基準。セクション単体との使い分け、Cursor への渡し方、DesignLayer Templates の位置づけ。

先に結論：構成が固まる前は、完成1ページの方が早い

ヒーロー、料金、FAQ を別々に集めると、余白とモーションのリズムが揃いません。期限が近い、構成がまだ仮、というときは、完成1ページを土台に文言を差し替える方が早いです。

構成とブランドが既に厳密なら、セクション単位で足す方が制御できます。

選び方の基準は3つです。ライブで1ページ全体が動くか。React + Tailwind で貼れるか。エージェント向けの指示があるか。

1つ目は、見た目だけ借りて、情報設計が自社と違うことです。不要セクションは消します。

2つ目は、全ページ同じテンプレを量産することです。キャンペーンごとにヒーローだけ変えます。

3つ目は、トークンを合わせずに出すことです。色とフォントは既存プロダクトに寄せます。

既存の Next.js アプリに1ブロック足すならコンポーネントです。新規のマーケティング用ルートを1本立てるなら Templates です。

無料枠はコンポーネントのコピーが1日3回です。完成1ページのコピーは Pro です。

「この1ページを app/(marketing)/page.tsx に載せる。セクションは components/sections/ に分割。見出しと CTA をプロダクト名に差し替える。既存トークンに合わせる。」

配置パスを明示すると、差分が読みやすくなります。

プレビューは公開中です。コピーは Pro（月額2,980円・税込）。MCP の get_template も Pro です。https://design-layer.com/templates

迷ったら、無料枠でヒーロー1本を既存ページに足し、リズムが気に入らなければ Templates に進んでください。