/start-13-3

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-2", "setup-pencil"]
duration: "約30分"
level: "intermediate"
tags: ["lp", "pencil", "design", "mockup"]
nonInteractiveMode: deferred

🎓 Lesson 13-3: デザインファイル作成（Pencil MCP）

📍 このセッションでやること

**Lesson 13-3: デザインファイル作成** へようこそ！

| 項目 | 内容 | |------|------| | ゴール | Pencil MCP を使ってLP/HPのデザインファイル（.pen）を作成する | | 所要時間 | 約30分 | | 使うスキル | lp-designer, Pencil MCP（user-pencil） | | 前提条件 | Lesson 13-2 完了（output/lp-wireframe.txt が存在）、Pencil MCP セットアップ済み（/setup-pencil） | | 教材ページ | [Module 13: LP/HP制作](https://ai-agent.camp/ja/course/module-13) を並行参照 |

> **💡 ツール情報**: このレッスンでは Pencil MCP を使用します。現在のワークスペース、Claude Code（CLI/デスクトップ）のいずれでも利用可能です。Codex CLI 等の一部環境では `request_user_input is not supported` エラーが出る場合があります。その場合は「代替ワークフロー」セクションを参照してください。

**このセッションの流れ:** 1. Pencil で `output/lp/lp-design.pen` にデザインファイルを作成 2. LPデザインガイドラインの取得 3. スタイルガイドの適用 4. セクションごとのデザイン作成 5. デザイン確認とスクリーンショット書き出し

セッション終了時には、プロ品質のデザインファイルが完成しています。

> **💡 ヒント**: AIの応答が途中で止まった場合は「続きを表示して」「止まってるよ」と入力すると再開します。ツールによって応答が途中で止まることがありますが、故障ではありません。

---

🎯 準備チェック

まずは準備が整っているか確認しましょう。

**AskQuestionの設定:**

{
  "title": "🎯 セッション開始前の確認",
  "questions": [{
    "id": "readiness",
    "prompt": "準備はできていますか？",
    "options": [
      {"id": "ready", "label": "準備OK！始めましょう"},
      {"id": "check_prereq", "label": "前提条件を確認したい"},
      {"id": "view_html", "label": "先に教材ページを見たい"},
      {"id": "different_lesson", "label": "別のレッスンに移動したい"}
    ]
  }]
}

(ready → Step 1へ) (check_prereq → Pencil MCP の接続確認) (view_html → 教材ページのパスを案内) (different_lesson → モジュール一覧を表示)

---

🚀 Step 1: 新規Pencilドキュメント作成

Pencil MCP で新しい .pen ファイルを作成します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 1: Pencilドキュメント作成",
  "questions": [{
    "id": "step_action",
    "prompt": "このステップをどうしますか？",
    "options": [
      {"id": "practice", "label": "このまま進める"},
      {"id": "review", "label": "例だけ確認する"},
      {"id": "skip", "label": "スキップする"}
    ]
  }]
}

**選択後の案内（例）**: 入力内容:

Pencil MCPでLPデザイン用の新規ドキュメントを作成してください。

手順:
1. mkdir -p output/lp で保存先ディレクトリを作成
2. get_editor_state() で現在の状態を確認
3. open_document("output/lp/lp-design.pen") で .pen ファイルを作成
4. ファイルが開いたことを確認

保存先: output/lp/lp-design.pen

**期待される結果**: `output/lp/lp-design.pen` にデザインファイルが作成・オープンされます。

---

🚀 Step 2: LPデザインガイドライン取得

Pencil のランディングページ用ガイドラインを取得します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 2: デザインガイドライン",
  "questions": [{
    "id": "step_action",
    "prompt": "このステップをどうしますか？",
    "options": [
      {"id": "practice", "label": "このまま進める"},
      {"id": "review", "label": "例だけ確認する"},
      {"id": "skip", "label": "スキップする"}
    ]
  }]
}

**選択後の案内（例）**: 入力内容:

Pencil MCPでLPデザインのガイドラインを取得してください。

手順:
1. get_guidelines(topic="landing-page") でLPデザインルールを取得
2. ガイドラインの要点をまとめて表示
3. 特に重要なルール（レイアウト、タイポグラフィ、カラー）をハイライト

このガイドラインに従ってデザインを進めます。

**期待される結果**: LPデザインのルールとベストプラクティスが表示されます。

---

🚀 Step 3: スタイルガイド適用

デザイントーンに合ったスタイルガイドを選択・適用します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 3: スタイルガイド選択",
  "questions": [{
    "id": "step_action",
    "prompt": "このステップをどうしますか？",
    "options": [
      {"id": "practice", "label": "このまま進める"},
      {"id": "review", "label": "例だけ確認する"},
      {"id": "skip", "label": "スキップする"}
    ]
  }]
}

**選択後の案内（例）**: 入力内容:

output/lp-brief.md からデザイントーンを読み取り、
Pencil MCPでスタイルガイドを適用してください。

手順:
1. get_style_guide_tags でタグ一覧を取得
2. ブリーフのデザイントーンに合うタグを選択
3. get_style_guide(tags=["landing-page", "{トーン}", "{カテゴリ}"]) でスタイル取得
4. スタイルの配色・フォント・レイアウトパターンを確認

選択したスタイルの概要をまとめてください。

**期待される結果**: デザイントーンに合ったスタイルガイドが適用されます。

---

🚀 Step 4: セクションデザイン作成

batch_design を使って各セクションを作成します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 4: セクションデザイン",
  "questions": [{
    "id": "design_approach",
    "prompt": "デザインのアプローチを選んでください",
    "options": [
      {"id": "all_at_once", "label": "全セクションを一括で作成"},
      {"id": "step_by_step", "label": "1セクションずつ確認しながら作成"},
      {"id": "hero_first", "label": "まずHeroセクションだけ作成"}
    ]
  }]
}

**選択後の案内（例）**: 入力内容:

output/lp-brief.md と output/lp-wireframe.txt を参照し、
Pencil MCP の batch_design を使って LP のデザインを作成してください。

以下のセクションを順番に作成:

1. **Hero セクション**
   - 背景: グラデーションまたは画像
   - ヘッドライン（H1）: ブリーフのコピーを使用
   - サブヘッドライン
   - CTAボタン（目立つ色、角丸）
   - Hero画像またはモックアップ

2. **Pain Points セクション**
   - セクションタイトル
   - 3つの課題カード（アイコン + テキスト）

3. **Solution セクション**
   - 左: 説明テキスト（ベネフィット3点）
   - 右: サービスのスクリーンショットまたはイラスト

4. **Features セクション**
   - セクションタイトル
   - 3-4つの機能カード（アイコン + タイトル + 説明）

5. **Social Proof セクション**
   - お客様の声カード（写真 + 名前 + 会社 + コメント）
   - 星レーティング

6. **FAQ セクション**
   - アコーディオン形式の Q&A 3-5個

7. **Final CTA セクション**
   - 背景色付き
   - ヘッドライン + CTAボタン

8. **Footer**
   - リンク群 + コピーライト

各セクション作成後に get_screenshot で確認してください。

**期待される結果**: 全セクションがデザインされた .pen ファイルが完成します。

---

🚀 Step 5: デザイン確認と調整

完成したデザインを視覚的に確認します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 5: デザイン確認",
  "questions": [{
    "id": "step_action",
    "prompt": "このステップをどうしますか？",
    "options": [
      {"id": "practice", "label": "このまま進める"},
      {"id": "review", "label": "例だけ確認する"},
      {"id": "skip", "label": "スキップする"}
    ]
  }]
}

**選択後の案内（例）**: 入力内容:

Pencil MCP の get_screenshot でデザイン全体のスクリーンショットを取得し、
以下の観点でレビューしてください:

1. **一貫性**: 色・フォント・間隔がスタイルガイドと合っているか
2. **視覚的階層**: ヘッドラインが目立ち、CTAが見つけやすいか
3. **余白**: セクション間の余白が適切か
4. **コントラスト**: テキストの可読性は十分か
5. **CTA**: ボタンが目立ち、クリックしたくなるか

問題があれば batch_design で修正し、再度 get_screenshot で確認してください。

最後に、完成したデザインのスクリーンショットを保存してください:
1. mkdir -p output/lp/design
2. get_screenshot() でフルページのスクリーンショットを取得
3. output/lp/design/lp-full.png に保存

**期待される結果**: デザインがレビュー・調整され、`output/lp/design/lp-full.png` にスクリーンショットが保存されます。

---

🔄 代替ワークフロー（非GUI環境向け）

Pencil MCP が利用できない環境（Claude Code、Codex CLI、SSH等）では、HTML + Tailwind CSS で直接デザインモックアップを作成します。

1. `output/lp-wireframe.txt` と `output/lp-brief.md` を参照してデザイン要件を確認 2. `output/lp-project/` に HTML + Tail