個人でLPをNext.js+Vercelで自作する方法【費用ほぼゼロ・1日で公開】

LPを外注すると30万円〜が当たり前という現実。

自分のサービスや商品のLPを作ろうとすると、外注すれば30万〜100万円かかります。制作会社に頼まずWordPressで作ろうとしても、テーマ代・サーバー代・ドメイン代がかかります。「どうせ最初はアクセスも少ないのに、コストだけかかる」という悩みは多いはずです。

この記事では私が実際に「ダンドリ」のLP（施工業向けSaaS）を自作したときの方法を紹介します。Next.js+Vercelの組み合わせなら、ドメイン以外の費用はゼロです。

なぜNext.js+Vercelなのか

技術スタックを選ぶ上で重視したのは「コスト」「速さ」「SEO」の3点です。

LP作成の全体フロー（1日でできる）

1. Next.jsプロジェクトの作成（15分）
   ターミナルで「npx create-next-app@latest」を実行するだけでNext.jsの雛形が作成されます。対話形式でセットアップが進みます。TypeScript・Tailwind CSSを選択しておくと後で楽になります。
2. LPのセクションをコンポーネント化（3〜5時間）
   LPはHero・問題提起・解決策・社会的証明・価格表・FAQ・最終CTAの7セクションに分解して、それぞれをReactコンポーネントとして作ります。Tailwind CSSの既存クラスを組み合わせるだけで、CSSを書く必要はほとんどありません。
3. Vercelに公開（10分）
   GitHubにリポジトリを作成してコードをpush。Vercelの管理画面でそのリポジトリを連携するだけで公開完了です。カスタムドメインを持っている場合は、DNSのAレコードを変更するだけで適用されます。

これらの設計方針は私が決め、実際のプログラム作成・設定ファイル作成はClaude Codeに一括で任せました。

問い合わせ窓口はGoogleフォームで十分

LPのCTAボタンの先は、自前のフォームではなくGoogleフォームでOKです。無料で使え、回答はGoogleスプレッドシートに自動で蓄積されます。私の場合、フォームを作ってVercelに公開するまで合計1日かかりませんでした。

Tailwind CSSでデザインを量産する：コンポーネント設計の実例

「CSSが書けないのにプロっぽいデザインになるの？」という疑問を持つ方は多いです。Tailwind CSSは「ユーティリティファースト」のCSSフレームワークで、クラスを組み合わせるだけでデザインが完成します。

たとえばボタンを1つ作るには、以下のようなクラスをdivに追加するだけです。

• bg-teal-600 text-white — 背景色をティールグリーンにして文字を白に
• px-6 py-3 — 左右24px・上下12pxのパディング
• rounded-lg — 角丸のボタン形状
• hover:bg-teal-700 — マウスオーバーで少し暗い色に変わる

GitHub ActionsでCI/CDを設定する（オプション）

VercelとGitHubを連携するだけで「git push → 自動公開」は実現できます。LP程度のサイトであればGitHub Actionsは不要ですが、TypeScriptの型チェック（tsc –noEmit）だけを走らせるだけでも修正ミスの発見に役立ちます。設定は5分程度でできます。

SEOとOGP：検索・SNSからの流入を最大化する設定

LPを作ったら、SearchコンソールへのURL登録と、SNSでシェアされたときの見た目（OGP）設定を必ず行います。

Next.jsでは`metadata`オブジェクトをpage.tsxに書くだけでtitle・description・OGP画像が設定できます。OGP画像は1200×630pxで作成して`/public`フォルダに置きます。SNSでURLをシェアすると、自動でこの画像が表示されるようになります。

実際に作ったダンドリLPの反省点

私が作ったダンドリのLPで「ここをもっとこうすれば良かった」という点を正直に書きます。

• ターゲット設定が最初は曖昧だった：「施工業」だと範囲が広すぎた → 「1〜10名・現場担当がいる会社」に絞り直した
• CTAが1箇所しかなかった：ファーストビューにもCTAを置くべきだった
• スクリーンショットが少なかった：「使っている感」が伝わらないと離脱率が上がる

まとめ

「LPを作りたいけどお金がない」「まずは無料で試したい」という場合は、Next.js+Vercelから始めてみてください。1日あれば公開できます。改善は公開してからで十分です。