ピクセルアート · 実測
AI でピクセルアートのゲーム UI キットを作る: ボタン、体力ゲージ、9-slice パネル
ゲームの UI には、一枚の絵にはないルールがあります。会話ウィンドウはテキストの各行に合わせて引き伸ばされるので、角は崩さずに、辺だけを繰り返す必要があります。ボタンは通常、ホバー、押下の状態を切り替えるので、三つの状態はまったく同じ大きさでなければなりません。そうでないと、テキストボックスにつなぎ目が見え、ボタンが跳ねます。
2026年9月29日、架空の森のゲーム Mossfall 用の小さな UI キットを Ciyo Agent に頼み、これらのルールに照らして測定しました。最初のシートは完成品に見えましたが、ルールのうち二つを満たしていませんでした。二つ目のシートはすべて満たしました。
パーツとルールをまとめて頼む
一つのスタイルで四つのパーツを頼みました。会話パネル、三つの状態を持つボタン、体力ゲージ、インベントリのスロットです。エンジンのルールも依頼文に書きました。9-slice（パネルを 9 分割して伸縮させる方式）のために四つの角を同じにすること、押下状態は 1 ピクセル下げること、パレットを限ること、文字を入れないことです。
エージェントは GPT Image 2.5 Flare で 1,152 × 864 のシートを一枚作り、費用は 2 クレジットでした。生成直後のファイルには 25,696 色あったので、エージェントはディザリングなしで 16 色に減らし、両方のバージョンをボードに置きました。
見下ろし型のピクセルアートのゲーム Mossfall（森が舞台: 苔の緑、温かみのある木の茶色、クリーム色の羊皮紙）用に、ピクセルアートの UI キットを一枚のシートにまとめて作ってください: 1) 木の枠の内側に羊皮紙がある会話ボックスのパネル。角は四角く、9-slice で使えるように作る（四つの角はすべて同じで、辺は均等に繰り返す）。 2) 三つの状態を横に並べたボタン一つ: 通常、ホバー（明るめ）、押下（1 ピクセル下に移動）。 3) 横長の体力ゲージの枠。赤い中身が約三分の二まで入っている。 4) 正方形の小さなインベントリのスロット。スタイル: 厳密なピクセルグリッドに沿った、くっきりした硬いピクセル。アンチエイリアス、ぼかし、グラデーションはなし。最大 16 色、平らな暗い背景。どの要素にも文字は入れないでください。最初のシートで測定したこと
一つは正しく、一つは惜しいところでした。体力ゲージの赤い中身はゲージの 68.9% を占め、頼んだ三分の二に近い値でした。押下状態のボタンの表面は、通常のボタンより元画像のピクセルで 7 ピクセル低い位置にありました。エージェントがあとで測った、ゲームの 1 ピクセルあたり元画像で約 3.5 ピクセルという比率で考えると、これはゲームのピクセルで 1 ではなく約 2 ピクセルです。
ほかに、ゲームの中で壊れるところが二つありました。三つのボタンの状態は幅が 273、266、271 ピクセルとばらばらで、状態が変わるたびにボタンが跳ねてしまいます。また、会話パネルの角は互いのコピーではありませんでした。左上の角を反転させたものと比べると、右上の角ではピクセルの 13% が異なり、下の二つの角では 23% と 25% が異なっていました。
| ルール | 頼んだもの | 得られたもの |
|---|---|---|
| ボタンの状態 | 同じ大きさ | 幅 273、266、271 px |
| パネルの角 | 四つの同じ角 | ピクセルの 13–25% が異なる |
| 押下状態 | 1 ピクセル下げる | 表面が 7 px 低い（ゲームのピクセルで約 2） |
| 体力の中身 | 約三分の二 | 68.9% |
| 色数 | 最大 16 色 | 生成直後は 25,696 色、減色後は 16 色 |
見た目より角と大きさが大事な理由
9-slice では、パネルを 3 × 3 のグリッドに切り分けます。四つの角は一度だけ描かれ、伸ばされることはありません。四つの辺は長さに沿って繰り返され、中央が残りを埋めます。角がそろっていないと、どの大きさでもつなぎ目が見えます。辺の模様が均等に繰り返されないと、並ぶたびに継ぎ目が目に入ります。
ボタンにも似たルールがあります。エンジンは同じ位置で絵を別の絵に差し替えるので、大きさに少しでも差があると、プレイヤーが触れたときにボタンの輪郭が動きます。
失敗した点とエンジンに必要なことをエージェントに伝える
測定結果を送り返し、ゲームでそのまま使えるキットを頼みました。エージェントは、モデルのピクセルの大きさが一定でないことを見つけました。ボタン、ゲージ、スロットではゲームの 1 ピクセルあたり元画像で約 4.0 × 3.5 ピクセル、パネルでは約 6.3 × 5.6 ピクセルです。合わせ込めるきれいなグリッドはありませんでした。
そこでエージェントは、知っておく価値のあることをしました。デザインはそのままに、コードできれいに描き直したのです。一つの角と、16 ピクセルごとに繰り返す木目の辺パーツ一つから、すべての枠を組み立てました。したがって、最終的なキットはモデルのデザインを正確に作り直したもので、モデル自身のピクセルではありません。木目も、元の絵より単純になっています。
16 色のシートを測定しました: 三つのボタンの状態は幅が 273、266、271 px なので同じ位置で差し替えられません。また、会話パネルの四つの角はピクセルの 13 から 25% が互いに異なるので、9-slice にするとつなぎ目が見えます。ゲームでそのまま使えるようにしてください: ゲームのピクセルの本当の大きさを測ってそのグリッドに合わせること。三つのボタンの状態をまったく同じ大きさにすること。パネルの四つの角を、一つの角を反転させたコピーにすること。各要素を背景が透明な個別の PNG に切り出すこと。そして、パネルを幅 2 倍、高さ 60% に伸ばす 9-slice のテストを追加すること。グリッドの大きさと、最終的な各要素の大きさを教えてください。9-slice のテスト
エージェントは 142 × 46 のパネルを九つのパーツに切り分け、幅 2 倍、高さ 60% の 284 × 28 に組み立て直しました。角は崩れず、木目も途切れずに続きました。エージェントはさらに、この高さでは枠の間に羊皮紙が 14 行しか残らないと注意しました。これで、テキストに使えるパネルの最小サイズがわかります。
ファイルも私たちで確かめました。三つのボタンはどれも 68 × 36 で、5 ピクセルの枠は 1 ピクセル単位で一致し、押下状態の表面はほかの二つよりちょうど 1 ピクセル低い位置にあります。パネルの四つの 7 × 7 の角は、互いに正確な鏡像です。キットの色数は 13 色です。
UI パックの販売者が約束していること
有料の UI パックは、同じルールを売り文句として挙げています。これは、まさにそれらのルールを確かめるべきだというよい目安です。パックを買う場合も自分で作る場合も、チェックリストとして使ってください。
2026-09-27に投稿。TaleTone が、ファンタジーゲーム向けの自社の有料パック “UI Window Frame Mega Pack” を告知しています。SVG と PNG で、16 種類、12 色、“optimized for 9-slice layouts and resizing.”（9-slice のレイアウトとサイズ変更向けに最適化）とのことです。販売者が自社製品を宣伝している投稿で、Ciyo とは一切関係がありません。おすすめとしてではなく、チェックリストのために引用しています。
取り込む前のチェックリスト
コントロールのどの状態も同じ大きさであること、引き伸ばすものの角が互いに反転させたコピーであること、辺の模様が区切りのよい単位で繰り返すこと、いちばん小さいパネルにもテキストが一行収まることを確かめてください。そのうえで、各要素をゲームの 1 ピクセルがファイルの 1 ピクセルになる大きさで、個別に書き出してください。
ピクセルアートのゲーム UI
AI の画像モデルは 9-slice のパネルを作れますか
それらしく見えるものは描けますが、2026年9月29日のテストでは、四つの角がピクセルの 13–25% で互いに異なっていました。Ciyo Agent に、一つの角を反転させてパネルを作り直してもらったところ、9-slice できれいに伸びました。
ボタンの状態ごとに大きさが違うのはなぜですか
モデルは各状態を別々の絵として描きます。私たちの場合、幅は 273、266、271 ピクセルでした。共通の大きさを一つ指定し、取り込む前に確かめてください。
最終的なキットの大きさはどうでしたか
会話パネルは 142 × 46、ボタンは 68 × 36、体力ゲージは 174 × 32、インベントリのスロットは 32 × 32 で、すべてゲームの 1 ピクセルがファイルの 1 ピクセルです。
費用はいくらでしたか
シートは 2 クレジットでした。測定と作り直しはエージェントの作業スペースで行われ、私たちのテストでは画像の料金は追加されませんでした。
Ciyo で UI キットを作る
ゲームのスタイルとエンジンのルールを伝え、一つのボード上で Ciyo Agent とキットを確かめて作り直しましょう。