占い師サイト tsubaki-an.com を Claude Code で作った話

できあがったのがこちらです → tsubaki-an.com

私は HTML も CSS もほとんど書いていません。すべて Claude Code に、自然な日本語で話しかけただけ。制作費は完全に ¥0。月額運用費も ¥0 です（ドメイン代だけ任意で年 ¥1,500）。

なぜ Claude Code で作ろうと思ったか

友人が占い師として独立するタイミングで、ホームページを作りたいと相談を受けました。見積もりを取ると、制作会社は 30 〜 80 万円。ランサーズ相場でも 10 万円は下らない。 「私、30 万円の現金は出せないけど、毎日 Claude Code で遊んでる時間はある」—— そう思ったのが始まりでした。

作業の全体フロー

企画（1 日目 / 2 時間）: 何屋さんか・どのメニューを売るか・予約はどう受けるかを、Claude と壁打ち
デザイン方向性（1 日目 / 1 時間）: 桜・和風・落ち着き、を Claude に伝えてサンプル生成
実装（2〜4 日目 / 計 10 時間）: ページ作成、予約フォーム、特商法ページ、Stripe の代わりの決済手段選定
独自ドメイン（5 日目 / 1 時間）: お名前.com で取得、Cloudflare Pages に接続
独自メール（5 日目 / 30 分）: info@tsubaki-an.com の送受信設定
公開（5 日目 / 30 分）: デプロイと動作確認、友人への納品

合計 約 15 時間、5 日間で完成。

つまずきポイント（リアルな会話例）

Stripe が使えない問題

占い業は Stripe / Square / PAY.JP / Shopify で 禁止業種 に指定されています。気づいたのは実装途中。あわてて Claude に相談:

「占いの決済、Stripe が禁止業種なんだって。使える決済サービスある？」

Claude が アルファノート と KOMOJU を提案、さらに「初期は ペライチの有料プラン で決済埋め込みだけ借りるのが最速」と教えてくれました。この判断、自力で調べていたら丸 1 日かかっていたと思います。

予約フォームのメール受信

お名前.com で取得したドメインは、Gmail と直結できません。 Claude と相談して Cloudflare Email Routing（受信）+ Brevo SMTP（送信）の構成に。転送先は友人の Gmail にして、「info@tsubaki-an.com で受信 → 友人の普段の Gmail に届く」を実現。

Claude 側の暴走を止める

ある瞬間、Claude が「ここを全面的に書き換えましょう」と言い出して、 8 割作ってあったページを壊しかけました。これが Plan Mode を知る前の出来事。以降、重要な変更は必ず Shift+Tab 2 回 で Plan Mode に入る、が習慣になりました。

できあがったもの

トップページ・メニュー紹介・ブログ・特商法・プライバシーポリシー
予約フォーム（LINE 連携 / メール連携）
独自メール（info@tsubaki-an.com で受信・送信）
Cloudflare Pages 上で SSL 自動・無料・CDN 配信
お客様の声セクション（初期は空）

お金の話

項目	実費
独自ドメイン（年）	¥1,500
ホスティング（Cloudflare Pages）	¥0
メール受信（Cloudflare Email Routing）	¥0
メール送信（Brevo 無料枠）	¥0
予約フォーム（自作）	¥0
決済（初期はペライチ埋め込み）	¥月 1,000 前後
Claude Pro	$20/月（私の個人契約）

制作費として友人が支払ったのは ¥1,500 のドメインだけ。 他は 0 円か、私の個人契約の流用。

やってみてわかった「AI との共作」

これまで「AI は人の仕事を奪う」という話ばかり聞いていましたが、実際に作ってみて感じたのは逆で、「やりたかったけど諦めていた人の、やる側への復帰」 でした。

友人は占いに集中できる。私は作る楽しさを味わえる。両方、AI がいなかったら起きなかったことです🌸