AIでドット絵素材を作る前に：解像度と輪郭を決める

表示サイズを先に決める

ドット絵の制作で最初にすべきことは、ゲーム画面でこのキャラクターやタイルを何ピクセルで表示するかを決めることだ。これを後回しにしてAI生成だけを先に進めると、解像度が合わないまま画像を量産してしまう。以下はゲーム用ドット絵でよく使われるキャンバスサイズの目安だ。

• 16×16 px：マップタイルや小さなアイコン。情報量は少なく、シルエットが読めるかどうかが設計の中心になる
• 32×32 px：表情や細部を表現できる標準的なキャラクタースプライト。個人制作での出発点として選ばれやすいサイズ
• 64×64 px以上：ボスキャラクターや詳細なUIパーツ。パーツ数が増えるほど色数の管理が重要になる

これらのサイズはゲーム開発コミュニティで広く使われている目安であり、絶対的な規格ではない。自分のゲームの画面解像度やUIのレイアウトを基準に決めるのが先決だ。ゲームではこの元サイズを整数倍に拡大して表示する。32×32 px のスプライトを2倍表示すれば 64×64 px、4倍なら 128×128 px になる。整数倍以外の拡大は輪郭を乱す——1.5倍や2.7倍など端数が出る倍率では、拡大後のピクセルサイズが揃わず乱れが生じる。表示サイズと拡大倍率を先に決めておくことで、AIへのプロンプトやキャンバスサイズの指定も具体的になる。

AI生成「ドット絵風」が持つ3つの問題

AI画像生成ツールに「ドット絵スタイル」「8ビット風」「32×32 ピクセル」のようなプロンプトを与えると、見た目にはそれらしい画像が出てくる。しかし生成された画像をゲーム用素材として使うには、いくつかの問題が残ることが多い。

グリッドが揃っていない

見た目はドット絵でも、拡大してピクセル単位で確認すると、隣接するピクセルに微妙に違う中間色が混じっていることがある。これは「ドット絵らしく見える」ように最適化された結果であり、厳密にグリッドを管理したものではない。アニメーションを付けようとすると、フレーム間でピクセルの位置がずれる原因にもなる。

色数が多すぎる

本物のドット絵では使用色数を意図的に制限する。これはパレット管理を通じて画面全体の統一感を出すための手法でもある。AI生成画像は視覚的に似ていても、実際には数百色以上使っていることがある。パレットを後から絞ろうとすると、全体の色調整が必要になる。

輪郭のにじみ（アンチエイリアス）

キャラクターの輪郭線に、背景色と前景色を混ぜたピクセルが並んでいる状態をアンチエイリアスという。写真や通常のイラストでは自然な見え方に貢献するが、ドット絵では輪郭を読みにくくし、背景の切り抜きも難しくなる。輪郭に中間色ピクセルが多いと、背景透過の処理で意図しない色が残りやすい。

輪郭の読みやすさを等倍で確認する

生成した画像をゲーム素材として使えるかどうかを判断するときの基本は、ゲームで表示する実際のサイズで見ることだ。縮小サムネイルでは問題が隠れる。次の手順で確認する。

1. 画像編集ソフトで生成画像を開き、表示倍率を100%（等倍）に設定する
2. キャラクターの輪郭線に沿って、1ピクセルの境界が明確かどうかを確認する
3. 次に実際のゲーム表示倍率（たとえば2倍・4倍）に拡大する。このときニアレストネイバー（最近傍補間）を選ぶ。双線形補間を使うとピクセルの境界がぼけて見えるため、ドット絵の確認には向かない
4. 実際のゲーム背景色と重ねて、キャラクターのシルエットが読めるかどうかを確認する

画像編集ソフトやOSのプレビューが自動で補間をかけることがある。確認するときは補間の種類を明示的に切り替えてから行う。

等倍で見たときに輪郭が1ピクセルで描かれておらず、複数の中間色のピクセルが並んでいる場合は、縮小しても問題は隠れるだけで解決しない。次の工程で輪郭を整える必要がある。

AI生成から使える素材への加工フロー

AIで生成した画像を出発点にしてゲーム用ドット絵を作る場合の一般的な加工の流れを示す。このアプローチはAIを下書き生成のツールとして使い、仕上げを手作業で行うものだ。完全自動化は難しく、輪郭の手直しが前提になる。

1. 生成サイズを大きめに出力する：ゲームで使いたい最終サイズの4倍以上で生成しておくと、縮小の際に細部を取捨選択しやすい
2. ニアレストネイバーで縮小する：目標解像度（例：32×32 px）までニアレストネイバー補間で縮小する。双線形補間での縮小はアンチエイリアスを混入させる
3. パレットを整理する：画像編集ソフトの「インデックスカラー」機能や専用のパレット削減ツールを使い、必要な色数に絞る。8〜32色程度に絞ることが多い
4. 輪郭を手で直す：中間色のピクセルを、隣接する色のいずれか一方に置き換える。この工程が最も時間のかかる部分で、自動化できる範囲には限りがある
5. PNG形式で書き出す：透明背景が必要なときはアルファチャンネル付きのPNGで保存する。JPEGは圧縮で輪郭を再び崩すため避ける

AI生成素材を公開利用する場合の権利関係は、使用するツールの利用規約によって異なる。商用・公開利用の前にツールのドキュメントを確認してほしい。法的な解釈はこの記事の範囲外であり、判断が難しい場合は専門家に相談することを勧める。

投稿前：実際の表示倍率で通して見る

素材をゲームに組み込んだら、公開前に次の点を実際のゲーム画面で確認する。

• ゲームエンジンやHTMLキャンバスの補間設定：UnityはFilter ModeをPoint（no filter）に設定する。HTMLでドット絵をCSSで表示するときは image-rendering: pixelated を指定する。この設定を省略するとブラウザが補間をかけて輪郭をぼかす
• 実際の背景色と重ねた状態でシルエットが読めるか
• アニメーションがある場合は全フレームを実際の表示サイズで並べて確認する

/* ブラウザがドット絵を拡大するときに補間をかけないようにする */
/* Chrome・Safari・Firefox・Edge はいずれも pixelated をサポートしている */
.sprite {
  image-rendering: pixelated;
}

MDN の image-rendering ページによると、pixelated はW3C標準の値であり、主要ブラウザ（Chrome・Safari・Firefox・Edge）で共通して使用できる。crisp-edges も標準値として定義されているが、拡大アルゴリズムの詳細仕様が pixelated と異なるため、ドット絵の整数倍拡大には pixelated を使うほうが意図どおりの結果になりやすい。過去に使われた -moz-crisp-edges というベンダープレフィックス版は現行MDNの仕様に記載がなく、現在のコードに追加する必要はない。

「縮小したらごまかせた」という状態のまま公開しても、画面倍率が変わる環境でほころびが出る。解像度と輪郭の確認を縮小後に後付けするのではなく、表示倍率を最初に決め、その倍率で読めるかどうかを判断基準にすることで、手戻りを減らせる。表示サイズで確認した作品は、そのままアソバースに投稿して実際の画面での見え方を確かめてほしい。