lp-designer

Imported from minicoohei/ai-agent-camp (skills/lp-designer/SKILL.md). Install upstream with npx skills add minicoohei/ai-agent-camp --skill lp-designer. Copyright stays with the author.

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: プロジェクト種別の確認

{
  "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: サービス/プロダクト情報

{
  "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

# 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 を使ってビジュアルワイヤーフレームを生成:

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 操作の基本構文:

重要ルール:

• 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 インストール

npm i -g vercel

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

vercel lp-project

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

Step 6-3: 本番デプロイ

vercel --prod

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

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: デザインレビュー用注釈追加