こんにちは！

アールグレイです。

これまで4つの記事で、SanityとVercelを使ったAI駆動型ブログシステムについて解説してきました。

今回は、そのシステムを実際にゼロから構築する具体的な流れを、プログラミング初心者でも分かるように詳しく解説します。

実は、このブログシステムの構築で最も重要なのは、最初の要件定義なんです。

そして、その要件定義をAIに手伝ってもらうことで、驚くほどスムーズに開発が進むんです。

なぜ要件定義が重要なのか？

「要件定義」って難しそうに聞こえますよね。

でも、簡単に言うと「何を作りたいかを整理すること」です。

• 何部屋必要？
• キッチンはどんな感じ？
• 予算はどのくらい？

例えば、家を建てる時も、いきなり建て始めるのではなく： といったことを最初に決めますよね。

それと同じです！

Step 0: AIと対話して要件定義書を作成する

1. ChatGPTやClaudeに相談する

まず、ChatGPTやClaudeなどのAIに、こんな感じで相談します。

「私はAIを活用したブログシステムを作りたいです。

以下の機能を実現したいと考えています。

• 記事の自動生成機能
• SEO対策（検索で見つかりやすくする）
• モダンなデザイン
• 管理のしやすさ
• 無料または低コストでの運用

これらを実現するための技術スタックと、システムの要件定義書を作成してください。
」

2. AIが要件定義書を生成

AIは、以下のような詳細な要件定義書を作成してくれます。

• フロントエンド：Next.js 15（Webサイトを作るツール）
• CMS：Sanity（記事を管理するツール）
• ホスティング：Vercel（サイトを公開するサービス）
• AI連携：OpenAI API / Claude API（AI機能を使うため）
• スタイリング：Tailwind CSS（デザインを作るツール）

コンテンツ管理

• Sanityでの記事管理
• リッチテキストエディタ（文字装飾ができるエディタ）
• 画像管理

AI機能

• 記事自動生成
• SEO最適化
• ファクトチェック（情報の正確性確認）

内容が分からなくても大丈夫！

上の要件定義書、専門用語だらけで難しそうですよね？

でも大丈夫です！

なぜなら、この要件定義書は「Claude Codeへの指示書」として使うだけだから。

料理のレシピと同じで、材料や手順が書いてあれば、詳しい意味が分からなくても作れるんです。

3. 要件定義書をClaude Codeに渡す

完成した要件定義書をClaude Codeに渡して、実際の開発を始めます。

これが「バイブコーディング（AI-assisted codingやAIペアプログラミングとも呼ばれる手法）」の真骨頂です！

Step 1: 開発環境のセットアップ（Claude Codeが全部やってくれます！）

開発環境のセットアップって、料理で言えば「調理器具を揃える」みたいなものです。

でも、あなたが直接やる必要はありません！

＜実際のClaude Codeとのやり取り＞

あなた：「要件定義書に基づいて、開発環境をセットアップしてください」

• Node.jsプロジェクトの初期化
• Next.js 15のインストール
• 必要な依存関係の設定

Claude Code：「開発環境をセットアップします。
以下の作業を行います：実行しています...」

• npx create-next-app@latest ai-blog-maker --typescript --tailwind --app
• cd ai-blog-maker
• npm install [必要なパッケージ]

（Claude Codeが自動的に以下を実行）Claude Code：「開発環境のセットアップが完了しました。
」

あなたがやることは？

• Claude Codeの作業を見守るだけ
• エラーが出たら、そのままClaude Codeに伝える
• 「完了しました」と言われたら次のステップへ

Sanityのセットアップも同じ

Sanityについて詳しく知りたい方は、こちらの詳細記事をご覧ください。
ヘッドレスCMSとしてのSanityの特徴や利点について詳しく解説しています。

＜実際のClaude Codeとのやり取り＞

あなた：「Sanityのアカウントを作成しました。
プロジェクトの設定方法を教えてください」

Claude Code：「Sanityのプロジェクトを設定します。
まずはアカウント作成から順に説明します：

■ アカウント作成

1. sanity.io にアクセス

2. 「Get started」をクリック

3. GitHubまたはGoogleアカウントでサインアップ（推奨）

4. プロフィール情報を入力

■ プロジェクト作成

1. Sanity管理画面（sanity.io/manage）にアクセス

2. 「Create new project」をクリック

3. プロジェクト名を入力（例：ai-blog-cms）

4. プランは「Free」を選択

5. データセットは「production」のまま」

あなた：「プロジェクトを作成しました。
次は何をすればいいですか？」

Claude Code：「次はAPIトークンを設定します。
以下の手順で進めてください：

■ APIトークンの設定

1. プロジェクトの「Settings」→「API」タブを開く

2. 「Add API token」をクリック

3. Token name: blog-editor

4. Permissions: Editor を選択

5. 生成されたトークンをコピーして安全な場所に保存」

あなた：「APIトークンを取得しました。
次は何をすればいいですか？」

Claude Code：「最後にCORS設定を行います。
これはWebサイトからSanityにアクセスできるようにする設定です：

■ CORS設定

1. Settings → API → CORS origins セクションへ移動

2. 「Add CORS origin」をクリック

3. 以下のURLを追加：

- http://localhost:3000 （開発環境用）

- https://あなたのドメイン.com （本番環境用、後で追加）

4. 「Allow credentials」にチェックを入れる」

あなた：「CORS設定も完了しました」

Claude Code：「完璧です！これで開発に必要なSanityの設定がすべて完了しました。
次は、このプロジェクトIDとトークンを使って開発環境と連携させます。
」

豆知識：何をしているの？

Sanityは「記事を保管する倉庫」みたいなものです。
APIトークンは「倉庫の鍵」のようなもので、これがあることで記事の読み書きができるようになります。
CORS設定は「どのWebサイトからアクセスを許可するか」を決める設定で、開発中はlocalhost:3000からのアクセスを許可します。

Step 2: スキーマ設計と基本構造の実装（これもClaude Codeにお任せ！）

「スキーマ」って何？と思いますよね。

簡単に言うと、「記事にどんな情報を含めるか決めること」です。

例えば： こういった「記事の設計図」を作る作業です。

• タイトル
• 本文
• 画像
• 投稿日
• カテゴリー

＜実際のClaude Codeとのやり取り＞

あなた：「要件定義書に基づいて、記事のスキーマを作成してください」

• タイトル（必須）
• スラッグ（URL用）
• 本文（リッチテキスト）
• 抜粋
• 著者情報
• カテゴリー
• タグ
• SEO設定

Claude Code：「要件定義書を確認しました。
記事のスキーマを作成します。
要件定義書に記載されている以下の項目を含むスキーマを設計します。

以下の項目を含むスキーマを設計します：ファイルを作成しています...」

• schemas/post.ts を作成
• schemas/author.ts を作成
• schemas/category.ts を作成

（Claude Codeが自動的にファイルを作成）Claude Code：「スキーマの作成が完了しました。
記事、著者、カテゴリーの型定義を設定しました。
」

あなたがやることは？

• Claude Codeの作業を見守るだけ
• 「完了しました」の報告を確認
• 特別な要望があれば伝える（例：「コメント機能も追加して」）

裏で何が起きているの？

Claude Codeが記事の「型」を作っています。

ケーキの型みたいなもので、この型に従って記事が作られるようになります。

重要：Claude Codeは要件定義書に書かれた内容を自動的に反映してスキーマを作成します。
もし後から「やっぱりこの項目も必要だった」と思ったら、その都度Claude Codeに追加や修正を依頼すれば対応してくれます。
完璧を求めず、必要に応じて調整していけばOKです！

Step 3: AI記事生成機能の実装

ここが本システムの核心部分です。
実際のブログシステムでは、複数のAIを組み合わせて高品質な記事を生成しています。

使用するAIサービス

1. Claude (Anthropic)

• 記事本文の生成（高品質で読みやすい文章）
• ファクトチェック（情報の正確性確認）
• APIキー取得：https://console.anthropic.com/

2. OpenAI (GPT-4)

• SEO最適化（タイトル、メタ情報の生成）
• キーワード抽出
• APIキー取得：https://platform.openai.com/

3. DALL-E 3 (OpenAI)

• アイキャッチ画像の自動生成
• OG画像（SNS共有用画像）の生成
• OpenAIのAPIキーで利用可能

＜実際のClaude Codeとのやり取り＞

あなた：「AI記事生成機能を実装してください。
Claude APIで記事生成、OpenAI APIでSEO最適化、DALL-E 3でアイキャッチ生成をお願いします」

Claude Code：「AI記事生成システムを実装します。
以下の機能を作成します：

• 記事生成スクリプト（scripts/blog-generator/generate.js）
• ファクトチェック機能（scripts/blog-generator/factCheck.js）
• アイキャッチ生成機能（scripts/generate-sanity-og-image.ts）

実装を開始します...」

記事生成の流れ

1. トピック設定 → 2. Claude APIで本文生成 → 3. ファクトチェック

4. OpenAI APIでSEO最適化 → 5. DALL-E 3でアイキャッチ生成 → 6. Sanityに投稿

APIキーの管理

＜実際のClaude Codeとのやり取り＞

あなた：「APIキーはどこに設定すればいいですか？」

Claude Code：「開発環境では.env.localファイルに設定します：

ANTHROPIC_API_KEY=your-claude-api-key

OPENAI_API_KEY=your-openai-api-key

本番環境（Vercel）では、後ほど環境変数として設定します。
」

豆知識：なぜ複数のAIを使うの？

それぞれのAIには得意分野があります。
Claudeは自然で読みやすい文章、GPT-4はSEOやマーケティング、DALL-E 3は画像生成が得意。
適材適所で使い分けることで、高品質なコンテンツが作れるんです！

Step 4: ブログデザインとユーザー体験の実装

今回は「Cocoon」という人気のブログデザインを参考に、読みやすいデザインを作りました。

これもデザインの知識がなくても大丈夫！Claude Codeに要望を伝えるだけで、プロ並みのデザインが実現できます。

＜実際のClaude Codeとのやり取り＞

あなた：「Cocoonのようなシンプルで読みやすいデザインにしてください」

Claude Code：「Cocoonスタイルのデザインを実装します。
以下の特徴を含めます：

• シンプルで読みやすいレイアウト
• カード型の記事一覧
• 人気記事サイドバー
• レスポンシブ対応（スマホ・PC両対応）」

ブログデザインの変更も簡単！

＜実際のClaude Codeとのやり取り＞
あなた：「記事カードの色を青系にしたいです」

Claude Code：「記事カードの配色を青系に変更します。
CSSを修正しています...」

あなた：「フォントサイズをもう少し大きくして」

Claude Code：「フォントサイズを調整します。
読みやすさを考慮して16pxから18pxに変更しました。
」

Step 5: Vercelへのデプロイと独自ドメイン設定

ここまでの作業（Step 1〜4）は、すべてローカル環境（あなたのPC上）で行ってきました。

開発環境で確認すること

• http://localhost:3000 でブログが表示される
• Sanity Studioで記事の作成・編集ができる
• AI記事生成スクリプトが動作する
• デザインが想定通りに表示される

基本的な動作確認ができたら、次はインターネットに公開しましょう！

なぜ早めにVercelにデプロイするの？

1.本番環境での動作確認- ローカルでは動いても本番で動かないことがある

2.継続的な改善- デプロイ後も修正は簡単（GitHub経由で自動反映）

3.早期発見- 環境変数の設定ミスなどを早めに発見できる

重要：完璧を求めずに、まずはデプロイ！後から何度でも修正できます。

「デプロイ」は、作ったブログをインターネットに公開することです。
Vercelを使えば、数分で世界中からアクセスできるブログが完成します！

GitHubリポジトリの作成

事前準備：GitHubアカウントを作成しよう

GitHubは、プログラムのコードを保管・管理するサービスです。
「クラウド上
の保管庫」みたいなもので、以下のメリットがあります。

• コードのバックアップができる
• Vercelと連携して自動デプロイができる
• 変更履歴が自動的に記録される

GitHubアカウントの作成方法

1. https://github.com にアクセス
2. 「Sign up」をクリック
3. メールアドレス、パスワード、ユーザー名を入力
4. 無料プランで十分です

重要：GitHubアカウントは後でVercelと連携するので、必ず作成しておいてく
ださい。
アカウント作成は無料で、5分程度で完了します。

プロジェクト用のリポジトリも準備しよう

GitHubアカウントを作成したら、プロジェクト用のリポジトリ（保管場所）も作
っておきましょう。

1. GitHubにログイン後、右上の「+」ボタンから「New repository」をクリック
2. Repository name に「ai-blog-maker」など好きな名前を入力
3. Publicを選択（無料で公開）
4. 他の設定はそのままで「Createrepository」をクリック

なぜ事前に作っておくの？

• Claude Codeがコードをアップロードする時にスムーズに進む
• リポジトリ名を自分で決められる
• 後でVercelと連携する時に迷わない

準備ができたら、ClaudeCodeに「GitHubの〇〇（リポジトリ名）にプッシュして」と伝えるだけでOKです！＜実際のClaude Codeとのやり取り＞

あなた：「GitHubにプロジェクトをアップロードしてください」

Claude Code：「GitHubリポジトリを作成してプッシュします...」

（Claude Codeが自動的に実行）

• git init - リポジトリの初期化
• git add . - 全ファイルをステージング
• git commit -m "Initial commit" - 初回コミット
• GitHubでリポジトリ作成とプッシュ

豆知識：Gitって何？ Gitは「変更履歴を管理するツール」で、コードの「タイム
マシン」みたいなものです。
間違えても前の状態に戻せるので安心です。

Vercelでのプロジェクト作成

1. Vercelにアクセス

https://vercel.com にアクセスして、GitHubアカウントでログイン

2. 新規プロジェクトの作成

「Add New...」→「Project」→ 作成したリポジトリを選択

環境変数の設定（超重要！）

Vercelのプロジェクト設定画面で、Settingsタブの「Environment Variables」セクションに以下を設定します。

🔑 Sanity関連

• NEXT_PUBLIC_SANITY_PROJECT_ID- SanityプロジェクトのID
• NEXT_PUBLIC_SANITY_DATASET- production
• SANITY_API_TOKEN- Sanityで作成したAPIトークン

🤖 AI API関連

• ANTHROPIC_API_KEY- Claude APIキー
• OPENAI_API_KEY- OpenAI APIキー（GPT-4とDALL-E 3用
• GEMINI_API_KEY - Google AI Studio APIキー

環境変数の設定方法

1. Name欄に変数名（例：OPENAI_API_KEY）を入力

2. Value欄に実際のAPIキーを入力

3. 「Add」ボタンをクリック

4. すべての環境変数を設定したら「Deploy」をクリック

重要：環境変数を設定し忘れると、ブログは表示されるけど記事生成ができない、Sanityとの連携ができないなどの問題が発生します。

デプロイの完了

Vercelが自動的にビルドを開始します。
2-3分待つと...

✅ 「Ready」と表示されたら完成！

提供されたURLにアクセスすると、あなたのブログが世界中から見られるようになっています。

Vercelにデプロイ後の修正方法

実はVercelにデプロイした後でも、デザインの修正は簡単です。

1. Claude Codeに修正を依頼

「トップページの記事を2列表示にして」などと伝える

2. Claude Codeがコードを修正

components/PostCard.tsx などのファイルを自動で修正

3. GitHubにプッシュ

Claude Codeがgit pushを実行（Claude Codeがやってくれます）

4. Vercelが自動でデプロイ

GitHubの変更を検知して、自動的に本番環境に反映

重要：デザインの専門知識は一切不要！「こんな感じにして」と伝えるだけで、Claude Codeがプロ並みのデザインを実現してくれます。
後から何度でも修正できるので、まずは動くものを作ることが大切です。

独自ドメインの設定（オプション）

Vercelが提供するyour-project.vercel.appというURLでも十分ですが、独自ドメインを設定したい場合は、

1. Vercelのプロジェクト設定 → Domains

2. 「Add Domain」でドメインを追加

3. DNS設定の指示に従って設定

詳細は前回の記事「実践！XサーバーのドメインをVercelに設定する完全ガイド」で解説しています。

Claude Codeとの効果的な対話方法

良い質問の例

具体的に、分かりやすく質問しましょう。

「トップページに最新の記事を5個表示したいです。
それぞれの記事には、タイトルと冒頭の文章を表示してください。
」

エラーが出たときは？

エラーメッセージをそのままコピーしてClaude Codeに伝える

「このエラーの解決方法を教えてください」と聞く

指示通りに修正する

困ったときの対処法

2つのAIを使い分けるコツ

• 「この機能を実装してください」
• 「エラーが出たので修正してください」
• 「Node.jsって何ですか？」
• 「APIって何の略ですか？」
• 「このエラーはどういう意味ですか？」

Claude Code：実際の開発作業を進めるときChatGPTなど別のAI：用語や概念を理解したいとき この使い分けで、作業の流れを止めずに、分からないことも解決できます！

まとめ：完璧を求めなくていい

このブログシステムの構築を通じて学んだこと。

• 専門知識がなくても大丈夫- AIが教えてくれる通りに進めればOK
• エラーは当たり前- プロでもエラーは出ます。
  AIと一緒に解決しましょう
• 少しずつ理解が深まる- 最初は分からなくても、作っているうちに理解できるようになります
• 無料でここまでできる- お金をかけなくても本格的なシステムが作れます
• 「脱WordPress！SanityとClaude Codeで実現する、AI駆動型ブログ構築革命」
• 「コンテンツ管理の悩み、もう終わりにしませんか？話題のSanityに迫る！」
• 「爆速デプロイの新常識！Vercelでブログ公開が超簡単になる理由」
• 「実践！XサーバーのドメインをVercelに設定する完全ガイド」

このシステムは、以下の記事で紹介した技術を組み合わせて実現しています。

AIと一緒に、あなただけのブログシステムを作ってみませんか？

完璧じゃなくていいんです。

まずは始めることが大切です！