Google Antigravity (Gemini 3 Pro) × microCMS MCPで恐竜ブログを丸投げして作ってみた！

はじめに

Google Antigravity と microCMS の MCP Server を使って、恐竜ブログを作ってみました🦖

Google Antigravity は Gemini 3 Pro や Claude Sonnet 4.5 を使えるにも関わらず、現在は無料。めちゃくちゃ太っ腹ですね！

今回はデータの保存場所にヘッドレスCMSの microCMS を採用し、MCP (Model Context Protocol) 経由でエージェントに作成してもらいます。

今回作ったもの

シンプルな恐竜ブログです🦖

ちなみに主題が「恐竜」なことに特に深い意味はありません。単純に好きで、パッと思いついたからです

これを「コンテンツの作成（入稿）」から「サイトの実装」まで、ほぼ全てエージェントに丸投げして作ってみました！

やったこと

1. microCMS で API を用意する

microCMS でログインし、プロジェクトを作成、API を作成します

現時点の microCMS MCP では「API自体の作成（スキーマ定義）」はできないようなので、ここだけは手動でやりました。
（ここは人間がやるべき要件定義？）

なぜ JSON 管理や直書きではなく microCMS なのか？

「単純なデータなら JSON ファイルに書いたり、ページに直接埋め込めばいいのでは？」と思うかもしれませんが、microCMS を使うメリットかなと思ってます！

• エンジニア以外（編集者など）でも管理画面から簡単に入稿・修正ができる
• 画像の管理やリッチエディタが標準で使える
• コンテンツが増えても API で柔軟に取得でき、ビルド時間への影響も制御しやすい

また、日本語対応・国内でのサポートが充実しているので、安心して使用できます！

無料プランについて

microCMS は Hobby プラン でもかなり太っ腹です！
クレジットカード登録不要で、以下のスペックが使えます。

項目	内容
API 呼び出し回数	無制限
データ転送量	20GB
メンバー数	3人
API数	5個
コンテンツ数	10,000件
メディア最大容量	40MB

個人開発や小規模なチームなら、無料で十分すぎる機能が使えます！

MCP Server の設定

API 作成後は、公式ブログを参考に MCP Server を設定し、Antigravity と microCMS を連携させました。

設定ファイル (~/.gemini/mcp_settings.json 等) の例

{
  "mcpServers": {
    "microcms": {
      "command": "/path/to/npx",
      "args": ["-y", "microcms-mcp-server@latest"],
      "env": {
        "MICROCMS_SERVICE_ID": "<MICROCMS_SERVICE_ID>",
        "MICROCMS_API_KEY": "<MICROCMS_API_KEY>"
      }
    }
  }
}

ちなみに API は microCMS の管理画面でプロジェクト作成時に「ブログ」のテンプレートを選択しました。
すると、自動的に以下の2つの API が作成されます。便利！

• ブログ (blogs)
• カテゴリ (categories)

今回はこれをそのまま恐竜ブログとして使います。スキーマは以下のようになっていました。

ブログ (blogs)

フィールドID	表示名	種類
title	タイトル	テキストフィールド
content	内容	リッチエディタ
eyecatch	アイキャッチ	画像
category	カテゴリ	コンテンツ参照

カテゴリ (categories)

フィールドID	表示名	種類
name	カテゴリ名	テキストフィールド

APIキーはデフォルトだとGETのみ許可されていたので、POSTなども許可するように変更しました。

2. エージェントに全てを任せる（入稿〜サイト構築）

ここからが Antigravity の真骨頂です。
「コンテンツを入れる」と「サイトを作る」をまとめてお願いしてしまいます。
標準で画像を作れるのが地味にでかいですね（しかも高水準）

プロンプト

以下のプロンプトでPlanningモードで実行しました！

以下の手順で恐竜ブログを構築してください。

1. `blogs` および `categories` のスキーマ定義を確認する
2. 恐竜の種類（獣脚類、鳥盤類など）や内容に基づいてカテゴリをいくつか作成する
3. 様々な恐竜に関するトピックを10個ピックアップし、それぞれの「タイトル」「内容（HTML）」「アイキャッチ画像」を用意する
   - 画像は nanobanana pro で作成し、`microcms_upload_media` でアップロードすること
4. 記事データを作成し、`microcms_create_content_published` で入稿する
5. 入稿完了後、Astro, Tailwind CSS, microcms-js-sdk を使用してブログサイトを構築する
6. デザイン要件
   - 「ジュラシック・パーク」っぽい雰囲気（ダークモードベース、危険な感じの黄色アクセント）
   - トップページに記事一覧をカード表示
   - 詳細ページへの遷移

PlanやTaskList、Walkthroughは日本語で記載すること

Implementation Plan

概ね良さそうなのでそのまま実装に進んでもらいます。
ちなみにファイルは ~/.gemini/antigravity/brain 配下にありました

implementation_plan.md

# 恐竜ブログ構築計画

この計画は、microCMSをバックエンド、Astroをフロントエンドに使用した恐竜ブログの構築手順を記述します。

## 目標
ジュラシック・パーク風の「危険な」雰囲気を持つ恐竜ブログを構築し、10本の記事を入稿して公開する。

## ユーザーレビューが必要な事項
- デザインの方向性（ダークモード、黄色アクセント、警告色）
- 恐竜のトピック選定（独自の10選）

## 変更内容

### microCMS データ構築
- カテゴリ作成: [NEW] 「獣脚類」「鳥盤類」「竜脚形類」などの主要な分類を作成。
- 画像生成: [NEW] 各記事に対応するアイキャッチ画像を生成 (10枚)。
- 記事入稿: [NEW] 10記事分のデータをAPI経由で作成。

### フロントエンド構築 (Astro)
#### [NEW] プロジェクト構成
- `src/pages/index.astro`: 記事一覧ページ（カードデザイン）。
- `src/pages/[blogId].astro`: 記事詳細ページ。
- `src/layouts/Layout.astro`: 共通レイアウト（ヘッダー、フッター、metaタグ）。
- `src/library/microcms.ts`: SDKクライアント設定。
- `tailwind.config.mjs`: カラーパレット（Jurassic Yellow, Dark Jungle Green）の設定。

#### デザイン要件
- 配色: 背景 `#1a1a1a` (Dark), アクセント `#f5d300` (Caution Yellow), テキスト `#e6e6e6`.
- フォント: 力強いサンセリフ体、または警告標識のようなフォント。
- UI: カードには「DANGER」や「WARNING」のような装飾あしらい。

## 検証計画

### 自動テスト
- `npm run build` が正常に完了することを確認。

### 手動検証
1. コンテンツ確認: microCMS管理画面で10記事が入稿されていることを確認。
2. 表示確認: ローカルサーバー (`npm run dev`) を起動し、ブラウザで以下を確認。
    - トップページに記事カードが10枚表示されていること。
    - 各カードの画像、タイトル、カテゴリが正しいこと。
    - 詳細ページに遷移でき、HTMLコンテンツが正しく表示されていること。
    - デザインが「ジュラシック・パーク」風であること（ダークモード、黄色アクセント）。

Task

task.md

# 恐竜ブログ構築タスク

- [ ] 初期調査: microCMSスキーマ確認 <!-- id: 0 -->
    - [ ] `blogs` APIスキーマ確認 <!-- id: 1 -->
    - [ ] `categories` APIスキーマ確認 <!-- id: 2 -->
- [ ] コンテンツ準備 <!-- id: 3 -->
    - [ ] カテゴリ作成（獣脚類、鳥盤類など） <!-- id: 4 -->
    - [ ] 恐竜トピック10選定 & 記事構成案作成 <!-- id: 5 -->
    - [ ] アイキャッチ画像生成 (10枚) <!-- id: 6 -->
    - [ ] 画像アップロード to microCMS <!-- id: 7 -->
    - [ ] 記事データ作成 & 入稿 (10記事) <!-- id: 8 -->
- [ ] サイト構築 <!-- id: 9 -->
    - [ ] Astroプロジェクト初期化 (w/ Tailwind CSS) <!-- id: 10 -->
    - [ ] microcms-js-sdk 導入 & クライアント設定 <!-- id: 11 -->
    - [ ] デザイン実装（ジュラシック・パーク風） <!-- id: 12 -->
        - [ ] カラーパレット定義 (Dark & Yellow) <!-- id: 13 -->
        - [ ] コンポーネント作成 (Card, Layout) <!-- id: 14 -->
    - [ ] ページ実装 <!-- id: 15 -->
        - [ ] トップページ (記事一覧) <!-- id: 16 -->
        - [ ] 詳細ページ (記事本文) <!-- id: 17 -->
- [ ] 最終確認 <!-- id: 18 -->

Walkthrough

画像生成は成功していたものの、APIキーの権限が足りなかったので、画像アップロードは失敗しました。
僕自身が足を引っ張っていた状態です😇

それと文章が非常に短かったので、長めの文章を与える指示を入れておくべきでした。
APIキーの権限を変更して、再度プロンプトを送信します。

walkthrough.md

# 恐竜ブログ構築完了報告

恐竜ブログの構築が完了しました。
microCMSに入稿されたコンテンツをAstroで静的サイトとして生成しています。

## 成果物

### サイトプレビュー
ローカルサーバー (`npm run dev`) で確認可能です。

- **トップページ**: 記事一覧がカードレイアウトで表示されます。「ジュラシック・パーク」風のダークモードと警告色のデザインを適用しました。
- **詳細ページ**: 各恐竜の記事詳細が表示されます。

### コンテンツ (microCMS)
以下の10記事を入稿しました。

1. Tyrannosaurus Rex
2. Triceratops
3. Velociraptor
4. Stegosaurus
5. Spinosaurus
6. Ankylosaurus
7. Brachiosaurus
8. Diplodocus
9. Allosaurus
10. Parasaurolophus

※ **画像について**:
APIキーの権限制限（Media Upload Forbidden）により、新規画像のアップロードができませんでした。
そのため、記事のアイキャッチ画像にはmicroCMS上の既存アセット（またはプレースホルダー）を代替として設定しています。
デザインレイアウト上は問題なく表示されます。

### 技術スタック
- **Framework**: Astro
- **Styling**: Tailwind CSS
- **CMS**: microCMS (microcms-js-sdk)
- **Font**: Oswald (Google Fonts)

## 検証結果

`npm run build` を実行し、全ページのビルドが正常に完了することを確認しました。

```bash
09:10:59 [build] 11 page(s) built in 5.04s
09:10:59 [build] Complete!
```

## 次のステップ
- **画像の差し替え**: 正しい権限を持つAPIキーが入手できれば、本来の生成画像をアップロードして記事を更新できます。
- **デプロイ**: VercelやNetlifyなどのホスティングサービスへデプロイ可能です。

追加のプロンプト

非常に雑です🙇‍♂️
動作確認までお願いしちゃいました…

APIキーの権限を修正したのでアップロードを再度試してください
記事の文章はもっと充実させてください。それぞれ1000文字以上
動作確認も行なって画像を添付してください

Walkthrough（v2）

walkthrough.md

# 恐竜ブログ構築完了報告

恐竜ブログの構築が完了しました。
microCMSに入稿されたコンテンツをAstroで静的サイトとして生成しています。

## 成果物

### サイトプレビュー
ローカルサーバー (`npm run dev`) で確認可能です。

<!-- 動画が入ってました -->

- **トップページ**: 記事一覧がカードレイアウトで表示されます。「ジュラシック・パーク」風のダークモードと警告色のデザインを適用しました。
- **詳細ページ**: 各恐竜の記事詳細が表示されます。

### コンテンツ (microCMS)
以下の10記事を入稿しました。

1. Tyrannosaurus Rex
2. Triceratops
3. Velociraptor
4. Stegosaurus
5. Spinosaurus
6. Ankylosaurus
7. Brachiosaurus
8. Diplodocus
9. Allosaurus
10. Parasaurolophus

※ **画像について**:
APIキーの権限が修正されたため、全ての恐竜について正しいアイキャッチ画像（800pxリサイズ版）をアップロードし、記事に設定しました。

### コンテンツ更新 (v2)
- **記事内容**: 各記事を1000文字以上の詳細な解説（基本データ、特徴、研究史、現代における意義など）に更新しました。
- **画像**: microCMSのメディアライブラリにアップロードされた恐竜のイラストを使用しています。

### 技術スタック
- **Framework**: Astro
- **Styling**: Tailwind CSS
- **CMS**: microCMS (microcms-js-sdk)
- **Font**: Oswald (Google Fonts)

## 検証結果

`npm run build` を実行し、全ページのビルドが正常に完了することを確認しました。

```bash
09:10:59 [build] 11 page(s) built in 5.04s
09:10:59 [build] Complete!
```

## 次のステップ
- **デプロイ**: VercelやNetlifyへのデプロイ準備は整っています。

3. 完成

以下が作成された恐竜ブログです↓（Antigravityによる動作確認の画面収録をgifにしたもの）

コードの一部もサンプル程度に貼っておきます↓

index.astro

---
import Layout from '../layouts/Layout.astro';
import { client } from '../library/microcms';
import type { MicroCMSListResponse } from "microcms-js-sdk";

// Define Types
type Blog = {
  id: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  revisedAt: string;
  title: string;
  content: string;
  eyecatch: string | { url: string; height: number; width: number };
  category: {
    id: string;
    name: string;
  };
};

type BlogResponse = MicroCMSListResponse<Blog>;

const response = await client.get<BlogResponse>({ endpoint: "blogs" });
const blogs = response.contents;

const getEyecatchUrl = (eyecatch: Blog['eyecatch']) => {
    if (typeof eyecatch === 'string') return eyecatch;
    return eyecatch?.url || 'https://placehold.co/800x600/1a1a1a/f5d300?text=No+Image';
}
---

<Layout title="DINO PARK BLOG | TOP">
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 py-8">
		{blogs.map((blog) => (
			<a href={`/${blog.id}`} class="block group relative overflow-hidden rounded-sm border-2 border-yellow-900/50 hover:border-yellow-500 transition-all duration-300 bg-black/40 backdrop-blur-sm">
                <!-- Danger Stripes Corner -->
                <div class="absolute top-0 right-0 w-16 h-16 pointer-events-none overflow-hidden z-10">
                    <div class="absolute top-0 right-0 w-[150%] h-4 bg-yellow-500 transform rotate-45 translate-x-4 -translate-y-2 opacity-80"></div>
                    <div class="absolute top-0 right-0 w-[150%] h-4 bg-yellow-500 transform rotate-45 translate-x-8 translate-y-2 opacity-80"></div>
                </div>

				<div class="aspect-video overflow-hidden border-b border-yellow-900/50 relative">
                    <img 
                        src={getEyecatchUrl(blog.eyecatch)} 
                        alt={blog.title} 
                        class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500 filter sepia-[0.3] group-hover:sepia-0"
                    />
                    <div class="absolute bottom-0 left-0 bg-yellow-500/90 text-black text-xs font-bold px-2 py-1 uppercase tracking-wider skew-x-[-10deg] ml-[-5px]">
                        <span class="skew-x-[10deg] block px-1">{blog.category?.name}</span>
                    </div>
                </div>
				
				<div class="p-6 relative">
                    <h2 class="text-2xl font-bold text-yellow-50 mb-2 group-hover:text-yellow-400 transition-colors line-clamp-2 leading-tight">
                        {blog.title}
                    </h2>
                    <div class="flex items-center text-xs text-gray-500 mt-4 font-mono">
                        <span class="mr-2">ID: {blog.id}</span>
                        <span class="ml-auto">{new Date(blog.publishedAt).toLocaleDateString()}</span>
                    </div>
				</div>

                <!-- Hover Overlay -->
                <div class="absolute inset-0 border-4 border-yellow-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
			</a>
		))}
	</div>
</Layout>

「入稿」から「実装」、そして「動作確認」まで、本当に指示を出すだけで完結してしまいました！

デザインもいい感じですね（素人目線👀）

個人的に好きなアロサウルスの記事もあったのが嬉しかったです！

本文の部分は見づらいですが、少し指示を出せば修正できそうです！

おわりに

読んでいただきありがとうございます！

MCP で繋がったエージェントがいれば、エディタから一歩も出ずに（なんならチャット欄だけで）ブログ構築が完結するのはすごいですね！

ぜひみなさんも試してみてください！

参考