👾

ドット絵 · ピクセルアート変換

写真を昔のゲームのようなドット絵に。色数・パレット・ディザリングを選んで、ピクセルがくっきりしたPNGで保存。アップロードなし

プロフィール写真を8ビットゲームのキャラクターのように — 無料の写真ドット絵変換

モザイクと何が違うのか

モザイクはマス目ごとに平均色を出すだけで、色は写真のまま(数百万色)なので、ただぼやけた写真になります。ドット絵変換はそこに色を数種類のパレットに減らす減色(量子化)とディザリング(足りない色を点のパターンで混ぜて表現)を加えて、本物のレトロゲームのグラフィックのように見せます。ゲームボーイ4色・PICO-8 16色のような実際のゲーム機のパレットを選ぶと雰囲気がぐっと出ます。

使い方

  1. 最初の画面で写真を選択を押すか、ファイルを点線の枠にドラッグします。クリップボードに画像があればCtrl+V(MacはCmd+V)で貼り付けてもそのまま読み込まれます。
  2. 写真を入れると、初期設定(横96ピクセル・自動16色・ディザリングオン)で変換した結果がすぐに表示されます。透明な部分が分かるように市松模様の背景の上に描かれます。
  3. 左のパネルの横のピクセル数スライダー(24〜256、8刻み)を動かすと、離すたびに描き直されます。縦は元の比率に合わせて自動で決まります。
  4. 6種類のパレットから1つを選び、ディザリングのオン・オフで質感を決めます。
  5. プレビューの下の案内行に「96×72ドット · 16色 · 保存 1536×1152px (×16)」のように、ドット数・実際に使われた色数・保存サイズが表示されます。
  6. PNG保存を押すと、元のファイル名の後ろに「_ドット」が付いたPNGがダウンロードされます。ファイル共有に対応した端末(主にスマートフォン)では共有ボタンも表示され、別の写真で編集画面のまま差し替えられます。

オプションの選び方

  • 横のピクセル数 — 32〜64ならアイコン・キャラクター風、96〜128なら写真の輪郭が残るドットイラスト、200以上ならさりげないドットフィルター。
  • 自動N色 — 写真で最もよく使われている色を抽出して(メディアンカット)パレットを作ります。人物は16色、風景は32色が無難。
  • ディザリング — オンにするとグラデーションが点模様で自然に、オフにすると色の境界がはっきりしたフラットなスタイルに。ゲームボーイのパレットはオンのほうがきれいです。

6種類のパレット

自動8・16・32色写真ごとに専用のパレットを作ります。メディアンカット方式で実際に写真にある色だけを使うため、元の雰囲気が最もよく残ります。
ゲームボーイ4色初代ゲームボーイの画面の緑4階調 — #0F380F #306230 #8BAC0F #9BBC0F。色が4つしかないので、ディザリングをオンにしないと顔の陰影が消えます。
PICO-8 16色インディーゲーム制作ツールPICO-8の固定16色。黒・濃紺・濃い紫・濃い緑・茶・濃いグレー・薄いグレー・白と、赤・オレンジ・黄・緑・青・薄紫・ピンク・肌色。原色がはっきりしていて、キャラクターにも風景にも合います。
モノクロ4階調黒・暗いグレー・明るいグレー・白(0・85・170・255)。白黒ドットやスタンプの図案に。

変換の流れ

  1. 縮小 — 横のピクセル数に合わせて元画像を比率のまま小さく描きます。複数のピクセルが1マスにまとまり、各ドットの下地の色が決まります。
  2. パレット決定 — プリセットならその色表を、自動ならメディアンカットで作ります。すべてのドットを1つの箱に入れ、R・G・Bのうち値の幅が最も広いチャンネルを基準に中央で半分に分ける作業を目的の色数になるまで繰り返し、箱ごとの平均色をパレットにします。
  3. 減色 — ドット1つ1つを、パレットの中でRGB距離が最も近い色に置き換えます。
  4. ディザリング — オンのときはフロイド・スタインバーグ法で、置き換えで生じた誤差を右に7/16・左下に3/16・下に5/16・右下に1/16ずつ隣のドットへ渡します。4色でもグラデーションが点模様で表現できるのはこのためです。
  5. 拡大 — 完成した小さなドット絵を、長辺が1600pxを超えない最大の整数倍で、補間なしに拡大します。完全に透明なピクセルは最初から飛ばすので透明のまま残ります。

保存画質

結果は小さなドット画像を整数倍でそのまま拡大(補間なし)してPNGで保存するので、ピクセルの角がぼやけません。プロフィール・サムネイル・グッズのデザインにそのまま使え、処理はすべてブラウザで完結するため写真はどこにも送られません。先に背景を消したいときは背景透過で透過PNGを作ってから読み込んでください — 透明部分はそのまま保たれます。

よくある質問

16色を選んだのに色数が少なく表示される

背景が単色だったり色数が少ない写真では、メディアンカットで分けられる箱がなくなり、指定より少ない色で終わることがあります。案内行に表示される色数が実際に使われた数です。

保存サイズはどう決まるのか

ドット数によって倍率が変わります。横96ドットの横長写真なら×16で1536px、256ドットなら×6で1536px、24ドットなら×66で1584pxになります。さらに大きくしたいときは、画像編集ソフトで「ニアレストネイバー」補間を選んで拡大するとドットがぼやけません。

iPhoneで撮った写真が横向きになる

写真に記録された回転情報(EXIF)を読んで見た通りの向きで変換するので、通常はそのまま出ます。HEICファイルはブラウザが開けずにエラーになることがあるので、HEIC→JPG変換で変換してから読み込んでください。

写真ではなくイラストでも使えるか

使えます。もともと色が単純なイラストは、ディザリングをオフにして自動8色かPICO-8を選ぶと、本物のスプライトのようにすっきり仕上がります。背景が透明なPNGは透明部分がそのまま保たれます。

あわせて使えるアプリ