【Cursor × Next.js】ランディングページを1日で作る5工程を指示文つきで解説
公開日: 2026年9月7日 · 読了目安 10 分
Cursor と Next.js でランディングページを約7時間で公開する5つの工程を解説。Tailwind CSS と shadcn/ui の土台づくり、セクション構成の決め方、そのまま使える指示文、動きのあるセクションの入れ方、Vercel へのデプロイと公開前の確認まで。
Cursor と Next.js でランディングページを1日で作るには
Cursor に「LP を作って」と頼むと、骨組みは数分で出てきます。
ところが、そこから見た目を整えて動きを付け、公開するまでに何日もかかってしまう。そんな経験がある方は多いはずです。
1日で公開まで進めたいなら、すべてを生成させるのをやめて、役割を分けてください。
骨組みは Cursor に生成させる
動きのあるセクションは完成品から選ぶ
文言と仕上げは人が指示する
この分け方で、合計およそ7時間の作業に収まります。
この記事では、次の5つの工程を順に説明します。各工程の指示文と、1日の時間割も載せています。
工程1：Next.js + Tailwind CSS + shadcn/ui で土台を作る
工程2：セクション構成をコードの前に決める
工程3：動きの少ないセクションを生成し、動きのあるセクションは選んで入れる
工程4：Cursor への統合指示で、配置と依存とブランドを揃える
工程5：Vercel にデプロイし、公開前に3点を確認する
Cursor に LP を全部生成させると1日で終わらない理由
Cursor と Next.js の組み合わせは速い一方で、実際に進めると3つの壁に当たります。
デザインがどこかで見た SaaS のような顔になる
動きの部分だけ品質が追いつかず、頼み直しが続く
セクションごとに余白や色がばらばらで、1枚のページとしてまとまらない
どれも「エージェントに任せる範囲」が広すぎることから起きます。土台と構成を人が先に決め、動きは実物を見て選べば、頼み直しの回数が大きく減ります。
以下の5工程は、この考え方に沿って並べています。
工程1：LP の土台を Next.js と shadcn/ui で作る
土台選びで迷う時間がいちばんもったいない部分です。LP なら Next.js（App Router）と Tailwind CSS、shadcn/ui の組み合わせに決めてしまいましょう。
Cursor のエージェントが書き慣れているスタックなので、指示のぶれが小さくなります。
shadcn/ui はライブラリとして読み込むのではなく、コンポーネントのソースを自分のリポジトリにコピーする方式です。
あとから色や余白をブランドに合わせて書き換えやすく、LP のような一点もののページと相性がよい作りです。
自分で打つ場合のコマンドは次のとおりです。
Cursor に「Next.js の App Router プロジェクトを作成し、Tailwind CSS と shadcn/ui をセットアップして」と任せても問題ありません。
npx create-next-app@latest my-lp
cd my-lp
npx shadcn@latest init
npx shadcn@latest add button card accordion工程2：ランディングページのセクション構成を先に決める
LP の出来は、実装の前の構成で大半が決まります。定番の並びは次のとおりです。
「ヒーロー → 課題と共感 → 機能・特徴 → 実績・ロゴ → 料金 → FAQ → 最後の CTA」
B2B なら実績を前に、個人向けなら料金を後ろに、というように順番だけを調整します。
このとき、各セクションに動きを付けるかどうかも決めておきます。全部を動かすとページのテンポが崩れます。
そのため、強い動きはヒーローと最後の CTA（申し込みや問い合わせへ誘う区画）の2か所に絞るのがおすすめです。
構成メモは、そのまま Cursor への指示文になります。次のように渡すと、骨組みが一度で出てきます。
app/(marketing)/page.tsx に次の構成で LP の骨組みを作って。
各セクションは components/sections/ に1ファイルずつ分ける。
1. Hero（動きあり。あとで差し替えるので仮のままでよい）
2. Problem（課題と共感）
3. Features（機能3つ）
4. Logos（導入企業のロゴ）
5. Pricing（3プラン）
6. FAQ（アコーディオンで5問）
7. FinalCta（動きあり。あとで差し替える）LP の page.tsx はセクションを並べるだけにする
page.tsx はセクションを並べるだけにしておくと、あとから入れ替えるのが簡単です。
ページ本体はサーバーコンポーネントのままにし、動きのあるセクションだけをクライアントコンポーネントにします。
import { Hero } from "@/components/sections/Hero";
import { Problem } from "@/components/sections/Problem";
import { Features } from "@/components/sections/Features";
import { Logos } from "@/components/sections/Logos";
import { Pricing } from "@/components/sections/Pricing";
import { Faq } from "@/components/sections/Faq";
import { FinalCta } from "@/components/sections/FinalCta";
export default function Page() {
return (
<main>
<Hero />
<Problem />
<Features />
<Logos />
<Pricing />
<Faq />
<FinalCta />
</main>
);
}工程3：LP の動きのあるセクションは完成品から選ぶ
動きの少ないセクションは、工程2の構成メモをもとに Cursor に生成させれば十分です。課題や機能、料金、FAQ がこれにあたります。
文言は仮のままで進め、あとでまとめて推敲します。
1日で終わるかどうかの分かれ道は、ヒーローと最後の申し込みの区画です。
入場アニメーションやスクロール連動を Motion（旧 Framer Motion）で書き起こすと、1つのセクションに半日かかることも珍しくありません。
ここは自分で書かずに、ブラウザで動きを確かめられる完成品から選ぶと時間を読めます。
イージングやタイミングは静止画ではわかりません。実際に動く状態で確かめてから選んでください。
自分で書く場合の基本は、ヒーローのアニメーションを解説した記事にまとめています。https://design-layer.com/ja/articles/nextjs-animated-hero-section-guide
工程4：LP のセクションを Cursor への指示文で統合する
選んだセクションのコードを Cursor の Agent に貼り、次の型で指示します。
仮で置いた Hero を差し替える形にすると、構成を崩さずに済みます。
この React セクションで components/sections/Hero.tsx を置き換えて。
- Tailwind のクラスはそのまま使う
- 足りない npm パッケージは package.json に追加する
- 見出し・CTA・リンクを自社のプロダクトに合わせて書き換える
- 色と余白は既存のデザイントークンに合わせる
- page.tsx はサーバーコンポーネントのままにするNext.js のビルドエラーが出たときの直し方
motion（旧 Framer Motion）や lucide-react が足りずにビルドが止まることがあります。そのときは、コピーしたコードの import をエージェントに読ませ、依存の追加を頼みます。
エラーの文面をそのまま貼るのが、いちばん早い直し方です。
ブラウザでしか動かない機能を、サーバー側の部品で使うとエラーになります。よく出るのは「useState は Client Components でしか動かない」という意味の英語のエラーです。
直し方は、そのファイルの先頭に "use client"（この部品はブラウザで動かす、という印）を書くことです。
ページ全体のファイルに書くのではなく、動くセクションのファイルだけに付けてください。
LP のセクション同士の統一感を出す
最後に、ページ全体へ一度だけ指示を出します。たとえば「全セクションの上下の余白を py-24 に揃え、見出しのサイズを統一して」のようにです。
セクションごとに頼むより、まとめて頼む方がばらつきが残りません。
工程5：LP を Vercel にデプロイして公開する
公開は、GitHub のリポジトリを Vercel に接続すれば完了します。
独自ドメインは、ダッシュボードで追加して DNS を設定すれば割り当てられます。DNS の反映には時間がかかることがあります。
公開の前に、ページのタイトルと説明文（description）を metadata で設定しておきます。
SNS でシェアされたときに出る画像（OGP 画像）も用意します。
この画像は、app フォルダに opengraph-image.png という名前で置くと自動で使われます。
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "プロダクト名｜一言で伝わる価値",
description: "誰の、どんな悩みを、どう解決するかを1〜2文で。",
};ランディングページの公開前に見る3つのポイント
タイトルと description、OGP 画像が設定されているか
スマホ幅で動きが重すぎないか（実機でスクロールして確かめる）
申し込みボタンのリンク先と計測タグが正しいか
動きの強さは、プレビューで確かめた値を起点に delay と duration を少しずつ調整します。
特にスマホでは、動きを弱めるだけで体感の速さが大きく変わります。
ランディングページを1日で作る時間割（約7時間）
ここまでの工程を1日に並べると、次のようになります。待ち時間にほかの作業を重ねるのがコツです。
午前（2時間）：工程1と2。エージェントが土台を作っている間に、セクション構成のメモを書く
午後の前半（2時間）：工程3の前半。課題・機能・料金・FAQ を、構成メモを指示文にして生成する
午後の後半（1.5時間）：工程3の後半と工程4。ヒーローと最後の CTA を選んで組み込む
夕方（1.5時間）：文言の推敲とトークン合わせ、OGP の設定、Vercel への公開
初めてのときは、工程4のエラー対応で30分ほど延びることがあります。時間割は目安として使ってください。
LP の動きのあるセクションをカタログから選ぶ方法
工程3の「選ぶ」部分の置き場として、DesignLayer を使う方法があります。
モーション付きの React + Tailwind CSS のセクションを、ブラウザで動かして確かめられるカタログです。閲覧にはアカウントもカードも要りません。
気に入ったセクションで Copy for Cursor を押すと、次のものがまとめてコピーされます。
エージェントが読みやすい統合指示
ライブプレビューの URL
本体の TSX
必要な npm 依存の一覧
無料枠は日本時間で1日3回です。
「午後はヒーローと最後の申し込みの区画の2つ」と決めておけば足ります。https://design-layer.com/ja/components
コピーしたものを Cursor に貼る手順は、別の記事で詳しく説明しています。https://design-layer.com/ja/articles/cursor-react-motion-components-guide
Cursor と Next.js の LP づくりでよくある質問
土台づくりはエージェントに任せられるので、作ること自体は可能です。
ただし、サーバーコンポーネントと "use client" の違いを知らないと、工程4のエラーで時間を取られます。
先に基本を押さえておくと安心です。https://design-layer.com/ja/articles/nextjs-components-guide
まとめ：Cursor と Next.js でランディングページを作る手順
土台は Next.js + Tailwind CSS + shadcn/ui に決め、迷う時間をなくす
セクション構成と「どこを動かすか」をコードの前に決める
動きの少ないセクションは生成し、ヒーローと最後の申し込みの区画は動きを見て選ぶ
指示文には配置先と依存、トークン合わせを書く
公開前に、タイトルと説明文・スマホでの動き・ボタンのリンクを確かめる
まずは工程1と2を今日の午前中に終わらせてみてください。構成メモができれば、残りの工程はそのメモを指示文にして進めるだけです。
動きのあるセクションを選ぶときは、カタログで実際の動きを見比べてください。https://design-layer.com/ja/components
