How It Works
LP公開までの全体像
「自分のパソコンで作ったLPが、どうやってインターネットに公開されるの？」を図解します
まずはイメージから
3つの場所を順番に通るだけ。料理に例えるとこんな感じです。
👨‍🍳
自分のキッチン
あなたのパソコン
ここでLPを作る
→
📦
冷蔵倉庫
GitHub
作ったものを保管・共有
→
🍽
レストランのテーブル
Vercel
お客様に届ける（公開）
全体の流れ
💻
Your PC
あなたのパソコン
Claudeに話しかけて、LPのHTMLファイルを作ります。
できたファイルはパソコンの中に保存されます。
この時点では自分しか見れません。
使うもの： Claude Desktop アプリ
できるもの： HTMLファイル（LPの設計図）
git push（預ける）
Claudeが自動でやってくれます。
あなたが操作する必要はありません。
📦
GitHub
GitHub（ギットハブ）
インターネット上のファイル倉庫。
作ったコードを安全に保管して、他の人と共有できます。
役割 1： バックアップ（PCが壊れても大丈夫）
役割 2： 共有（チームメイトも同じファイルを見れる）
役割 3： 履歴（いつ何を変えたか全部残る）
自動デプロイ（公開）
GitHubに届いたら、Vercelが自動で検知。
何もしなくてOK。
▲
Vercel
Vercel（バーセル）
GitHubに預けたファイルを、インターネットに公開してくれるサービス。
GitHubを常に見張っていて、新しいコードが来たら自動で公開します。
やること： HTMLファイルをURLで見れるようにする
速さ： pushしてから約10秒で反映
完成！
🌐
Your Website
あなたのLPが公開！
世界中の誰でもアクセスできる、あなただけのURLが発行されます。
スマホでもPCでも見れます。
URL例： https://あなたの名前.vercel.app
ワークショップ当日の流れ
5つのステップでLPを完成させます。Claudeが全部手伝ってくれるので、コードを書く必要はありません。
1
セットアップ
Claude Desktop
を準備
2
内容を
整理する
LPの中身を
考える
3
デザインを
学ぶ
色・フォント
レイアウト
4
AIに
指示する
Claudeに
貼り付けるだけ
5
公開する
Vercelで
URLを発行
STEP 2・3 はキックオフで紹介します。
4/18までに素材を集めておくと、当日のLP完成度がグッと上がります！
用語まとめ
HTML
Webページの設計図。Claudeが書いてくれるので、あなたが書く必要はありません。
git push
「自分のPCからGitHubにファイルを預ける」こと。Claudeが自動で行います。
GitHub
インターネット上のファイル倉庫。バックアップ・共有・履歴管理ができます。
Vercel
GitHubのファイルをインターネットに自動公開してくれるサービス。pushしたら約10秒で反映。
デプロイ
「公開する」のIT用語。deploy = 配置する。ファイルをインターネットに置くこと。
URL
Webページの住所。これを共有すれば誰でもあなたのLPを見れます。
よくある質問
Q. 自分でコードを書く必要はある？
ありません。Claudeに日本語で話しかけるだけでHTMLファイルを作ってくれます。
Q. GitHub / Vercelの操作は難しい？
Claudeが全部やってくれます。アカウント作成だけ事前に済ませておけばOKです。
Q. 公開した後に修正できる？
何度でもできます。Claudeに「ここ変えて」と言うだけで、修正→再公開まで自動です。
Q. 公開したLPを消したい時は？
Vercelの管理画面から削除できます。講師に相談してください。
AI Leader Camp 2026 ／ LP公開までの流れ