SaaS の LP に Next.js を使うメリットは何ですか？

プロダクト本体も Next.js なら、同じリポジトリでデザインの部品やログイン状態を共有できる点が大きな利点です。サーバーで組み立てる部品が HTML を出力するため、検索エンジンに内容が伝わりやすく、metadata もページごとに設定できます。

SaaS の LP とダッシュボードは同じリポジトリに置くべきですか？

チームが小さいうちは、同じリポジトリでルートグループに分ける形が管理しやすくなります。 LP の更新頻度が高く、マーケティング担当が別にいる場合は、リポジトリを分ける選択もあります。そうすれば、互いのデプロイが影響しません。

料金は LP に載せるべきですか？別ページにするべきですか？

セルフサーブで申し込めるサービスなら、LP に載せた方が離脱を防げます。プランが多い場合や、見積もりが前提の場合は、LP には概要と「料金を見る」ボタンだけを置きます。詳しい比較は別ページにします。

DesignLayer

お問い合わせ

JA EN

【Next.js】SaaS のランディングページの作り方とセクション構成を紹介

Q: 料金は LP に載せるべきですか？別ページにするべきですか？

セルフサーブで申し込めるサービスなら、LP に載せた方が離脱を防げます。 プランが多い場合や、見積もりが前提の場合は、LP には概要と「料金を見る」ボタンだけを置きます。詳しい比較は別ページにします。

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

Next.js で SaaS・BtoB 向けのランディングページを組むときのセクションの順番（ヒーロー、ロゴ、課題、機能、導入事例、料金、FAQ、CTA）と、各セクションに書く内容、App Router のディレクトリ構成、文言を分けて管理するコード、モーションを付ける場所までを解説。

SaaS のランディングページの構成で迷ったときの答え

自社の SaaS の LP を Next.js で作ることになった。ヒーローと機能紹介までは手が動くものの、その先に何をどの順で並べればよいか決まらない。

AI エージェントに任せると、どこかで見たような機能カードが並ぶだけのページになる。そんな状況で読んでほしい記事です。

SaaS の LP は、次の順番で並べると読み手の疑問に沿って話が進みます。

ヘッダー
ヒーロー
導入企業のロゴ
課題
機能
導入事例・お客様の声
料金
FAQ
最後の CTA（申し込みを促す区画）
フッター

実装は、ページのファイル（page.tsx）にセクションを並べ、各セクションを components/sections/ に1ファイルずつ分けます。

強い動きは、ヒーローと最後の申し込み区画の2か所に絞ります。

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

SaaS の LP でこの順番がよい理由
各セクションに書く内容と、よくある書き方の失敗
App Router でのディレクトリ構成と、文言を分けて管理するコード
モーションを付ける場所と、Cursor や Claude への渡し方

SaaS の LP でこの順番がよい理由

LP を訪れた人の頭には、順番に疑問が浮かびます。

これは何のサービスか
ほかの会社も使っているのか
自分の困りごとに関係あるか
どうやって解決するのか
本当に効果があるのか
いくらかかるのか
導入して困ることはないか

上の順番は、この疑問に1つずつ答える並びです。

とくに大事なのは、料金より前に根拠を置くことです。

ロゴや導入事例で信頼できると分かる前に価格を見せると、高いか安いかだけで判断されてしまいます。

BtoB で決裁者が見る LP なら、導入事例と数字をさらに前に出します。

ヒーローの直下に「導入後、確認作業が 60% 減った」のような実績を1行置くだけでも、読み進めてもらいやすくなります。

SaaS の LP の各セクションに書く内容

セクションごとに、書く内容と気をつける点をまとめます。

ヘッダーとヒーローに書くこと

ヘッダーは、次の3つで足ります。

ロゴ
3〜4個のページ内リンク
無料で試すボタン

スクロールしても上に残る固定ヘッダーにすると、どこからでも申し込みに進めます。

ヒーローの見出しには、機能名ではなく「誰の・何が・どう変わるか」を書きます。「AI 請求書 OCR」より「経理の確認作業を、1日から10分に」の方が伝わります。

その下に一文の説明、主ボタン（無料で試す）と副ボタン（資料を見る）、製品の画面を置きます。

導入企業のロゴで信頼を示す

ヒーローの直下に、導入企業のロゴを5〜8社並べます。数が多ければ横に流れるマーキーにします。

ロゴがまだ少ない時期は、「◯社が利用中」のような数字か、利用者の一言で代えても構いません。

SaaS の課題と機能を対応させて並べる

課題のセクションでは、読み手が日々感じている不満を3つ程度、相手の言葉で書きます。機能はその課題と対応させ、「課題 → この機能で解決」の形で並べます。

機能をすべて同じ大きさのカードで並べると、どこにでもある SaaS の LP に見えます。

一番の機能だけを大きく見せるベントグリッドや、画像と文章を左右交互に置く形を1つ入れると、ページに強弱が生まれます。

組み方は https://design-layer.com/ja/articles/nextjs-features-section-guide で説明しています。

導入事例・お客様の声の選び方

声は、会社名・役職・顔写真があるほど信頼されます。

「便利です」だけの声より、「月末の残業が週 10 時間減った」のように具体的な変化が書かれた声を選びます。

SaaS の料金と FAQ に書くこと

料金は3プラン程度にし、おすすめのプランを1つだけ目立たせます。月払いと年払いの切り替えを付けるなら、年払いの割引額を明記します。

作り方は https://design-layer.com/ja/articles/nextjs-pricing-table-guide にまとめています。

FAQ には、申し込み直前に止まる理由を書きます。たとえば次のような内容です。

解約
データの扱い
導入にかかる期間
既存ツールとの連携

アコーディオンにすると縦に長くなりません。詳しくは https://design-layer.com/ja/articles/nextjs-faq-accordion-guide を参照してください。

最後の申し込みボタンとフッター

ページの最後には、ヒーローと同じ主ボタンをもう一度置きます。

ここまで読んだ人に向けて、「カード登録なしで 14 日間試せます」のように、申し込みのハードルを下げる一文を添えます。

フッターには、次の情報をまとめます。

会社情報
利用規約
プライバシーポリシー
問い合わせ先

SaaS の LP を置く App Router のディレクトリ構成

SaaS の場合、LP とプロダクト本体（ダッシュボード）を同じリポジトリに置くことがよくあります。

ルートグループ（かっこで囲んだフォルダ）を使うと、URL を変えずに、LP 用とアプリ用でレイアウトを分けられます。

text

app/
    layout.tsx          // html と body、フォント（全体で共通）
    (marketing)/
      layout.tsx        // ヘッダーとフッター
      page.tsx          // LP 本体（URL は /）
      pricing/page.tsx  // 料金ページを分ける場合
    (app)/
      layout.tsx        // ダッシュボード用のレイアウト
      dashboard/page.tsx
  components/
    sections/
      Header.tsx
      Hero.tsx
      LogoCloud.tsx
      Problem.tsx
      Features.tsx
      Testimonials.tsx
      Pricing.tsx
      Faq.tsx
      FinalCta.tsx
      Footer.tsx
  lib/
    marketing-copy.ts   // LP の文言をまとめる

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

ページのファイルには、セクションを順番に並べる処理と、ページ情報の metadata だけを書きます。順番を入れ替えたいときに、この1ファイルを見ればすみます。

なお、ルートグループの中の page.tsx と app 直下の page.tsx は、どちらも同じ / の URL になります。そのため、どちらか一方だけにします。

app/(marketing)/page.tsx

import type { Metadata } from "next";
  import { Hero } from "@/components/sections/Hero";
  import { LogoCloud } from "@/components/sections/LogoCloud";
  import { Problem } from "@/components/sections/Problem";
  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";
  import { copy } from "@/lib/marketing-copy";

  export const metadata: Metadata = {
    title: copy.meta.title,
    description: copy.meta.description,
  };

  export default function MarketingPage() {
    return (
      <>
        <Hero {...copy.hero} />
        <LogoCloud logos={copy.logos} />
        <Problem items={copy.problems} />
        <Features items={copy.features} />
        <Testimonials items={copy.testimonials} />
        <Pricing plans={copy.plans} />
        <Faq items={copy.faq} />
        <FinalCta {...copy.cta} />
      </>
    );
  }

LP の文言は1つのファイルにまとめる

見出しやボタンの文言をコンポーネントの中に直接書くと、文言を直すたびに複数のファイルを開くことになります。

lib/marketing-copy.ts にまとめておけば、営業やマーケティングの担当者から修正の依頼が来ても、このファイルだけで対応できます。

lib/marketing-copy.ts

export const copy = {
    meta: {
      title: "Acme｜経理の確認作業を、1日から10分に",
      description: "請求書の読み取りから仕訳の確認まで。経理チームのための SaaS です。",
    },
    hero: {
      eyebrow: "経理チーム向け",
      title: "経理の確認作業を、1日から10分に",
      lead: "請求書をアップロードするだけで、金額と期日を読み取り、仕訳の候補を作ります。",
      primaryCta: { label: "無料で試す", href: "/signup" },
      secondaryCta: { label: "資料を見る", href: "/docs" },
    },
    // logos, problems, features, testimonials, plans, faq, cta も同じ形で並べる
  };

SaaS の LP でモーションを付ける場所

SaaS の LP で強い動きを付けるのは、ヒーローと最後の CTA の2か所です。ヒーローは第一印象を作り、最後の申し込み区画は読み終えた人の背中を押します。

そのほかのセクションには控えめな動きを使います。

導入企業のロゴ: ゆっくり横に流れるマーキー
機能: 画面に入ったときに一度だけふわっと表示
導入事例: カードのホバーで枠の色が変わる程度
料金と FAQ: 動かさない（読んで比べる場所なので）

動きを付けるセクションだけを、ブラウザで動く部品（Client Component）にします。

ページ本体やほかのセクションは、サーバーで組み立てる部品（Server Component）のままにします。

ページ全体にブラウザで動かす印（"use client"）を付けると、JavaScript の量が増えて表示が遅くなります。

SaaS の LP を Cursor や Claude に組ませる方法

AI エージェントに LP を任せるときは、いきなり「SaaS の LP を作って」と頼むのではなく、構成のメモを先に渡します。

順番と書く内容が決まっていれば、エージェントは各セクションを組むことに集中できます。

text

次の順で app/(marketing)/page.tsx を組んでください。
  各セクションは components/sections/ に1ファイルずつ分け、文言は lib/marketing-copy.ts にまとめます。

  1. Hero: 見出し「経理の確認作業を、1日から10分に」、主ボタン「無料で試す」、副ボタン「資料を見る」
  2. LogoCloud: 導入企業ロゴ 6 社（画像は public/logos/ にある）
  3. Problem: 経理担当者の不満を 3 つ
  4. Features: 課題に対応する機能を 3 つ。1 つ目だけ大きく見せる
  5. Testimonials: 導入事例 3 件（会社名・役職・具体的な変化）
  6. Pricing: 3 プラン。真ん中をおすすめにする
  7. Faq: 5 問（解約、データの扱い、導入期間、連携、サポート）
  8. FinalCta: 「カード登録なしで 14 日間試せます」

  動きのあるブロックは後から差し替えるので、まずは静的な形で組んでください。
  Server Component を基本にし、"use client" は必要なセクションだけに付けます。

SaaS の LP を1日で公開するまでの流れ

次の流れで進めると、1日で公開まで届きます。

構成のメモを書く
エージェントに骨組みを作らせる
ヒーローなど動きのあるセクションだけを差し替える

具体的な手順は https://design-layer.com/ja/articles/cursor-nextjs-landing-page-guide で説明しています。

SaaS の LP でよくある失敗と直し方

ヒーローの見出しが機能名で、誰に何の得があるのか分からない
すべてのセクションが同じ3列のカードで、どこが大事か伝わらない
料金の前に、ロゴ・数字・導入事例などの根拠がない
ボタンが「無料で試す」「お問い合わせ」「資料請求」「デモ予約」と多すぎて迷う
ページ全体をブラウザで動く部品にして、表示が遅い

ボタンの種類は、主ボタン1つと副ボタン1つまでに絞ります。

営業担当との商談が前提のサービスなら、主ボタンを「デモを予約」にし、無料トライアルは置かないといった判断も必要です。

SaaS の LP の動くセクションは完成品から選ぶ

構成と文言はエージェントでも十分に作れます。差が出るのは、次のような手触りの部分です。

ヒーローや CTA の動き
ロゴのマーキー
機能カードのホバー

ここを一から調整すると時間がかかります。

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、いつでも解約可）です。

コピーの回数が足りなくなったら、Plus プランではコピーが無制限になります。