Lp Designer

---
name: lp-designer
description: "LP/HP作成ワークフロー。ヒアリング→訴求整理→WF→Pencilデザイン→HTML実装→Vercelデプロイの全フローをガイド。 「LPを作って」「ランディングページ作成」「HPデザイン」「Webページ制作」等のリクエストで発動。"
triggers:
  - LPを作って
  - ランディングページを作成
  - HPを作りたい
  - ホームページ制作
  - Webページを作って
  - lp-designer
  - landing page
---

# LP/HP Designer - ランディングページ・ホームページ制作スキル

LP（ランディングページ）/ HP（ホームページ）をゼロから制作するための統合ワークフロースキル。
AskQuestionToolによるヒアリングからVercelデプロイまで、6つのフェーズで完結する。

## トリガーフレーズ

- 「LPを作って」「ランディングページを作成」
- 「HPを作りたい」「ホームページ制作」
- 「Webページを作って」「サイトを作りたい」
- 「Pencilでデザインして実装」

## 前提条件

- Cursor IDE で ai-agent-camp を開いていること
- Pencil MCP が有効（.pen ファイル操作用）
- Node.js 18+ がインストール済み（Vercelデプロイ用）
- Gemini API キーが設定済み（diagram-generator 用）

## ワークフロー概要

```
Phase 1: ヒアリング（AskQuestion）
    ↓ サービス概要・ターゲット・訴求軸
Phase 2: 訴求整理
    ↓ ペルソナ・ベネフィット・コピー
Phase 3: WF作成
    ↓ ASCII WF + ビジュアルWF
Phase 4: Pencilデザイン
    ↓ .pen デザインファイル
Phase 5: コード実装
    ↓ HTML/CSS(Tailwind)/JS
Phase 6: Vercelデプロイ
    ↓ 公開URL
```

---

## Phase 1: ヒアリング（AskQuestion）

最初にAskQuestionToolを使って、制作するLP/HPの要件を構造的に収集する。

### Step 1-1: プロジェクト種別の確認

```json
{
  "title": "LP/HP制作ヒアリング",
  "questions": [{
    "id": "project_type",
    "prompt": "どのタイプのページを作成しますか？",
    "options": [
      {"id": "lp", "label": "LP（ランディングページ）- 1つのCTAに集中"},
      {"id": "hp", "label": "HP（ホームページ）- 複数セクション・ナビ付き"},
      {"id": "product", "label": "プロダクトページ - 機能紹介中心"},
      {"id": "event", "label": "イベント/キャンペーンページ"}
    ]
  }]
}
```

### Step 1-2: サービス/プロダクト情報

```json
{
  "title": "サービス情報",
  "questions": [
    {
      "id": "service_category",
      "prompt": "サービスのカテゴリを選んでください",
      "options": [
        {"id": "saas", "label": "SaaS / Webサービス"},
        {"id": "ec", "label": "ECサイト / 物販"},
        {"id": "consulting", "label": "コンサルティング / 士業"},
        {"id": "education", "label": "教育 / スクール"},
        {"id": "event", "label": "イベント / セミナー"},
        {"id": "portfolio", "label": "ポートフォリオ / 個人"},
        {"id": "other", "label": "その他"}
      ]
    },
    {
      "id": "design_tone",
      "prompt": "デザインのトーンを選んでください",
      "options": [
        {"id": "professional", "label": "プロフェッショナル・信頼感"},
        {"id": "modern", "label": "モダン・スタイリッシュ"},
        {"id": "playful", "label": "ポップ・親しみやすい"},
        {"id": "luxury", "label": "高級感・エレガント"},
        {"id": "minimal", "label": "ミニマル・シンプル"},
        {"id": "tech", "label": "テック・先進的"}
      ]
    }
  ]
}
```

### Step 1-3: 追加ヒアリング（自由入力）

AskQuestion の後、以下を自由入力で確認する:

- **サービス名**: 正式名称
- **キャッチコピー案**: あれば（なければ生成）
- **ターゲット**: 誰に向けたページか
- **主な訴求ポイント**: 3つ程度
- **参考サイト**: あればURL
- **CTAの目的**: 問い合わせ / 申し込み / 資料請求 / 購入 など

---

## Phase 2: 訴求整理

Phase 1 のヒアリング結果をもとに、以下のドキュメントを生成する。

### 出力: `output/lp-brief.md`

```markdown
# LP ブリーフ

## ペルソナ
- 名前: {例: 田中太郎}
- 年齢: {例: 35歳}
- 職種: {例: マーケティングマネージャー}
- 課題: {例: LP制作に時間がかかりすぎる}

## 訴求軸（ベネフィット3点）
1. {メインベネフィット}
2. {サブベネフィット1}
3. {サブベネフィット2}

## コピー
- ヘッドライン: {例: AIで、LP制作を10倍速く}
- サブヘッドライン: {例: ヒアリングからデプロイまで、すべてをAIがサポート}
- CTA文言: {例: 無料で始める}

## セクション構成
1. Hero（ヘッドライン + CTA）
2. Pain Points（課題提起）
3. Solution（ソリューション紹介）
4. Features（機能 / 特徴 3-4点）
5. Social Proof（実績 / お客様の声）
6. Pricing / Plan（料金・プラン）※オプション
7. FAQ（よくある質問）
8. Final CTA（最終アクション）
```

---

## Phase 3: WF（ワイヤーフレーム）作成

### Step 3-1: ASCII ワイヤーフレーム

テキストベースで各セクションの構造を設計する:

```
┌─────────────────────────────────┐
│           HEADER / NAV          │
├─────────────────────────────────┤
│                                 │
│     [Hero Image / Video]        │
│                                 │
│     ヘッドライン（H1）            │
│     サブヘッドライン              │
│     [ CTA ボタン ]              │
│                                 │
├─────────────────────────────────┤
│     Pain Points セクション       │
│   ┌─────┐ ┌─────┐ ┌─────┐     │
│   │課題1│ │課題2│ │課題3│     │
│   └─────┘ └─────┘ └─────┘     │
├─────────────────────────────────┤
│     Solution セクション          │
│   [画像]  説明テキスト           │
├─────────────────────────────────┤
│     Features セクション          │
│   ┌──────┐ ┌──────┐            │
│   │機能1 │ │機能2 │            │
│   └──────┘ └──────┘            │
│   ┌──────┐ ┌──────┐            │
│   │機能3 │ │機能4 │            │
│   └──────┘ └──────┘            │
├─────────────────────────────────┤
│     Social Proof                │
│     ★★★★★ お客様の声           │
├─────────────────────────────────┤
│     FAQ                         │
│     Q1 / A1                     │
│     Q2 / A2                     │
├─────────────────────────────────┤
│     Final CTA                   │
│     [ CTA ボタン ]              │
├─────────────────────────────────┤
│           FOOTER                │
└─────────────────────────────────┘
```

### Step 3-2: ビジュアルWF生成

diagram-generator を使ってビジュアルワイヤーフレームを生成:

```bash
uv run python tools/generate_diagram.py --topic "LP wireframe: {セクション構成}" --style minimalist
```

出力先: `output/images/lp-wireframe.png`

---

## Phase 4: Pencilデザイン

Pencil MCP を使って .pen デザインファイルを作成する。
.pen ファイルは暗号化されているため、Read/Grep ではなく必ず Pencil MCP ツールを使うこと。

### Step 4-0: Pencil エディターを開く

まず現在のエディター状態を確認する。ファイルが開いていなければ新規作成する。

```
# 1) エディター状態を確認
CallMcpTool: user-pencil / get_editor_state
  arguments: {}

# → ファイルが開いていない場合エラーが返る
# → 既にファイルが開いている場合はノード一覧が返る

# 2-A) 新規ドキュメントを作成する場合
CallMcpTool: user-pencil / open_document
  arguments: { "filePathOrTemplate": "new" }

# 2-B) 既存の .pen ファイルを開く場合
CallMcpTool: user-pencil / open_document
  arguments: { "filePathOrTemplate": "path/to/design.pen" }

# 3) 開いた後、再度 get_editor_state でノード構造を確認
CallMcpTool: user-pencil / get_editor_state
  arguments: {}
```

**重要**: `open_document` は Pencil アプリ内で対象ファイルを開く操作。
Cursor の MCP 設定で `user-pencil` が有効になっている必要がある。

### Step 4-1: LPデザインガイドライン取得

LP 特化のデザインルール（セクション構成、ヒーロー設計、フッター設計等）を取得する:

```
CallMcpTool: user-pencil / get_guidelines
  arguments: { "topic": "landing-page" }
```

このガイドラインには以下が含まれる:
- SaaS/LP の推奨セクション構成（Hero → Features → Social Proof → Pricing → FAQ → CTA → Footer）
- ヒーローセクションのベストプラクティス
- コンテンツ→ビジュアルの順序原則
- batch_design でのページコンテナ作成例

### Step 4-2: スタイルガイド取得

デザインのトーンに合ったスタイルガイドを取得する:

```
# 1) 使えるタグ一覧を確認
CallMcpTool: user-pencil / get_style_guide_tags
  arguments: {}

# → minimal, modern, clean, warm, tech, brutalist 等のタグが返る

# 2) ヒアリング結果のトーンに合うタグを選択して取得
CallMcpTool: user-pencil / get_style_guide
  arguments: { "tags": ["minimal", "clean", "whitespace", "website"] }
```

スタイルガイドには以下が含まれる:
- カラーシステム（背景色、テキスト色、アクセント色）
- タイポグラフィ（フォント、サイズ、ウェイト）
- スペーシング・角丸・シャドウの設定値
- コンポーネントパターン（ボタン、カード、ナビ等）

### Step 4-3: ページコンテナ作成

LP全体を包むフレームを `batch_design` で作成する:

```
# batch_design の operations はスクリプト形式で記述
CallMcpTool: user-pencil / batch_design
  arguments: {
    "operations": "page=I(document, {type: \"frame\", name: \"Landing Page\", placeholder: true, layout: \"vertical\", width: 1440, height: \"fit_content(4000)\", fill: \"#FFFFFF\", clip: true})"
  }
```

**batch_design 操作の基本構文:**

| 操作 | 構文 | 説明 |
|------|------|------|
| Insert | `foo=I("parentId", {...})` | 親ノードに子を挿入 |
| Copy | `bar=C("nodeId", "parentId", {...})` | ノードをコピー |
| Update | `U("nodeId", {...})` | プロパティ更新 |
| Replace | `R("nodeId", {...})` | ノードを置換 |
| Delete | `D("nodeId")` | ノード削除 |
| Move | `M("nodeId", "parentId", index)` | ノード移動 |
| Image | `G("nodeId", "ai", "prompt")` | AI画像生成 |

**重要ルール:**
- `placeholder: true` を作業中のフレームに必ず設定し、完了時に `false` にする
- テキストには必ず `fill` を設定する（デフォルトは透明で見えない）
- 1回の batch_design は最大 25 操作まで
- flexbox の子要素では `x`, `y` は無視される（`fill_container` / `fit_content` を使う）
- 画像ノード型は存在しない。フレームに `G()` で画像を適用する

### Step 4-4: セクションを順に作成

`batch_design` を使い、以下のセクションを1〜2セクションずつ作成する:

1. **Header**: ロゴ + ナビリンク + CTAボタン（横配置 `space_between`）
2. **Hero セクション**: バッジ、ヘッドライン、サブヘッドライン、CTAボタン（中央揃え）
3. **Features**: セクションヘッダー + 3カラムのカード（アイコン + タイトル + 説明）
4. **How It Works**: 番号付きの3ステップ（丸数字 + タイトル + 説明）
5. **Stats/Social Proof**: ダーク背景の実績数字 + 顧客の声カード
6. **Final CTA**: アクセントカラー背景 + ヘッドライン + CTAボタン
7. **Footer**: ダーク背景 + リンクカラム + コピーライト

各セクションの作成例（Hero）:

```
CallMcpTool: user-pencil / batch_design
  arguments: {
    "operations": "hero=I(\"pageId\", {type: \"frame\", name: \"Hero\", layout: \"vertical\", width: \"fill_container\", height: \"fit_content(600)\", padding: [100, 120], gap: 32, alignItems: \"center\", fill: \"#FFFFFF\"})\nheadline=I(hero, {type: \"text\", content: \"メインコピー\", fontFamily: \"Outfit\", fontSize: 56, fontWeight: \"700\", fill: \"#1A1918\", letterSpacing: -1, textAlign: \"center\", lineHeight: 1.2, textGrowth: \"fixed-width\", width: 800})\nsubline=I(hero, {type: \"text\", content: \"サブコピーの説明文\", fontFamily: \"Outfit\", fontSize: 18, fill: \"#6D6C6A\", textAlign: \"center\"})"
  }
```

### Step 4-5: デザイン確認・微調整

各セクション追加後にスクリーンショットで視覚確認する:

```
# ページ全体を確認
CallMcpTool: user-pencil / get_screenshot
  arguments: { "nodeId": "pageId" }

# 特定セクションを拡大確認
CallMcpTool: user-pencil / get_screenshot
  arguments: { "nodeId": "heroId" }

# レイアウト構造を数値で確認（位置ズレの検出に有効）
CallMcpTool: user-pencil / snapshot_layout
  arguments: { "parentId": "pageId", "maxDepth": 3 }
```

問題があれば `batch_design` の `U()` で修正する。
すべてのセクションが完成したら、placeholder を解除する:

```
CallMcpTool: user-pencil / batch_design
  arguments: { "operations": "U(\"pageId\", {placeholder: false})" }
```

---

## Phase 5: コード実装

Pencilデザインを実際に動くHTML/CSS/JSに変換する。

### Step 5-1: コード化ガイドライン取得

```
CallMcpTool: user-pencil / get_guidelines
  arguments: { "topic": "code" }

CallMcpTool: user-pencil / get_guidelines
  arguments: { "topic": "tailwind" }
```

### Step 5-2: プロジェクト構造

```
lp-project/
├── index.html          # メインHTML
├── css/
│   └── style.css       # カスタムCSS（Tailwind CDN使用）
├── js/
│   └── main.js         # インタラクション
├── images/             # 画像アセット
└── package.json        # Vercelデプロイ用
```

### Step 5-3: 実装のポイント

- **Tailwind CSS CDN**: `<script src="https://cdn.tailwindcss.com"></script>` で即座に利用
- **レスポンシブ**: モバイルファーストで実装（sm: / md: / lg: ブレークポイント）
- **アニメーション**: スクロールで要素がフェードインする Intersection Observer
- **フォーム**: Formspree や Netlify Forms 等の外部サービス連携

### Step 5-4: ブラウザ確認

cursor-ide-browser MCP を使って表示確認:

```
CallMcpTool: cursor-ide-browser / browser_navigate
  arguments: { "url": "file:///path/to/lp-project/index.html" }
```

---

## Phase 6: Vercelデプロイ

### Step 6-1: Vercel CLI インストール

```bash
npm i -g vercel
```

### Step 6-2: プレビューデプロイ

```bash
vercel lp-project
```

初回はログイン・プロジェクト設定が求められる。

### Step 6-3: 本番デプロイ

```bash
vercel --prod
```

### Step 6-4: カスタムドメイン（オプション）

```bash
vercel domains add your-domain.com
```

---

## 3段階の体験

このスキルは3つのレベルで活用できる:

### Stage 1: テキストベースLP（初級）
- AskQuestion でヒアリング
- ASCII WF で構造設計
- HTML/CSS を直接生成（Pencilなし）
- ローカルで確認

### Stage 2: HP制作（中級）
- 複数ページ構成（トップ + サブページ）
- ナビゲーション実装
- diagram-generator でビジュアルWF
- レスポンシブ対応

### Stage 3: Pencilデザイン → LP（上級）
- Pencil MCP でプロのデザイン作成
- デザイン→コード変換
- アニメーション・インタラクション
- Vercelデプロイで公開

---

## 関連スキル

- **diagram-generator**: WF・構造図の生成
- **nanobanana**: Hero画像・OGP画像の生成
- **banner-creator**: SNS告知用バナー作成
- **screenshot-annotator**: デザインレビュー用注釈追加