Claude Codeでブログを作成・公開する完全ガイド｜Next.js + Vercel + 独自ドメイン取得まで

「ブログを始めたいけど、サイト構築が難しそうで踏み出せない」「プログラミングは少しわかるけど、本格的なサイトを自分で作るのは大変そう」

そんな方に朗報です。Claude Code を使えば、AIに指示を出すだけでNext.jsブログが完成し、Vercelに無料でデプロイできます。独自ドメインを取得すれば、本格的なブログサイトとして運営できます。

この記事でわかること：

• Claude Code を使った Next.js ブログの作成手順
• Vercel への無料デプロイ方法
• 独自ドメインの取得・設定方法（アフィリエイト収益化のポイントも）
• Google Analytics / Search Console の設定方法

PR

Claude Code とは

Claude Code は、Anthropic が開発した AI コーディングアシスタントです。ターミナル（コマンドライン）で動作し、日本語で指示を出すだけでコードの生成・編集・実行まで行ってくれます。

「Next.js のブログを作って」と言えばプロジェクトを作成し、「記事一覧ページを作って」と言えばコードを書いて、「Vercel にデプロイする手順を教えて」と言えば具体的なコマンドまで案内してくれます。

プログラミングの深い知識がなくても、基本的なターミナル操作（コマンドを入力して Enter を押す）ができれば、本格的なブログサイトを構築できます。

前提条件

この記事では以下の環境を前提にしています：

• Node.js（v18以上）がインストール済み
• Git がインストール済み
• GitHub アカウントを取得済み
• Vercel アカウント（GitHub と連携）を取得済み
• ターミナル（macOS: ターミナル.app / Windows: PowerShell）が使える

Node.js のインストールは 公式サイト から LTS 版をダウンロードするだけです。

全体の流れ

Step 1: Claude Code インストール

まずはターミナルを開いて、Claude Code をインストールします。

macOS / Linux の場合

curl -fsSL https://claude.ai/install.sh | bash

Windows (PowerShell) の場合

irm https://claude.ai/install.ps1 | iex

インストールが完了したら、以下のコマンドで動作確認できます。

claude --version

バージョン番号が表示されれば成功です。初回起動時は Claude.ai のアカウントでログインを求められます（ブラウザが自動で開きます）。

利用料金について: Claude Code の利用には Claude の有料プラン（Pro プラン：月額 $20〜）が必要です。詳しくは Claude の料金プラン解説記事 を参照してください。

Step 2: Next.js ブログ作成

Claude Code の準備ができたら、実際にブログプロジェクトを作成します。ブログを作りたいディレクトリに移動して claude を起動します。

mkdir my-blog
cd my-blog
claude

claude と入力すると対話モードが起動します。ここから日本語で指示を出すだけです。

まずはPlanモードでブログの設計を決める

Claude Code には「探索 → 計画 → 実装」というベストプラクティスがあります（詳しくは Claude Code ベストプラクティス記事 を参照）。いきなり実装を始める前に、Planモードでブログの方向性を固めると、後戻りが少なくなります。

Planモードは /plan と入力するか、Shift+Tab キーで通常モードから切り替えて起動できます。このモードではファイルの変更が行われないため、安心して設計を詰められます。

ある程度機能やデザインの方針が決まっている場合は、以下のようなプロンプトを使ってみてください。

/plan
Next.jsのブログを作りたい。以下の方向性で進めたい。
 
【ブログの概要】
- テーマ: プログラミング学習・AI活用
- ターゲット: 初心者〜中級者
- 収益化: アフィリエイト（Amazonアソシエイト等）
 
【希望する機能】
- 記事一覧・詳細ページ
- カテゴリ絞り込み
- ダークモード対応
- サイトマップ・RSSフィード
 
【デザイン方針】
- シンプルでミニマルなデザイン
- Tailwind CSS 使用
 
どのような技術構成・ディレクトリ構成で進めるか計画してほしい。

方針が決まっていない場合は、以下のようにClaude Codeと会話しながら一緒に決めていくこともできます。

/plan
個人ブログサイトを作りたい。どのように進めたら良いか一緒に考えてください。
─────────────────────────────────────────────────────────────────
←  ☐ 技術スタック  ☐ コンテンツ管理  ☐ 必要機能  ☐ デプロイ先  ✔ Submit  →
 
どのような技術スタックを使いたいですか？
 
❯ 1. Next.js (Recommended)
     React ベース。柔軟性が高く、SSG/SSR 両対応。Vercel と相性抜群。
  2. Astro
     静的サイト特化。高速でシンプル。Markdown との相性が非常に良い。
  3. Hugo / Jekyll
     シンプルな静的サイトジェネレーター。設定が少なく素早く始められる。
  4. まだ決めていない
     一緒に選びたい。要件から最適なものを提案してほしい。
  5. Type something.
─────────────────────────────────────────────────────────────────
  6. Chat about this
  7. Skip interview and plan immediately

Claude Code が技術スタックやディレクトリ構成を含む計画を提示します。

# 個人ブログサイト構築計画
 
## 概要
 
**技術スタック:** Next.js (App Router) + TypeScript + Tailwind CSS
**コンテンツ管理:** Markdown ファイル (frontmatter)
**主要機能:** タグ・カテゴリ、全文検索、RSS フィード
**デプロイ先:** Vercel
 
---
 
## ディレクトリ構成
 
```
my-blog/
├── app/
│   ├── layout.tsx              # ルートレイアウト（ヘッダー・フッター）
│   ├── page.tsx                # トップページ（記事一覧）
│   ├── blog/
│   │   └── [slug]/
│   │       └── page.tsx        # 記事詳細ページ
│   ├── tags/
│   │   ├── page.tsx            # タグ一覧
│   │   └── [tag]/
│   │       └── page.tsx        # タグ別記事一覧
│   ├── search/
│   │   └── page.tsx            # 検索ページ
│   └── api/
│       ├── feed/
│       │   └── route.ts        # RSS フィード (XML)
│       └── posts/
│           └── route.ts        # 記事メタデータ JSON API（検索用）
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
│   ├── PostCard.tsx            # 記事カード（一覧用）
│   ├── TagBadge.tsx
│   └── SearchBox.tsx
├── lib/
│   ├── posts.ts                # Markdown 読み込み・パース処理
│   └── rss.ts                  # RSS XML 生成
├── posts/                      # Markdown 記事ファイル置き場
│   └── hello-world.md          # サンプル記事
├── public/
├── next.config.ts
├── tailwind.config.ts
└── package.json
```
 
---
 
## 記事 frontmatter フォーマット
 
```yaml
---
title: "記事タイトル"
date: "2026-03-05"
tags: ["Next.js", "React"]
category: "技術"
description: "記事の概要（OGP や一覧表示に使用）"
---
 
本文をここに書く...
```
 
---
 
## 実装ステップ
 
### Step 1: プロジェクト初期化
 
```bash
npx create-next-app@latest my-blog \
  --typescript --tailwind --eslint --app --src-dir=false
cd my-blog
npm install gray-matter next-mdx-remote rss
```
 
### Step 2: Markdown 処理 (`lib/posts.ts`)
 
`gray-matter` で frontmatter をパース。`next-mdx-remote` で Markdown → HTML 変換。
 
実装する関数:
- `getAllPosts()` — 全記事をメタデータ付きで取得
- `getPostBySlug(slug)` — スラッグで記事を1件取得
- `getPostsByTag(tag)` — タグで記事をフィルタリング
- `getAllTags()` — 全タグと件数を取得
 
### Step 3: 各ページ実装
 
| ページ       | パス              | 内容                              |
|------------|-----------------|-------------------------------------|
| トップ       | `/`             | 最新記事一覧（ページネーション付き）     |
| 記事詳細     | `/blog/[slug]`  | Markdown レンダリング、タグ表示        |
| タグ一覧     | `/tags`         | 全タグと記事件数                      |
| タグ別一覧   | `/tags/[tag]`   | タグに属する記事一覧                   |
| 検索        | `/search`       | クライアントサイド全文検索              |
 
### Step 4: RSS フィード (`app/api/feed/route.ts`)
 
`rss` パッケージを使い、`/api/feed` で RSS 2.0 XML を返す。
 
### Step 5: 検索機能 (`app/search/page.tsx`)
 
`/api/posts` から記事メタデータ JSON を取得し、クライアントサイドでタイトル・タグ・概要を対象に検索。
 
### Step 6: デザイン
 
- Tailwind CSS でシンプル・ミニマルなデザイン
- ダークモード対応（Tailwind の `dark:` クラス + `next-themes`）
- レスポンシブ対応（モバイルファースト）
 
### Step 7: Vercel デプロイ
 
1. GitHub リポジトリを作成して push
2. Vercel でリポジトリを連携
3. 自動デプロイ設定完了
 
---
 
## 主要パッケージ
 
| パッケージ       | 用途                          |
|---------------|-------------------------------|
| `gray-matter` | Markdown frontmatter パース    |
| `next-mdx-remote` | Markdown → HTML レンダリング |
| `rss`         | RSS フィード生成               |
| `next-themes` | ダークモード切り替え            |
 
---
 
## 検証方法
 
1. `npm run dev` → `http://localhost:3000` でローカル確認
2. `posts/` にサンプル記事を追加 → 一覧・詳細ページの表示確認
3. `/tags` でタグ一覧、`/tags/[tag]` でフィルタリング確認
4. `/search` で検索動作確認
5. `/api/feed` で RSS XML が返ることを確認（ブラウザまたは curl）
6. `npm run build` でビルドエラーなし確認
7. Vercel へデプロイして本番動作確認
 

内容を確認して「この方針で進めて」と承認すれば、実装フェーズに移行します。

実装完了後に以下のプロンプトで動作確認ができます。

npm run dev で開発サーバーを起動して、
http://localhost:3000 で記事一覧と記事詳細が表示されるか確認して。
問題があれば修正して。

動作確認して思っていた機能・デザインと違ったとしても、Claude Code との会話を続けながら調整できるので、最初から完璧でなくても問題ありません。

よく使うプロンプトのパターン

Claude Code への指示は 「〜して」「〜を作って」 という形で具体的に伝えるのがコツです。

うまく動かないときは、エラーメッセージをそのままコピーして Claude Code に貼り付けるだけで修正してくれます。

Tip: プロジェクトが完成したら、ブログの設計方針を CLAUDE.md に記録しておきましょう。次回以降「技術構成は CLAUDE.md を参照して」と一言添えるだけで、毎回詳細を伝える手間が省けます。詳しくは Claude Code ベストプラクティス記事 を参照してください。

開発サーバーで表示が確認できたら、次は GitHub へのプッシュに進みます。

Step 3: GitHub にプッシュ → Vercel デプロイ

ブログが完成したら GitHub にプッシュして、Vercel でデプロイします。

デプロイの全体像

1

💻

ローカル

Next.js 開発

2

GitHub

git push

3

Vercel

自動デプロイ

4

🌐

ブログ公開

xxx.vercel.app

1

💻

ローカルNext.js 開発

2

GitHubgit push

3

Vercel自動デプロイ

4

🌐

ブログ公開xxx.vercel.app

git push するだけで Vercel が自動でビルド・公開してくれます

GitHub リポジトリの作成・プッシュ

Claude Code に以下のように指示するか、自分で GitHub 上でリポジトリを作成します。

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/あなたのユーザー名/my-blog.git
git push -u origin main

Vercel でのデプロイ

1. vercel.com にアクセスして GitHub でログイン

2. 「New Project」をクリック

3. 先ほど作成した GitHub リポジトリを選択 ※プロジェクトが表示されていない場合は、リポジトリの公開設定が原因の可能性があります。以下の手順で確認してください：GitHubアカウント名横の「▽」をクリック → 「Add GitHub Account」を選択して認証 → 「Repository access」で「All repositories」または「Only select repositories」から対象リポジトリを選択。

4. 設定はデフォルトのまま「Deploy」をクリック

数分でデプロイが完了し、https://your-project.vercel.app という URL でブログが公開されます。

GitHub にプッシュするたびに自動でデプロイが走るので、記事を追加・修正して git push するだけで更新できます。

Step 4: 独自ドメイン取得

なぜ独自ドメインが必要なのか

Step 3 まで完了した時点で、ブログは your-project.vercel.app という URL で公開されています。このままでも閲覧はできますが、ブログを長期的に運営・収益化するなら独自ドメインの取得は必須です。

vercel.app のまま運営を続けると、以下のようなデメリットがあります。

特にアフィリエイトやアドセンスで収益化を目指す方は、独自ドメインがないと審査に通らないケースがほとんどです。年間1,000~2,000円程度の投資で上記のメリットがすべて手に入るので、ブログ開設のタイミングで取得しておきましょう。

おすすめドメインサービス2社を比較

国内で実績のあるドメインサービス2社を比較します。どちらを選んでも Vercel との連携は問題なくできます。

結論: 迷ったらお名前.com がおすすめです。 国内シェアNo.1で情報が豊富なため、困ったときにネットで解決策が見つかりやすいのが最大の利点です。Xserver Domain は管理画面がシンプルで「余計な機能はいらない」という方に向いています。

お名前.com（国内シェアNo.1）

国内最大手のドメイン登録サービスで、580種類以上のドメインを取り扱っています。.com や .jp はもちろん、.dev や .blog といったエンジニア向けドメインも取得可能です。

初めてドメインを取得する方や、ネットで調べながら設定を進めたい方には最適です。シェアが大きいぶん、設定手順やトラブル対応の記事がネット上に豊富にあります。

Xserver Domain（シンプル管理で初心者にやさしい）

国内シェアNo.1のレンタルサーバー「エックスサーバー」を運営する会社のドメインサービスです。管理画面がシンプルで直感的なため、余計な操作に迷いにくいのが特徴です。

「管理画面がごちゃごちゃしているのは苦手」「必要な機能だけシンプルに使いたい」という方に向いています。

ドメイン名の決め方

• 短くて覚えやすい名前にする（15文字以内が目安）
• ブログのテーマがわかるキーワードを含める（例: tech-and-life.com、code-and-ai.dev）
• 拡張子は .com が最も無難。エンジニア向けなら .dev もおすすめ
• .jp は信頼性が高いが更新料がやや高め
• 数字やハイフンの多用は避ける

Step 5: Vercel にカスタムドメインを設定

ドメインを取得したら、Vercel に紐付けます。

Vercel 側の設定

1. Vercel のプロジェクトページを開く
2. 「Settings」→「Domains」をクリック
3. 取得したドメイン名（例: myblog.com）を入力して「Add」

Vercel が DNS レコードを表示します。

DNS の仕組み（イメージ）

「DNS ってなに？」という方向けに、仕組みをかんたんに図で説明します。

ドメインにアクセスしたときの流れ

1

🌍

ブラウザ

myblog.com を入力

2

📋

DNS サーバー

IP アドレスを調べる

3

Vercel

76.76.21.21

4

📄

ブログ表示

あなたのサイト

1

🌍

ブラウザmyblog.com を入力

2

📋

DNS サーバーIP アドレスを調べる

3

Vercel76.76.21.21

4

📄

ブログ表示あなたのサイト

DNS 設定とは「このドメイン名は Vercel のサーバーに繋いでください」という案内板を設置する作業です

ドメインサービス側の DNS 設定

取得したドメインサービスの DNS 設定画面で、Vercel が表示したレコードを追加します。

設定後、DNS が反映されるまで数分〜数時間かかります。Vercel の画面で「Valid Configuration」と表示されれば設定完了です。

独自ドメインで HTTPS が自動で有効になります（無料）。

Step 6: Google Analytics / Search Console 設定（推奨）

ブログを運営するなら、アクセス解析と SEO 管理のツールを設定しておきましょう。

Google Analytics 4 の設置

1. analytics.google.com でアカウントを作成
2. 計測 ID（G-XXXXXXXXXX）を取得
3. Claude Code に以下のように指示：

Google Analytics 4 の計測 ID「G-XXXXXXXXXX」を
Next.js の App Router で設定して。
layout.tsx に Script コンポーネントを使って埋め込んで。

Google Search Console の設定

1. search.google.com/search-console でプロパティを追加
2. 独自ドメインを入力
3. DNS 認証（ドメインサービスに TXT レコードを追加）でサイトオーナーを確認
4. サイトマップ URL（https://あなたのドメイン/sitemap.xml）を送信

Search Console を設定すると、どのキーワードで記事が検索されているかがわかり、SEO 改善に役立ちます。

まとめ

Claude Code を使えば、プログラミングの深い知識がなくても Next.js ブログを 0 から構築し、Vercel に無料でデプロイできます。

ポイントをまとめると：

• Claude Code に日本語で指示するだけでコードが完成する
• Vercel は GitHub 連携で push するたびに自動デプロイ
• 独自ドメインはSEO・信頼性の向上に効果的（収益化を目指すなら強くおすすめ）
• Google Analytics / Search Console でアクセス・SEO を管理

まずは Claude Code をインストールして、claude コマンドを起動するところから始めてみましょう。最初の一歩は意外と簡単です。

まだ独自ドメインを取得していない方へ

記事が増えてからドメインを変更すると、それまでに蓄積されたSEO評価がリセットされてしまいます。ブログを始めるなら、記事数が少ない今のうちに取得しておくのがおすすめです。

参考リンク：

• Claude Code とは？全機能を徹底解説
• Claude Code のベストプラクティス
• Claude の料金プラン比較