外注30万円のサイトを、
自分の手で。
LP・会員サイト・予約システム。
全部 Claude Code 1本で作れる時代の制作フローを、私の実例で全部見せます。
今日のゴール
「自分のLP・会員サイト」を、外注せずに自分で立ち上げられる状態になる。
構造を理解する
頭に入れる
自分で運べる
先に結論。
この1ヶ月、私は全部
Claude Code で作った。
講義で話す内容は理論じゃなく、動いている実物の作り方。
まずは私が直近1ヶ月で立ち上げたサイト群から見せます。
直近1ヶ月で動いた4サイト
作っているのは私一人。すべて Claude Code で書き、Cloudflare に乗せている。QRをスマホで読むと実物が開きます（一部は認証ゲートかかってます）。
サイト制作の市場価格と現実
- 納期は2〜4週間
- 修正のたびに再見積もり
- 会員サイトは別途50万〜100万円
- 運用も外注に握られる
- その日のうちに本番URL発行
- 修正は一言で即反映
- 会員サイトもLPも同じスタック
- 運用主導権が手元に残る
「外注しないと作れない」は、もう古い前提。今日はその具体的な手順を全部開示します。
作る前に、
サイトの中身を知る。
いきなり手を動かす前に、まずサイトの分類とサイトの内側の構造を押さえる。
ここを誤ると、設計を何度もやり直すことになります。
サイトは2種類に分かれる
構造：1ページ完結 / 認証・タグ付けあり（友だち化のため）
例：個別相談会LP・教科書LP
構造：複数ページ / 認証ゲート必須 / DB必須
例：classroom・料理公式LINEサイト
誤解しがちポイント：「LPは認証なし」ではない。私のLPは全部、LIFF経由でリストインや友だち化を取りに行く設計。
違いは「1ページで完結するか」と「継続提供するか」。両方必要な場合はLP→会員サイトの順に作る。
サイトは飲食店と同じ構造
どんなサイトも、内側はフロントとバックに分かれる。
飲食店で例えると、ホール・調理場と仕込み・伝票・在庫管理の関係です。
LPはホールだけで成り立つ。会員サイトはホール+裏方の両方が要る。
5ステップワークフロー（次章）は主にフロント側の作り方。バックエンドは Chapter 04 で扱います。
ここからが本題。
5ステップで作る。
参考元は YouTube「外注なら30万のWebサイト、Claude Design × GPT image 2 で作ってみた」(Shin Coding Tutorial)。
このフローを私が実案件で叩いて磨いたものを共有します。
5ステップ全体マップ
核心は STEP 1 と 2。次のスライドで「いいサイトの正体」を先に共有します。それを知らないと、5ステップは形だけの真似で終わる。
いいサイトの正体は、素材の数
「きれいなサイト」「AI感のないLP」の正体は、レイアウトの美しさじゃない。
使われている素材の数と質で、8割が決まっている。
- 背景は単色のグラデのみ
- 装飾図形・アイコンなし
- 写真は1枚もない
- 抽象図形・装飾パターン
- カスタムアイコン・ロゴ
- 人物・商品イラスト
だから STEP 1〜3 は「素材を作って・抜いて・揃える」工程に全力を使う。素材数 = サイトの個性。
Claude Design単体だとAI感が出る理由は、素材を渡してないから。逆に素材さえ揃えば、誰が作っても外注クオリティに届く。
GPT image 2 でLPモック生成
最初の一手は ChatGPT の画像生成（GPT image 2）で、LPの完成イメージを1枚絵にする。
ここで使うのは構造化プロンプト。「いい感じに」で投げない。
② 業種・ターゲット
③ トンマナ（ポップ／落ち着き／プロ）
④ デザイン要件（不規則な図形・柔らかい抽象形状）
⑤ 含めるセクション
ふんわり指示でも動くが、構造化した方が再現性が桁違いに上がる。
同じ画像から素材だけ抜く
STEP 1 で作ったモック画像を、もう一度 GPT に渡して素材抽出させる。
前スライドで言った「素材数」を確保する工程。ここを飛ばすとAI感が消えない。
と指示すると、後工程の切り抜きが安定する。
「他に必要な要素は？」と聞き返すと足してくれる。30個以上確保したい。
Claude で素材を分割・透過
STEP 2 で出来た「素材まとめ画像」を、今度は Claude（Web版 or Claude Code）に渡して1個ずつに分割＋透過PNG化させる。
Claude は画像処理スクリプトを書いて実行するため、確実に1個ずつ独立した透過PNGとして出てくる。
Claude Design で一発実装
Claude Design に、LPモック画像と素材フォルダをドラッグ＆ドロップ。
「上記のLPデザインと素材を渡したので忠実に作って」と一言で投げる。
・STEP 3 の 素材フォルダ（assets / icons）
・「忠実に再現して」の一言
これが一番速い。
注意：Claude Design は週次の利用上限が厳しい。重い修正は早めに Claude Code へ移行する。骨組みが出来た時点でハンドオフするのが正解。
Claude Code で仕上げて公開
Claude Design の右上「Share → Hand to Claude Code」でコマンドをコピー。
ローカルディレクトリに貼り付けると、HTML一式が降りてくる。ここから先が私たちの主戦場。
・スマホ表示を最優先で詰める（朝倉ルール）
・本番URLまで一気通貫
/frontend-design スキルでセクション単位の差し替えを依頼すると、テンプレ感が抜ける。
5ステップの先に、
私が必ず足す4層。
外側のデザインだけで終わると「ただ綺麗なLP」で止まる。
事業に効くサイトにするためのバックエンド側の追加レイヤーを共有します。
サイトを置く場所はCloudflare
作ったサイトは、どこかの「土地」に置かないと公開できない。
Cloudflareは、世界一等地のビルを無料で貸してくれる大家さん。これ以外を選ぶ理由がない。
Cloudflareなら家賃ゼロ、世界中の人が来ても回線が落ちない。月間PV5万なら課金ゼロ。
・Workers＝レジ・会員カード処理ができる物件（会員サイト向け）
4サイト全部、同じ大家さんから借りている。
認証ゲートの3パターン
私のサイトはLPも会員サイトも、ほぼ全て何らかの認証を入れている。
目的別に3パターン、明確に使い分けている。
リストイン獲得
友だち限定閲覧
個別最適化
判断軸：リストイン獲得が目的ならA、友だち限定の限定コンテンツならB、複数チャネル/個別最適化が必要ならC。
LINE以外の流入（メール・X等）が混ざるなら必ず C に倒す。
認証を入れると世界が広がる
認証は「壁」を作るためだけのものじゃない。
誰が見ているかがわかると、その人専用の体験が作れる。
実例：料理公式LINEサイトでやっていること。
これが「認証を入れる本当の理由」。
壁の内側で個別最適化された体験を出せると、LINEブロック率も離脱率も劇的に下がる。ファネル設計はここから先が本番。
データをどこに置くか
サイトを育てるためのデータ層。記事・会員・予約・配信履歴。
どれをどこに置くかで、後の運用負荷が10倍変わる。
料理公式LINEサイトはこの3つを全部使っている。Notionに書いたレシピが、D1の会員情報と組み合わさって、サイト上で「あなた向け表示」になる。
Notion APIは遅いのでサイト読み出しには使わない。静的JSONに同期させる設計が王道。
今日のハンズオン
話を聞いただけでは作れない。今日この場で1本立ち上げて、実際に本番公開するところまで踏む。
欲しいLPを1つ選ぶ
実際に手を動かす
実際に発行する
提出：Discord「実績報告部屋」に本番URLをスクショ付きで投下。来週のWeek5でいくつかピックアップして講評します。
サイトは、
「作って終わり」じゃない。
来週はWeek 5、クロージング回。
「ここから先、Claude Code をどう自分の事業に組み込み続けるか」を、5週間の総まとめとして話します。