IMAGE / PIXEL / HOW TO

PIXEL ART CONVERTER

写真やイラスト、AI生成画像を、粒の揃ったドット絵へ変換する。

画像のドット幅を自動で見つけ、ずれた線や細かな色ムラを整えます。1枚ずつ手直しできるほか、ZIPにまとめた連番画像を同じ設定で変換し、スプライトシートへ並べられます。

PIXEL ART CONVERTERの変換前後
元画像を切り抜き、GREEN LCDの4色を調整した例

画像を、単なるモザイクではなくドット絵へ変えたい時

画像を粗くするだけでは、色が多すぎたり輪郭がぼやけたりする。AI生成の疑似ドット絵は素材ごとに粒度や色数が揺れやすい。先にグリッドと色数を決めれば、複数素材を同じルールへ揃えられる。

色とグリッドを先に決めてから、絵を縮める

比率と位置を先に決め、疑似ドット絵はGRID SNAP AUTOで粒の周期を検出する。DOT CLEANで色を整理し、必要な時だけFLAT FILL、DITHER、EDGE CLEAN、背景透過を足す。最後はPIXEL EDITで欠けや色を1ドットずつ直して保存する。

最初の6ステップ

  1. LOAD IMAGEで1枚を選ぶか、BATCH ZIPへ画像一式のZIPを読み込みます。
  2. AI生成のドット絵風画像はPIXEL REFINE、元から整った画像はDOT CLEANを選びます。写真や固定配色のプリセットも使えます。
  3. FRAME / CROPで比率を選び、画像をドラッグして使う範囲を決めます。SOURCE、512px、1080pxから出力寸法を選べます。
  4. 疑似ドット絵はGRID SNAPをAUTOにします。検出後はAUTOのままPIXEL SIZEでグリッド幅を補正し、COLOR COUNTで色数を調整します。
  5. PIXEL EDITを開くと、1ドット描画、面塗り、スポイト、消去ができます。UndoとRedoで編集履歴を戻せます。
  6. ORIGINALで元画像と比べ、1枚ならSAVE PNG、ZIP一式ならEXPORT ZIP、連番画像ならSPRITE PNGで保存します。

基本操作

PIXEL REFINE

AI生成のドット絵風画像向けです。グリッド検出、32色への整理、近い色の統合、輪郭補正をまとめて適用し、にじみや余分な色を減らします。外部AIは使わず、端末内で処理します。

STYLE / QUICK PALETTES

DOT CLEANは補間で色を混ぜず、元からドット絵の画像やロゴの色と角を保ちながら主要色を拾います。PHOTO COLORは写真向けの滑らかな縮小を使います。GREEN LCD、MONO LCD、8-BIT COLOR、ARCADE 16、PRIMARY POSTER、DARK PRINT、NEON POSTERは固定配色と粒度をまとめて切り替えます。

FRAME / CROP / OUTPUT SIZE

SOURCE、1:1、16:9、9:16から比率を選び、画像上をドラッグして位置を動かします。CROP ZOOMで寄りを決め、SOURCE SIZE、512px、1080pxから出力寸法を選びます。512と1080は選択した比率の長辺です。

GRID SNAP / AUTO

画像内のドット間隔を検出し、境界のずれを追いながら一定のグリッドへ揃えます。検出値はPIXEL SIZEの初期値になり、AUTOのままスライダーでグリッド幅を調整できます。各セルでは一番多い色を拾い直してから、既存の減色とFLAT FILLへ渡します。

PIXEL SIZE / AUTO PALETTE

PIXEL SIZEを上げるほどグリッドは粗くなり、絵は記号的になります。DOT CLEANとPHOTO COLORでは、COLOR COUNTに合わせて画像の主要色を2色から512色まで自動抽出します。細い色帯で、実際に使う色を確認できます。

ACCENT KEEP

目、ハイライト、細いラインなど、面積が小さくても周囲との差が大きい色を優先してパレットへ残します。JPEGノイズまで拾う画像ではOFFへ戻します。固定パレットでは使用しません。

FLAT FILL

JPEG圧縮や縮小で生まれた近い色をまとめ、ベタ塗りの面に出る細かな色ムラを減らします。SOFTは近い階調だけ、STRONGはより広い範囲を統合します。意図した陰影まで消える時はSOFTかOFFへ戻します。

ORIGINAL / ZOOM / GRID

ORIGINALを押している間だけ加工前の切り抜きを表示します。FIT、100%、200%、400%で表示倍率を変え、拡大中は画像をドラッグして表示位置を動かせます。GRIDでは一つのドットの境界を確認できます。表示倍率は保存寸法へ影響しません。

PIXEL EDIT

変換後の実グリッドを1ドット単位で直します。PENCILは描画、FILLは同じ色でつながった面を一括塗り、PICKは色の取得、ERASEは透明化です。Undo/Redoにも対応します。

GREEN LCD COLORS

GREEN LCDの4色は個別に変更できます。暗色から明色までの順を保つと、液晶風の階調を読みやすく残せます。

TWO TONE / INK + PAPER

濃い線と影をINK、明るい部分をPAPERの2色へ分けます。INK AMOUNTを上げるほど濃い面が増えます。PAPERに分けた部分を透明にする時はCLEARへ切り替えます。

DITHER / CONTRAST / EDGE CLEAN

OFFは輪郭が明快です。BAYERは規則的なゲーム機風の粒、SOFTとHARDは左右交互に誤差を逃がす自然な階調です。CONTRASTは色味を崩しにくい方法で明暗差を広げ、EDGE CLEANは縮小後の輪郭を整えます。

OUTLINE / 1 PIXEL

DARKESTは使用中のパレットで最も暗い色、BLACKは純黒を使い、明暗の境界を1ドット幅で縁取ります。ロゴ、キャラクター、ステッカー風の絵で形を強く出したい時に使います。

CUSTOM PALETTE

6つの色を自由に選べます。CUSTOM PALETTEへ切り替えると、読み込んだ画像の色をこの6色の近いものへ寄せます。ロゴ、配信画面、フライヤーの配色を揃えたい時に使えます。

TRANSPARENT BG

全スタイルで背景色を指定して透明にできます。PICK FROM EDGEは画像の縁で最も多い色を候補にし、COLOR RANGEで消す色の幅を調整します。

SAVE PNG / PALETTE EXPORT

現在のグリッドをPNGで保存します。使用色だけを並べたPNGと、CSS変数の一覧も保存できます。元画像は書き換えず、処理はブラウザ内で完結します。

BATCH ZIP

PNG、JPEG、WebP、GIF、BMPを入れたZIPを読み込むと、先頭画像がプレビューへ出ます。そこで決めた設定を最大250枚へ適用し、PNG一式と設定JSONを書き出します。GIFは先頭フレームを変換します。

SPRITE SHEET

ZIP内の連番画像を変換し、透明背景の1枚へ左上から順に並べます。列数は自動、1、2、4、8列から選べます。ブラウザ負荷を抑えるため先頭64フレームまでです。

作り方の例

GREEN LCD写真

GREEN LCDはOUTLINE DARKESTが最初から入ります。4色を変える時は、左から暗色、影、中間色、明色の順に置きます。

原色ポスター

PRIMARY POSTER、PIXEL SIZE 9、DITHER HARD。文字がある画像はPIXEL SIZEを上げすぎず、黄と白が潰れないところで止めます。

自分の色で作る

CUSTOM PALETTEを選び、ブランドやイベントで使う色を6色へ入れます。COLOR COUNTは6か8から始めると、配色の役割を見比べやすくなります。

2色刷りポスター

TWO TONEを選び、INKとPAPERの色を決めます。線が多すぎる時はINK AMOUNTを下げます。PAPERに分けた部分を透明にする時だけCLEARへ切り替えます。

AI生成ゲーム素材を揃える

疑似ドット絵を同じZIPへまとめ、PIXEL REFINEで先頭画像を調整します。PNG一式ならEXPORT ZIP、アニメーション用の連番ならSPRITE PNGで1枚へ並べます。

参考にした考え方

格子を先に検出し、その後に色を量子化する処理順は、Hugo Duprez氏が公開するSprite Fusion Pixel Snapperを参考にしています。小面積のアクセント色を残す操作思想は、Raky 画像減色ツールも参考にしました。UIと変換処理はBARZINE LAB向けに独自実装しています。

1枚またはZIP一式を、使う寸法で持ち出す

SAVE PNGは現在の1枚、EXPORT ZIPは最大250枚のPNG一式、SPRITE PNGは先頭64フレームまでを並べた1枚を保存します。画像は端末のブラウザ内で変換され、サーバーへ送信されません。

ここではやらないこと

  • 読み込む画像の利用に必要な権利と許諾は、使う側で確認する。
  • ZIPは150MB、対応画像は250枚まで。大きな画像ではブラウザ処理に時間がかかる場合がある。

よくある質問

無料で使える?
PIXEL ART CONVERTERは無料で使えるブラウザツールです。
インストールは必要?
不要です。対応ブラウザでページを開けば使えます。
保存や書き出しはできる?
SAVE PNGは現在の1枚、EXPORT ZIPは最大250枚のPNG一式、SPRITE PNGは先頭64フレームまでを並べた1枚を保存します。画像は端末のブラウザ内で変換され、サーバーへ送信されません。
最初につまずいた時は?
AUTOで絵が細かすぎる時は、そのままPIXEL SIZEを上げます。元画像の形を優先する時はMANUALへ戻します。

うまく動かない時

  • AUTOで絵が細かすぎる時は、そのままPIXEL SIZEを上げます。元画像の形を優先する時はMANUALへ戻します。
  • 元からドット絵の画像で色が変わる時はDOT CLEANを使い、COLOR COUNTを上げます。写真の階調を細かく残す時はPHOTO COLORを使います。
  • AUTOで細部が細かくなりすぎる時はPIXEL SIZEを上げ、グリッドを粗くします。
  • ベタ塗りの面に近い色が散る時はFLAT FILLをSOFT、まだ残る時はSTRONGへ切り替えます。
  • 輪郭が強すぎる時はEDGE CLEANを下げます。
  • OUTLINEで細部が黒くなりすぎる時はDARKESTへ変えるか、OFFへ戻します。
  • 背景が消えすぎる時はTRANSPARENT BGのCOLOR RANGEを下げます。
  • ZIPが重い時は150MB以下、画像250枚以下に分けます。1枚が極端に大きい画像は先に縮小します。
  • 大きな画像で処理が重い場合は、元画像を小さくしてから読み込みます。

次に使うツール

PIXEL ART CONVERTERで切り抜きから保存まで仕上げる

画像を読み込み、比率と位置を決めます。色と輪郭を整えたら、1枚をPNGで保存するか、同じ設定をZIP内の最大250枚へ適用できます。

ツールを開く →