このブログ「おこづかいハック」は、私がコードをほぼ書かずに作りました。
設計・実装・デバッグ・デザイン修正まで、すべてAIに日本語で指示を出すだけ。いわゆる「バイブコーディング」と呼ばれる手法です。
この記事では、サイトが完成するまでの全工程・実際に使ったプロンプト・かかった費用と時間を、包み隠さず書き残しておきます。
Claude Codeだけでブログを作った全記録｜実際のプロンプト・費用・期間をすべて公開
お小遣いパパ
・更新 ・約9分
本記事は広告（アフィリエイトリンク）を含む場合があります。詳しくは広告についてをご覧ください。
WordPressをやめた理由は「AI使ったほうが面白そうだから」
ブログを始めようと思ったとき、最初はWordPressも候補でした。
でも考えてみると、WordPressもAIを使った方法も、自分にとってはどちらも知識ゼロからのスタートです。だったら、「AIと相談しながら作れて、なんでも自分でカスタマイズできる方法」のほうが絶対に面白い。そう思ってWordPressは選択肢から外しました。
サーバー代やプラグイン管理が面倒、という話もよく聞きますが、自分の場合は「面白そう」という理由が一番大きかったです。
使った技術スタックと費用の全内訳
完成したサイトの構成と、毎月・毎年かかるコストをまとめます。
技術スタック
| 役割 | ツール |
|---|---|
| フロントエンド | Astro（TypeScript + Tailwind CSS） |
| CMS（記事管理） | Sanity |
| ホスティング | Vercel |
| ドメイン管理 | Cloudflare |
| AI（開発・相談） | Claude（Proプラン） |
費用の内訳
| ツール | 金額 |
|---|---|
| Claude Pro | 3,400円 |
| Cloudflareドメイン | 年額約1,500円（月換算125円） |
| Vercel | 無料 |
| Sanity | 無料 |
| Astro | 無料 |
実質の月額コスト：約3,125円
WordPressをレンタルサーバーで動かすとサーバー代だけで月1,000〜2,000円、そこにテーマ代やプラグイン代が乗ってきます。このスタックは長期的に見てもかなり安く抑えられています。
Claude Proは元から利用しているし、開発が終わってからも、記事作成・SNS投稿文の生成に毎日使っているので、「開発専用の費用」というより「ブログ運営ツール全体の費用」として考えています。
実際の作業手順：まずプロジェクト機能から始めた
ここが、初心者の自分がやってよかったと思う一番のポイントです。
ステップ1：いきなりClaude Codeは使わなかった
Claude Codeという開発ツールがあることは知っていましたが、最初からClaude Codeを使うのは初心者には難しかったです。「何を作りたいか」「どんなサイトにしたいか」という方針自体がまだ固まっていなかったので、ツールを使う前に考えることが多すぎました。
そこでまず、Claudeのプロジェクト機能を使って壁打ちをすることから始めました。
ステップ2：プロジェクト機能で方針と指示書を整える
プロジェクト機能の良いところは、会話の内容を覚えていてくれること。
「こんなブログを作りたい」「読者はこういう人」「デザインはこんな感じ」──そういった方針を対話しながら整理し、最終的にはClaude Codeに渡すための「指示書（プロンプト）」をプロジェクト内で作り込みました。
詳しい人はいきなりClaude Codeで何でもできるのかもしれませんが、自分には「プロジェクトで方針を固めてからClaude Codeで実装」という2段階の進め方が合っていました。
ちなみにこのプロジェクト機能、運営が3ヶ月を超えたころに情報を詰め込みすぎて肥大化しました。整理し直した記録はClaude Projectに全部突っ込んだら逆に壊れた話にまとめています。
ステップ3：Claude Codeで実装
方針が固まった状態でClaude Codeを使うと、指示が明確なのでアウトプットがブレませんでした。
作業は大きく4つの工程に分けて進めました。
- 環境構築 Astro・Sanity・Vercelのセットアップ
- 機能実装 レイアウト・ブログ機能（一覧/個別/カテゴリ/タグ）・検索
- 仕上げ SEO・OGP・GA4・サイトマップ・テスト
- 公開 Vercelデプロイ・ドメイン接続（ここだけ手作業）
実際に使ったプロンプトを公開する
プロジェクト機能でまとめたプロンプトは、こんな感じです。3つだけ例として載せます。
Phase1：環境構築の指示
「何を使うか」「プロジェクトIDは何か」「完成の定義は何か」まで書いておくと、Claudeが迷わず動いてくれます。
Phase3：デザインの指示
カラーコードを最初から指定しておいたので、ブランドカラーがどのページでもブレませんでした。「なんかイメージと違う」という修正が最小限で済んだのは、ここで細かく伝えておいたからだと思います。
Phase9：テスト・デバッグの指示
テストの観点もすべてClaude Codeに渡して、確認と修正をセットでやってもらいました。「自分でブラウザを開いて確認するのは最後の目視確認だけ」という状態です。
公開作業（Vercelデプロイとドメイン接続）だけは手作業
Vercelへのデプロイとドメイン接続（Phase10）は、管理画面での操作が必要なため手作業で行いました。
とはいえ、ClaudeのチャットでStep1〜5の手順を教えてもらいながら進めたので、詰まることはほぼなかったです。GitHubへのpush・Vercelとの連携・CloudflareのDNS設定まで、手順を確認しながら30分程度で完了しました。
「詰まった箇所」がなかった理由
開発中に「もう無理だ」と思った瞬間がありませんでした。理由は2つあります。
Claude Codeがエラーを自動で検知・修正してくれる
基本的にエラーの確認から修正まで、Claude Codeが自分で処理してくれます。自分がコードを読む必要はほぼありませんでした。
自分が気づいたエラーはプロジェクト機能で相談する
ブラウザで確認していて「あれ、おかしいな」と気づいたときは、プロジェクト機能のチャットで状況を説明します。するとClaudeが「こういうプロンプトでClaude Codeに指示してください」という修正用プロンプトを作ってくれるので、それをClaude Codeに渡すだけ。
自分が判断しなければいけなかったのは、「どんなサイトにしたいか」という意思決定だけです。技術的な判断はすべてClaudeに任せました。
かかった期間と作業時間
プロジェクト機能での方針整理からVercelへの本番デプロイ完了まで、約2週間です。
毎日作業していたわけではなく、週末と仕事終わりに少しずつ進めました。実際の作業時間に換算すると、トータルで20〜30時間程度だと思います。
バイブコーディング、正直どうだった？
良かった点
- コードが書けなくてもサイトが完成する
- プロジェクト機能で方針を固めてからClaude Codeで実装、という2段階が初心者に合っていた
- エラー解決がチャットで完結する
- WordPressと比べてサイトが速い
正直なデメリット
- 自分のサイトなのに何もわかっていない状態になりやすい。完成してしまうので、理解しないまま進めることができてしまいます。プロジェクト機能でClaudeに「この実装はどういう仕組み？」と聞きながら理解を積み上げておくことをおすすめします
- 指示が曖昧だと意図と違う実装になることがある
- Claude Proの月$20が継続コストになる（自分はもともと課金していたので、実質ドメイン代だけで作れた）
向いている人
- プログラミング経験ゼロだけどオリジナルサイトを作りたい人
- 「面白そう」という好奇心で動ける人
- WordPressの維持管理が面倒になっている人
詳しい人はClaude Codeを最大限に使いこなせるのだと思いますが、初心者なりに「プロジェクト機能で壁打ち → Claude Codeで実装」という身の丈に合った使い方で、ちゃんと完成できました。
まとめ
Claude Codeを使ってブログを作った全記録をまとめました。
- 費用：実質ドメイン代のみ（年1,500円）※Claude Proはもともと課金済み。新規加入なら月+3,400円
- 期間：約2週間（実作業20〜30時間）
- 詰まった箇所：なし
- ポイント：いきなりClaude Codeではなく、プロジェクト機能で方針を固めてから実装する
「どうせ0から始めるなら、AIを使ったほうが面白い」という気持ちで始めましたが、結果としてその判断は正解でした。
個人開発だけでなく、仕事（規制業界）でローカルLLM＋RAGの社内導入に挑戦している進行中シリーズはローカルLLM導入を提案した話にまとめています。
