ファイル作成中級
ランディングページの一括生成
プロダクトやサービスのランディングページを React/HTML で一括生成するプロンプト。
監修: 平原尚樹
株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)
監修: 酒井歩乃加
早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆
こんな課題を解決
新しいキャンペーンやプロダクトごとにランディングページを作成するのが手間。デザインカンプからコーディングまで時間がかかる。
プロンプト
Claude Code に入力
以下のサービスのランディングページを作成してください。
## サービス概要
- サービス名: [サービス名]
- ターゲット: [ターゲット層]
- 主な価値提案: [3つの価値提案]
## ページ構成
1. ヒーローセクション（キャッチコピー + CTA ボタン）
2. 課題提起セクション（ターゲットの悩み 3つ）
3. 解決策セクション（機能紹介 3つ、アイコン付き）
4. 料金プランセクション（3プラン比較表）
5. お客様の声セクション（3件）
6. FAQ セクション（5問）
7. CTA セクション（最終アクション）
## 技術要件
- React + Tailwind CSS
- レスポンシブ対応（モバイルファースト）
- アニメーション: Intersection Observer でスクロールフェードイン
- SEO: メタタグ、OGP、構造化データ実行結果の例
Claude Code が以下を生成します: - LandingPage.tsx: メインコンポーネント - HeroSection.tsx, PricingSection.tsx 等: セクション別コンポーネント - tailwind.config.ts: カスタムテーマ設定 - SEO メタタグとJSON-LD構造化データ
コツ・ポイント
- 具体的なブランドカラーやフォントを指定するとデザインの質が上がる
- 既存のデザインシステムがあれば参照先を明記する
- 画像のプレースホルダーサイズを指定すると後からの差し替えが楽
バリエーション
- HTML + CSS 版: フレームワークなしのシンプル版
- Next.js 版: SSG でビルドして静的配信