Bolt.newで美しいLPを作るためのTips

Step①：必要なセクションを把握する

• ヘッダー

• ヒーローセクション

• 問題提起セクション

• ソリューションセクション

• 社会的証明セクション

• 使い方/手順セクション

• 料金プランセクション

• CTAセクション

• フッター

Step②：以下のプロンプトでBolt.newで大枠のLPを作成

# ランディングページ要件定義テンプレート

## 1. 基本情報
### プロジェクト情報
- プロジェクト名：
- 概要：
- 目的：
- 主な価値提案：
- ターゲットユーザー：

### テクニカルスタック(これは必ず守ってください。)
- フレームワーク：Next.js 14 (App Router)
- UI/コンポーネント：
  - TailwindCSS
  - shadcn/ui
  - Lucide Icons
- アニメーション：framer-motion
- パフォーマンス最適化：next/image, Suspense
- フォーム：react-hook-form

### ブランディング要素
- ブランドカラー：
  - プライマリー：
  - セカンダリー：
  - アクセント：
- タイポグラフィー：
  - メインフォント：
  - 見出し用フォント：
- トーン＆ボイス：
- UIテーマ：

## 2. 必要なセクションの詳細定義

### 1. ヘッダーセクション
- 目的：サイト全体のナビゲーションと主要アクションの提供
- 必須要素：
  - ロゴ/ブランド名
  - メインナビゲーション
  - CTAボタン
  - モバイルメニュー
- オプション要素：
  - 言語切替
  - ダークモード切替
  - 検索機能
- インタラクション：
  - スクロール時の挙動
  - モバイルメニューの動作
  - ホバーエフェクト

### 2. ヒーローセクション
- 目的：主要な価値提案と最初のインパクトの提供
- 必須要素：
  - メインヘッドライン
  - サブヘッドライン
  - プライマリーCTAボタン
  - メインビジュアル
- オプション要素：
  - セカンダリーCTA
  - ソーシャルプルーフ
  - 背景アニメーション
- インタラクション：
  - スクロールアニメーション
  - CTAホバーエフェクト
  - 視差効果

### 3. 問題提起セクション
- 目的：ユーザーの課題を明確化し、共感を得る
- 必須要素：
  - 主要な課題の説明
  - 統計データや事実
  - ビジュアル要素
- オプション要素：
  - 事例紹介
  - 比較表
  - タイムライン
- インタラクション：
  - スクロールアニメーション
  - ホバーエフェクト
  - インタラクティブな統計表示

### 4. ソリューションセクション
- 目的：製品/サービスによる問題解決方法の提示
- 必須要素：
  - 主要機能の説明
  - 具体的なメリット
  - 機能のビジュアル
- オプション要素：
  - デモ映像/アニメーション
  - 使用例
  - 技術仕様
- インタラクション：
  - 機能説明のアニメーション
  - インタラクティブデモ
  - ホバーエフェクト

### 5. 社会的証明セクション
- 目的：信頼性と実績の提示
- 必須要素：
  - ユーザーレビュー/証言
  - 主要な実績データ
  - 導入企業/クライアントロゴ
- オプション要素：
  - 詳細な事例研究
  - メディア掲載実績
  - 受賞歴
- インタラクション：
  - レビューのカルーセル
  - 統計データのアニメーション
  - ロゴのスライドショー

### 6. 使い方/手順セクション
- 目的：利用開始までのプロセスの説明
- 必須要素：
  - ステップバイステップの説明
  - 各ステップの図解
  - アクションポイント
- オプション要素：
  - 詳細なガイド
  - よくある質問
  - デモ映像
- インタラクション：
  - ステップのアニメーション
  - インタラクティブガイド
  - プログレスインジケーター

### 7. 料金プランセクション
- 目的：価格と提供価値の明確な提示
- 必須要素：
  - 料金プラン一覧
  - 機能比較表
  - 支払いオプション
- オプション要素：
  - カスタムプラン
  - 割引情報
  - FAQ
- インタラクション：
  - プラン切替機能
  - 料金計算機能
  - ホバーエフェクト

### 8. CTAセクション
- 目的：最終的な行動喚起
- 必須要素：
  - 強力な見出し
  - 明確なCTAボタン
  - 価値の再確認
- オプション要素：
  - 特典/限定オファー
  - タイマー/期限表示
  - 保証内容
- インタラクション：
  - ボタンのホバーエフェクト
  - スクロールアニメーション
  - 背景効果

### 9. フッターセクション
- 目的：補足情報とサイトナビゲーションの提供
- 必須要素：
  - サイトマップ
  - 連絡先情報
  - ソーシャルリンク
- オプション要素：
  - ニュースレター登録
  - 会社情報
  - 法的情報
- インタラクション：
  - ニュースレターフォーム
  - リンクのホバー効果
  - スクロールトップボタン

## 3. 技術要件
### パフォーマンス要件
- 目標パフォーマンススコア：
- 初期読み込み時間：
- LCP (Largest Contentful Paint)：
- TTI (Time to Interactive)：

### SEO要件
- 重要なメタタグ：
- OGP設定：
- 構造化データ：

### アクセシビリティ要件
- WCAG準拠レベル：
- キーボードナビゲーション：
- スクリーンリーダー対応：

### レスポンシブ要件
- ブレークポイント：
- モバイルファースト：
- タッチデバイス対応：


※最後に
page.tsxにて、セクションごとにコンポーネントを分割して作ってください。

Step③：各セクションのブラッシュアップ

• 具体的な改善ポイントを示す

Copy
❌ 「もっとお洒落にしてください」
✅ 「ヘッダー部分をモダンにしたいので、背景にグラデーションを入れ、テキストに立体的な効果を追加してください」

• 参考デザインやイメージの提示

Copy
❌ 「カッコよくしてください」
✅ 「AppleのWebサイトのような洗練された印象にしたいです。特にスクロールアニメーションとカラーグラデーションの部分を参考にしたいです」

• 優先順位の明確化

❌ 「全体的に良くしてください」
✅ 「まずはヒーローセクションのアニメーションを改善し、その後にナビゲーションのUIを更新したいです」

• 技術的な制約の共有

❌ 「アニメーションを付けてください」
✅ 「framer-motionを使用して、スクロールに連動したフェードインアニメーションを実装したいです。パフォーマンスも考慮してください」

❌ 「もっと良い感じにしてください」
✅ 「ターゲットは20-30代の若手ビジネスマンなので、プロフェッショナルでありながらモダンな印象を与えるデザインにしたいです」

• 具体的な技術やライブラリの指定

• 参考にしたいデザインや要素の明確化

• 改善したい部分の優先順位

• 期待する成果物のイメージの共有

Step④：コードをダウンロード＆Cursorエディタへコピー