定年を過ぎてから本格的に取り組んでいるAIペアプログラミング。日頃の業務自動化やデータ分析にとどまらず、ライフワークとして検証を続けているのが「坂道シリーズ（乃木坂46・櫻坂46・日向坂46）の推し活データの自動化・可視化」である。
全国ツアーやリアルミーグリ（対面イベント）が発表された際、ファンにとって大きな課題となるのが「会場周辺のホテル確保」「終演後の駅の混雑・終電対策」「現地でのコインロッカー確保」といった遠征の立ち回りだ。毎回手作業で調べるには手間がかかるこの遠征情報を、Webマップツールと詳細な攻略記事の連動によって解決できないかと考えた。
そこで今回、Google DeepMind発のエージェント環境「Antigravity」を活用し、「全国主要ライブ会場のインタラクティブWebマップ（Leaflet.js）」の開発と、その第1弾となる「日向坂46 幕張メッセ遠征攻略親記事（約6,500文字）」の執筆・アイキャッチ画像生成・WordPress連携を一気通貫で実施した。本稿では、その設計方針から実装手順、プロンプトの工夫、マルチサイト連携のプロセスを記録しておく。
この記事でわかること
- 単発記事ではなく「会場Webマップ×パーマネント親記事（約30本）」の2層構造をとる理由
- WordPressテーマの差異（Cocoon vs KaetenGraph）に対応するマルチサイト運用とMCP連携
- Antigravity AIとの対話を通じて実践的な攻略記事をまとめるプロンプトの設計
- 画像生成AI（image-generator）とPython（Pillow）によるアイキャッチ画像の自動合成
- 記事URLを会場マスタJSONへ即時反映し、全国展開へ備えるデータ循環の仕組み
1. 構想と全体設計：なぜ「全国会場Webマップ」×「会場別攻略親記事」なのか？
イベントごとの乱発が招く「SEOカニバリゼーション」の回避
ブログでイベント情報を扱う際、注意が必要なのが「ツアー発表があるたびに新規記事を乱発する」という運用である。
例えば日向坂46が幕張メッセでイベントを行うたび、「2024年春 幕張メッセホテル」「2025年冬 幕張リアルミーグリホテル」と別々の記事を作成すると、サイト内に類似した記事が乱立する。その結果、検索エンジンから重複コンテンツ（カニバリゼーション）と判定され、自サイト同士で検索順位を競合させてしまうリスクがある。
実際には、幕張メッセの「終電対策」「穴場宿泊駅（千葉駅・蘇我駅・新木場駅）」「コインロッカーの配置」といった攻略情報は、イベントが変わっても基本的に変わらない恒久的な情報である。
そこで、以下のような役割分担を行うアーキテクチャを採用した。
2層構造のサイト設計方針
- 【総合ハブ】全国ライブ会場Webマップ（固定ページ）：日本地図上に会場ピンを配置。クリックで空室検索や詳細記事へ誘導する。
- 【恒久資産】会場別パーマネント攻略親記事（約30本）：『【幕張メッセ遠征攻略】穴場ホテル・終電・ロッカー完全ガイド』として上位表示を狙う。最新ツアーが決まれば日程を追記してメンテナンスする。
- 【日常更新】イベント速報子記事：新ツアー発表時に「詳しいホテル・アクセスは親記事へ」と内部リンクを繋ぐ。
会場マスタ（JSON）と地図UI（Leaflet.js）のデータ設計
まず作成したのが、坂道グループが頻繁に使用する全国主要会場（幕張メッセ、ぴあアリーナMM、ポートメッセなごや、セキスイハイムスーパーアリーナ等）のデータを集約したマスタファイル venues_hinatazaka46.json である。
{
"id": "makuhari-messe",
"name": "幕張メッセ 国際展示場 / 幕張イベントホール",
"area": "chiba",
"lat": 35.6481,
"lng": 140.0347,
"capacity": 9000,
"nearest_station": "JR京葉線「海浜幕張駅」徒歩約5分",
"travel_tip": "海浜幕張駅前ホテルは即完売するため、千葉駅・船橋駅・新木場駅などの近隣主要駅を確保するのがプロの定石。",
"rakuten_search_url": "https://hb.afl.rakuten.co.jp/...",
"article_url": ""
}このJSONをオープンソースの軽量地図ライブラリ「Leaflet.js」に読み込ませ、ピンをタップすると楽天トラベルの空室検索や攻略親記事へ直結するWebマップUI（hinatazaka46_live_venue_map.html）を先行して構築した。
2. マルチサイト運用の壁：テーマ差異（Cocoon vs KaetenGraph）とMCP連携
読者向けサイトと開発記録ブログの切り分け
今回の作業を進めるにあたり、一つの運用上のポイントとなったのがサイトごとのテーマ差異である。坂道ファン向けの実務コンテンツを公開する本番サイトは https://e-entre.info/ で、採用テーマは KaetenGraph（カエテングラフ） である。一方、この作業プロセスをエンジニア視点で記録している当ブログ（Ageless Logic & Data）は Cocoon を採用している。
当初は普段使い慣れているCocoonの記法を前提にしそうになったが、本番サイト向けの記事では特定のテーマに依存する独自タグを排除し、WordPress標準ブロック（Gutenberg）互換のHTML（wp-block-table, wp-block-heading 等）で出力させる方針へと切り替えた。
WordPress REST APIとMCPによる下書き連携
記事の入稿作業を手動コピペで行うと作業のボトルネックになるため、Antigravity環境のMCP設定ファイル（mcp_config.json）に wordpress-hinata サーバーを追加定義し、WordPress REST APIを用いた下書き（draft）連携ラインを構築した。
e-entre.infoの認証情報を用意した。REST API経由で管理者権限のアクセスや下書き投稿ができるか、まず接続テストを行ってほしい。
承知いたしました。JSON設定の構文を補正した上で接続テストを実行いたしました。管理者ID（ID: 1）での認証に成功し、下書き記事へのアクセスおよびカテゴリ一覧の正常取得を確認できました。いつでも下書き投稿が可能な状態です！
このAPI連携により、「ローカルで原稿生成 → アイキャッチ画像アップロード → 記事を下書き保存」という一連の処理がコマンドから直接実行できるようになった。
3. AIペアプロの実際：6,500文字の幕張メッセ攻略親記事の作成プロセス
実践的な情報を網羅するプロンプト設計
単に「幕張メッセの遠征記事を書いてほしい」と指示するだけでは、一般的なアクセス案内に留まりがちになる。実際に遠征するファンが求めるのは、「混雑時の具体的な迂回ルート」や「満室時の現実的な代替案」といった実用的な情報である。
そこで、Antigravity AIとの対話では以下の具体的な要素をあらかじめ要件として提示した。
プロンプトに盛り込んだ具体的要件
- グループにおける会場の歴史的背景：けやき坂46時代の「走り出す瞬間ツアー」、東京ドームサプライズ発表の「ひなくり2019」、復帰ステージ「ひなくり2021」、近年のリアルミーグリ実績
- 海浜幕張駅前が満室のときの3大穴場駅：
- 千葉・蘇我駅：帰りの電車が逆方向で混雑を回避、飲食店多数
- 新木場・潮見駅：東京駅・羽田空港アクセス直結、都内聖地巡礼に有利
- 津田沼・船橋駅：総武線・京成線連絡、宿泊費を抑えたい方向け
- 海浜幕張駅の混雑・入場規制を回避するルート：
- 隣の「幕張豊砂駅」まで徒歩約15分移動して乗車するルート
- 路線バス（京成バス）でJR総武線の「幕張本郷駅」へ抜けるルート
- ロッカー確保の優先順位：東京駅や宿泊先事前預け、周辺商業施設（イオンモール等）の活用
この要件で幕張メッセの親記事を作成してほしい。文字数は4,500〜5,500字を目安とし、KaetenGraphで表示崩れのない標準ブロックHTML形式とする。アイキャッチ画像も自動生成してほしい。
お任せください！各章の具体策を掘り下げて執筆いたしました。純日本語本文で約6,690文字（HTMLタグ込みで約13,100文字）の内容となっております。比較表や持ち物チェックリストも網羅して下書きを作成いたしました。
画像生成AI（image-generator）× Python（Pillow）によるアイキャッチ自動合成
アイキャッチ画像についても、画像生成とPythonスクリプトを組み合わせて自動生成した。
- ベース画像の生成：サブエージェント（
image-generator）を呼び出し、日向坂46のグループカラーであるスカイブルーの青空、幕張メッセを想起させる近代的な展示施設、キャリーケース、ペンライトの光を配した16:9のイラストを生成。 - Pillowによるタイトル帯・テキストの自動合成：生成された画像に対し、Pythonの画像処理ライブラリ「Pillow」を用いて左側に半透明の角丸パネルを敷き、視認性の高いフォントで「幕張メッセ 遠征完全攻略」「穴場ホテル・終電・ロッカー」のバッジやテキストを合成。
生成されたアイキャッチ画像は以下の通りだ。
画像処理ソフトを手動で操作することなく、PythonスクリプトとAIの組み合わせによって短時間でWeb用のアイキャッチ画像を仕上げることができた。
4. マスタデータへの自動フィードバックと今後の水平展開
記事URLをJSONマスタへ即時反映（データ循環の実現）
記事の下書き投稿が完了し、公開確認を行った後、最後のステップとして行ったのが「データの循環」である。
公開された記事パーマリンク（https://e-entre.info/?p=43108）を、最初に作成した会場マスタ venues_hinatazaka46.json の makuhari-messe の article_url フィールドへと書き戻しを行った。
さらに、固定ページ側のマップJavaScriptにも改善を加え、WordPressのREST API（/wp-json/wp/v2/posts）から公開記事を自動フェッチし、タイトルに含まれる会場名と一致するピンに「攻略ガイドを見る」ボタンを動的生成する仕組みを導入した。これにより、今後は固定ページ側のコードを触ることなく、記事を公開するだけでマップ側にリンクが自動反映される。
全国主要30会場への水平展開テンプレート
今回、第1弾として幕張メッセの記事とマップ連携を完遂したことで、一連の制作フローが整理された。
| 制作フェーズ | 実施内容 | 使用ツール / 担当 |
|---|---|---|
| ① データ定義 | 会場スペック、緯度経度、最寄り駅、楽天検索URLの整理 | JSONマスタ（venues_hinatazaka46.json） |
| ② 構成・執筆 | 歴史的背景、穴場宿泊駅、混雑回避ルート、ロッカー戦略の整理 | Antigravity AI（Gutenberg互換HTML） |
| ③ アイキャッチ | スカイブルー基調イラスト生成＋Pillow文字合成 | image-generator ＋ Pythonスクリプト |
| ④ 入稿・デプロイ | メディアアップロード ＋ 記事登録 | WordPress REST API / MCP |
| ⑤ データ循環 | 公開URLの自動検知とWebマップへの動的反映 | WordPress REST API 自動フェッチ連携 |
今後は、遠征の難易度が高いとされる「仙台セキスイハイムスーパーアリーナ（シャトルバス対策）」「Aichi Sky Expo（空港島アクセス）」「ポートメッセなごや（あおなみ線混雑）」といった地方主要会場についても、同様のフローで順次記事を展開していく予定である。
5. まとめ：AIペアプログラミングによる制作プロセスの効率化
Webマップの構築から会場マスタの整理、長文の攻略記事執筆、画像合成、そしてWordPressへの入稿までを単独で進める場合、通常であれば相当な日数と作業負荷がかかる。
適切なアーキテクチャ設計と明確な要件定義を行えば、数時間の対話セッションの中で実用的なWebコンテンツと周辺ツールを形にできることを改めて実感した。
AIを単なる文章作成ツールとしてではなく、コードの記述、API連携、画像処理、データ構造の連携までを共に進める共同作業者として位置づけることで、個人の情報発信やモノづくりの幅は大きく広がる。今後もテクノロジーを活用しながら、坂道シリーズのデータ活用プロジェクトを継続していきたい。
