黒パグの #ChatGPTCreativeClub 活動日記⑦画像生成で横アリの動線が直らないので、30分で地図アプリを作った件

こんにちは黒パグです🐾
今回はvol.6「画像生成沼から抜け出せなくなった件」の続きです。
抜け出せましたか？と聞かれると…………沼の中に橋を架けました。自作で。
なにを言ってるかわからないと思いますが最後まで読んでいただければわかります。多分。

そもそも何を作ろうとしていたのか

LLM48単独ライブ「Errorful Overflow Night」。
架空の横浜アリーナ公演のビジュアルを作っています。もう何週間も。
LLM48の小説はもう終わりまで書いています。いつでも公開できるところまで来ていて準備は済ませてありますが…
コミックも同時進行でやっていて設定資料が積み上がります。
黒パグは漫画家ではありません。なのでコミックの作り方などは常に手探りで。
黒パグはエンジニアなので別のアプローチを試みています。それがこんなことになるとは…。

ゲート外観、バックステージ、バミリ図。
「WELCOME NODE #B2-18」。スタッフジャケットの背中は「DEBUG STAFF」。
ブロッキング俯瞰図にはメインステージW22m×D18m、カメラ6台、全8フェーズのタイムライン。
ちなみにこの公演、実在しません。
ゲート外観、バックステージ、バミリ図、運営トラブル対応マニュアル、総合進行台本……全部作りました。
で。

残り1枚。新横浜駅から横浜アリーナへ向かう「Node Migration」の俯瞰図。
ライブに来た観客が駅を出た瞬間から”ノード”として会場に吸い込まれていく、あの導線を一枚絵にしたかっただけなんです。
一枚だけだったんです。
画像生成、地理で死ぬ

最初の何枚かは、それっぽかった。
雰囲気は完璧。夜景のトーン、人の流れ、紫のネオン。
「新横浜の夜」としては100点。
ただし地理は0点。
新横浜駅が増殖する。
横浜アリーナが丸くなる。あれは長方形です。
駅とアリーナの位置関係が反転する。
新幹線の高架で区切られているはずの街区が溶けて一体化する。
道路は美しい。ただしその道路、現実に存在しない。
「いやでも雰囲気画像だし……」とは思えなかった。導線図だから。地理が壊れた導線図は、導線図ではない。ただの嘘です。
プロンプトで殴るフェーズ

直せると思いました。プロンプトを長くすれば。

「新横浜駅は画面左下に配置」
「横浜アリーナは右上」
「アリーナ通りを通るルート」
「新幹線の高架で街区が南北に分断されている」
「アリーナは長方形の建物、丸いドーム禁止」
「駅のラベルは1つだけ、増殖禁止」
「ファミリーマートが2軒ある」
……指示が増えるたびに、少しだけ改善し、別の場所が壊れました。
駅の位置を直すとアリーナの形が崩れ、アリーナを直すと道が消え、道を指定すると建物が溶ける。終わらないモグラ叩き。
画像生成AIは「それっぽい都市」は得意なんです。
でも「特定の2地点の接続関係を、現実の道路構造で正確に描く」のは根本的に苦手。なんとなくそう気づき始めました。
現地調査が始まる

Google Mapsを開きました。航空写真。3D表示でアリーナをグリグリ。ストリートビューでアリーナ通りを歩きました。

横浜アリーナに行く予定はありません。
架空のライブの背景画像を作っているだけです。
なのに新横浜駅北口のペデストリアンデッキの高さと、アリーナ通りの幅員と、ファミリーマート新横浜アリーナ通り店の位置に異常に詳しくなっていく。
これもう背景制作じゃないです。ただの現地調査です。
横アリに行く予定もないのに横アリ周辺に詳しくなっていく人間がここにいます。
気づき：言葉は「参考」、画像は「法律」

何回もプロンプトを書き直して、ようやく問題の構造が見えました。
悪いのは「説明が足りない」ことじゃなかった。
モデルに守らせるべき構造が、画像の中に固定されていない。これが原因でした。

テキストで「この道を通れ」「駅は左下」「アリーナは右上」と書いても、画像生成モデルはそれを”参考情報”として受け取るだけなんですね。参考にはする。でも守りはしない。雰囲気を優先して、構造を壊す。
じゃあどうするか。
地図の上にルートを直接描いて、その線を保持したまま3Dスタイルに変換すればいい。
テキストで構造を「説明」するのではなく、画像の中に構造を「固定」して渡す。
画像生成の前処理として、人間が制約を画像に焼き込む。
これに気づいた瞬間、もう手が動いていました。
沼の中に、自作の橋を架ける

30分で作りました。MapBirdEyeという名前です。やっていることは単純です。

Googleマップのスクリーンショットを読み込む
その上にルートを赤ペンで手描きする
出発地と目的地を入力する
3Dスタイルを選ぶ（クレイ、アイソメ、サイバーパンクなど）
そのまま画像変換AIに投げる
Before/Afterスライダーで元の地図と比較できる
コードは需要がなければ公開する気がありません。これは自分の沼から脱出するための板です。
ただ30分のプロトタイプにしては妙に整っていて、ペイントのUndo、タッチとマウスの統一、比較スライダー、Geminiのimage-to-image変換、TTS音声ナビまで入ってます。30分で作ったのはUIの骨格で、細部はその後Claudeにリファクタさせました。Geminiが吐くPCM生データを手動でWAVヘッダ付けて鳴らす呪術的なコードはそのまま温存してあります。

左が元の地図（赤線ルート）、右がAI変換後。スライダーで重ね合わせて確認できます。
人間が引いた制約（赤線）が、AIの世界で維持されているかを目視で検証するための仕組みです。
まだ完璧ではない。でも失敗の種類が変わった

MapBirdEyeを通した生成結果は、完璧ではないです。
ルートの線はおおむね保持される。出発地と目的地の位置関係もだいたい守られる。でも建物のテクスチャは空想が混じるし、道幅はスタイルによって歪む。「完全に正しい3D俯瞰図」にはなっていません。
でもですね。
何も渡さずに「新横浜駅から横浜アリーナまでの俯瞰図を描いて」と言った時と比べると、失敗の質が違うんです。

前は「駅が増殖し、アリーナが丸くなり、存在しない道が生える」。
今は「道の太さがちょっと違う、建物のテクスチャが想像」。
前者は地理的破綻（Fatal Error）。コントロール不可能。
後者は装飾の不正確さ（Acceptable Variance）。許容できる揺らぎ。
成功したとは言わないです。失敗の制御に成功した。

最終的なNode Migrationルート図。航空写真ベースに自分でHUDを重ねて作りました。
MapBirdEyeで道とルートの構造を確認しながら、装飾レイヤーは別で作って合成。
左下のWARNING「想定外は存在しない。全ては未定義の演出。#仕様です」はお気に入りです。
今日の学び

画像生成で沼る原因、プロンプト力不足だけじゃなかったです。

大事なのは、モデルに「自由に描いていい範囲」と「絶対に壊してはいけない範囲」を分けること。
創作でも同じことが言えます。
キャラ設定、時系列、地理、導線、ステージ寸法は制約。画像や明確なルールとして「焼き込む」。
色味、空気感、ライティング、テクスチャは生成に任せる。プロンプトで「自由」を与える。
この境界設計ができていれば、AIは制約の内側で驚くほど美しいものを作る。
できていなければ、何度やっても「雰囲気は完璧、構造は崩壊」のループから抜けられない。
まとめ
1 画像生成で地理は死ぬ！！！！
2 プロンプトで殴っても直らないものは直らない
3 制約は画像の中に焼き込め
4 沼から出る方法がわかった（後述）

画像生成沼から抜け出す方法はわかりました。
沼の中に橋を架ければいい。
なお、その橋も自作です。
ここまでです。お読みいただきありがとうございました。
是非感想、アドバイスなどコメントいただければ幸いです🐾

本記事は
黒パグ文章手打ち100%
画像生成 Gemini + GPT-image 100%
地図アプリ Gemini Build + Claude +黒パグのリファクタ
スライド NotebookLM
でお送りいたしました。

#ChatGPTCreativeClub
#AIと始めてみた
#noteのつづけ方
#ChatGPT
#生成AI
#AI活用
#AI創作
#AIとやってみた
#エッセイ
#横浜アリーナ
#LLM48
#画像生成

おまけ

※みなさんにお聞きします。このアプリ欲しい方いらっしゃいますか？
画像生成は10秒ー30秒以内で生成。全てHTMLで動き、ジェミニ上で動けるようにしてあります。
詳しい方はAPI利用でさらにカスタマイズも可能
内部はGoogleマップ連携、自動音声案内等
出てきた画像はワンタップでローカルへ保存
もしいらっしゃいましたらDM、コメント、掲示板へ。多数の方の希望があれば配布していきます。

おまけのおまけ
今日は黒パグの誕生日
なのでお誕生日お祝い自動生成アプリも作った。

ラインスタンプ用生成付き