［UPDATE］

9/20：動画④「データをD1に貯めて、管理画面で見る」（20分）を追加しました。あわせて「特別編」として、Claude Code Webアプリ制作講座のアーカイブ2本（第2回：Git・GitHub・Cloudflareを使った開発・公開の環境づくり／第3回：APIを使ったSNS投稿と改善の自動化）と、第3回のAPI手順書を追加しました。動画⑤は撮影でき次第追加します。追加料金はかかりません。

8/13：教材の内容をまるごとAIに渡せる「AIナレッジ全文版」（テキスト1ファイル）を追加しました。記事全文・動画①〜③の文字起こし・手順書1〜4・拡張レシピ1〜5が、1つのテキストにまとまっています。ダウンロードは有料ゾーン冒頭のダウンロード欄からどうぞ。動画④⑤の追加にあわせて、このファイルも更新します。

8/11：販売開始しました。

会話だけでWebアプリ公開までできる

こんにちは、しゅうへいです。

結論から書きます。

いまぼくは、自分で作った動画学習サイトを運営しています。freelanceschools.com というサイトで、会員登録があって、動画が見られて、購入した人だけに視聴権がついて、通知メールが自動で飛ぶ。管理画面を開けば、誰がどこまで見たかも分かります。

これを、エンジニアじゃないぼくが、コードを書かずにAI（Claude Code）と一緒に作りました。

https://freelanceschools.com

数字も出しておきます。

Safari 2026-08-11 00.06.59.png

累計アクセスは10万、ユニークユーザー（重複を除いた実際の訪問者数）は約3万人。このサイトから実際にコンテンツが売れた金額は30万円。開発量はこの夏だけで619コミット（プログラムを変更して保存した回数のことです）。いま動いているコードはTypeScriptで137ファイル、約6.2万行。

そして維持費は、月数千円。

まずは動画①を、まるごと無料で見てみてください

教材本編の1本目「全体像と、小さく作る業務を選ぶ」（約23分）を、そのまま無料公開しています。教科書がどんなテンポで、どこまで丁寧に進むか、買う前にこの1本で確かめられます。

※補足：動画の中で「一斉配信の販促メルマガの自作は範囲外」と話していますが、その後、方針を更新しました。Resendを契約して独自ドメインを設定すれば、登録者への一斉配信も、ステップメール（時間差の自動配信）も自作できます。やり方は拡張レシピ4に入れてあります（配信停止リンクの設置など、守るべき最低限のルールもそこで解説しています）。

その手作業、コピペと確認待ちで止まっていませんか

ここからが本題です。

ぼくがこの教科書を作ろうと思ったのは、まわりの経営者やフリーランスの人と話していて、みんな同じところで止まっていると気づいたからでした。

Googleフォームで申し込みを集めたあと、スプレッドシートを開いて一件ずつ対応している

資料送付、予約案内、お礼メールを、毎回手で送っている

投稿案の確認リンクをLINEやメールで送って、「OK」「ここを直して」がチャットに流れていく

Google Driveの素材、チャットの修正依頼、メールの納品連絡が散らばって、最新版がどれか探している

クライアントから「いまどこまで進んでいますか？」と聞かれるたびに、スプレッドシートを開いて調べている

ヒアリングフォームの回答を読んで、要件書や顧客台帳へ自分でコピペしている

便利にしたいけど、外注すると費用もやりとりも大きくなりそうで止まっている

ひとつでも当てはまったら、この教科書はたぶん役に立ちます。

共通しているのは、情報は集まっているのに、「集めたあと・送ったあと・確認したあと」がコピペと確認待ちで止まっていること。

フォームを作ることは、もう誰でもできるんですよね。止まっているのはその先です。

外注なら300万〜500万円の開発を、Claude Codeで自作しました

ぼくが作った学習サイトと同じものを外注したら、いくらになるか。相場の目安を並べてみます。

・項目　金額の目安
・要件定義　30万〜80万円
・サイト本体　80万〜150万円
・認証（ログイン機能）　40万〜80万円
・決済　40万〜80万円
・メール自動化　30万〜60万円
・管理画面　60万〜120万円
・デザイン　40万〜100万円
・合計　320万〜670万円

※ 上の金額はすべて相場目安です。実際の見積もりは会社や要件で変わりますし、この教科書が節約額を保証するものでもありません。

ざっくり、300万〜500万円くらいの規模。それを非エンジニアのぼくが1人で作って、いまの維持費は月数千円です。

ついでにもうひとつ。こういうWebアプリを作れるようになるプログラミング教室は、一般に30万〜50万円かかります（これも相場目安）。教室が高いと言いたいわけじゃなくて、金額の事実だけ置いておきます。

コードは読めても書けない非エンジニアです

ここ、いちばん誤解されたくないところなので、はっきり書きます。

これは「しゅうへいがすごい」という話ではありません。

ぼくはプログラミングスクールに通っていないし、コードは読めても書けません。エンジニアの友達に手伝ってもらったわけでもない。ADHD気味で、手作業のコピペをやらせたら3日で心が折れる人間です。

必要だったのは、たった2つでした。

最低限動くパソコン

Claude Code等の有料プラン（MAXプラン＝月額100ドル以上を推奨。3,000円程度のプランでも、制限を気にしながらのテスト開発なら可能です）

それだけです。事務所も、チームも、資格も要りません。

だからこの教科書は「ぼくにできたので、同じ手順を踏めば、あなたも作り始められます」という話しかしていません。自慢話を聞かされる時間はゼロです。

MacBookの電源の入れ方が分からなかった妻が「これは欲しい」と言った

この教科書を作るとき、ぼくがいちばん基準にした人がいます。妻のあれこです。

あれこはコーチングをやっていて、クライアントのSNS投稿案をスプレッドシートで添削しています。で、毎回こうなる。

「何行目の、何日の投稿を添削すればいいんだっけ？」

お互いに悪気はないんです。ただ、行を探す・日付を照らし合わせる・どこまで見たか思い出す。この小さなストレスが毎回積み上がっていく。

そこでぼくが「案件ごとに1つのリンクにまとめて、『何日の投稿は添削済み』ってステータスが見えるようにしたらどう？」と話したら、食いついてきました。

さらにこの先があります。投稿したあとのInstagramのインサイト（表示回数や保存数などの数値）をAPI（サービス同士をつなぐ窓口のこと）経由で自動で取ってきて、自分のデータベースに貯めておく。そうすると、クライアントの伸びの進捗管理が自動になるし、データが1か所にまとまるし、AIに「成果報告の投稿を作って」と頼めば、実際の数字に紐づいた投稿案まで出てきます。

ここで大事なのは、あれこがもともと機械音痴だということです。出会った頃、MacBookの電源の入れ方が分からなかった人です。

その人が「これは欲しい」と言った。

だからこの教科書は、ギーク向けにもAI好き向けにも作っていません。専門用語が出てくるたびに、その場で一言の言い換えを添えています。知っている前提で進めません。

作れるのは「フォームから始める見込み顧客管理アプリ」です

動画5本を最後まで見ると、あなたの手元にこれが1つ動いています。

「フォームから始める見込み顧客管理アプリ」

機能は4つだけ。

自前のフォームで、無料資料の請求や相談の申し込みを受け付ける
回答をデータベース（D1というCloudflareのデータベースを使います）に保存する
確認メールと資料を自動で送る
管理画面で、対応状況・優先順位・次に送る案内を見られるようにする

このアプリ、実は2つの顔を持っています。

表側は「Googleフォームの置き換え」。申し込む人から見える顔です。
裏側は「見込み顧客管理」。自分から見える顔です。

同じ1つのアプリを、入口と管理画面で別の言葉で説明しました。さっきのペイン「集めたあと・送ったあと・確認したあとが止まっている」が、そのまま解決される形になっているのが分かると思います。

ちなみに設計で1つだけ、はっきり決めていることがあります。

申し込む人にはログインさせません。フォーム送信と、メールに入っている専用リンクだけで完結させて、守るのは管理画面だけ。ここを迷うと初心者は必ず沼にはまるので、最初から一本道にしてあります。

同じ骨格で、こんなふうに化けます

・業種　どう化けるか
・SNS運用　投稿案・素材・承認・修正依頼を一画面に。単発の確認は専用リンクで送る
・動画編集　素材受領→初稿→修正→納品の状態と修正依頼を、案件ページに集める
・Web制作　ヒアリング→必要素材→提出→制作状況をまとめて、素材待ちを管理する
・コンサル・講師　案件を1リンクにまとめ、投稿案の「添削済み／未添削」を日付ごとに見える化。面談メモ・宿題・資料・進捗も同じページへ

作るものは1つ。でも骨格が同じなので、自分の仕事に合わせて言い換えるだけで別のアプリになります。

教材の中身は、本人動画5本＋手順書9点です

本人動画5本（15〜20分×5本）

1本15〜20分、全部で5本。一本道です。

① 全体像と、小さく作る業務を選ぶ
何が作れるようになるのか・どこまでやらないのかが分かって、自分がアプリ化する手作業を1つ選べている状態にします。

② AIへ渡す要件・指示書を作る
①で選んだ業務を、AIがそのまま実装に移れる粒度の指示書1枚に落とします。要件定義って、要は「AIに何を作らせるかを言葉で確定させる作業」です。

③ 画面を作って、Cloudflareへ公開する
フォーム画面がインターネット上で動いて、URLで人に渡せる状態にします。デプロイ（作ったものをインターネットに公開すること）も、失敗しても戻せることを先に体験してもらいます。

④ D1へ保存して、管理画面で見る
ここがハイライト。フォームの回答がデータベースに貯まって、自分だけが見られる管理画面で対応状況を確認できるようにします。データを保存できる・取り出せるようになった瞬間に、AIに頼める仕事の種類が変わります。

⑤ メール自動送信（Resend）＋改善の回し方＋公開前チェック
申し込みがあったら確認メールと資料が自動で届くようにして、最後に「公開していい状態か」を自分でチェックできるようにします。あわせて、自作しないほうがいい境界線も引きます。

手順書パック（レシピ集）

動画とは別に、手順書を配ります。これが今回のいちばんの発明かもしれません。

手順書は全部この3ブロックでできています。

◼ 完成条件
　何ができたら終わりか（ここを先に決めます）

◼ AIに渡す指示書
　そのままコピペしてClaude Codeに渡せる本文

◼ つまずきポイント
　だいたいここで詰まる、という場所と対処

つまり「メルマガシステムを作りたければ、この手順書をAIに渡してください」で成立する粒度にしてあります。

教材そのものが「AIに指示書を渡せば作れる」の実演になっている、というわけです。

だから、この教科書は読まなくても進められる作りにしてあります。手順書をそのままAIに渡せば、作業は始まります。読むのは困ったときでいい。手順書ごとAIに読み込ませて「いまここで詰まっている」と聞いていくのが、いちばん速い使い方です。

基本4点（8/11公開済み）

・#　手順書　完成条件
・手順書1　小さく作る　自分の手作業から1つ選び、最初に作る範囲が1枚に書けている
・手順書2　要件定義・指示書テンプレ　AIがそのまま着手できる指示書1枚ができている
・手順書3　Cloudflare・D1の最小構成　フォーム画面が公開URLで動き、回答がデータベースに保存されている
・手順書4　公開前チェックリスト＋自作しない境界　秘密情報・個人情報・戻せる備えを確認し、外に出す範囲を線引きできている

拡張レシピ5点（8/11公開済み）

・#　手順書　完成条件
・拡張レシピ1　会員サイト化（ログイン・視聴権）　登録した人だけが入れるページがあり、誰が何を見られるかを管理できている
・拡張レシピ2　Stripe決済組み込み　自分のサイトから購入・決済が完了し、購入後に自動でアクセス権がつく
・拡張レシピ3　問い合わせ対応（CS）　FAQと問い合わせ窓口がアプリ内にあり、やりとりが1か所に残る
・拡張レシピ4　自動メールの発展（ステップ配信・リマインド）　登録者に順番に届くメールと、リマインドが自動で回っている
・拡張レシピ5　ダッシュボード拡張　データベースの数字を集計して、自分の事業の数字が1画面で見えている

公開予定表（買う前に読んでください）

いま公開されているもの、これから追加されるものを、買う前に分かる形で出しておきます。

・中身　状態
・動画① 全体像と、小さく作る業務を選ぶ　8/11 公開済み（購入前でも無料で視聴できます）
・手順書1〜4　8/11 公開済み
・動画②〜④　公開済み（④は9/20追加）
・動画⑤　撮影でき次第追加（追加はすべて無料）
・拡張レシピ1〜5　8/11 公開済み

追加はすべて無料です。あとから料金を請求することはありません。追加されたら、この記事の［UPDATE］欄に1行ずつ書いていきます。

「まだ全部そろってないなら、そろってから買おうかな」と思った方へ。それでも全然いいです。ただ、初日に配る手順書1〜4だけで、自分のアプリの設計から公開までは走れる作りにしてあります。

必要なのは、パソコンとClaudeの有料プランだけです

必要なのはこの2つだけです。

最低限動くパソコン
最新のハイスペックマシンは要りません。ブラウザとエディタが動けば大丈夫です。

Claude Code等の有料プラン
MAXプラン（月額100ドル以上）を推奨します。3,000円程度のプランでも、制限を気にしながらのテスト開発は可能です。ただし何度も作り直す前提の作業なので、上位プランのほうがストレスは少ないです。

プログラミングの知識は要りません。ぼくが持っていないので。

この教科書がやらないこと／向いていない人

ここは強めに書きます。合わない人に買ってほしくないので。

細かいセキュリティまでは網羅しません。ぼくも非エンジニアだからです。だからこの価格にしています。本格的なセキュリティ設計が必要なものを作るなら、信頼できるエンジニアに個別で見てもらってください。

大規模開発には、これだけでは足りません。これは出発点であって、完成形ではありません。何万人が同時に使うサービスや、高度な権限管理が要るシステムは範囲外です。

成果や収益は保証しません。「これを作れば月◯万円」みたいな話は一切していません。金額はすべて相場目安です。

AIに丸投げして完成品が降ってくると思っている人には向きません。指示書を書くのは自分です。AIは実装してくれますが、「何を作るか」を決めるのはあなたです。そこが面倒だと感じる人には、たぶん向いていません。

すでに自分でWebアプリを開発しているエンジニアの方にも、たぶん向きません。知っていることばかりだと思います。

価格は4,980円、追加の動画と手順書は無料です

発売価格は 4,980円です。

中身は、本人動画5本と手順書9点（基本4点＋拡張レシピ5点）。追加は無料です。

さっきの表をもう一度置いておくと、外注の相場目安は320万〜670万円、プログラミング教室の相場目安は30万〜50万円。維持費のほうも、ぼくの学習サイトで月数千円です。

もちろん「安いから買え」と言うつもりはありません。ただ、自分の手作業が1つでもアプリになって、毎週30分でも浮くなら、それはずっと効き続けます。ぼくがそうでした。

よくある質問

Q. プログラミング未経験でも大丈夫ですか？
はい。ぼくが未経験のまま作ったものを、そのまま手順にしています。専門用語が出るたびに言い換えを添えてあります。ただし「文字を読んで、書いてあるとおりに手を動かす」ことはしてもらいます。

Q. Macでも Windowsでも大丈夫ですか？
どちらでも大丈夫です。ぼくの実演はMacですが、やることは同じです。

Q. 有料プランは本当に必要ですか？無料では無理ですか？
必要です。無料の範囲だと、作っている途中で止まります。ここは正直に書いておきます。3,000円程度のプランでもテスト開発はできますが、制限は気にしながらになります。

Q. 作ったアプリは、自分の仕事で使っていいですか？
もちろんです。自分の事業で使ってください。クライアントワークに応用してもらってもかまいません。

Q. セキュリティは大丈夫ですか？
「公開前チェックリスト」で、秘密情報の置き場・個人情報の扱い・戻せる備えは必ず確認します。ただし前述のとおり、本格的なセキュリティ設計までは網羅しません。そこは正直に線を引いています。

Q. 内容は古くならないですか？
AIまわりは動きが速いので、変わったら更新します。この記事の［UPDATE］欄に追記していくので、開き直せば最新版になります。追加料金はかかりません。

Q. 質問はできますか？
個別のQ&A対応はしていません。そのかわり、詰まった箇所は教材の該当部分ごとAIにコピペして聞いてください。それがいちばん速いです（というか、それがこの教材で身につけてほしい動き方そのものです）。

Q. 返金はできますか？
デジタルコンテンツの性質上、購入後のご自身の都合による返金は承っていません。ただし、クーリング・オフをはじめ法律で認められている解除については、そのとおり対応します。

学習サイトが裏でどう回っているか、2分の動画で見せます

買う前に、実物がどう回っているかを見てもらったほうが早いと思うので、ぼくの学習サイトの裏側を図1枚・2分の動画にしました。

ちなみに購入後の動画①の冒頭では、この順番で話しています。

ビフォー／アフター。以前はブログに動画を埋め込んで配っていました。それがいまの学習サイトになっています。実物を触りながらツアーします。

外注の相場の内訳カード。この記事に載せた表を、動画のなかでも1回だけ出します（しつこく出しません）。

「すごい話じゃない」宣言と、必要なもの。パソコンと有料プランだけ。

こんな手作業をしていないか、というペインリスト。ここで自分ごとにしてもらいます。

静的サイトと動的サイトの違い。情報を表示するだけのサイトと、ユーザーの行動やデータに合わせて返してくるサイト。この線を越えると、できることが一気に増えます。

ゴール制作物のデモ。「フォームから始める見込み顧客管理アプリ」を実際に触って見せます。

そして最後に、自分がアプリ化する業務を1つだけ選んでもらいます。ここで2つ以上選ぶと、だいたい完走できません。1つです。

これは才能の話ではなく、手順の話です

ぼくはプログラミングができません。いまもできません。

でも、自分の事業のなかで「これ、毎回手でやってるな」と思う作業を、1つずつアプリにしてきました。そうしたら、人を雇わずに回るようになって、外注費も払わなくてよくなって、「すぐ直したい」に自分でその場で対応できるようになりました。

これは才能の話ではなくて、手順の話です。手順は渡せます。

教材と手順書の受け取りは、下のページからどうぞ。