Cursor × Next.js でランディングページを1日で作る全手順｜モーション付き LP の実践ガイド

Next.js + Tailwind の土台と Cursor のエージェントを組み合わせると、ランディングページの実装は「骨組みを書く」作業から「完成品を組み立てて指示する」作業に変わります。ヒーロー、機能紹介、料金、FAQ といった定番セクションは、エージェントに構造を渡せば数分で出力されます。

一方で、実際にやってみると3つの壁に当たります。1つ目は「生成されるデザインがどこかで見た SaaS 顔になる」こと。2つ目は「モーションだけ品質が追いつかない」こと。3つ目は「セクションごとの統一感が出ない」ことです。

この記事では、この3つの壁を「土台の選び方」と「モーションを外注する感覚のコピペ」で解消し、0から公開までを1日で回す手順を解説します。

工程1：土台づくり。Next.js（App Router）+ Tailwind CSS + shadcn/ui を用意します。ここは一度決めたら触らない領域です。

工程2：セクション構成の決定。ヒーロー → 課題 → 機能 → 実績 → 料金 → FAQ → CTA のような流れを、コードを書く前に1枚のメモで決めます。

工程3：モーション付きセクションの調達。動きのあるブロックは自分で書かず、ライブプレビューできるカタログからコピーします。

工程4：エージェントへの統合指示。コピーした TSX を Cursor に貼り、配置先・依存・ブランド差し替えを指示します。

工程5：デプロイと計測。Vercel に載せ、OGP と計測タグを設定して公開します。

土台選びで迷う時間がいちばん勿体ないので、LP 用途なら Next.js（App Router）+ Tailwind CSS + shadcn/ui の組み合わせで固定してしまいましょう。この3点は Cursor のエージェントが最も書き慣れているスタックで、指示のブレが最小になります。

shadcn/ui は「ライブラリとして依存する」のではなく、コンポーネントのソースを自分のリポジトリにコピーする方式です。後から色や余白を自社ブランドに合わせて書き換えやすく、LP のような一点もののページと相性が良い構成です。

プロジェクト作成から shadcn/ui の初期化までは、Cursor のエージェントに「Next.js の App Router プロジェクトを作成し、Tailwind と shadcn/ui をセットアップして」と丸ごと任せて問題ありません。

LP の出来は実装前の構成で8割決まります。定番は「ヒーロー → 課題・共感 → 機能・特徴 → 実績・ロゴ → 料金 → FAQ → 最終 CTA」です。B2B なら実績を前に、個人向けなら料金を後ろに、というように並びだけ調整します。

ここで大事なのは、各セクションに「動きを付けるか」を先に決めておくことです。全部に動きを付けるとページのテンポが崩れるため、強いモーションはヒーローと最終 CTA の2箇所に絞るのがおすすめです。

構成メモはそのまま Cursor への指示文になります。「この構成で app/(marketing)/page.tsx を組んで。各セクションは components/sections/ に分割して」と渡せば、骨組みは一発で出ます。

入場アニメーションやスクロール連動を Framer Motion で書き起こすと、1セクションに半日かかることも珍しくありません。ここが1日公開の最大の分岐点で、動きのあるセクションは自分で書かずに調達します。

DesignLayer は、モーション付きの React セクションをブラウザ上でライブプレビューできるカタログです。GIF やスクリーンショットでは分からないイージングやタイミングを、実際に動く React で確認してから選べます。閲覧にアカウントもカードも不要です。

気に入ったセクションは「Copy for Cursor」でコピーします。コピーには本体の TSX に加えて、エージェントが読みやすい統合指示と必要な npm 依存の一覧が含まれます。無料枠は日本時間で1日1回なので、「今日はヒーローを取る」と決めて使うのがコツです。

コピーした内容を Composer / Agent に貼り、次の型で指示します。「この React セクションを既存の Next.js アプリに追加する。Tailwind のクラスはそのまま。足りない npm 依存を package.json に入れて。見出し・CTA・リンクをプロダクト名に差し替える。配置は components/sections/ にして、app/(marketing)/page.tsx から読み込む。」

ブランドの色やフォントのトークンが既にリポジトリにある場合は、「既存のデザイントークンに合わせて」の一文を足してください。カタログの見た目から自社ブランドへの寄せが一度で通りやすくなります。

framer-motion や lucide-react の不足でビルドエラーが出たら、コピー内の import をエージェントに読ませて依存追加を依頼すれば解決します。エラーメッセージをそのまま貼るのが一番速い直し方です。

公開は Vercel にリポジトリを接続するだけで完了します。独自ドメインの割り当てもダッシュボードから数分で終わります。

公開前に確認するのは3点です。① OGP 画像とタイトル・description が設定されているか。② スマホ幅でモーションが重すぎないか（実機でスクロールして確認）。③ CTA のリンク先と計測タグが正しいか。

モーションの強さは、プレビューで確認した値を起点に delay と duration を微調整してください。特にモバイルでは動きを弱めるだけで体感速度が大きく変わります。

午前：土台構築と構成決定（2時間）。Next.js + Tailwind + shadcn/ui のセットアップをエージェントに任せ、その間にセクション構成メモを書きます。

午後イチ：静的セクションの生成（2時間）。課題・機能・料金・FAQ など動きの少ないセクションを、構成メモをそのまま指示文にして生成させます。

午後：モーションセクションの組み込み（1.5時間）。DesignLayer でヒーローと最終 CTA を選び、Copy for Cursor で統合します。

夕方：文言・ブランド調整とデプロイ（1.5時間）。コピーの推敲、トークン合わせ、OGP 設定、Vercel 公開で完了です。

Cursor × Next.js で LP を1日で作る鍵は、すべてをエージェントに生成させるのではなく、「骨組みは生成、モーションはカタログから調達、仕上げは人が指示」と役割を分けることです。

DesignLayer のコンポーネントカタログは閲覧無料・カード不要です。まずはライブプレビューで動きを眺めて、今日の無料枠（1日1回）で1セクションを自分のプロジェクトに貼ってみてください。

ヒーローから FAQ まで完成した1ページをまるごと渡したい場合は、Templates が使えます。プレビューは公開中で、コピーは Pro（月額2,980円・税込）です。