Claude Codeでブログを0から作った全記録 / Building a Blog from Scratch with Claude Code
English Summary: I built yuichi.blog entirely with Claude Code — Anthropic's command-line AI coding tool. As a former IT engineer who hadn't done frontend development in years, I went from zero to a fully functional Next.js blog with 7 articles, SEO optimization, and Google AdSense integration in about 20+ hours. This article documents the entire process: the prompts I used, the mistakes I made, and what I learned about "vibe coding" as a practical development methodology.
はじめに：なぜこの記事を書くのか
以前「バイブコーディングのすすめ」という記事で、Claude Codeを使ってこのブログを約1時間で立ち上げたことを書いた。あの記事は概要だった。
今回は全記録を書く。
このブログは現在、記事7本、Google AdSense申請済み、SEO対策済み、バイリンガル対応、レスポンシブデザイン完備の状態にある。ここまでにかかった時間は累計20時間以上。その過程で使ったプロンプト、ぶつかった壁、学んだことをすべて公開する。
この記事の対象読者：
- バイブコーディングに興味があるが、実際にどうやるかイメージが湧かない人
- プログラミング経験はあるが、フロントエンド開発はブランクがある人
- Claude Codeを使ってみたいが、具体的な使い方を知りたい人
- ブログを作りたいが、WordPressではなくモダンな技術スタックで作りたい人
Phase 1：初期構築（所要時間：約1時間）
技術スタックの選定
最初にClaude Codeに投げたプロンプトはこうだ：
ブログサイトを作りたい。技術スタックを提案してほしい。
要件：
- 静的サイト生成（SSG）で高速
- Markdownで記事を管理
- SEOに強い
- デザインはシンプルでモダン
- 将来的にGoogle AdSenseを入れたい
Claude CodeはNext.js + Tailwind CSS + MDXを提案してきた。理由は明快で、Next.jsのSSGは高速でSEOに強く、Markdownベースの記事管理が容易、Tailwindで効率的にスタイリングできる、Vercelへのデプロイが簡単、という点だった。
この提案をそのまま採用した。自分がディレクターで、Claude Codeがエンジニア。バイブコーディングの基本だ。
プロジェクトの初期化
次のプロンプト：
Next.jsプロジェクトを作成して、以下の構成でブログサイトの骨格を作ってほしい。
- トップページ：記事一覧
- 記事ページ：Markdownから生成
- Aboutページ
- レスポンシブデザイン
- ダークモード対応
- フォント：日本語と英語の両方に対応
Claude Codeはターミナル上でnpx create-next-appを実行し、必要なパッケージをインストールし、ディレクトリ構造を作り、基本的なコンポーネントを一気に生成した。
ここで重要なのは、Claude Codeはただコードを生成するだけでなく、ターミナルでコマンドを実行できるということだ。 ファイルの作成、パッケージのインストール、ビルドの実行、エラーの確認まで、すべてをClaude Code自身が行う。自分はその様子を見ながら「OK」「ちょっと待って、そこは違う」と指示を出すだけ。
約1時間後、ローカルで動くブログサイトの原型ができていた。
Phase 2：デザインの磨き込み（所要時間：約3時間）
最初の壁：「AIっぽいデザイン」問題
初期生成されたデザインは、機能的には問題なかったが、見た目がいかにもAIが作った感があった。均等なパディング、無個性なカラーパレット、テンプレート感。
ここで投げたプロンプト：
デザインをもっと個性的にしたい。以下のような方向性で：
- ミニマルだけど温かみがある
- 日本語のタイポグラフィが美しく見える
- テック系ブログだけど堅すぎない
- ヒーロー画像やアイキャッチを効果的に使える構成
参考にしたい雰囲気：個人の技術ブログだけど、読み物としても楽しめる感じ
学んだこと：バイブコーディングでは「雰囲気」を言語化する力が重要。 「かっこよくして」では良い結果が出ない。「ミニマルだけど温かみがある」「堅すぎない」のように、相反する要素のバランスを言葉で伝えることが、AIとの協働の鍵だ。
タイポグラフィの調整
日英バイリンガルのブログでは、フォントの選択が見た目に大きく影響する。
日本語はNoto Sans JP、英語はInterを使いたい。
フォントサイズは本文16px、行間1.8。
見出しは太めで、本文との視覚的な差をつけて。
こういった細かい指示の積み重ねが、「AIが作った感」を消していく。
Phase 3：記事管理システムの構築（所要時間：約2時間）
Markdownベースの記事管理
以下の仕様で記事管理システムを作ってほしい：
- /blog/[slug]のルーティング
- frontmatterでタイトル、日付、タグ、読了時間、アイキャッチ画像を管理
- タグによるフィルタリング
- ピン留め機能（特定の記事をトップに固定）
- 記事一覧での日付順ソート
Claude Codeはgray-matterライブラリを使ったfrontmatterパーサーと、動的ルーティングを組み合わせた記事管理システムを構築してくれた。
記事のfrontmatterはこんな形になった：
---
title: "At 33, From IT Engineer to Medical School in Bulgaria"
date: "2026-04-01"
tags: ["AboutMe", "LifeInBulgaria", "CareerChange"]
readTime: "4 min"
image: "/images/hero-why-i-chose-medicine.png"
pinned: true
---
画像の最適化
Next.jsのImageコンポーネントを使った画像最適化も、Claude Codeとの会話で実装した。
アイキャッチ画像をNext.jsのImageコンポーネントで最適化したい。
また、OGP画像も自動生成して、SNSシェア時にきれいに表示されるようにしてほしい。
Phase 4：SEO対策（所要時間：約2時間）
ここは父親からのアドバイスが大きかった。「ブルガリア 医学部 留学」のような低競争キーワードを狙え、と。
技術的SEOの実装
以下のSEO対策を実装してほしい：
- 各ページにメタタグ（title, description, og:image）
- sitemap.xmlの自動生成
- robots.txtの設定
- 構造化データ（JSON-LD）でBlogPosting
- パンくずリスト
- canonical URLの設定
Claude Codeはこれらを一つずつ実装し、各ファイルの役割を説明してくれた。SEOの技術的な部分は、手動でやると地味で時間がかかるが、AIに任せると正確かつ高速。
Google Search Consoleとの連携
Google Search Consoleにサイトを登録したい。
verification用のメタタグを追加して。
この一行で完了。こういう「やり方は知ってるけど面倒」なタスクこそ、バイブコーディングの真価が発揮される場面だ。
Phase 5：Google AdSense対応（所要時間：約1時間）
AdSenseのスクリプト埋め込み
Google AdSenseのスクリプトをNext.jsに組み込みたい。
- <head>にAdSenseのスクリプトタグを追加
- 記事ページの適切な位置に広告ユニットを配置
- プライバシーポリシーページと利用規約ページを作成
AdSenseの審査に通るには、プライバシーポリシーと利用規約が必須。Claude Codeはこれらのページのテンプレートも生成してくれた。
現状： 審査は一度不合格になり、記事をあと5本追加して再審査リクエストする予定。AdSenseの審査基準は「十分なオリジナルコンテンツがあること」なので、記事の量と質が鍵だ。
Phase 6：コンテンツの作成と投稿（所要時間：約12時間以上）
ここが最も時間がかかった部分だ。そしてここが、バイブコーディングの記事ではあまり語られない現実でもある。
サイトの構築は全体の3割。コンテンツが7割。
7本の記事を書くのに12時間以上かかっている。Claude（claude.ai）で下書きのアイデアを相談し、構成を練り、自分の言葉で書き直し、画像を用意し、SEOを意識したタイトルとメタディスクリプションを調整する。
バイブコーディングでサイトは速く作れる。しかし、そこに載せるコンテンツの価値は、自分自身の経験と思考からしか生まれない。ここはAIに外注できない。
Phase 7：デプロイと運用（所要時間：約1時間）
Vercelへのデプロイ
このNext.jsプロジェクトをVercelにデプロイしたい。
カスタムドメイン yuichi.blog を設定して。
Vercelのデプロイは驚くほど簡単だった。GitHubリポジトリと連携し、git pushするだけで自動ビルド・デプロイ。Claude Codeがその設定も手伝ってくれた。
つまずいたポイントと対処法
20時間以上の開発で、当然うまくいかないこともあった。
1. ビルドエラーの連鎖
Claude Codeが生成したコードがビルド時にエラーを出すことがある。特にTypeScriptの型エラーが多かった。
対処法： エラーメッセージをそのままClaude Codeに貼り付ける。
以下のビルドエラーが出ている。修正してほしい：
[エラーメッセージをそのまま貼り付け]
大抵はこれで解決する。Claude Codeはエラーを読んで、原因を特定し、修正を適用し、再ビルドまで自動でやってくれる。
2. デザインの「微妙な違い」の伝達
「もうちょっと左に」「もう少し余白を」のような微調整は、言葉で伝えるのが難しい。
対処法： 数値で指定する。「パディングを16pxから24pxに」「フォントサイズを14pxに」。バイブコーディングでも、具体的な数値があるとAIの精度が格段に上がる。
3. コンテキストの消失
長時間の開発セッションでは、Claude Codeがプロジェクトの全体像を見失うことがある。
対処法： セッションの最初にプロジェクトの概要を再共有する。
以前から継続しているプロジェクトです。
yuichi.blogというNext.jsブログサイトで、以下の構成です：
[ディレクトリ構造と現状の説明]
今日やりたいこと：[具体的なタスク]
数字で振り返る：20時間の内訳
| フェーズ | 所要時間 | 内容 | |---------|---------|------| | 初期構築 | 約1時間 | プロジェクト作成、基本構造 | | デザイン | 約3時間 | UI/UX、レスポンシブ対応 | | 記事管理 | 約2時間 | Markdown、ルーティング | | SEO | 約2時間 | メタタグ、サイトマップ | | AdSense | 約1時間 | スクリプト、ポリシーページ | | コンテンツ | 約12時間+ | 記事7本の執筆 | | デプロイ | 約1時間 | Vercel、ドメイン設定 |
合計：約20時間以上
もし同じものをバイブコーディングなしで作ったら？ 控えめに見積もって60〜80時間はかかっていたと思う。
バイブコーディングで学んだ5つのこと
1. AIは「エンジニア」、自分は「ディレクター」
コードを書く作業はAIに任せ、自分は方向性の決定、品質の判断、ユーザー視点での確認に集中する。この役割分担が最も効率的だった。
2. プロンプトは「具体的」かつ「文脈豊富」に
「ブログを作って」では良い結果は出ない。要件、制約、雰囲気、参考例を具体的に伝えるほど、AIのアウトプットの質が上がる。
3. サイト構築は速い。コンテンツが本当の勝負
技術的な実装はAIが加速してくれるが、読者に価値を提供するコンテンツは自分にしか作れない。20時間のうち12時間以上がコンテンツ制作だったという事実が、それを物語っている。
4. エラーを恐れない
バイブコーディングでは、エラーは日常茶飯事。でも、エラーメッセージをAIに渡せば大抵解決してくれる。「エラーが出た＝失敗」ではなく、「エラーが出た＝AIに渡すデータが増えた」と捉えるマインドセットが大事。
5. 完璧を目指さない
バイブコーディングの「バイブ（雰囲気）」の本質はここにある。完璧なコードを書こうとするのではなく、「だいたいこんな感じ」で進めて、イテレーションを回す。完璧は後からついてくる。
おわりに：AIと人間の協働のかたち
このブログ自体が、AIと人間の協働の実験だ。
Claude Codeがコードを書き、claude.aiが記事のアイデアを一緒に考え、自分がディレクションし、自分の経験と言葉でコンテンツを作る。どちらか一方だけでは、このブログは存在しない。
20時間かけて一つのブログを作ったということは、20時間分の「AIとの対話」があったということでもある。その対話の中で、プログラミングの技法だけでなく、自分が何を伝えたいのか、誰に届けたいのかを考え続けた。
バイブコーディングは、単なる開発手法ではない。AIと一緒に考え、一緒に作り、一緒に学ぶプロセスだ。
興味がある人は、まずClaude Codeをインストールして、「何か作りたいものある？」と聞いてみてほしい。そこから始まる。
このブログ yuichi.blog 自体が、この記事で書いたプロセスの産物です。ソースコードはGitHubで公開予定。