このブログ「おこづかいハック」は、私がコードをほぼ書かずに作りました。

設計・実装・デバッグ・デザイン修正まで、すべてAIに日本語で指示を出すだけ。いわゆる「バイブコーディング」と呼ばれる手法です。

この記事では、サイトが完成するまでの全工程・実際に使ったプロンプト・かかった費用と時間を、包み隠さず書き残しておきます。

WordPressをやめた理由は「AI使ったほうが面白そうだから」

ブログを始めようと思ったとき、最初はWordPressも候補でした。

でも考えてみると、WordPressもAIを使った方法も、自分にとってはどちらも知識ゼロからのスタートです。だったら、「AIと相談しながら作れて、なんでも自分でカスタマイズできる方法」のほうが絶対に面白い。そう思ってWordPressは選択肢から外しました。

サーバー代やプラグイン管理が面倒、という話もよく聞きますが、自分の場合は「面白そう」という理由が一番大きかったです。

使った技術スタックと費用の全内訳

完成したサイトの構成と、毎月・毎年かかるコストをまとめます。

技術スタック

役割ツール
フロントエンドAstro（TypeScript + Tailwind CSS）
CMS（記事管理）Sanity
ホスティングVercel
ドメイン管理Cloudflare
AI（開発・相談）Claude（Proプラン）

費用の内訳

ツール金額
Claude Pro3,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 Codeで実装

方針が固まった状態でClaude Codeを使うと、指示が明確なのでアウトプットがブレませんでした。

作業は大きく4つの工程に分けて進めました。

  • 環境構築　Astro・Sanity・Vercelのセットアップ
  • 機能実装　レイアウト・ブログ機能（一覧/個別/カテゴリ/タグ）・検索
  • 仕上げ　SEO・OGP・GA4・サイトマップ・テスト
  • 公開　Vercelデプロイ・ドメイン接続（ここだけ手作業）

実際に使ったプロンプトを公開する

プロジェクト機能でまとめたプロンプトは、こんな感じです。3つだけ例として載せます。

Phase1：環境構築の指示

プロンプト
Phase1: 環境構築・プロジェクトセットアップ
以下の構成でAstroブログプロジェクトをセットアップしてください。

技術スタック
- Astro（フロントエンド）
- Sanity（ヘッドレスCMS）
- Vercel（ホスティング）
- TypeScript使用 / Tailwind CSS使用

やること（Phase1）
1. Astroプロジェクトの新規作成
- TypeScript: strictモード / Tailwind CSS追加
2. Sanity統合
- Project ID:****/ Dataset:****
3. Vercel連携用設定

完了条件
- npm run devでローカル起動できる
- Sanityへの接続設定が完了している

「何を使うか」「プロジェクトIDは何か」「完成の定義は何か」まで書いておくと、Claudeが迷わず動いてくれます。

Phase3：デザインの指示

プロンプト
Phase3:デザイン方針
- モバイルファースト・レスポンシブ
- シンプルで読みやすい日本語ブログデザイン
- ヘッダー・フッター: ダーク（#0F172A）
- アクセントカラー: #38BDF8（スカイブルー）
- ミニマル・シンプル寄り

カラーコードを最初から指定しておいたので、ブランドカラーがどのページでもブレませんでした。「なんかイメージと違う」という修正が最小限で済んだのは、ここで細かく伝えておいたからだと思います。

Phase9：テスト・デバッグの指示

プロンプト
Phase9:テスト・デバッグ

【Step1】npm run devでローカル起動してエラーがないか確認
【Step2】以下のページが正常に表示されるか確認
- トップページ（/）
- ブログ一覧（/blog）
- カテゴリーページ・タグページ・サイトマップ
【Step3】レスポンシブ確認（モバイル375px）
【Step4】メタタグ・OGP確認

問題が見つかれば修正まで対応してください。

テストの観点もすべて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を使ったほうが面白い」という気持ちで始めましたが、結果としてその判断は正解でした。

関連記事