1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ボツにしたAIエージェント可視化ツールのドット絵、全部置いていきます(CC0)

1
Last updated at Posted at 2026-08-13

ボツにしたAIエージェント可視化ツールのドット絵、全部置いていきます(CC0)

「AIエージェントをRPGで可視化しようとして失敗した話」の供養編です。
プロジェクトは畳みましたが、キャラと背景は普通に良い。作り方ごと供養します。全部 CC0、好きに使ってください。

前編:AIエージェントをRPGで可視化しようとして失敗した話 —— 主役は「勇者」じゃなくて「クエスト」だった

前編は「なぜ RPG メタファーが構造的に破綻したか」の反省文でした。
こっちは アセット制作の実践編です。nano-banana(Gemini の画像生成)で統一感のあるゲーム用キャラを揃える手順が、そこそこ再現性のある形で固まりました。


供養対象

こいつらです。

31-roster-concept.png

左から 司令塔(副ギルドマスター)/戦士(開発)/魔法使い(調査)/僧侶(検証)。
AI エージェントの役割を RPG の職業に割り当てたので、戦士がコードを書き、魔法使いが調べ、僧侶がテストします。司令塔だけスーツなのは、こいつがユーザーの唯一の対話窓口だからです。

そしてギルド本部(酒場)。

35-guildhall.png

捨てるのが一番惜しかったやつです。


生成工程:いきなりドット絵を狙わない

一番の知見がこれ。3段階で降ろします。

30-pipeline-warrior.png

  1. アニメ風コンセプト画(全身) をゼロから生成
  2. それを編集モードでバストアップに変換
  3. さらに編集モードで 2頭身のドット絵風チビキャラに変換

2と3は「新規生成」ではなく「編集」。ここが全部。

ゼロから「ドット絵の戦士を描いて」と頼むと、毎回まったくの別人が出ます。赤い鎧を指定しても、顔も体型も髪型も揃わない。ゲーム用アセットとしては使えません。

先に情報量の多いコンセプト画を作り、それを元画像として編集モードに渡すと、同一人物性がかなりの精度で保たれます。上の3枚、顔の作り・鎧の金の装飾・マントの赤、ちゃんと同じ人です。

バストアップ4人分。

32-roster-bust.png

ドット絵4人分。

33-roster-pixel.png

全部コンセプト画から編集モードで降ろしたものです。同一人物性が保たれたまま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 に構図を守らせるときの一般則として使い回せそうです。


モンスターとポーズ差分

34-poses-slime.png

左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 なので、ダウンロードしてブラウザで開けば擬似イベントでシナリオが再生されます。


で、次

失敗の分析は前編に書きました。要約すると 「RPG の主役はキャラクター、可視化ツールの主役はタスク」。

その反省で、宇宙戦艦テーマの MISSION: NEXUS を作り直しています。

10-nexus-command.png

副艦長と対話しながら、タスクがゲームのように進んでいく。

Robot(サブエージェント)を主役から降ろし、一等地に Mission Flow(仕事の流れ) を置きました。Robot はカードの中の担当者名です。ゲーム性は残しましたが、乗せる先をキャラからタスクの進行に移しています。

ただしキャラを捨てたわけではありません。格納庫にはメカと搭乗パイロットがいて、機体ごとに口調が違います。

11-nexus-hangar.png

違うのは扱いです。前作ではキャラが情報の代わりでした。今回は情報の上に乗った演出として、レイヤーごと分離してあります。パイロットを乗せ替えても任務の結果は変わりません。変わるのは言葉づかいだけ。

「世界観は好きだけど、可視化ツールとしては信用できる」を両立させる、というのが今回のテーマです。

  • MISSION: NEXUS —— 近日公開!(別記事で詳しく紹介します)

ドット絵、誰か使ってやってください。特に酒場。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?