画像ドット化ツール

横64マスなら4:3の写真は64 × 48マス: マスごとに平均色を出し、パレットの最も近い色で塗ります

画像のドット化は、写真を横と縦のマスに分け、1マスを1色で塗ってピクセルアートのように仕上げる作業です。上のツールは、横のマス数を決めると縦のマス数を元画像の比率に合わせて決め(640 × 480 px の写真を横64マスに分けると縦は48マス)、マスに入るピクセルの平均色を求めてから、選んだパレットで最も近い色に置き換えます。

絵を左右にドラッグすると、同じ位置で元画像とドット変換の結果を重ねて比べられます。下の「色ごとのマス数」では、色ごとに何マス塗ったかが分かります。保存するときは1マスを4倍・8倍・16倍のような整数倍に拡大して PNG にするため、境界がぼやけません。画像の処理はブラウザの中だけで行い、サーバーには送信しません。

写真をドットにする場面

• プロフィール画像やスタンプを作るとき: 横32〜64マスなら、顔の輪郭が見分けられる程度に残ります。小さなアイコンにするほど、マス数を減らし、色数を8色前後まで絞ると、くっきり見えます。
• ゲームのスプライトやタイルの下絵が欲しいとき: 背景を消した透過 PNG を入れて輪郭線をオンにすると、手で整える前の下書きになります。PICO-8 のような決まったパレットに合わせて試すこともできます。
• ビーズやクロスステッチの図案を作るとき: 1マスがビーズ1粒、または1目にあたります。格子をオンにすると10マスごとに濃い線が入って数えやすくなり、「色ごとのマス数」がそのまま色ごとに必要な個数です。
• レトロな雰囲気のサムネイルやポスターが欲しいとき: ゲームボーイの緑4段階や白黒2色にディザリングを加えると、昔の画面のように見えます。

ドットに変える手順

1. マスに分ける: 横のマス数を w とすると、縦のマス数は w × 元の縦 ÷ 元の横を四捨五入した値です。1マスに入るピクセルの範囲は、元の幅を w で割った境界で決めます。
2. マスの平均色: マス内のピクセルの赤・緑・青を、不透明度で重みづけして平均します。不透明度の平均が半分以上ならその平均色に、半分未満なら透明なマスにします。
3. パレットを決める: 「自動」は、マスの色を最も広がった色チャンネルの中央値で繰り返し二分する median cut(Heckbert, 1982)で色数ぶんのグループにまとめ、グループの平均を4回調整してパレットを作ります。PICO-8・CGA・ゲームボーイ・白黒は固定の色を使います。
4. 最も近い色を選ぶ: マスの色とパレットの色の差を、人の目に見える明るさや色の差に近づけた OKLab 色空間(Ottosson, 2020)での距離で測り、最も近い色で塗ります。ディザリングをオンにすると、この段階で色を混ぜます。
5. 拡大して保存する: 1マスを n × n ピクセルにそのまま拡大します(周囲の色を混ぜる補間は使いません)。64 × 48マスを8倍で保存すると、512 × 384 px の PNG になります。

透明なピクセルは色の平均に入らないため、2行目も紫になります。この紫 (128, 0, 128) を PICO-8 のパレットで塗ると、OKLab の距離で最も近い #7E2553(暗い紫)になります。

マス数の選び方: 4:3の写真の場合

横のマス数が決まると、縦のマス数と保存サイズも決まります。下の表は、640 × 480 px のように縦横比が4:3の写真の値です。

参考までに、初期のゲームボーイの画面は 160 × 144 ピクセル(Pan Docs)、PICO-8 の画面は 128 × 128 ピクセル(PICO-8 マニュアル)です。その画面いっぱいに収まる絵なら、横128〜160マスが目安になります。

パレット6種類

固定パレットは、画像にない色を使いません。サンプル画像を PICO-8 に変えると、16色のうち実際にマスへ塗られた色だけが「色ごとのマス数」に出ます。初期のゲームボーイは緑4段階を表示する画面ですが、公式の RGB 値が別にないため、エミュレーターごとに色が少しずつ異なります。NES(ファミコン)は、画面の色が TV や映像回路によって変わり、ひとつに決まった RGB パレットがないため(NESdev Wiki)、入れていません。

PICO-8 とゲームボーイのパレット値、ゲームボーイと PICO-8 の画面サイズ、ディザリングの重みは、上の出典の原文で 2026-10-12 に確認しました。これらは毎年変わる制度の値ではありません。

ディザリング: 点を混ぜて中間色を作る

色数が少ないと、空や肌のようになめらかに変わる部分が、いくつかの塊に分かれてしまいます。ディザリングは、近い2色を点の単位で混ぜ、離れて見るとその間の色に見えるようにする方法です。

マス数が少ないときにディザリングを使うと、点が粗く見えることがあります。横32マス以下では「なし」、64マス以上の写真では「誤差拡散」から比べてみると選びやすくなります。「元の色」は色数を減らさないため、ディザリングは必要ありません。

よくある間違い

• 小さく保存してから別のソフトで拡大する: 多くの画像ソフトは拡大するときに周囲の色を混ぜるため、境界がぼやけます。最初から8倍や16倍のような必要なサイズで保存します。
• PNG を JPG で保存し直す: JPG の圧縮は、マスの境界の周りにノイズを作り、透明なマスも塗りつぶします。ドット絵は PNG のままにします。
• 元画像よりマスを増やす: 横300 px の画像を512マスに分けても、マスが元のピクセルより多くなるだけで、細かくはなりません。この場合は、ツールがマス数の下に知らせます。
• 色数を減らしながらディザリングをオフにする: 4〜8色で顔や空を塗ると、縞が出ます。色を16色以上に増やすか、誤差拡散をオンにします。
• 複雑な背景をそのままにする: マス数が少ないと、背景と人物が混ざります。背景を消した透過 PNG を入れると、透明なマスはそのまま空け、輪郭線をオンにしたときは人物のまわりに線が入ります。
• SNS に載せても元のサイズのままだと思う: サービスによっては、アップロードした画像を縮小したり、再圧縮したりします。マスがつぶれたら、保存倍率を変えてもう一度アップロードしてみます。

限界と注意

• 計算はブラウザの中だけで行います。マスの平均を出すときは、元画像を長辺 1,024 px 以下に縮小してから読み込み、横512マスまでは結果にほとんど差が出ません。
• 横は8〜512マス、縦は1,024マスまでです。保存は、1辺 4,096 px、面積 4,096 × 4,096 px までしか選べません。iOS 端末のブラウザでは、キャンバスの上限が 4,096 × 4,096 だからです(MDN)。
• ブラウザが開ける形式だけを受け付けます。動く GIF は最初の場面だけを使い、HEIC のようにブラウザによっては開けない形式は、JPG・PNG に変換して入れる必要があります。ファイルは 40MB まで受け付けます。
• 自動パレットは、同じ画像・同じ設定なら常に同じ結果になりますが、人が選んだ色の組み合わせより優れているとは限りません。色が気に入らなければ、色数を変えて比べます。
• 輪郭線は、隣のマスより十分に暗いマスと、透明なマスの隣のマスを線の色に変える簡易的な方式なので、必要な線だけを選んで描くことはできません。
• ゲームボーイや CGA のような昔の機器の色だけを再現します。タイルやスプライトごとに使える色数のようなハードウェアの制約は反映しません。

出典

• 01Lexaloffle — PICO-8 User Manual画面 128 × 128、固定16色パレット(色番号 0〜15) — 2026-10-12 確認
• 02Lospec — PICO-8 PalettePICO-8 の16色の HEX 値(Lexaloffle Games)。ゲームボーイの4色は、同じサイトの Nintendo Gameboy (BGB) Palette の値を使用
• 03Pan Docs — Specifications初期のゲームボーイ(DMG)の画面 160 × 144、緑の4段階
• 04NESdev Wiki — PPU palettesコンポジット映像出力には、すべてのゲームに合う単一のパレットがない。パレット項目は64色のうち1色を指す
• 05Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut による減色
• 06Björn Ottosson — A perceptual color space for image processing2020-12-23. OKLab 変換(線形 sRGB → LMS → 立方根 → Lab)
• 07Wikipedia — Floyd–Steinberg ditheringFloyd & Steinberg (1976), An adaptive algorithm for spatial grey scale, Proceedings of the SID 17: 75–77. 誤差の重み 7·3·5·1/16. 同サイトの Ordered dithering(Bayer, 1973, IEEE ICC)
• 08Wikipedia — Color Graphics AdapterIBM CGA(1981)の RGBI 16色、6番は茶色 #AA5500
• 09MDN — <canvas>: Maximum canvas sizeiOS 端末は 4,096 × 4,096 が上限で、超えるとキャンバスを使えない

よくある質問

あわせて使うツール