/start-13-4

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-3"]
duration: "約30分"
level: "intermediate"
tags: ["lp", "html", "tailwind", "implementation"]
nonInteractiveMode: incompatible

🎓 Lesson 13-4: 実際に動くLP作成（HTML/CSS/JS）

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

**Lesson 13-4: LP実装** へようこそ！

| 項目 | 内容 | |------|------| | ゴール | Pencilデザインを実際に動くHTML/CSS(Tailwind)/JSに変換する | | 所要時間 | 約30分 | | 使うスキル | lp-designer, Pencil MCP（code/tailwindガイドライン）, cursor-ide-browser | | 前提条件 | Lesson 13-3 完了（.pen デザインファイルが存在） | | 教材ページ | [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. コード化ガイドラインの取得 2. プロジェクト構造の作成 3. HTML/CSS(Tailwind)/JS の実装 4. レスポンシブ・アニメーション対応 5. ブラウザでの動作確認

セッション終了時には、実際にブラウザで動くLP/HPが完成しています。

> **💡 ヒント**: 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 → .pen ファイルの存在確認) (view_html → 教材ページのパスを案内) (different_lesson → モジュール一覧を表示)

---

🚀 Step 1: コード化ガイドラインの取得

Pencilデザインをコードに変換するためのガイドラインを取得します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 1: コード化ガイドライン",
  "questions": [{
    "id": "tech_stack",
    "prompt": "実装に使う技術スタックを選んでください",
    "options": [
      {"id": "tailwind", "label": "HTML + Tailwind CSS（推奨・CDN利用）"},
      {"id": "vanilla", "label": "HTML + バニラCSS"},
      {"id": "react", "label": "React + Tailwind CSS"},
      {"id": "nextjs", "label": "Next.js + Tailwind CSS"}
    ]
  }]
}

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

Pencil MCPからコード化に必要なガイドラインを取得してください。

手順:
1. get_guidelines(topic="code") でコーディングガイドラインを取得
2. get_guidelines(topic="tailwind") でTailwind固有のルールを取得
3. .pen ファイルのデザインを batch_get で読み込み
4. デザイン→コード変換の方針をまとめる

特に以下を確認:
- カラーコード（Tailwindのクラス名に変換）
- フォントサイズ（text-sm, text-lg 等へのマッピング）
- 間隔・余白（p-4, m-8 等へのマッピング）
- レイアウト構造（flex, grid の使い方）

**期待される結果**: コード変換に必要な情報が整理されます。

---

🚀 Step 2: プロジェクト構造の作成

LPのファイル構造を作成します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 2: プロジェクト構造",
  "questions": [{
    "id": "step_action",
    "prompt": "このステップをどうしますか？",
    "options": [
      {"id": "practice", "label": "このまま進める"},
      {"id": "review", "label": "例だけ確認する"},
      {"id": "skip", "label": "スキップする"}
    ]
  }]
}

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

LP用のプロジェクト構造を作成してください。

ディレクトリ作成:
mkdir -p output/lp-project/images
mkdir -p output/lp-project/css
mkdir -p output/lp-project/js

ファイル作成:
- output/lp-project/index.html   # メインHTML
- output/lp-project/css/style.css # カスタムCSS
- output/lp-project/js/main.js   # インタラクション
- output/lp-project/package.json  # Vercelデプロイ用

package.json の内容:
{
  "name": "lp-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "npx serve ."
  }
}

**期待される結果**: LP用のプロジェクト構造が作成されます。

---

🚀 Step 3: HTML/CSS(Tailwind)/JS 実装

Pencilデザインをもとにコードを実装します。

**AskQuestionの設定例:**

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

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

Pencil の .pen ファイルと output/lp-brief.md をもとに、
output/lp-project/index.html を実装してください。

要件:
1. Tailwind CSS CDN を使用
   <script src="https://cdn.tailwindcss.com"></script>

2. セクション構成（output/lp-brief.md に基づく）:
   - Header: ロゴ + ナビ + CTAボタン（固定ヘッダー）
   - Hero: ヘッドライン + サブヘッドライン + CTA + Hero画像
   - Pain Points: 3カラムのアイコンカード
   - Solution: 2カラム（テキスト + 画像）
   - Features: 3-4カラムの機能カード
   - Social Proof: お客様の声（カルーセルまたはグリッド）
   - FAQ: アコーディオン形式
   - Final CTA: 背景色付きCTAセクション
   - Footer: リンク群 + コピーライト

3. デザインの忠実な再現:
   - Pencilのスタイルガイドの色・フォントを使用
   - 余白・間隔をデザインに合わせる
   - ボタンスタイル（角丸、ホバーエフェクト）

4. レスポンシブ対応:
   - モバイルファースト（sm: → md: → lg:）
   - スマホでは1カラム、PCでは2-4カラム

5. OGP・メタタグ:
   - title, description, og:image を設定

美しくモダンなデザインで実装してください。

**期待される結果**: 完全なHTML/CSS/JSが実装されます。

---

🚀 Step 4: アニメーション・インタラクション追加

スクロールアニメーションとインタラクションを追加します。

**AskQuestionの設定例:**

{
  "title": "🚀 Step 4: アニメーション追加",
  "questions": [{
    "id": "animation_level",
    "prompt": "アニメーションのレベルを選んでください",
    "options": [
      {"id": "minimal", "label": "最小限（ホバーエフェクトのみ）"},
      {"id": "standard", "label": "標準（スクロールフェードイン + ホバー）"},
      {"id": "rich", "label": "リッチ（パララックス + カウンター + スライドイン）"}
    ]
  }]
}

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

output/lp-project/js/main.js にアニメーションを追加してください。

追加する機能:
1. スクロールフェードイン（Intersection Observer）
   - 各セクションがビューポートに入ったらフェードイン
   - アニメーション: opacity 0→1, translateY 20px→0

2. スムーズスクロール
   - ナビリンクのクリックでスムーズスクロール

3. FAQアコーディオン
   - 質問クリックで回答を展開/折りたたみ

4. ヘッダー固定
   - スクロール時にヘッダーに影を追加

5. カスタムCSS（output/lp-project/css/style.css）
   - アニメーション用のCSS変数とキーフレーム
   - ダークモード対応（オプション）

外部ライブラリは使わず、バニラJSで実装してください。

**期待される結果**: アニメーション・インタラクションが追加されます。

---

🚀 Step 5: ブラウザでの動作確認

作成したLPをブラウザで確認します。

**AskQuestionの設定例:**

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

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

作成したLPをブラウザで確認してください。

手順:
1. ローカルサーバーを起動
   cd output/lp-project && npx serve .

2. ブラウザで http://localhost:3000 を開く
   （cursor-ide-browser MCPを使用）

3. 以下を確認: