社内勉強会 / 60分

Claude Code と
売れるLPの作り方

AIを使いこなして、営業に使えるLPを最速で作るための社内ナレッジをまとめました。

2026年3月22日 | 大西 翔三
Part 1 / 30min

Claude Code — 実務で使い倒す方法

ターミナルで動くAIコーディングアシスタント。指示を出すと自分でファイルを読み書きし、外部サービスと連携して完成品を納品する。

Claude Codeとは?

ChatGPTやブラウザ版Claudeとは根本的に違う、「仕事をするAI」。

ChatGPT / ブラウザ版Claude
  • チャット画面で会話する
  • コードはコピペして使う
  • 1回の会話が長いと途切れる
  • ファイルは手動でアップロード
Claude Code
  • ターミナルで直接動く
  • ファイルの読み書きを自分でやる
  • 100万トークンの長い会話OK
  • プロジェクト全体を見渡せる
一言で言うと

指示を出すと、自分でファイルを読み、コードを書き、コマンドを実行し、完成品を納品してくれる。「会話するAI」ではなく「仕事をするAI」。

セットアップ & 基本操作

インストール(1行)

npm install -g @anthropic-ai/claude-code

起動

# プロジェクトフォルダに移動して
cd ~/Desktop/insight-lab

# claude と打つだけ
claude

VS Codeから使う場合

拡張機能「Claude Code」をインストール → Cmd+Shift+P → 「Claude Code: Open」

基本操作

操作やり方
指示を出す普通に日本語で打つ
ファイルを読ませるこのファイル読んで: src/index.ts
画像を見せるパスを貼る or ドラッグ&ドロップ
ツール実行の許可y で許可 / n で拒否
会話をリセット/clear
計画モードで相談/plan(実行せず計画だけ立てる)

CLAUDE.md — AIへの指示書

Claude Codeの最大の武器。プロジェクトのルート or 各フォルダに置くと、会話のたびに自動で読み込まれる。

📋
何を書く?

プロジェクト概要、使うツール、禁止事項、ワークフロー、API情報など。

🎯
なぜ重要?

毎回同じ説明が不要に。新人に業務マニュアルを渡すのと同じ。

📂
置く場所

ルートに1つ + 各事業部フォルダに1つ。開いたフォルダのCLAUDE.mdが読まれる。

インサイトラボでの構成

insight-lab/
├── CLAUDE.md # 事業横断ルール(API鍵・共通ルール)
├── lp-production/
│ └── CLAUDE.md # LP事業部専用(9フェーズ・品質基準)
├── advertising/
│ └── CLAUDE.md # 広告事業部専用
└── research/
└── CLAUDE.md # リサーチ事業部専用
CLAUDE.mdに書いてはいけないもの

パスワード・個人情報・顧客の機密情報。Gitにコミットされるため、公開リポジトリでは特に注意。

MCP — 外部ツール連携

MCP (Model Context Protocol) = AIが外部サービスのAPIを直接叩ける仕組み。

🔍
Perplexity

Web検索・最新情報の取得

🤖
Gemini

下書きライティング・画像生成

📅
Google Calendar

スケジュール確認・予定作成

📝
Notion

DB操作・ページ作成・検索

✉️
Gmail

メール検索・下書き作成

🎨
Figma

デザインファイル読み取り

つまり

「Perplexityで競合調べて、Geminiで原稿書いて、Cloudflareにデプロイして」を1回の指示で全部やってくれる。人間はチェックと承認だけ。

スキル — 専門知識のプラグイン

Claude Codeに「専門家の知識」を追加できる仕組み。スラッシュコマンドで呼び出す。

スキルできること呼び出し
copywritingCRO原則に基づくコピーライティング/copywriting
ads-googleGoogle Ads 74項目監査/ads-google
ads-metaMeta Ads 46項目監査/ads-meta
cro-optimizationLP改善提案/cro-optimization
seo-aeo-auditSEO/AEO最適化/seo-aeo-audit
storybrand-messaging物語構造でメッセージング設計/storybrand-messaging

新しいスキルを探す: /find-skills キーワード

実演: LP1本が完成するまで

インサイトラボのLP制作パイプライン。9フェーズで「1行の指示」から「公開済みLP」まで。

1. リサーチPerplexity
2. ポジショニングClaude
3. ライティングGemini
4. 編集長チェックClaude
5. 大西確認人間
6. 画像生成Nano Banana
7. LP実装Claude
8-9. 提案&デプロイCloudflare

実際の指示

# lp-production/ フォルダで claude を起動して、これだけ打つ

もみみん(釧路)のLPを作って。業種は整体。
サイトは https://momimin.com

# → Phase 1-4 が自動で走る
# → Phase 5 で停止。人間が確認して OK を出す
# → Phase 6-9 が自動で走り、公開URLが出る
成果物の例

もみみん(釧路) — momimin-kushiro.pages.dev
リサーチから公開まで約43分。人間の作業は「確認してOK出すだけ」。

実務Tips & やってはいけないこと

指示は具体的に

✘ 「いい感じにして」
✔ 「CTAの色を#D97706に、文言を"無料相談はこちら"に」

CLAUDE.mdを育てる

新しいルールが決まったら追記。チームの知見がAIに蓄積されていく。

/plan で計画を立てさせる

大きなタスクの前に方針を確認。いきなり実行させると手戻りが多い。

途中で方向修正する

違うと思ったらすぐ「それじゃなくて〇〇」。AIは怒らない。

メモリ機能を使う

「これ覚えておいて」で次回以降にも反映。好みや判断基準を学習させる。

Git連携を活用

「コミットして」「PRを作って」も対応。差分確認もやってくれる。

やってはいけないこと
  • 丸投げして確認しない — AIは間違える。必ず人間がチェック
  • 機密情報をそのまま貼る — APIキーは環境変数 or CLAUDE.mdで管理
  • 1回の会話で全部やらせる — 長すぎると精度が落ちる。区切りでOK
  • 捏造に気づかない — 架空の統計・口コミが出たら即修正
Part 2 / 30min

売れるLPは「構造」で決まる

高CVR LPの設計原則と、インサイトラボの制作メソッド。

LPとホームページの違い

ホームページ
  • 会社情報・事業紹介・採用…色々載せる
  • メニューからどこにでも行ける
  • 目的: 情報を網羅する
  • ゴールが分散する
LP(ランディングページ)
  • 1ページ = 1ゴール
  • ナビゲーションなし。上から下に読むだけ
  • 目的: 行動させる
  • ゴールに向かって一直線
なぜ中小企業にLPが必要か

広告やSNSから来る人は「今すぐ解決したい」人。ホームページに飛ばすと迷って離脱する。LPは「1つの悩みに1つの解決策」を最短距離で伝えるページ。

5秒で勝負が決まる

ファーストビュー(スクロールしないで見える範囲)が全て。訪問者の73%はここだけ見て離脱する。

ファーストビュー 4つの必須要素

1. 何のサービスか

1秒で業種・サービスが分かるキャッチコピー

2. 誰向けか

エリア名・年代・悩みが含まれている

3. 次のアクション

CTAボタンがスクロールなしで見える

4. 信頼シグナル

口コミ数・評価・実績が1つ以上ある

よくある失敗
  • 「笑顔あふれる毎日を」みたいな何屋かわからないポエム
  • ファーストビューが巨大な写真だけでテキストがない
  • CTAボタンがページ最下部にしかない

売れるLPの黄金構成(9セクション)

StoryBrand物語構造 × CRO原則。LPは「お店の紹介」ではなく「お客様の物語」。

1
ヒーロー(ファーストビュー)

キャッチコピー + 信頼数値 + CTA。5秒で「何を・誰に・なぜ」が伝わる

2
悩み共感

「こんなお悩みありませんか?」3〜5個。外的問題+内的問題(感情)まで言語化

3
解決策(特徴・強み)

店舗の特徴を3つ。「なぜこの店が解決できるのか」を数値付きで

4
施術/サービスの流れ

STEP形式で視覚化。「行ったらどうなるか」の不安を解消

5
お客様の声

写真付き3〜4件。Google口コミの言葉をそのまま活用。捏造NG

6
スタッフ・院長紹介

顔写真 + 資格 + 経歴 + 想い。「誰が施術するか」で信頼が変わる

7
メニュー・料金

分かりやすい料金表。初回特典があれば強調

8
FAQ

アコーディオン形式で5問。「でも…」という反論に先回り

9
アクセス + 最終CTA

Googleマップ埋め込み + 営業時間 + 最後の一押し

StoryBrandのエッセンス

主人公(お客様)が悩みを持ち → ガイド(お店)が共感し導き → 行動した結果悩みが解決する。この物語を上から下に読む構造がLPの本質。

CTAの鉄則

CTA(Call to Action)= 行動を促すボタン。LPの生命線。

\ 初回限定 50%OFF /
WEB予約はこちら >
24時間受付 / 当日予約OK
NG例
  • 「送信」「詳しくはこちら」
  • 背景と同系色で目立たない
  • ページ最下部にしかない
OK例
  • 「無料で相談する」「WEB予約はこちら」
  • 太字 + 矢印 + シマーエフェクト
  • 3箇所 + スティッキーCTA

「内的問題」を言語化する

売れるLPと普通のLPの最大の差。症状だけでなく「感情」まで書く。

外的問題だけ(普通のLP)

「肩こりがつらい」

症状の説明だけ。「知ってるよ」としか思わない。

内的問題まで(売れるLP)

「また今日もつらいのか…と思う毎朝の憂鬱」

感情に触れる。「わかってくれてる」と感じて読み進める。

業種別の例

業種外的問題内的問題(感情)
整体腰が痛い「このまま悪化したらどうしよう」という不安
美容サロン肌荒れすっぴんに自信が持てない恥ずかしさ
パーソナルジム体重が増えた去年の服が入らない自分への嫌悪感
スクールスキルがない「今のままでいいのか」という焦り

5人の敵 — 離脱を防ぐ検証法

完成したLPを5つのペルソナ視点でセルフチェック。1人でも「離脱する」と思ったら修正。

8秒スキャナー

スマホで3秒で判断。何屋か分かるか?

🔍
比較タブ収集家

他店と並べて比較中。違いは明確か?

🤨
焼けたニヒリスト

信頼ゼロ。証拠は十分か?

困惑した離脱者

分からないと即去る。専門用語はないか?

😴
先延ばし者

「後で見よう」で消える。今動く理由は?

使い方

LP完成後、この5人になりきって読む。インサイトラボではPhase 4(編集長チェック)でAIが自動実行。

業種別デザインの勘所

業種カラー軸FV必須注意
美容サロンピンク(若年層)/ ベージュ×ゴールド(高級感)キャンペーン + 予約薬機法
整体・治療院グリーン×ネイビー院長の顔写真医療法
パーソナルジムダーク(男性)/ ライト(女性)ビフォーアフター食事指導要否
スクールオレンジ×ホワイト「初心者○%」の数値STEP式カリキュラム

共通ルール

法令に注意
  • 薬機法(美容系): 「効果がある」→「○○をサポート」
  • 医療法(整体系): 「治る」→「改善」「緩和」。「治療」→「施術」

インサイトラボの制作フロー

9フェーズ・約43分でLP1本が完成。人間の作業は「Phase 5の確認」だけ。

Phaseやること担当時間
1競合リサーチ・地域分析Perplexity + Claude5分
2ポジショニング・コンセプト設計Claude3分
3原稿ライティングGemini3分
4編集長チェック(CRO 13原則 + 5ペルソナ検証)Claude3分
5大西が確認・承認人間10分
6画像生成Nano Banana Pro5分
7HTML実装 + SEO + 品質監査37項目Claude10分
8提案ページ + 営業メッセージClaude3分
9Cloudflare PagesにデプロイClaude1分
従来比

制作会社に頼むと2〜4週間 + 数十万円。インサイトラボでは1時間以内 + 全自動。

LP納品前チェックリスト

ファーストビュー

全体構成

技術

LPは「お店の紹介」ではなく「お客様の物語」

まとめ

テーマポイント
Claude Codeターミナルで動く「仕事をするAI」。CLAUDE.md + MCP + スキルで精度を上げる
ファーストビュー5秒で「何を・誰に・なぜ」+ CTAが見える
黄金構成Hero → 悩み → 解決策 → 流れ → 声 → 紹介 → 料金 → FAQ → CTA
内的問題症状だけでなく「感情」まで言語化すると刺さる
CTA1段厳守 / 同じデザイン / 3箇所以上 / スティッキー
制作フロー9フェーズ・約43分。人間は確認だけ

質問があればいつでもどうぞ。
手を動かしたい人は、Claude Codeで /plan から始めてみてください。