OFFICIAL SITE × CLAUDE CODE
コードを書かずに
公式サイトを
世界に出す。
〜 Claude Codeで自分で作って、自分で育てる 〜
▶ 2026.6.20 (土) 20:00–21:00
▶ Zoom / 60分
▶ 参加費 無料
講師 / しゅうへい／村上周平・株式会社むらかみかいぞく 代表
2026 / 06 / 20
SAT
20:00 — 21:00
LIVE ON ZOOM
TODAY'S GOAL
今日のゴールは、4つ。
60分で「なぜ・どうやって・自分でも・明日から」をぜんぶ持ち帰ってもらいます。
01
WHY
なぜ今「公式サイト」が
必要なのかわかる
必要なのかわかる
02
HOW
Claude Codeを使った
7ステップの流れがわかる
7ステップの流れがわかる
03
SELF
自分でも作れる
イメージが湧く
イメージが湧く
04
NEXT
今日からの行動が
決まる
決まる
D
DURING THE SEMINAR
Discordで一緒に進める。
▶セミナー中もチャットが楽しい
▶配布ガイドのサポートも実施中（動かない / エラーは Discord まで）
▶6,000人参加中。週ゴール設定／毎日振り返りでモチベが続く（完全無料）
WHO AM I
しゅうへい
村上周平 / 株式会社むらかみかいぞく 代表 / フリーランスの学校 運営
SNS歴 8年・総フォロワー 30万人
7つのプラットフォームで 1万人以上
個別面談 170人以上
借金 約5,200万円を毎月 60万円返済中（AIと一緒に返してます）
デザインもプログラミングも独学ゼロ。文系出身、コードは書けません。
SECTION 00 / PREP
予習にどうぞ。
Claudeに触ったことがなくても、今日の60分にそのまま入れます。あとから見返したい人は、教科書 と 無料ガイド を手元に置いておくとつながります。
RECOMMENDED · 01
世界一わかりやすい
Claudeの教科書
Claudeの教科書
Claudeに触ったことがなくてもOK。今日の流れにそのまま接続できます。
¥2,980
QRをスキャン
Brain で見る
Brain で見る
RECOMMENDED · 02
Claudeデスクトップ
アプリ入門ガイド
アプリ入門ガイド
動画で流れがつかめる。手早く触りはじめたい人向け。
FREE
QRをスキャン
無料で受け取る
無料で受け取る
CHAPTER 01 — WHY OFFICIAL SITE
SNSだけだと、
もう売れない。
プラットフォームが増えすぎた。
X
note
Instagram
Threads
Podcast
リール
YouTube
ショート
ショート
TikTok
発信側も受け手側も、
「何やったらええん」状態。
「何やったらええん」状態。
FACT 01
投稿が伸びる ≠
商品に手を伸ばしてもらえる
商品に手を伸ばしてもらえる
「いいね」と「購入」は、もう完全に別物。
FACT 02
入り口がバラバラだと、
商売にならない
商売にならない
受け手はもっと迷ってる。次の人へ流れていく。
RECEIVER'S VIEW
受け手は1日に、
何個の訴求を浴びているか。
20人
1日に見る発信者
ショート動画含めて
×4個
1人あたりの訴求数
無料プレゼント2 + 有料商品2
＋広告
そこに広告も挟まる
フィードもリールも、止まらない
＝
80
1日に浴びる訴求の数／人
▶ 自分にきた人ですら、次の人に流れていく
SYMPTOM
▶ 個別面談 50名以上で、ほぼ全員がコレ
これ、ドンキホーテ状態です。
SNS PROFILE — 今
@your_account
フリーランス / クリエイター
🔗 lit.ly/abc — 無料プレゼントA
🔗 utage.com/xxx — 講座申込
🔗 note.com/yyy — 有料記事
🔗 stand.fm/zzz — Podcast
無料
有料
無料
有料
無料
プロフィールリンクが 3〜4個 並んでる
ハイライトに無料と有料が 混ざってる
初見の人「どれをクリックすればいいねん」
商品はいっぱいあるけど、
レジがどこかわからない。
レジがどこかわからない。
PRESCRIPTION
ぼくらは「コンビニ」で
あり続けないといけない。
OFFICIAL SITE — あるべき姿
shuhei.jp
最新は、ここに集約。
プロフィール
最新記事
商品 / サービス
無料ガイド
→ お問い合わせ
X·note·Instagram·YouTube·Podcast
↑ ALL SNS → SAME URL ↑
どのSNSから来ても、同じURLに着く
着いた先で「何の人か／どこを見ればいいか」が 3秒でわかる
「最新はここ」と1本で済む
CORE MESSAGE
便利な人じゃなくて、
わかりやすい人。
わかりやすい人。
REAL NUMBERS — 2026 / 06
直接訴求していなくても、この数字が動いています。
DAILY SALES
¥2〜3万
毎日の販売額（情報コンテンツ）
FREE GUIDE
5,000人 超
無料ガイド累計受け取り（直近1ヶ月で +1,000人）
REEL FUNNEL — CTR 1%
3万
閲覧
→
600
プロフ
→
302
クリック
→
123
フォロー
リール経由のリンククリック率は 1%。100万再生なら1万クリック。
CLAUDE 教科書
1,000人 超毎日5〜6人
世界一わかりやすいClaudeの教科書（¥2,980）
▶ リール → 公式サイト → 教科書／無料ガイド と、自然に流れる構造ができた。
WHY NOW
なぜ「いま」なのか。
Claude Codeで、自分で更新できる時代になった。
BEFORE
これまで
×ホームページ屋さんに 30〜50万円
×リンク1個追加するのに、また依頼
×更新コストが重くて、結局 放置
→
NOW
いま
✓Claude Codeに 話しかけるだけで、文言もデザインも変わる
✓スマホからでも、散歩中でも更新できる
✓公式サイトは
「完成させるもの」じゃなく、更新し続けるものに
「完成させるもの」じゃなく、更新し続けるものに
CHAPTER 02 — MAIN PART
▶ 画面共有で1つずつデモします
公式サイトを世界に出すまでの、7ステップ。
01
DRAFT
Claudeで
マークダウン下書き
マークダウン下書き
.md
02
DESIGN
Claude Designで
デザイン
デザイン
VISUAL
03
CODE
Claude Codeで
コード化
コード化
.tsx / .astro
04
LOCAL
npm run dev で
ローカル確認
ローカル確認
localhost
05
STORE
GitHubに
保管
保管
GitHub
06
DEPLOY
Cloudflare
Pagesで公開
Pagesで公開
Cloudflare
07
LIVE
○○.pages.dev で
完成
完成
🌍 PUBLIC
FLOW
下書き → デザイン → コード化 → ローカル → 保管 → 公開 → 完成
01
STEP 01 — DRAFT
Claudeで
マークダウン下書き。
▶ ここが「設計図」になる
普段の言葉でClaudeに話す。
それだけでいい。
それだけでいい。
何のサイトなのか
誰向けか
載せたいものは何か
出力は
マークダウン1枚（＝要件定義書）
マークダウン1枚（＝要件定義書）
requirements.md
## サイトの目的
フリーランス志望の人が、ぼくの活動と
商品の入口を1枚で把握できるようにする。
## 想定読者
- SNSでぼくを知った人
- 検索で「フリーランス 始め方」で来た人
## 載せたいもの
- プロフィール（しゅうへい）
- フリーランスの学校
- Claudeの教科書 / 無料ガイド
- 最新発信（X / note / Podcast）
▍
02
STEP 02 — DESIGN
Claude Designで、
見た目を先に固める。
▶ ビジュアルが先 → 安心感が出る
マークダウンをそのまま渡す。
あとはザックリ伝えるだけ。
あとはザックリ伝えるだけ。
▶ 配色：落ち着いた、温かい、明るい…
▶ レイアウト：1カラム、写真は丸く…
▶ トーン：やわらかく、丁寧に…
「これなら世界に出してもいいかも」
と思える状態を、コードを書く前に作る。
と思える状態を、コードを書く前に作る。
claude.ai / design
しゅうへい
フリーランスの学校
▶ Profile
▶ Works
▶ Contact
BORROW A DESIGN.md
有名ブランドのDESIGN.mdを、
そのまま借りる。
★
awesome-design-md
GitHubで 7万スター超え。
73ブランドのDESIGN.mdが並んでる。
73ブランドのDESIGN.mdが並んでる。
EXAMPLES
Apple
Notion
Stripe
Airbnb
Tesla
Anthropic
Vercel
Linear
Figma
…ぜんぶで73
▶ 気に入ったブランドの.mdを
そのままコピーして、Claude Designに渡す。
そのままコピーして、Claude Designに渡す。
SCAN TO OPEN
github.com/voltagent/
awesome-design-md
awesome-design-md
あとで開いてみて
03
STEP 03 — CODE
Claude Codeで
コード化を依頼する。
▶ 中身はわからなくていい
「これ、コードにして。」
たったそれだけ。
たったそれだけ。
デザインを渡して、コード化を依頼
必要なファイルが 一式 生成される
中身は わからなくていい
動けば、勝ち。
最初から100点を狙わない。出してから直す。
my-site / generated
📁 my-site/
├─ 📁 src/
│ ├─ 📁 pages/
│ │ ├─ index.astro
│ │ └─ make.astro
│ ├─ 📁 components/
│ │ ├─ Header.astro
│ │ └─ Footer.astro
│ └─ 📁 styles/
│ └─ global.css
├─ package.json
└─ astro.config.mjs
✓ Generated 12 files.
04
STEP 04 — LOCAL PREVIEW
npm run dev で、
自分のパソコンの中に立てる。
▶ 直したいところは口頭で頼む
ターミナルに1行、
それだけで立ち上がる。
それだけで立ち上がる。
$npm run dev▍
ブラウザで localhost:4321 を開くだけ
気になるところは Claude Code に 「ここをこう直して」
保存すると その場で反映される
🔒 localhost:4321
OFFICIAL SITE
こんにちは、
しゅうへいです。
しゅうへいです。
フリーランスの学校 代表。AIと一緒にコンテンツを作っています。
▶ プロフィール
▶ Claudeの教科書
⚡ HMR · UPDATED 0.2s ago
STEP 05 + 06 — DEPLOY
▶ 一度繋げば、あとは「保存するだけ」
GitHubに保管 → Cloudflare Pages で公開。
05
STORE
GitHubに保管
リポジトリを作って、そこに置く。Claude Code に「やって」で進む。
$ git init
$ git push origin main
✓ pushed to github.com/you/site
→
06
DEPLOY
Cloudflare Pages で公開
GitHubと連携。push すると、自動で世界に反映される。
CONNECTED
github.com/you/site ⇄ Cloudflare Pages
⚡ Auto deploy on push to main
STEP 07 — LIVE
▶ これが今日のゴール
◯◯.pages.dev で、世界中から見られる状態に。
🔒your-site.pages.dev
OFFICIAL · 2026
こんにちは、
しゅうへいです。
しゅうへいです。
▶ プロフィール
▶ Claudeの教科書
▶ 無料ガイド
🌍 PUBLIC · LIVE NOW
あとはやることは1つだけ。
全SNSのリンクを、
このURLに張り替える。
このURLに張り替える。
Instagram プロフィール
X の固定ツイート
リール / ショートの概要欄
note / Podcast のプロフ
FOR YOU
これ、自分で作れます。
7ステップの中身を、ぐっと縮めると、要素は3つだけ。
01
DEFINE
要件定義
マークダウンで、誰向け・何のサイトかを書き出す。
02
SHIP
MVP
（まず動くものを出す）
（まず動くものを出す）
完璧を待たない。60点で世界に出してから直す。
03
ITERATE
日本語で
修正していく
修正していく
「ここをこう直して」を、Claude Code に話すだけ。
▶ ぼくみたいにコードを書けなくても、最初の1枚は作れます。
ROADMAP — 5 DAYS
▶ 完璧で止まらず、60点で出して回す
段階的に作る。Day1〜Day5。
DAY 1
1
要件定義
Claudeに「こんなサイト作りたい」を話す。
.md
DAY 2
2
デザイン
Claude Design で見た目を固める。
VISUAL
DAY 3
3
コード化 +
ローカル確認
ローカル確認
Claude Code → npm run dev。
LOCALHOST
DAY 4
4
世界に公開
GitHub → Cloudflare Pages。
PUBLIC
DAY 5
5
SNSリンクを
差し替え
差し替え
全SNSのリンクを公式サイトURLに。
🎉 DONE
回しはじめてからのほうが、何を直すべきかは早く見える。
FOR YOUR HAND
手元用：公式サイト作成ガイド。
今日の流れを、あとで見返せるように1枚にまとめています。
GUIDE · v1
公式サイト
作成ガイド
作成ガイド
▸ 要件定義テンプレート
▸ 7ステップ手順
▸ つまずきポイント対処
▸ Claude プロンプト例
SHUHEI / 2026.06
01
要件定義テンプレート
マークダウンで埋めるだけ。
02
7ステップ手順
今日の流れを、そのままチェックリストに。
03
つまずきポイントと対処
エラー時の聞き方・直し方の型。
▶ 受け取り方は 次のスライド で。
HOW TO RECEIVE
メルマガに登録 → 自動返信で届きます。
登録 → ガイドが届く
自動返信で 作成ガイド が即届く
今後の更新や 実例 もメルマガで流していく
解除は いつでもOK
メールアドレスだけで、
今日のガイドが手元に。
今日のガイドが手元に。
SCAN ME
shuhei.jp / guide
URLもチャットに貼ります
COMMUNITY
Discord「フリーランスの学校」
1人でやると、3日目で止まります。一緒に手を動かしていく場所。
F
フリーランスの学校
community / Discord
ONLINE
# claude-活用
# 公式サイト相談室
# 詰まったとき
👋 しゅうへい も顔を出します
日々のClaude活用の 共有
質問の 投げ合い。誰かしらが拾う
ぼくも 顔を出します
1人で詰まらないための場所。
QRをスキャン
QRをスキャン
NEXT STEP
▶ 今日の続きを、一緒にやる場所
AI×マーケティング講座、7月〜9月開催。
PERIOD
7月〜9月
月2回・全6回
FORMAT
Zoom 90分
録画あり
VOLUME
9時間
合計の講義時間
CURRICULUM — 一気通貫
▸ 公式サイト
▸ SNS集約
▸ メルマガ
▸ 教科書販売
公式サイトを軸に、SNS集約 → メルマガ → 商品販売 まで、ひとつなぎで組み立てる。
先行案内
AI×マーケティング講座
先行価格
先行価格
¥69,800
税込 / 全6回
詳細・締切は正式ページにて。
QRをスキャン
先行案内ページへ
先行案内ページへ
SUMMARY
今日のメッセージ。
01
SNSが増えすぎて、受け手は迷っている。
02
楽になるのは「公式サイト1枚にすべて集約している人」。
03
Claude Codeで、コードを書かずに 自分で更新できる時代に。
04
7ステップ でいける。60点で出して回す。Day1〜Day5。
Claude → Claude Design → Claude Code → npm run dev → GitHub → Cloudflare Pages → pages.dev
THANK YOU
最後に、3つの導線を置いておきます。
役割が違います。自分にあう入口だけ選んでください。
01
HAND
メルマガ登録
手元用：公式サイト作成ガイド。今日の内容を手元に残す。
02
CONTINUE
AI×マーケ講座
先行申込
先行申込
今日の続きを 一緒に 手を動かしたい人。
¥69,800税込 / 全6回
03
COMMUNITY
Discord
フリーランスの学校
フリーランスの学校
1人で詰まらないための場所。ぼくも顔を出します。
今日の60分、ありがとうございました。 お疲れさまでした。