AI が作る「ドット絵風」を本物のドット絵に変換する Web ツール「Pixel Refiner」を作りました
画像生成 AI は、ドット絵も描けるようになりました。
少なくとも、遠目にはそう見えます。
私はドット絵のイラストが好きで、SNS のアイコンやプロダクト紹介の 1 枚絵に使いたいと思っていました。
絵心はありませんが、いまは AI が描いてくれます。
ところが、生成された画像を拡大してみると話が変わります。
ドットの輪郭はぼやけ、配色はレトロどころかフルカラー、背景は不透明のまま。
見た目はドット絵でも、データとしては「ドット絵風イラスト」で、素材としてはそのまま使えません。
しかも、この問題をまとめて解決してくれる定番のツールが見当たりませんでした。
それなら作ってしまおうと、Web ツール「Pixel Refiner」を自作しました。
この記事では、Pixel Refiner に何ができて、どんな人に向いているのかを紹介します。
Pixel Refiner とは
AI 生成などの「ドット絵風」画像を、素材として使える本物のドット絵に変換する Web ツールです。
インストールもアカウント登録も不要で、ブラウザを開けばそのまま無料で使えます。
UI は日本語、英語、簡体字中国語に対応しています。
MIT ライセンスの OSS として GitHub で公開しています。
この例では、2375×1344 ピクセルの生成画像が、背景透過済みの 88×61 ピクセルのドット絵になっています。
やることはドラッグ＆ドロップだけです。
「ドット絵風」と「ドット絵」の違い
AI が出力する画像は、なぜそのまま使えないのでしょうか。
拡大してみると、次のような問題を抱えています。
- 見た目の「1 ドット」が、実際には数十ピクセルのぼやけた色の塊になっている
- ドットの大きさが場所によって揺れていて、ドットの並び（グリッド）が揃っていない
- 色数に制限がなく、レトロなドット絵らしい配色になっていない
- 背景が透過されていない
- 解像度が巨大で、アイコンやゲーム素材に置けるサイズではない
たとえば、AI に描いてもらった騎士のスプライトを拡大すると、こうなっています。
引きで見ればドット絵ですが、1 ドットの縁は数ピクセルかけて滲んでいます。
同じドットの中でも色が揺れていて、背景と輪郭の間には中間色が挟まっています。
画像生成モデルはドットの格子を正確には守らないので、こうなります。
素材として使いたいのは、1 ドット = 1 ピクセルで背景が透過された小さな PNG です。
「縮小すればいいのでは」と思うかもしれませんが、単純な縮小では絵が潰れます。
縮小で色を拾う位置とドットの位置が合わず、隣のドットの色が混ざってしまうからです。
かといって手作業で 1 ドットずつ打ち直すのは、AI に描いてもらった意味がなくなる苦行です。
既存ツールとの比較
作る前に、既製のツールも一通り探しました。
探していたのは、「ドット絵風」の画像を読み込んで、本物のドット絵に変換してくれるツールです。
すべてを試したわけではありませんが、調べたツールは大きく 3 つに分けられます（○ できる / × できない）。
| 分類 | ドット絵に変換 | 特徴 | 例 |
|---|---|---|---|
| ドット絵風に加工するツール | × | 写真やイラストをドット絵風の見た目にする | PixaTool、PixelOver |
| ドット絵エディタの拡張機能 | ○ | 有料のドット絵エディタ上で動く。変換だけが目的だと出費が大きい | Retro Diffusion、DeAI PixelKit |
| 単体の変換ツール | ○ | 無料で手軽に使えるが、変換品質に課題がある | PixelAid、pixeldetector |
有名どころの多くは、加工するタイプでした。
ドット絵風の画像を作るためのツールなので、それを本物のドット絵に直す用途には使えません。
探していたことができるのは、残りの 2 つです。
中でも無料で手軽に使える単体の変換ツールは、有望に見えました。
ところが、AI が生成したドット絵風のポーション瓶を既存ツールのひとつで変換してみると、結果はこうなります。
3 枚とも同じ幅で表示しています。
中央だけドットが細かいのは、既存ツールが本来の 1 ドットを縦横 2 分割で判定しているからです。
ぼやけた部分が偽のドットとして刻まれ、輪郭の太さが場所によって揺れています。
なお、2026 年 8 月時点でデフォルト設定のまま試した結果です。
設定を詰めれば変わる可能性はあります。
ドットの大きさを正確に検出するのは、既存ツールでは難しいようです。
逆に言えば、ここさえ合えば結果は見違えます。
そう考えて、ドットの大きさの検出を中心に据えた Pixel Refiner を自分で作ることにしました。
当初は、縮小して色を拾うだけだろうと、割と簡単にできるつもりでいました。
実際にはつまずきの連続で、いろいろなドット絵を変換できるように改良を重ねた結果、気づいたらかなりの多機能ツールになっていました。
主な機能
ドラッグ＆ドロップでの自動変換
画像を放り込むと、おまかせプリセットが入力を自動で分類し、適した処理を選びます。
ドット絵風の画像ならグリッドを復元し、写真のような画像ならドット絵化する、という具合です。
迷ったら何も設定せず「おまかせ」のままで大丈夫です。
「輪郭をくっきり」「透過アイコン」「イラストをドット絵に変換」といった用途別プリセットも用意しています。
自分の設定をプリセットとして保存して、使い回すこともできます。
ドットの大きさの自動検出
Pixel Refiner の中心となる機能です。
「見た目の 1 ドットが実際は何ピクセルか」を画像から推定し、正しい解像度にリサンプリングします。
判定に迷いがあるときは複数の候補を提示するので、リストから見比べて選び直せます。
仕組みが気になる方は、GitHub のソースを覗いてみてください。
背景の透過と余白のトリム
画像の外周から背景を推定して透過します。
グラデーションや軽いノイズが乗った背景にも対応しています。
うまくいかないときは、スポイトで背景色を直接指定することもできます。
ドーナツの穴のような「内側の背景」の透過や、浮きノイズの除去、余白の自動トリムもここでまとめて片付きます。
レトロゲーム機のパレットによる減色
ファミコン、ゲームボーイ、SFC 風、PC-9801、MSX1、PICO-8 など、実機由来のパレットを多数用意しています。
実用を抜きにしても、手持ちの画像が当時のゲーム画面のような配色に変わるのは楽しいものです。
Floyd-Steinberg や Bayer などのディザリングにも対応しています。
縁取りと拡大書き出し
スプライトに自動で縁取り（アウトライン）を付けられます。
書き出しは等倍のほか、×2 から ×32 までの拡大ダウンロードに対応しています。
ドット絵は等倍だと小さすぎるので、ゲームエンジンや素材サイトの要件に合わせて選べます。
複数画像の一括処理
複数のファイルをまとめてドラッグ＆ドロップして、ZIP で一括ダウンロードできます。
向いている人、向いていない人
次のような人に向いています。
- AI でゲーム素材やアイコンのドット絵を作りたい人
- 生成した画像が「ドット絵っぽいのに素材として使えない」ことにモヤモヤした人
- 手持ちの画像や写真をレトロゲーム風に変換して遊びたい人
逆に、1 ピクセル単位で手動編集したい場合には向いていません。
Pixel Refiner は自動変換に割り切ったツールで、ペイント機能を持たないためです。
画像はブラウザの外に出ません
処理は完全にローカルだけで完結します。
公開前のゲーム素材や仕事の画像でも、安心して使えます。
使い方
- Pixel Refiner を開く
- 画像をドラッグ＆ドロップする
- 結果を確認してダウンロードする
これだけです。
変換前後はスライダー付きの比較ビューで見比べられます。
AI 画像生成レシピ集
Pixel Refiner が直せるのは、ドットのぼやけやグリッドのずれ、多すぎる色など、変換の段階で扱える問題です。
一方で、被写体と背景が同じ色だったり、輪郭に影がにじんでいたりすると、背景をきれいに切り抜けません。
こうした問題は、画像を生成する段階で防ぐしかありません。
そこで、生成時のプロンプトのコツをAI 画像生成レシピ集としてまとめています。
そのままコピーして使えるプロンプトと、キャラクターのスプライトやアイテムアイコンなど題材別のレシピを載せています。
おわりに
生成 AI のおかげで、「絵が描けないから素材が作れない」はだいぶ過去の話になりました。
あと一歩の「素材として使える形にする」部分を、Pixel Refiner が引き受けます。
まずは手元の生成画像を 1 枚、放り込んでみてください。
要望や不具合がありましたら、Issues に気軽に教えてください。
Discussion