ランディングページ

ランディングページ は何をしますか？

美しくレスポンシブなランディングページを数分で構築します。

使用するタイミング

• 新製品や新機能をローンチするとき
• マーケティングやプロモーション用のページを作成するとき
• ポートフォリオや個人サイトを構築するとき
• サインアップやウェイトリストページを作成するとき
• 製品コンセプトを素早くプロトタイピングするとき

動作の仕組み

1. ページセクション

効果的なランディングページは常に次の構造に従います:

┌─────────────────────────────┐
│  ナビゲーション (ロゴ + リンク)  │
├─────────────────────────────┤
│  ヒーロー (見出し + CTA)        │
├─────────────────────────────┤
│  ソーシャルプルーフ / ロゴ    │
├─────────────────────────────┤
│  機能 (3〜4枚のカード)         │
├─────────────────────────────┤
│  仕組み (3ステップ)          │
├─────────────────────────────┤
│  お客様の声                  │
├─────────────────────────────┤
│  価格 (オプション)            │
├─────────────────────────────┤
│  CTA (主要なアクションを繰り返し)│
├─────────────────────────────┤
│  フッター                    │
└─────────────────────────────┘

2. ヒーローセクション

ヒーローはページの成否を決めます。シンプルに保ちましょう:

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* バッジ */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        現在パブリックベータ版
      </div>

      {/* 見出文 — 明確な価値提案1つ */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        AIで製品を <span className="text-blue-600">10倍速く</span> リリース
      </h1>

      {/* サブ見出し — 見出しを補足 */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        定型文を書くのはもうやめましょう。AIが反復作業を処理し、
        あなたは本当に重要なことに集中できます。
      </p>

      {/* CTA — 1つの主要なアクション */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          無料で始める
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          デモを見る
        </a>
      </div>
    </section>
  )
}

3. 機能カード

const features = [
  { icon: '⚡', title: '驚異の速さ', description: '数秒でデプロイ、数時間ではありません' },
  { icon: '🔒', title: 'デフォルトでセキュア', description: 'エンタープライズグレードのセキュリティを内蔵' },
  { icon: '📊', title: 'アナリティクス', description: 'データに関するリアルタイムの洞察' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">必要なものすべて</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. デザインの原則

• セクションごとにCTAは1つ — 選択肢で圧倒しない
• 余白は味方 — 十分なパディング (py-20, gap-8)
• テキストには最大幅 — テキストを全幅に広げない (max-w-3xl)
• 視覚的階層 — 大きい = より重要、font-boldは控えめに
• モバイルファースト — モバイル向けにデザインし、md: や lg: ブレークポイントで拡張
• 高速読み込み — next/imageの使用、JSの最小化、重いライブラリは避ける

5. クイックセットアップ

# 最速のパス: Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

品質チェックリスト

• モバイルでの見栄えが良い (375px幅で確認)
• ヒーローの見出しが明確で簡潔 (10語未満)
• ファーストビューに明白なCTAが1つある
• ページの読み込みが2秒未満
• すべてのリンクとボタンが機能する
• ファビコンとメタタグが設定されている

使用例

> AIライティングツールのランディングページを作成する
> モバイルアプリ向けのメールサインアップ付きウェイトリストページを作成する
> プロジェクトギャラリー付きのポートフォリオランディングページを作成する