最強ピクセルアート整形ツール

AI が生成した疑似ドット絵をピクセルパーフェクトに整えたり、ふつうの画像をドット絵に変換したりできます。減色・グリッド検出は OKLab 色空間にも対応。ブラウザ完結。

作者:@gamemangaanime/ 改善要望・バグ報告・感想は DM か返信でどうぞ

このツールは何?どう使う?(初めての方向け)

🌟 いちばんメインの使い方

  1. Google の画像生成ツール Flow にアクセスして、nano-banana pro(無料で使える)に「〇〇を 16bit ピクセルアートにして」と頼む
  2. できた画像を保存
  3. このツールにドラッグ&ドロップ → 自動でグリッド検出が走って設定が入る
  4. 「ピクセル化する」を押す → ピクセルパーフェクトなドット絵の完成!

できること

  • AI が生成した「疑似ドット絵」をピクセルパーフェクトに整える(メイン)
  • 拡大・圧縮で劣化したドット絵を本来のグリッドに戻す
  • 普通の写真・イラストを「ドット絵」に変換する

どういう理屈?

画像処理を「人間が知覚する色空間(OKLab)」で行うため、縮小・減色しても暗部が潰れたり彩度が狂ったりしにくい。AI が作った疑似ドット絵は、画像のエッジパターンからセル幅を自動検出して各セル内で一番多い色を出力することで、ピクセルパーフェクトに整列する。ディザや AA を使わないので格子が崩れない。

使い方(ケース別)

ケース 1: AI 生成の疑似ドット絵を整えたい(メイン)

  1. 画像をドラッグ&ドロップ(読み込み時に自動でグリッド検出)
  2. 「ピクセル化する」を押す
  3. 結果の細部が消えてしまったと感じたら「倍密度スナップ」を 2× / 4× に切替えて再度ピクセル化

ケース 2: 写真・イラストをドット絵にしたい

  1. 画像をドラッグ&ドロップ
  2. 「長辺」を 64〜128 px 程度に設定
  3. 「色数」を 16〜32 色程度に
  4. 「ピクセル化する」を押す。気に入らなければ「全ディザで比較」で 7 種類から選び直す

迷ったらこの組み合わせ

ケース 1: AI 生成の疑似ドット絵を整えたい(メイン)

  • 画像読み込み時に自動でグリッド検出される(ダウンサンプル=モード投票、ディザ=なし、出力サイズが自動設定される)
  • 倍密度スナップ: 既定の 1× で OK。結果の細部が消えてしまったと感じたら 2× / 4× を試す
  • 量子化・色数: 通常は触らなくて OK(画像色から自動でパレット生成)
  • 色数を絞りたいときのみ 量子化 を SCQ に、色数 を 8〜16 に下げる

ケース 2: 写真・イラストをドット絵にしたい

  • 量子化: Wu(高速)
  • ダウンサンプル: 面積加重平均(穏当)
  • ディザ: Floyd-Steinberg(迷ったら「全ディザで比較」で見比べる)
  • 色数: 16〜32 / 長辺: 32〜128

どこで何を触る?

  • 各項目の ? マークにマウスを乗せると、その選択肢の詳しい説明が出ます
  • 出力画像の上には表示倍率セレクタ、下にダウンロード 2 種
  • ダウンロードは常に原寸(表示倍率は画面プレビュー用のみ)

制作のきっかけ

Hugo-Dz/spritefusion-pixel-snapper (AI 疑似ドット絵のグリッドスナップに特化した OSS)のアプローチを参考にさせてもらいつつ、以下を独自に追加して自作しました。

  • OKLab 色空間での減色(知覚均一空間での高品質化)
  • 量子化手法の選択肢(Wu / k-means / SCQ)、ディザリング 7 種、ダウンサンプル 4 種
  • 倍密度スナップ(1× / 2× / 3× / 4× でセルを細分化)
  • 固定パレット対応(Pico-8 / Game Boy DMG / Endesga-32)
  • 全ディザ比較 UI・Indexed PNG 出力・パレットスウォッチ等の操作性

元画像

画像をドロップ、またはクリックで選択

JPG / PNG / GIF / WEBP / SVG

ピクセル化結果

まだ処理していません