LP制作スキル
概要
コンバージョン最適化されたランディングページを設計・実装するスキル。
構成設計からコピーライティング、HTML/Tailwindコード出力までを一貫して行う。
発動条件
ユーザーが「LP」「ランディングページ」「セールスページ」「販売ページ」に関する制作を依頼したとき。
入力で確認すべき情報
1. **商品・サービス名** — 何を売るのか
2. **ターゲット** — 誰に売るのか（年齢・職業・悩み）
3. **ゴール** — 購入 / 資料請求 / LINE登録 / メルマガ登録
4. **既存素材** — ロゴ、写真、お客様の声、実績データ
5. **トンマナ** — 高級感 / カジュアル / 信頼感 / 緊急性
6. **技術スタック** — HTML/Tailwind / Next.js / WordPress 等
LP構成テンプレート（推奨セクション順）
1. ファーストビュー（FV）
**キャッチコピー**: 最大のベネフィットを1文で。数字を入れると効果的
**サブコピー**: キャッチを補足する1〜2文
**ビジュアル**: 商品画像 or 使用シーン
**CTA ボタン**: 目立つ色、アクション動詞（「無料で始める」「今すぐ申し込む」）
FVだけで「何が」「誰に」「どんな価値を」が伝わること
2. 悩み・課題（Pain）
ターゲットの悩みを3〜5個リストアップ
「こんなお悩みありませんか？」形式
共感を示す表現を使う（「〜ですよね」「〜ではないでしょうか」）
3. 解決策（Solution）
サービスの特徴を3〜5個
各特徴は「見出し + 説明文 + アイコンor画像」の構成
機能ではなくベネフィットで語る
4. 実績・社会的証明（Proof）
数字での実績（導入社数、満足度、売上向上率）
お客様の声（写真 + 名前 + 肩書き + コメント）
メディア掲載、受賞歴
ロゴバー（取引先・掲載メディア）
5. 使い方・ステップ（How it works）
3ステップで簡潔に
各ステップにアイコンと短い説明
6. 料金（Pricing）※該当する場合
プラン比較表
最も売りたいプランを視覚的に強調
「人気No.1」バッジ
7. よくある質問（FAQ）
購入障壁になりそうな疑問を5〜8個
返金保証、サポート体制、導入期間など
8. 最終CTA
限定性・緊急性を加える（「先着◯名」「◯月◯日まで」）
ベネフィットを再提示
CTA ボタンを大きく配置
コード出力ルール
**モバイルファースト**: `sm:` `md:` `lg:` でレスポンシブ対応
**Tailwind CSS** をデフォルトで使用
セクションごとに `
CTA ボタンは `scroll-smooth` でアンカーリンク
画像は `loading="lazy"` + `alt` テキスト必須
フォントサイズ: FV見出し `text-3xl md:text-5xl`、本文 `text-base md:text-lg`
CTA配置ルール
FV直下に1つ目
Proof セクション後に2つ目
ページ最下部に3つ目
スクロール量が多い場合はフローティングCTAも検討
コピーライティング原則
1文は40文字以内を目安
専門用語は避け、中学生でもわかる言葉で
数字は具体的に（「多くの」→「1,200社以上の」）
主語はターゲット（「私たちは〜」→「あなたは〜」）
チェックリスト（出力前に確認）
[ ] FVだけで価値提案が伝わるか
[ ] CTAが3箇所以上あるか
[ ] モバイルで読みやすいフォントサイズか
[ ] 社会的証明が含まれているか
[ ] ページ読み込み速度に影響する要素がないか
[ ] OGP / メタタグの提案を含めたか
出力フォーマット
1. **構成案**（セクション一覧 + 各セクションの目的）
2. **コピー案**（各セクションの見出し・本文）
3. **コード**（HTML + Tailwind、セクション単位でコメント付き）
4. **改善提案**（A/Bテスト候補、追加すべき要素）