無料の Next.js テンプレートでも十分ですか？

構成を確かめる、社内向けのページを作る、といった用途なら十分です。公開する LP に使う場合は、次の点を確認してください。ライセンスで商用利用が認められているか App Router と今の Tailwind CSS のバージョンで動くか

1ページテンプレートを使うと、ほかのサイトと似てしまいませんか？

そのまま使えば似ます。色・フォント・写真を自社のものに替え、セクションの順番を自社の強みに合わせて入れ替えるだけでも、印象はかなり変わります。キャンペーンごとにヒーローだけを変える方法も効果があります。

1ページのテンプレートを複数ページのサイトに広げられますか？

広げられます。ヘッダーとフッターを (marketing)/layout.tsx に移し、料金や会社概要などを別のページに分けます。セクションを components/sections/ に分けておけば、ほかのページでも同じ部品を使い回せます。

【Next.js】1ページテンプレートの選び方と LP を作る手順を紹介

Q: 1ページテンプレートを使うと、ほかのサイトと似てしまいませんか？

そのまま使えば似ます。 色・フォント・写真を自社のものに替え、セクションの順番を自社の強みに合わせて入れ替えるだけでも、印象はかなり変わります。キャンペーンごとにヒーローだけを変える方法も効果があります。

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

Next.js の1ページテンプレート（LP テンプレート）を選ぶときに確認する6つの点と、App Router のプロジェクトに載せる手順を解説。セクション単位で組む方法との使い分け、色とフォントを自社に合わせるコード、Cursor や Claude への指示の例も。

Next.js の1ページテンプレートを使うか迷ったときの判断

新しいサービスの LP を Next.js で作ることになったが、公開までの時間が短い。

ヒーロー・料金・FAQ をそれぞれ別のサイトから集めてみたら、余白や動きの速さがばらばらで、1枚のページに見えない。

そんなときに、完成した1ページのテンプレートを土台にするか迷う人は多いはずです。

判断の基準はシンプルです。次のようなときは、完成1ページを土台にして文言を差し替える方が早く仕上がります。

構成がまだ固まっていない
公開の期限が近い

反対に、次のようなときはセクション単位で組む方が細かく制御できます。

既存の Next.js サイトに1ブロック足したい
ブランドのルールが厳密に決まっている

この記事で分かることは次のとおりです。

完成1ページから作ると早い理由
Next.js のテンプレートを選ぶときに確認する6つの点
App Router のプロジェクトに載せる手順と、色・フォントを合わせるコード
Cursor や Claude にテンプレートを渡すときの指示の例

完成1ページのテンプレートから作ると早い理由

LP の見た目を左右するのは、個々のセクションの出来よりも、ページ全体のリズムです。

次の3つが揃っていると、1枚のページとしてまとまって見えます。

セクション間の余白
見出しの大きさの段階
動きの速さとイージング

別々の場所から集めたセクションは、それぞれ違うルールで作られています。

あるヒーローは見出しが 64px で余白が 160px、別の料金表は見出しが 40px で余白が 96px、といった具合です。これを揃える作業は、思った以上に時間がかかります。

完成1ページなら、このリズムが最初から揃っています。

決めることが「何を書くか」と「どのセクションを残すか」に絞られます。そのため、構成を考えながら作る段階でも迷いが減ります。

1ページテンプレートを選ぶときに確認する6つの点

見た目が気に入っても、プロジェクトに載せてから動かないと意味がありません。選ぶ前に、次の点を確認してください。

ライブで1ページ全体が動くか（スクリーンショットだけでは、動きの速さやスマホでの見え方が分からない）
App Router で動くか（pages ディレクトリ前提のテンプレートは書き換えが必要）
Tailwind CSS のバージョンが自分のプロジェクトと合うか（バージョン3と4では、設定の書き方が違う）
必要な npm パッケージが明記されているか（motion〔旧 framer-motion〕など）
セクションごとにファイルが分かれているか（1ファイルに全部入っていると差し替えにくい）
利用規約やライセンスで、商用サイトに使えるか

テンプレートのスマホと、動きを減らす設定での表示も確かめる

PC の画面で見栄えがよくても、スマホでは横にはみ出したり、動きが重かったりすることがあります。

プレビューの画面幅を狭めて確認します。可能なら、OS の「視差効果を減らす」などの設定をオンにした状態でも見てみます。

1ページテンプレートを App Router に載せる手順

テンプレートを手に入れたら、次の順番で載せていきます。

LP 用のルートグループ app/(marketing)/ を作る
テンプレートを、セクションごとのファイルに分ける
色とフォントを自社のものに合わせる
見出し・本文・ボタンの文言を差し替える
使わないセクションを削除する
ページのタイトルと説明文（metadata）を設定する
スマホの実機と本番ビルドで確認する

text

app/
    (marketing)/
      layout.tsx    // ヘッダーとフッター
      page.tsx      // テンプレートのセクションを並べる
    globals.css     // 色とフォントのトークン
  components/
    sections/
      Hero.tsx
      Features.tsx
      Testimonials.tsx
      Pricing.tsx
      Faq.tsx
      FinalCta.tsx

ルートグループで既存ページと分ける

かっこで囲んだフォルダ（ルートグループ）は URL に含まれません。

たとえば (marketing) の中の page.tsx は、/ として表示されます。LP 専用のレイアウト（layout.tsx）も持てます。

既存のアプリのレイアウトに影響を与えずに、テンプレートのヘッダーとフッターを使えます。

app/page.tsx がすでにある場合は、どちらか一方にまとめてください。

テンプレートの色とフォントは CSS 変数に寄せる

テンプレートの色が bg-indigo-600 のように直接書かれていると、自社の色に合わせるときに全ファイルを書き換えることになります。

Tailwind CSS v4 なら、globals.css の @theme にブランドの色とフォントを定義します。

そのうえで、テンプレート側の色指定を bg-brand のような名前に置き換えます。

app/globals.css

@import "tailwindcss";

  @theme {
    --color-brand: #0f766e;
    --color-brand-foreground: #ffffff;
    --font-sans: "Noto Sans JP", system-ui, sans-serif;
  }

ページのファイルはセクションを並べるだけにする

セクションを分けておくと、順番の入れ替えや削除が1行で済みます。キャンペーンごとにヒーローだけを変えたいときも、Hero を差し替えるだけです。

app/(marketing)/page.tsx

import type { Metadata } from "next";
  import { Hero } from "@/components/sections/Hero";
  import { Features } from "@/components/sections/Features";
  import { Testimonials } from "@/components/sections/Testimonials";
  import { Pricing } from "@/components/sections/Pricing";
  import { Faq } from "@/components/sections/Faq";
  import { FinalCta } from "@/components/sections/FinalCta";

  export const metadata: Metadata = {
    title: "Acme｜チームの請求書確認を自動化",
    description: "請求書の読み取りから確認まで、経理チームの作業を短くします。",
  };

  export default function Page() {
    return (
      <>
        <Hero />
        <Features />
        <Testimonials />
        <Pricing />
        <Faq />
        <FinalCta />
      </>
    );
  }

1ページテンプレートを Cursor や Claude に渡す指示

テンプレートをそのまま AI エージェントに貼り、「これを使って」とだけ頼むと、配置する場所や分け方がエージェント任せになります。

次の点を明示すると、変更の差分も読みやすくなります。

配置先のパス
ファイルの分け方
差し替える内容
合わせる色

text

この1ページを app/(marketing)/page.tsx に載せてください。

  - セクションは components/sections/ に1ファイルずつ分割する
  - 見出しと CTA の文言を、プロダクト名「Acme」に合わせて差し替える
  - 色は globals.css の --color-brand を使い、indigo などの直接指定を置き換える
  - 料金セクションは今回使わないので削除する
  - 必要な npm パッケージがあれば package.json に追加する
  - Server Component を基本にし、"use client" は動きのあるセクションだけに付ける

1ページテンプレートで失敗しやすいポイントと対策

見た目だけを借りて、情報の並びが自社のサービスに合っていない
使わないセクションを残したまま、ダミーの文言で公開してしまう
色とフォントを合わせず、既存のプロダクトと別の会社のように見える
すべてのキャンペーンページを同じテンプレートで量産し、見分けがつかない
画像をテンプレートのサンプルのまま差し替え忘れる

とくに注意したいのは、情報の並びです。

テンプレートが「機能 → 料金 → FAQ」の順でも、導入事例が強みのサービスなら、事例を料金の前に移します。

並べ方の考え方は https://design-layer.com/ja/articles/nextjs-saas-landing-page-guide で説明しています。

1ページテンプレートとセクション単位の使い分け

完成1ページとセクション単位のどちらがよいかは、プロジェクトの状況で決まります。

新しいマーケティング用のページを1本立てる、構成がまだ仮 → 完成1ページ
既存の Next.js サイトにヒーローや料金表だけを足す → セクション単位
ブランドのガイドラインが厳密に決まっている → セクション単位
期限が近く、デザインを考える時間がない → 完成1ページ

セクション単位で組む場合は、ヒーローや CTA など動きのある部分だけを完成品から選び、残りをエージェントに作らせる方法が早く進みます。

流れは https://design-layer.com/ja/articles/cursor-nextjs-landing-page-guide にまとめています。

DesignLayer のセクション

DesignLayer のコンポーネント一覧。左のカテゴリで用途ごとに絞り込める

DesignLayer は、人が組んだ React + Tailwind CSS のモーション付きセクションを、ブラウザでライブプレビューしてからコピーできるカタログです。

閲覧とライブプレビューは無料で、カード登録も要りません。https://design-layer.com/ja/components

Copy for Cursor を押すと、統合の指示・ライブプレビューの URL・本体の TSX・npm 依存がまとめてコピーされます。Cursor や Claude にそのまま渡せます。

無料アカウントでは、無料サンプル10個を無料アカウントで回数制限なくコピーでき、動画プロンプトは月1回です。Free では MCP に接続できません。カタログ全体は30日ビルドパス（$19の1回払い、自動更新なし）、Lifetime Access（先着100名の$79の1回払い）、Plus（月額 $9、いつでも解約可）です。

まずは、ヒーローなど動きの目立つセクションを1つ選んで既存のページに足す方法をおすすめします。残りのセクションは、そのリズムに合わせて組みます。