HOW I BUILD
未経験のぼくが、
サイトを公開するまでの全手順。
プログラミングをやったことがなかったぼくが、AIと一緒に「自分のサイトを最速で公開する」ためにやっている流れを、まるごと公開します。むずかしい知識はいりません。順番どおりにやるだけです。
- 🛠 使うもの：Claude × Astro × Cloudflare
- ⏱ 1サイト 1〜2時間
- 💰 無料から始められる
THE FLOW
やるのは、たった7ステップ
アイデアを「つくる」→「公開する」の2フェーズだけ。上から順にやれば、自分のサイトがネットに出ます。
- 1
つくるものを決めて、マークダウンで下書き
使うもの：Claude（チャット）
- 2
Claude Design でデザインを作る
使うもの：Claude Design
- 3
コードにしてもらう
使うもの：Claude Code
- 4
自分のパソコンでプレビュー
使うもの：npm run dev
- 5
コードをGitHubに保管する
使うもの：GitHub（プライベート）
- 6
Cloudflare Pages で公開する
使うもの：Cloudflare Pages
- 7
自分のURLで確認 → 完成
使うもの：◯◯.pages.dev（無料）
アーカイブ配信中 · 1週間無料公開
流れはわかった。あとは、一緒に手を動かすだけ。
6/20の無料セミナーは満席になりました。アーカイブを「フリーランスの学校 学習アプリ」で1週間無料公開中。画面を共有しながら、ぼくと一緒にあなたの公式サイトを公開まで進めます。会員登録なしで、すぐに視聴できます。
📅 6/20（土）20:00〜21:00・オンライン（Zoom）・参加無料・満席
▶ アーカイブを学習アプリで見るPHASE 1 · つくる
アイデアを、形にする
ここはぜんぶAIとの会話だけ。コードも、デザインの知識もいりません。
Claude（チャット）
つくるものを決めて、マークダウンで下書き
「誰に・何を伝えて・どう動いてほしいか」を、まずは普通の文章で書き出します。見た目はまだ気にしない。Claudeに壁打ちしながら、構成と言葉を7〜8割まで詰めておくと、このあとが一気にラクになります。
💡 ここを雑にすると後でぜんぶ崩れる。逆にここさえ固まれば、もう半分終わったようなもの。
Claude Design
Claude Design でデザインを作る
下書きを渡すと、ちゃんと見られる「本物っぽいデザイン」を作ってくれます。気に入らなければ「もっと余白を」「色を落ち着かせて」と会話で直すだけ。デザインの知識はいりません。
💡 完璧を目指さない。60点で次に進んで、あとからいくらでも直せます。
Claude Code
コードにしてもらう
デザインを書き出して、Claude Code に「これをコードにして」と頼みます。コツは“ゴール”をはっきり言葉にすること。「何ができていれば完成か」を先に決めて渡すと、止まらず最後まで作ってくれます。
💡 コードは1行も書きません。お願いの仕方（ゴール設定）だけ覚えれば大丈夫。
npm run dev
自分のパソコンでプレビュー
公開する前に、自分のパソコンの中だけで表示を確認します。直したいところが出てきたら、またClaudeに頼んでもう1周。納得いくまで、ここで何度でも試せます（まだ世界には出ていません）。
💡 「出してから直す」より「出す前に確認」。ここで整えておくと安心。
PHASE 2 · 公開する
世界に、出す
作ったものを、実際にネットへ。ここまでやれば、もう「自分のサイト」が誰でも見られます。
GitHub（プライベート）
コードをGitHubに保管する
作ったコードの「保管場所」を用意します。GitHubに置いておくと、変更の履歴が残り、次の公開ステップともつながります。最初は“プライベート（非公開）”で作るのがおすすめです。
💡 見られたくない情報（割引URL等）が入ることもあるので、リポジトリは非公開で。
Cloudflare Pages
Cloudflare Pages で公開する
Cloudflare に GitHub をつなぐと、保管したコードを自動でビルドして、ネットに公開してくれます。枠組みは「Astro」を選ぶだけ。一度つなげば、次からは保存するだけで自動で更新されます。
💡 無料枠で十分。しかも速い。SSL（鍵マーク）も自動でついてきます。
◯◯.pages.dev（無料）
自分のURLで確認 → 完成
公開すると「◯◯.pages.dev」という自分専用のURLが無料でもらえます。そこを開いて、ちゃんと表示されたら——おめでとうございます、あなたのサイトはもう世界に出ています。
💡 ここまでで、ドメインを買わなくても“ちゃんと公開された自分のサイト”が完成です。
TOOLS
誰が、何をやってくれるのか
役割分担がわかると、つまずいたとき「ここで困ってる」とAIに伝えやすくなります。
つくる
Claude / Claude Design
構成・コピー・デザインを作る
つくる
Claude Code
デザインをコードに変える
枠組み
Astro ＋ Tailwind
サイトの土台とスタイル
置き場
GitHub
コードの保管・履歴
公開
Cloudflare Pages
ビルド・配信・SSL
「つくる」はぜんぶAI。「置く・公開する」だけ、GitHub と Cloudflare にお任せ。
WHY
「なんでこれ使ってるの？」の答え
触りながら、自分で出した結論です。エンジニアじゃないからこそ、シンプルでハマりにくいものを選んでます。
Q. なんで Astro なの？
ぼくが作るのは、だいたい1枚もののサイト。Astro はそういう用途にぴったりで、Cloudflare に「Astro」のプリセットが用意されてるから、選ぶだけで公開できるんです。
Q. なんで Cloudflare Pages なの？
無料枠で速くて、GitHubとつなぐと“保存するだけで自動更新”になる。お金もかからないし、むずかしい管理もいらない。ぼくの規模ならこれで十分。
Q. なんで未経験のぼくでも作れるの？
わからないところは、ぜんぶClaudeに聞いてます。中身を完璧に理解しなくていい。「だいたい何をやってるか」だけ掴む。これがAI時代に一番だいじなスキルだと思ってます。
TIPS
最初にハマりやすいところ
ぼくも全部いちど踏みました。先に知っておくと、AIに正しく質問できて、すぐ抜けられます。
Cloudflareで「Pages」じゃなく「Workers」に飛ばされる
Pagesタブの中にある小さな入口から入ります。Cloudflareの画面はちょっとわかりにくいので、ここだけ気をつければOK。
公開してから表示が崩れてた
公開する前に、自分のパソコンで「ちゃんとビルドが通るか」を確認しておく。通らないまま公開しないのがコツ。
うっかり大事な情報が見える状態に
GitHubのリポジトリは“非公開（プライベート）”で作る。公開リポだと、入れたものが誰でも見られてしまいます。
ADVANCED
自分のドメインで出したくなったら
「◯◯.pages.dev」でも十分だけど、自分のドメイン（example.com）で出したくなったら、この3ステップ。
- 1
Cloudflareに自分のドメインを登録
Cloudflare Pages の「カスタムドメイン」に、使いたいドメイン（例：example.com）を追加します。
- 2
言われたDNSを登録する
画面に出てくる設定を、ドメインを買ったサービス（お名前.com・Xserver・Cloudflareなど）にそのまま登録します。
- 3
数分待つと、鍵マーク付きで公開
SSL（https）は自動で発行されます。自分のドメインで、あなたのサイトが開けるようになります。
⚠️ そのドメインで、すでにメール（会社のアドレス等）を使っている場合だけは注意。設定を間違えるとメールが止まることがあるので、ここは慎重に。はじめての一個目なら、まずは新しいドメイン or 無料の「.pages.dev」で十分です。
NEXT
次に、どうする？
6/20の無料セミナーは満席になりました。アーカイブを「フリーランスの学校 学習アプリ」で1週間無料公開しています。自分のペースで進めたいなら、教科書と無料ガイドも。
アーカイブ配信中 · 1週間無料公開
読んで終わりにしないなら、アーカイブで一緒に作るのが最速です。
6/20の無料セミナーは満席になりました。アーカイブを「フリーランスの学校 学習アプリ」で1週間無料公開しています。会員登録なしで、すぐに視聴できます。
FINALLY
むずかしそうに見えて、やることは「順番どおりに進めるだけ」。
ぼくも未経験から始めました。でも正直、読むだけだと、ほとんどの人はやらずに終わります。6/20の無料セミナーはおかげさまで満席になりましたが、アーカイブを「フリーランスの学校 学習アプリ」で1週間無料公開しています。会員登録なしですぐ観られるので、その場で公式サイトを公開しましょう。
📅 6/20（土）20:00〜21:00・オンライン（Zoom）・参加無料・満席