ボツにしたAIエージェント可視化ツールのドット絵、全部置いていきます(CC0)
「AIエージェントをRPGで可視化しようとして失敗した話」の供養編です。
プロジェクトは畳みましたが、キャラと背景は普通に良い。作り方ごと供養します。全部 CC0、好きに使ってください。
前編:AIエージェントをRPGで可視化しようとして失敗した話 —— 主役は「勇者」じゃなくて「クエスト」だった
前編は「なぜ RPG メタファーが構造的に破綻したか」の反省文でした。
こっちは アセット制作の実践編です。nano-banana(Gemini の画像生成)で統一感のあるゲーム用キャラを揃える手順が、そこそこ再現性のある形で固まりました。
供養対象
こいつらです。
左から 司令塔(副ギルドマスター)/戦士(開発)/魔法使い(調査)/僧侶(検証)。
AI エージェントの役割を RPG の職業に割り当てたので、戦士がコードを書き、魔法使いが調べ、僧侶がテストします。司令塔だけスーツなのは、こいつがユーザーの唯一の対話窓口だからです。
そしてギルド本部(酒場)。
捨てるのが一番惜しかったやつです。
生成工程:いきなりドット絵を狙わない
一番の知見がこれ。3段階で降ろします。
- アニメ風コンセプト画(全身) をゼロから生成
- それを編集モードでバストアップに変換
- さらに編集モードで 2頭身のドット絵風チビキャラに変換
2と3は「新規生成」ではなく「編集」。ここが全部。
ゼロから「ドット絵の戦士を描いて」と頼むと、毎回まったくの別人が出ます。赤い鎧を指定しても、顔も体型も髪型も揃わない。ゲーム用アセットとしては使えません。
先に情報量の多いコンセプト画を作り、それを元画像として編集モードに渡すと、同一人物性がかなりの精度で保たれます。上の3枚、顔の作り・鎧の金の装飾・マントの赤、ちゃんと同じ人です。
バストアップ4人分。
ドット絵4人分。
全部コンセプト画から編集モードで降ろしたものです。同一人物性が保たれたまま3フォーマット揃う。
バストアップは会話 UI の立ち絵、ドット絵はマップ上のキャラに使いました。用途が違うのに絵柄が揃うので、UI 全体の統一感が一気に出ます。
局所修正も編集モードでいけます。「マントだけ色を変えて」「メガネを足して」程度なら、他を壊さずに直せました。
配色ルール:ドット絵は主色を被らせると死ぬ
やらかして学びました。
戦士=赤/魔法使い=緑/僧侶=青/司令塔=濃ネイビー+金。
コンセプト画の段階なら、色が近くても顔や装備で区別できます。でも2頭身・低解像度に落とすと、顔のディテールが消えて色の塊になる。主色が近い2人がいると、マップ上で見分けがつきません。
ドット絵の識別性は、ほぼ色で決まる。
当たり前ですが、コンセプト画がきれいに出ていると気づきにくい罠でした。
職業を追加するなら、先に色を予約してからキャラを設計するのが正解です。
背景:生成AIは頼んでもいないのに黒帯を付けてくる
背景で苦労したのは絵柄ではなく構図でした。git log がそのまま記録です。
1a823d1 ギルド本部を4:3に:背景も4:3で内装が全面を埋める構図に再構成
615d64a ギルド本部背景の黒い四隅を除去し、床・壁で4:3全面を埋める
0d7aeaa ギルド本部を長方形の部屋に(壁が画像4辺)+立ち位置を新レイアウトに調整
db2d5b3 ギルド本部の上部黒帯を除去+立ち位置調整
4コミット全部「余白との戦い」です。
「俯瞰視点の酒場を描いて」と頼むと、生成 AI は部屋を画像の中央に小さく置き、周囲を黒や暗色で埋めます。1枚絵としては構図が締まって良い。でもゲーム背景としては使えない。キャラを立たせる床が足りず、UI の枠にはめると黒帯が出ます。
効いた指示はこの3つ。
- アスペクト比を明示する(「4:3」)
- 「内装が画像の全面を埋める」と明示する
- 「壁が画像の4辺になる長方形の部屋」と、部屋の形そのものを指定する
3番目が決定打でした。
「余白を作るな」ではなく「壁=画像の縁」。否定形より、肯定形の構造指定。
生成 AI に構図を守らせるときの一般則として使い回せそうです。
モンスターとポーズ差分
左4つが戦士のポーズ差分(歩行・攻撃・喜び・被弾)、右端がスライムです。
ポーズ差分は初期世代のドット絵で、上のチビキャラとは絵柄が違います。作り直す前に企画が終わりました。「状態が変わったらポーズが変わる」という表現自体は良かったので、絵柄を揃えれば普通に使えるはずです。
スライムは生成画像と Canvas 手描きの両方を用意し、最終的にモックでは手描き+役割色で塗り分けを採用しました。理由は単純で、担当が決まるまで色が確定しないから。生成画像だと色ごとに枚数が要りますが、手描きなら色だけ差し替えられます。
「アセットで解くか、コードで解くか」の判断です。
色や状態でバリエーションが増える要素は、コード側で解くほうが安い。
キャラのように情報量が多いものは生成、記号に近いものは手描き。境界はそのへんです。
モックに埋め込む:外部ファイルが読めない問題
モックは単体で動く HTML 1枚(docs/ui-mock.html)にしていました。共有時に「クローンして、サーバー立てて…」が要らないので。
ただしこの形式、外部ファイル参照ができません。<img src="assets/..."> が動かない。
なのでビルドスクリプトで全 PNG を base64 に変換し、HTML に注入しています。
# scripts/build_mock.py(概念)
# assets/**/*.png を base64 化して ui-mock.html の <script id="assets"> に流し込む
# キーはファイル名の stem(warrior.png → "warrior")
結果、HTML 1ファイルが 3MB。テキストエディタで開くと固まります。それでも「ダブルクリックで動くモック」の価値のほうが高かったので、これで正解でした。アセットを差し替えたらスクリプト再実行、という運用です。
お金の話:画像生成、地味に効いてくる
キャラ4体を3フォーマット揃えるのに、失敗込みでそれなりの枚数を焼いています。1発で決まることはまずない。構図・表情・色で何度もリテイクが入り、背景に至っては上記のとおり4回作り直しました。
なので今は、生成の呼び出しを Antigravity CLI(agy)経由に寄せています。サブスク枠で叩けるので、リテイク前提の作業と相性がいい。レート制限に当たったときだけ API に切り替える形をスキル化し、Claude Code から呼べるようにしました。
安いほうから使って、詰まったら課金側に落ちる。
それだけの話ですが、効果は大きい。手動で切り替えていると、面倒くささが先に立ってリテイク自体をやめてしまうからです。
agy 側で 429 QUOTA_EXHAUSTED を食らったらリセット待ち、という点は変わりません。ただ**「待つ」か「払う」かをその場で選べる**ようになって、作業が止まらなくなりました。
ライセンス:全部 CC0 です
- アセット(キャラ・背景・モンスター): CC0 1.0 —— 著作権放棄。クレジット不要、商用可。
- コード: MIT
プロジェクトは畳みましたが、リポジトリは残してあります。assets/ 以下をそのまま持っていってください。
モック(docs/ui-mock.html)も単体で動く HTML なので、ダウンロードしてブラウザで開けば擬似イベントでシナリオが再生されます。
- AgentsQuest(供養) —— https://github.com/HiroSnow0413/agents-quest
で、次
失敗の分析は前編に書きました。要約すると 「RPG の主役はキャラクター、可視化ツールの主役はタスク」。
その反省で、宇宙戦艦テーマの MISSION: NEXUS を作り直しています。
副艦長と対話しながら、タスクがゲームのように進んでいく。
Robot(サブエージェント)を主役から降ろし、一等地に Mission Flow(仕事の流れ) を置きました。Robot はカードの中の担当者名です。ゲーム性は残しましたが、乗せる先をキャラからタスクの進行に移しています。
ただしキャラを捨てたわけではありません。格納庫にはメカと搭乗パイロットがいて、機体ごとに口調が違います。
違うのは扱いです。前作ではキャラが情報の代わりでした。今回は情報の上に乗った演出として、レイヤーごと分離してあります。パイロットを乗せ替えても任務の結果は変わりません。変わるのは言葉づかいだけ。
「世界観は好きだけど、可視化ツールとしては信用できる」を両立させる、というのが今回のテーマです。
- MISSION: NEXUS —— 近日公開!(別記事で詳しく紹介します)
ドット絵、誰か使ってやってください。特に酒場。







