SESSION 02 / 06
まずは自分の
Webページを公開しよう
文書 → 実演 → デプロイ → 原則
Jee Jun Young
非情報系（経営学科）→ 記者・海外営業 → 開発者に転向
iOS・Android・フロントエンド 約5年半（6年目）
大企業向けコラボレーションツールのiOS／macOSアプリ開発
2026年〜 バイブコーディングでWeb・サーバーを一人で開発・事業化
PART 1 — 振り返り
前回の授業のあと、
Claudeに
何をやらせてみましたか？
まだ試していなくても構いません。
前回は
HTMLファイルを1枚だけ作って、
自分で開いてみました。
KakaoTalkでファイルを送りますか？
家で一人で見るだけですか？
公開すれば自慢できます。
ポートフォリオを載せます
載せます
「ここで買ってください」と載せます
TODAY'S GOAL
今日の授業が終わるころには
Webページを作って
インターネットに公開する全工程を、
目で見ているはずです。
なぜ文書が必要なのかを
理解できます。
PART 2
文書が先だ
文書とは何だと思いますか？
Claudeにとって文書とは何でしょう？
まとめた1枚の紙
ルールを書いたもの
細部を書いたもの
なぜ必要なのか、飲食店にたとえて説明します。
STEP 1
🍚「ご飯ください。」
メニューも見ずに「ご飯ください」と言ったら？
店主の好きなものが出てきます。
AIも同じです。
「作って」とだけ頼むと → 適当に作ります。
STEP 2
🍳「キムチチャーハンください。」
メニューを具体的に指定すれば、
少なくとも欲しい料理が出てきます。
＝ AIに「今回作るものをまとめた紙」を1枚渡すこと
STEP 3
📋 詳しい注文
「ランチョンミートではなくスパムで。
キムチはよく発酵したもの。
卵は半熟。たくあんは抜いてください。」
この細部をAIに伝えるものが、
文書です。
行きつけの店主なら覚えてくれますよね？
AIにはそれができません。
AIでは、毎回違うアルバイトが来ます。
昨日何を頼んだか、まったく知りません。
だから文書にしておくのです。
新しいアルバイトでも、その紙を読めば
すぐ作れるからです。
AIに仕事をさせる前に、
まずAIに文書を作らせてください。
講師実演①
ClaudeのMacアプリでGrimoireプロジェクトを開く
「このプロジェクトの文書について説明して」
→ AIが文書を読んで仕事をする構造が、すでにできています。
今見たものが、
第3段階 — 詳しい注文票です。
このプロジェクトには、
「これはこう作れ」という紙が
何枚も入っています。
この紙が一枚もなかったら？
→ 「ご飯ください」の状態。適当に出てきます。
講師実演②
IntelliJで文書構造を直接見る
（共通）
（厨房／ホール）
企画書が一番上にあり、その下に厨房とホールのルールが別々にあります。
講師実演③
DOC_MAP.html — 文書の関係図を全画面で表示
今日覚えておくのは、
一番上のたった1枚
📋 企画書
「今回作るものをまとめた紙」がプロジェクトの頂点
残りの複雑な構造は？ → 第3回で詳しく扱います。
飲食店の話に戻ると、
これは店の壁に貼られた全ルールの地図です。
最初からこんなに複雑だったわけではありません。
始まりは企画書1枚です。
「うちはキムチチャーハン専門店です」
この1枚から始まり、ルールが一つずつ増えたのです。
PART 3
Webページを作る
＋デプロイ
今から、最初から最後までお見せします。
ライブ実演
ClaudeにWebページを作らせる
まずは文章だけでWebページを一つ作らせます。
→ 講師の画面に切り替え
できましたね。でも…
「私はデザイン
ができないんだけど？」
方法は3つあります。
THREE METHODS
気に入ったデザインを撮る
AIに原則を聞く
そのままドラッグ＆ドロップ
AIはデザインの理論を完璧に知っています。
地球上のデザインの本をすべて読んでいます。
でも人間がどこで
「わあ、かっこいい」と感じるのかは、
よくわかりません。
地球上の映画評をすべて読んだが、
映画を一本も実際に見たことがない人
ルールは知っていても感覚がない。方向は人間、実行はAI。それが指揮です。
ライブ実演 — 方法3
第1回のプレゼンHTMLをClaudeにドラッグ＆ドロップ
USER
これのトーンとデザインルールを適用して作って。
赤、黒、バウハウスの雰囲気。
フェードインとタイピングのアニメーションを入れて。
→ 講師の画面に切り替え
ライブ実演 — デプロイ
Vercelに登録 → プロジェクトをアップロード → URLを生成
作ったWebページをインターネットに公開する工程です。
→ 講師の画面に切り替え
DEPLOYED
今、このURLを
誰に送っても、
すぐ開けます。
皆さんも家で同じ手順を踏めば、
同じ結果が得られます。
Kmongのような受託仲介サイトのWeb制作者、Web開発者、フルスタック開発者。
素早く案件を終えて次へ進む受託業者。
その多くは、今お見せしたVercelと、次に紹介するSupabaseで仕事を完結させています。
VercelとSupabaseに、自分のWebプロジェクトを
きれいに、不具合なく、セキュリティの穴なく公開できれば、
彼らの手を借りなくても
自分のサービスを運営できるということです。
ライブ実演 — Supabase
「データを保存する場所」
今はこういうものがあるとだけ覚えてください。
→ 講師の画面に切り替え
Vercel、Supabase。
Claudeとやり取りしていれば、
必ず行き詰まるところが出てきます。
思い出せないところも、当然出てくるでしょう。
大事なのは、
行き詰まったときに何をするかです。
10分休憩
少し休憩しましょう。
PART 4
AIに仕事を任せる
4つの原則
今見た場面に、
名前を付けていきます。
先に欲しいものを整理してこそ、良い結果が出る。
「さっき、いきなりClaudeに『作って』とは言いませんでしたね。
企画書から作らせましたよね？それがこれです。」
店で「ご飯ください」と言う代わりに、詳しい注文票を書いておくのです。毎回違うアルバイトが来ても、欲しいものが出てきます。
依頼を文章に残し、結果を確かめ、必要なら再度頼む。
「さっきの企画書が、その文書です。
作らなければ、Claudeは好き勝手に作っていたでしょう。」
飲食店では注文をメモに書きますね。書かなければ忘れます。AIも同じです。
実際にはやっていない場合があります。
「実演の途中で、一度確認しましたよね。
本当に動くか、本当に言ったとおりに
作業したか、推測で言っていないか。
これを習慣にする必要があります。」
AIを追及する3つの質問
「その値は、実際に確認したの？ 推定したの？」
「見た情報は、いつの記録？」
「この方向性は、根本的に正しいの？」
実例 — うのみにしない
誤ったアプローチによる構造の衝突
「変更なし」という虚偽報告
セッション記録の欠落
すべて私が実際に経験したことです。
確認しなければ、そのまま見過ごしていたでしょう。
効率の実感が大きく変わります。
「私はコードを一行も打っていません。
全部Claudeにやらせました。これが委任です。」
毎週繰り返す仕事で「面倒だな」と思うもの → AIに渡す候補です。
SUMMARY
今回の授業を準備しながら、
自分なりの原則をいくつか作りました。
これをオープンチャットに投稿します。
BONUS
もう一つ原則を。
AIの襟首をつかんでやり直させるほうが、ずっと割に合います。
「さっき詰まったときに、何をしたか見ましたよね？
Google検索もせず、本も開きませんでした。
Claudeに聞いたのです。」
PART 5 — HOMEWORK
今日の
宿題
自己紹介ページでも、
まったく違うものでも構いません。
大事なのは一度、自分でやること。
作りながら、Claudeに
これを聞いてみてください。
CLAUDE.mdって何？
大きなプロジェクトではほかの文書をどう作って管理するの？
RLSって何？
APIキーはどう保管するの？
localStorageって何？
.envって何？
コードについても、
いくつか聞いてみてください。
Next.jsって何？
これ、素のJavaScriptで作ったの？
それならTypeScriptって何？
Reactって何？
状態管理って何？
こうした言葉を知ってこそ、
Claudeは整理されたコードを書きます。
今、全部理解する必要はありません。
Google検索はせず、
Claudeに聞いてください。
ただ、
一つだけ確認しておきます。
第1回でも触れましたが、
Claudeを作ったAnthropicは、
全米の古書市場を探し回り、
数十万冊の本を買い、
スキャンしてAIを学習させました。
なぜか。本は専門家が書き、
編集部が検証し、
市場で評価された媒体だからです。
ネット上に出回る文章とは質が違います。
巡り巡って、
本が土台なのです。
しかし、始める前から
本の重さに押しつぶされて、
始めることさえしないのは、
今の時代に合いません。
本や専門家の意見を、
軽く見ないでください。
検証された知識が必要になるときは必ず来ます。
それを知ってこそ、サービスが壊れるのを防げます。
SESSION 02 / 06
今日も、
お疲れさまでした。
次回 — 第3回
「文書を磨き、作り、つなげよう」
CONTACT
質問があれば、
KakaoTalkオープンチャットへ
QRコードを読み取るとオープンチャットにつながります。