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

結論（2 行で）

• 友人の占い師さん向けサイトを、独自ドメイン・お問い合わせフォーム込みで「3 日・のべ 8 時間」で公開できました。
• コードは 1 行も手で書いていません。 Claude Code に日本語でお願いしただけです。

このページで扱うこと

• なぜ Claude Code でサイトを作ろうと思ったか
• 全工程のタイムライン（Day 1 〜 Day 3）
• 実際に使ったお願い文（プロンプト）と、出てきたもの
• 詰まったポイントと、どう乗り越えたか
• 予算の内訳（ドメイン・ホスティング・運用費）

なぜ Claude Code で作ったか

友人の占い師さんから「独自ドメインのサイトが欲しいけど、 WordPress のテンプレだと占いの空気感が出ない」と相談されたのがきっかけでした。

最初は外注見積もりを取ったら、最低 15 万円 + 月額運用費。 「ちょっと待って、私 Claude Code あるし、試してみてもいい？」と申し出たのが始まりです。

全工程のタイムライン

実際に送った「最初のお願い文」

いちばん長いプロンプトがこれでした。

「占い師（タロット・西洋占星術・手相）さんの個人サイトを作りたい。 雰囲気は、和モダン × 椿の花 を基調。添付した 3 枚の画像のトーンで。

必要なページ:

1. トップ（サービス紹介とプロフィール）
2. 料金ページ（3 プラン）
3. 予約フォーム（日時 3 候補 + 事前ヒアリング 10 項目）
4. お問い合わせ
5. プライバシーポリシー

技術:

• Next.js (App Router) + MDX
• Tailwind CSS
• Cloudflare Pages 前提
• お問い合わせメールは後で Brevo で実装したいので、フォーム部分は置いておく

まず Plan Mode で方針を整理してから、手を動かしてください」

ここで大事なのは、「Plan Mode で方針を整理してから」 の一文。 これを入れるだけで、Claude Code がいきなり書かずに、先に構造を提案してくれる ようになります。

詰まったポイント 3 つ

① 画像のトーンがバラバラだった

最初に Nano Banana で生成した画像を 3 枚渡したら、 「色味が違うので統一させてください」と Claude Code から逆に指摘されました。 → 画像を Nano Banana に 「同じパレットで 3 枚作って」 とお願いし直したら解決。

② 予約フォームの送信先が決まらなかった

Formspree / Brevo / Google Form など、どれにするか決めかねていたので、 「とりあえず Brevo にしておく。設定は別の日にやる」と Plan Mode の段階で宣言。 → 当日はフォーム UI だけ作り、送信処理は コメントで TODO を明記した状態 で一旦停止しました。

③ Cloudflare Pages の DNS 反映待ち

独自ドメインが有効になるまで最大 24 時間待ちが発生。 → 待ち時間を使って、Email Routing と Brevo SMTP の設定を並行で進めました。

予算の内訳

外注見積もりが 15 万円 + 月額 3,000 円だったので、初年度で約 14 万円節約 計算です。

学び: 私でも「発注者側」になれた

一番の学びは、「自分が作れる」 という感覚よりも、 「自分が発注者として、何を頼むかを言語化できる」 という感覚が身についたことでした。

エンジニアになったわけではありません。 でも、欲しいものを言葉にする力 と、「Plan Mode で先に話し合う」リズム を覚えました。 これはサイト制作以外の仕事にも転用できて、今では経費精算や日報にも使っています。

次に読むとよい記事

• CC-05 Plan Mode で失敗を減らす
• CC-07 毎月の事務仕事を Claude Code に相談してみた話
• Claude Code ハブ（機能まとめ）