知識ゼロからClaude×Astroで110記事の爆速サイトを作った全手法【2026年 実績公開】
この記事の結論: AIを相棒にすれば、一人でメディアを作れる
このサイト uselect.jp には、今この瞬間に 110本以上の記事 が公開されています。
投資、FX自動売買、ガジェットレビュー、技術解説、副業ノウハウ——5カテゴリにまたがる本格的なメディアサイトです。
これを作ったのは たった一人。使ったのは Claude Code(AIコーディングアシスタント)と Astro 6(静的サイトジェネレーター)。外注ゼロ、チームメンバーゼロ。
「AIでブログを量産」と聞くと、低品質なスパム記事を想像するかもしれません。でも実際に記事を読んでみてください。データに基づいた比較表、実体験ベースのレビュー、コードブロック付きの技術解説——すべて人間がファクトチェックし、自分の経験で裏付けた記事です。
この記事では、ゼロからこのサイトを立ち上げた全プロセスを包み隠さず公開します。
なぜ「Claude × Astro」なのか
従来のブログ構築の限界
一人でメディアサイトを作ろうとすると、普通はこうなります:
| 工程 | 従来の方法 | 所要時間 |
|---|---|---|
| サイト構築 | WordPressテーマ選び+カスタマイズ | 1〜2週間 |
| デザイン | テーマに依存、カスタムCSS格闘 | 数日〜1週間 |
| 記事執筆 | 1記事あたり3〜5時間 | 110記事 = 330〜550時間 |
| SEO対策 | プラグイン設定+手動最適化 | 継続的 |
| 保守運用 | WordPress更新、プラグイン互換性 | 月数時間 |
110記事を一人で書くなら、記事だけで最低330時間。フルタイムで働きながらだと半年以上かかります。
Claude Code が変えたこと
Claude Codeは「チャットでコードを聞く」ツールではありません。ターミナル上で動く自律型AIエージェントです。
| 能力 | 具体的にやってくれること |
|---|---|
| コード生成 | Astroコンポーネント、CSS、TypeScript を直接書く |
| ファイル操作 | 記事ファイルの作成・編集・移動を自動実行 |
| ビルド確認 | npm run build を実行してエラーがあれば自分で修正 |
| Git操作 | ブランチ作成 → コミット → PR作成まで一気通貫 |
| 品質管理 | リンクチェック、アフィリエイト検証を自動実行 |
つまり、「この記事を書いて」と指示すれば、記事の執筆からビルド確認、PRの作成まで自動で完了する。人間がやるのはファクトチェックと最終承認だけ。
Astro を選んだ理由
| 観点 | WordPress | Astro 6 |
|---|---|---|
| 表示速度 | 遅い(PHP+DB+プラグイン) | 爆速(静的HTML、JS 0KB) |
| 月額コスト | レンタルサーバー ¥1,000〜 | ¥0(Cloudflare Pages無料枠) |
| セキュリティ | 常に攻撃対象(プラグイン脆弱性) | 静的ファイルのみ(攻撃面ゼロ) |
| 記事管理 | DB+管理画面 | Markdownファイル(Gitで管理) |
| AI連携 | プラグイン経由で制限的 | Claude Codeと完全互換 |
決定的な違いは「AI連携」。Markdownファイルを直接操作できるAstroは、Claude Codeとの相性が抜群です。WordPressのようにDB操作やAPIが必要なく、テキストファイルを書くだけで記事が完成します。
実際の構築プロセス: 5つのフェーズ
Phase 1: 環境構築(所要時間: 1日)
最初にやったことは3つだけ。
# 1. Astro プロジェクト作成
npm create astro@latest uselect-jp
# 2. Tailwind CSS v4 追加
npx astro add tailwind
# 3. Cloudflare Pages にデプロイ
# GitHub連携 → 自動デプロイ設定
ドメインはお名前.comで取得。.jpドメインは日本語サイトのSEOに有利です。
初期費用の合計: ドメイン代の約1,500円/年のみ。
サーバー代は Cloudflare Pages の無料枠でゼロ。WordPressなら月額1,000円以上かかるレンタルサーバーが不要です。
Phase 2: デザインシステム構築(所要時間: 2日)
記事を量産する前に、デザインの「型」を先に決めるのが重要です。
私はClaude Codeに「デザイントークン(色・フォント・余白・角丸)をCSS変数で定義して」と指示し、デザインシステムを構築しました。
/* tokens.css — 全サイトの見た目を一元管理 */
:root {
--color-accent: #2563eb;
--color-surface: #ffffff;
--space-4: 1rem;
--radius-lg: 12px;
--font-size-base: 1rem;
}
このトークンがあるから、110記事すべてのデザインが統一されています。新しい記事を追加しても、見た目がブレない。
Claude Codeが自動生成したコンポーネント例:
- 記事カード — カテゴリ色つきバッジ、ホバーアニメーション
- CTA バナー — グラデーション背景、ワンクリックで遷移
- 比較テーブル — レスポンシブ対応、モバイルでも読みやすい
- アフィリエイトカード — ASP別の自動表示、景表法準拠の「PR」ラベル
Phase 3: コンテンツ戦略設計(所要時間: 1日)
記事を書く前に、カテゴリ構成と内部リンク設計を決めました。
uselect.jp のコンテンツ構造
├── finance/(金融・投資) ← 証券口座アフィリエイト
│ ├── 新NISA関連 × 8本
│ ├── 暗号資産 × 10本
│ ├── FX比較 × 5本
│ └── iDeCo・資産形成 × 7本
│
├── tech/(技術) ← AI・ツール系アフィリエイト
│ ├── AI活用 × 6本
│ ├── 開発環境 × 8本
│ └── サーバー構築 × 4本
│
├── trade/(FX自動売買) ← FX口座アフィリエイト
│ ├── Bot開発 × 8本
│ ├── リスク管理 × 5本
│ └── 運用レポート × 3本
│
├── life/(ライフスタイル) ← ガジェット・ECアフィリエイト
│ ├── ガジェットレビュー × 12本
│ └── 在宅環境 × 6本
│
└── blog/(ブログ運営) ← スクール・ツール系アフィリエイト
├── 副業ノウハウ × 3本
└── ブログ運営 × 2本
ポイントは 「集客記事 → 収益記事」の導線設計。
- 集客記事(「新NISAとは」「Dockerの使い方」)で検索流入を獲得
- 収益記事(「証券口座比較」「FX口座開設ガイド」)にリンクで誘導
- 各カテゴリの記事同士を内部リンクで相互接続
Phase 4: Claude Code で記事を量産(これが本番)
ここが一番重要なフェーズです。
実際のワークフロー
1. 記事テーマを決める(人間)
↓
2. Claude Codeに構成案を指示(人間)
「新NISAの暴落対処法の記事を書いて。
データは最新の統計を使って。
アフィリエイトは松井証券。」
↓
3. 記事のドラフトが完成(AI)
↓
4. ファクトチェック + 体験ベースの加筆(人間)
↓
5. ビルド → PR作成(AI)
↓
6. レビュー → マージ → 自動デプロイ(人間 + CI/CD)
人間がやるのは「テーマ決め」「ファクトチェック」「承認」の3つだけ。
残りはすべてClaude Codeが実行します。
品質を保つ仕組み
「AIで量産」と聞いて心配になるのは品質です。うちでは以下の仕組みで品質を担保しています。
| チェック項目 | 方法 | タイミング |
|---|---|---|
| ファクトチェック | 人間が全データを確認 | ドラフト完成後 |
| アフィリエイトリンク検証 | npm run check-affiliate |
ビルド前に自動実行 |
| 外部リンク有効性 | npm run check-links |
PR作成時 |
| ビルドテスト | npm run build |
CI/CDで自動 |
| コードレビュー | レビューエージェント | PR作成時に自動 |
| データ捏造防止 | 社内ルール(実データのみ使用) | 全記事 |
最後の「データ捏造防止」は特に重要。AIが生成した架空の体験談や架空のデータは一切使いません。すべて実データか、公開されている統計データです。
Phase 5: 自動化パイプラインの構築
記事の品質が安定したら、次は自動化の深度を上げるフェーズです。
私が構築した自動化:
- サムネイル自動生成 — Pythonスクリプトで記事タイトルからOG画像を自動作成
- CI/CD — GitHub Actions でビルド → Cloudflare Pages に自動デプロイ
- アフィリエイトリンク一元管理 —
affiliates.tsでASP情報を集中管理、記事側はカテゴリ指定だけ - SEO自動最適化 — サイトマップ自動生成、メタタグ自動挿入
コスト公開: 月額ほぼゼロで運営
| 項目 | 月額コスト | 備考 |
|---|---|---|
| ホスティング | ¥0 | Cloudflare Pages 無料枠 |
| ドメイン | 約¥125/月 | お名前.com(年額÷12) |
| CDN | ¥0 | Cloudflare 標準機能 |
| SSL証明書 | ¥0 | Cloudflare 自動発行 |
| AI(Claude Code) | 利用量に応じて | 開発・記事作成用 |
| 合計 | 約¥125/月 | サーバー代は実質ゼロ |
WordPress + レンタルサーバーなら最低でも月1,000円。年間で約1万円の差が出ます。
しかも 表示速度は WordPress の数倍。Lighthouse スコアは常に90点以上です。
110記事で使った技術スタック一覧
| カテゴリ | 使用ツール |
|---|---|
| フレームワーク | Astro 6.3(静的サイト生成) |
| スタイリング | Tailwind CSS v4 + CSS Custom Properties |
| AI | Claude Code(記事作成・コード生成・Git操作) |
| ホスティング | Cloudflare Pages(自動デプロイ) |
| ドメイン | お名前.com |
| バージョン管理 | GitHub(ブランチ運用) |
| CI/CD | GitHub Actions |
| 解析 | Cloudflare Analytics + GA4 |
| サムネイル | Python(自動生成スクリプト) |
よくある質問
Q. プログラミング未経験でもできる?
Claude Codeがコードを書いてくれるので、コピペレベルの知識で十分です。 ただし「何を作りたいか」を指示する能力は必要。まずはAIの基本操作を学ぶことをおすすめします。
Claude Code × AIエージェント開発を学ぶなら
環境構築不要、月額12,800円のサブスク型。非エンジニアでもAIエージェント開発を即実践できます。
AI Agent Camp 詳細を見る →Q. WordPressから移行すべき?
エンジニアや技術に抵抗がない人なら、圧倒的にAstroをおすすめします。 表示速度、セキュリティ、運用コストすべてで有利です。ただし管理画面がないので、Markdownに抵抗がある人はWordPressのままでもOK。
→ Astro 6でブログを構築する方法 を読めば、移行のイメージが掴めます。
Q. 記事の品質は本当にAIで保てる?
AIは「下書き」を高速に作るツール。品質を決めるのは人間のファクトチェックと編集です。 うちでは全記事に対して以下を徹底しています:
- 実データ・公開統計のみ使用(架空データ禁止)
- 著者が全記事を目視確認
- 自動テストでリンク切れ・構文エラーを検出
Q. 収益化はどうしている?
各カテゴリに最適なアフィリエイト案件を配置しています。
| カテゴリ | 主なASP案件 | 単価帯 |
|---|---|---|
| finance | 証券口座開設(GMOコイン、DMM FX、松井証券) | 中〜高 |
| trade | FX口座開設 | 中〜高 |
| tech | AIツール、サーバー | 中 |
| life | ECサイト(Yahoo!ショッピング) | 低〜中 |
ポイントは「記事の内容と案件の一致」。投資の記事には証券口座、技術の記事にはAIツール。読者にとって自然な導線を作ることが、成約率を上げるコツです。
Q. AIブログは Google に評価される?
コンテンツの品質次第です。 Google は「AIで作ったかどうか」ではなく「ユーザーに価値を提供しているか」を評価します。
このサイトでは Google Search Console に登録済み、サイトマップも送信済み。実際にインデックスされ、検索流入も発生しています。
重要なのは E-E-A-T(経験・専門性・権威性・信頼性)。AIが書いた文章をそのまま公開するのではなく、自分の経験を加筆し、実データで裏付けることが必須です。
まとめ: 一人でもメディアは作れる
| 項目 | 数値 |
|---|---|
| 公開記事数 | 110本超 |
| 運営者 | 1人(+Claude Code) |
| 月額運用コスト | 約¥125 |
| 使用技術 | Astro 6 + Tailwind CSS v4 + Cloudflare Pages |
| AI | Claude Code |
2026年は、AIを使いこなす個人が企業メディアに匹敵するコンテンツを作れる時代です。
必要なのは高額なツールでも大きなチームでもありません。Claude Code、Astro、そしてアイデア。この3つがあれば、あなたも今日からメディアを立ち上げられます。
今日から始めるための3ステップ
Step 1: ドメインを取得する
サイト名を決めて、.com か .jp のドメインを取得しましょう。
Step 2: Astro でサイトを立ち上げる
npm create astro@latest my-blog
cd my-blog
npm run dev
→ Astro 6 でブログを構築する方法(このサイトの実例で解説)
Step 3: AIの使い方を学ぶ
Claude Codeを最大限活用するために、まずは生成AIの基本操作を身につけましょう。
→ Claude Codeで一人会社を運営する方法 → AIエージェント開発の始め方
関連記事
- WordPressは古い?Astroを選ぶべき理由【2026年比較】 — WordPress vs Astro の徹底比較
- AI時代の副業ロードマップ:Claudeで特化ブログ100記事量産 — AI副業の始め方から収益化まで
- Astro 6 で技術ブログを構築する方法 — このサイトの技術的な裏側
- Claude Codeで一人会社を運営する方法 — AI活用の全体像
- AIエージェント開発の始め方 — 自律型AIの実践ガイド
- エンジニアが副業ブログで月1万円を目指すロードマップ — 収益化の詳細戦略
- Oracle Cloud 無料枠でサーバーを立てる — 無料インフラ活用