# ランディングページ 制作プロンプト

## デザイン参考テンプレート

<!--
1. https://chartd.net/samples からお好みのテンプレートを選ぶ
2. テンプレートページの Download ボタンから ZIP をダウンロード
3. ZIP を解凍する
4. 解凍したフォルダとこの .md ファイルを両方 Claude Design へアップロードして送信
-->

アップロードした ZIP のデザイン・レイアウトをそのまま踏襲してください。
以下の構築要件は **機能・コンテンツの指定のみ** です。色・フォント・余白・コンポーネントの見た目はテンプレートに従い、要件を理由にデザインを変えないでください。

---

## 出力先ディレクトリ

すべてのファイルは `landing-page/` ディレクトリ内に作成してください。

```
landing-page/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── （画像ファイル）
```

---

## プロジェクト情報

**サービス・商品名**
<!-- 例：TaskFlow Pro -->

**提供価値（一言で）**
<!-- 例：チームの生産性を3倍にするタスク管理ツール -->

**解決する課題・ペイン**
<!-- 例：Slack が流れて抜け漏れ発生、複数ツールで二重管理が面倒 -->

**ターゲット**
<!-- 例：5〜50人規模のスタートアップ PM・エンジニア -->

**主要機能・特徴（3点）**
<!-- 例：AI 自動優先度付け / Slack 連携 / ガントチャート -->

**社会的証明**
<!-- 例：導入 1,200 社・☆4.8 / 著名スタートアップ各社ロゴ -->

**料金プラン**
<!-- 例：Free / Pro ¥2,980 / Team ¥9,800（月額） -->

**メイン CTA テキスト**
<!-- 例：無料で始める（クレカ不要） -->

**デザインスタイル**
<!-- 例：ダーク SaaS / ミニマル白 / グラデーション -->

**技術スタック**
<!-- 例：HTML + CSS / React / Next.js -->

---

## 構築要件

### ナビゲーション
- ロゴ＋メニューリンク（機能・料金・事例・ブログ）
- 右端にサインアップ CTA ボタン
- スクロールで背景変化・固定表示

### ヒーローセクション
- 大見出し：提供価値を即伝えるコピー（1〜2行）
- サブコピー：ペイン→解決の流れで 2〜3文
- CTA ボタン（プライマリ＋セカンダリ）
- ヒーロー下部に導入企業ロゴ羅列（グレースケール）
- プロダクトのモックアップ画像エリア（placeholder 可）

### ペイン→ソリューションセクション
- 課題を 3つのカードで提示
- 矢印でソリューションへの流れを視覚化

### 機能・特徴セクション
- 3列グリッドカード（アイコン＋見出し＋説明）
- 各機能のスクリーンショット or イラストエリア付き

### 社会的証明セクション
- スター評価と平均スコア
- お客様の声カード（顔写真 placeholder・名前・役職・コメント）3〜4件
- 導入事例への CTA リンク

### 料金プランセクション
- 月額 / 年額 切り替えトグル（年額割引バッジ付き）
- プランカード並列表示（推奨プランをハイライト）
- 機能比較チェックリスト
- 「まずは無料プランで試す」サブ CTA

### FAQ セクション
- アコーディオン式（8〜10問）
- 解約・セキュリティ・データ移行など典型的な質問

### 最終 CTA セクション
- 大きなバナー形式
- 主 CTA ボタン＋安心訴求テキスト（クレカ不要・いつでも解約など）

### フッター
- 製品・会社・サポート・法務リンク、SNS アイコン、コピーライト

### 共通要件
- モバイルファースト・レスポンシブ
- スクロールトリガーのフェードイン / スライドインアニメーション
- 画像・CSS・JS の読み込み URL にはキャッシュバスター（例：`image.png?v=1`）を付与する
- 数値カウントアップ演出（実績数字セクション）
- CTA は複数箇所に一貫配置
- 画像 lazy load 対応