Antigravity × a-blog cms MCP！AIにテーマ作成を丸投げしてみた
この記事はa-blog cms Advent Calendar 2025の11日目の記事です。
みなさん、こんにちは！
ついに…ついにGoogleからAIエディタが出ましたね！
その名も 「Antigravity」 。
今回は、このAntigravityと、先日のイベントで話題になった「a-blog cms MCP」を組み合わせて、完全手ぶら（素材なし・コードなし） でWebサイトのカスタムテーマを作ってみようと思います。
未来の技術だと思っていたことが、手元で動く感動を共有させてください！
今回作成したコードはGitHubで公開しています。
今回使用する技術スタック
まずは、今回使用する強力なツールたちを紹介します。
1. Google Antigravity
今までVSCodeを使っていた方も多いと思いますが、Antigravityは設定・拡張機能・テーマをそのまま引き継げるため、移行コストがほぼゼロです。
感覚としては 「VSCodeにGeminiがネイティブ統合された」 イメージですが、他社製AIエディタ（Cursor等）と大きく違う点があります。
それは、画像生成AI 「Nano Banana」 を内蔵していること。
つまり、エディタから出ることなく、コードだけでなく 画像素材まで生成完結 してしまうんです。恐ろしい時代になりました…。
2. a-blog cms MCP
先日の a-blog cms Training Camp 2025 で存在を知ったのがこのMCP（Model Context Protocol）サーバーです。
これを導入することで、a-blog cms特有のテンプレート記法や仕様を、いちいちプロンプトで教えなくてもAIが勝手に参照して理解してくれる ようになります。
実際に、ブログテーマにMCP連携用のモジュールIDを登録後に分析してもらった結果がこちらです。
デフォルトのダミーエントリーやモジュールIDを正確に把握しています。
「ここはどうなってるの？」と聞かなくても、AI側から「現状はこうですね」と返ってくる。これは革命的です。
作成するサイトのテーマ：Geminiくん ♊️
技術検証だけだと味気ないので、今回は私のオリジナルキャラクター「Geminiくん」のポートフォリオサイトを作ってもらいます。
Geminiくん
元々は登壇資料の挿絵用にGeminiで作ったキャラなのですが、彼を主役にしたカスタムテーマを 「素材作成からコーディングまで」 丸投げしてみます。
準備編：AIに「人格」と「知識」を宿らせる
いきなりコードを書かせる前に、Antigravity（Gemini）にコンテキストを与えます。ここが精度の分かれ目です。
1. 競合分析とペルソナ設定
AIへの指示出し（プロンプト）のコツは、「役割（ロール）」を与えること です。
今回は「実績豊富なウェブディレクター兼マーケッター」になりきって分析してもらいました。
出力されたレポートを元に、プロジェクトの知識としてAntigravityに登録（.mdファイルとして保存）します。
これをAntigravityの知識ベースに追加します。これでエディタ自体がプロジェクトの全貌を理解しました。
2. a-blog cms MCPの接続
今回の要であるMCPサーバーも接続済みです。他のMCPはあえて入れず、a-blog cms MCPとAntigravityの素の実力を検証します。
実行！！
準備が整ったので、いよいよ生成を開始します。
プロンプトにはGeminiくんの元画像も添付し、雰囲気も伝えます。
(プロンプトの詳細は GitHub に置いてあります)
ハプニング：母国語が出ちゃう問題 🗽
プランの提案が返ってきたのですが…
全部英語です。
Geminiくん、気を抜くとすぐに母国語（英語）が出てしまいます。
メモリファイルを確認すると、always speak in Japanese. と書いてあるのに…。
「日本語で説明して」と修正指示を出しつつ、今後のためにメモリへ強めに追記しておきます。
## Gemini Added Memories
- From now on, always speak in Japanese. (絶対日本語で話してね！)
日本語に戻ってくれました！Taskリスト（左側）は英語のままですが、AI的には英語のほうが処理しやすい可能性もあるので、ここは許容します。
生成プロセス：画像もその場で作る
ここからがAntigravityの真骨頂。
コーディングと同時に、必要な画像素材（404ページ用の画像など）も「Nano Banana」が生成してくれています。
404用の「困り顔」画像を生成中。文脈を理解していて可愛いですね。
完成！成果物の確認 🎨
待つこと数分。トップページが完成しました！
おお…！すごい！
Geminiくんが3D風にリデザインされています！
他のAIだと、3D化した途端に別人のようになったり、腕が増えたりしがちですが、さすがNano Banana。元の特徴を捉えたまま自然に3D化されています。
右下のアイコンにカーソルを合わせるとガイドが出るギミックも実装されていました。
キャッチコピーもなかなかエモいです。
「テクノロジーは冷たいものじゃない。Geminiと一緒に、人に寄り添う新しいデジタルのカタチを見つけよう。」
課題点と今後の展望 🤔
概ね素晴らしい出来ですが、完璧ではありません。いくつか課題も見つかりました。
1. 404ページの挙動（a-blog cmsの仕様）
404用画像を作ってくれたので、適当なURL（/ababababa）を叩いてみましたが、トップページが表示されてしまいました。
これはa-blog cmsの仕様（存在しないURLはトップにフォールバックする設定など）をAIが完全に考慮しきれていなかったためです。「404.htmlを作成する」という知識を追加で教える必要がありそうです。
2. レスポンシブ対応の甘さ
PC表示は綺麗ですが、ウィンドウ幅を縮めるとレイアウトが崩れがちでした。
スマホサイズまで行くと整うのですが、中間サイズの調整はまだ人間の手（あるいは追加指示）が必要ですね。
まとめ
まだ「静的なトップページ」ができた段階ですが、AntigravityとMCPの組み合わせには無限の可能性を感じました。
特に 「エディタ内で素材生成から実装まで完結する」 体験は、開発フローを劇的に変える予感がします。
次回は、a-blog cmsらしく「お知らせ」の更新機能などを実装してもらおうと思います。
それでは、また！ 👋
Discussion