これは何？
スマホの写真、ペットの画像、イラストなど、手元の画像を選ぶとその場でドット絵になります。マス数（16〜64）と色の数（2〜15色）を動かすと結果がすぐに変わるので、ちょうどいい粗さを探しながら仕上げられます。背景が透明なPNGなら、透明な部分は透明のままドット絵になります。
変換したドット絵は、PNGで保存するだけでなく「ドット絵メーカーで手直し」を押せば、同じサイトのドット絵メーカーで1マスずつ直せます。目を描き足す、背景を消してアイコンにする——自動変換だけでは出せない仕上げまで、そのまま続けられます。
あそびかた
- 「画像を選ぶ」で写真を選ぶ（ドラッグ＆ドロップや貼り付けでも可）。
- マス数と色の数を動かして、ちょうどいい粗さを探す。
- 必要なら「あざやかに」「ざらざら（ディザ）」「全体を入れる」を切り替える。
- 「PNGで保存」で書き出すか、「ドット絵メーカーで手直し」で1マスずつ仕上げる。
なぜ作ったのか
ドット絵メーカーを公開してから、「写真をもとにドット絵を作りたい」という使い方が多いことが分かりました。変換ツール自体は他にもありますが、変換したら終わりで、気に入らないところを直す手段がないものがほとんどです。ドット絵は、最後に人の手で1マス直すだけで見違えます。だから、変換と手直しを1つの流れにしました。
もう一つこだわったのが、画像を送らないことです。写真には顔や部屋の中など、人に渡したくない情報が写りがちです。このツールは画像をサーバーにアップロードせず、すべてあなたの端末のブラウザの中で処理しています。
どうやって変換しているのか
まず画像を、選んだマス数に縮めます。ブラウザ任せに縮小すると細い線が間引かれて消えたり途切れたりするため、1マスに入る元の画素をすべて平均して色を決めています。透明な部分が半分以上のマスは透明として扱うので、切り抜き画像の輪郭もきれいに残ります。
次に、色を指定の数まで減らします。使っているのは「k平均法」という方法で、画像の中の色をいくつかのグループに分け、各グループの代表色をパレットにします。色の近さは、人の目が緑に敏感で青に鈍いことに合わせて重み付けしています。最初の代表色の選び方を固定しているので、同じ画像と設定なら何度やっても同じ結果になります。
「ざらざら（ディザ）」をオンにすると、表しきれない色の差を周りのマスに少しずつ配る「誤差拡散」を使い、少ない色数でもグラデーションを粒の濃淡で表します。
きれいに仕上げるコツ
人物やペットは32マス・8〜12色あたりが、顔のパーツが残りつつドット絵らしさも出るバランスです。アイコンにするなら24〜32マス、風景は48〜64マスにディザを足すと雰囲気が出ます。背景がごちゃごちゃした写真は、先に被写体が大きく写るように切り抜いておくと、変換後の形がはっきりします。
仕上げに「手直し」で目や輪郭を1〜2マス直すと、一気にそれらしくなります。色がくすんで見えるときは「あざやかに」をオンにしてください（写真は小さく縮めると色が混ざってくすみやすいため、彩度を少し上げています）。
よくある質問
画像はアップロードされますか？
されません。画像の読み込みから変換・保存まで、すべてお使いの端末のブラウザの中で行っています。ページを開いたあとなら、通信を切った状態でも変換できます。
変換したドット絵を手直しできますか？
できます。「ドット絵メーカーで手直し」を押すと変換結果がドット絵メーカーで開き、1マスずつ塗り直したり色を変えたりできます。64マスの大きな絵でもそのまま渡せます。
背景を透明にできますか？
背景が透明なPNG画像を使えば、透明な部分は透明のまま変換されます。写真の背景を消したいときは、変換したあとドット絵メーカーの消しゴムで消してください。保存は透過PNGです。
iPhoneの写真も使えますか？
使えます。写真アプリから選んだ画像は、多くの場合JPEGとして渡されるのでそのまま変換できます。読み込めない形式のときはメッセージが出るので、JPEGやPNGで保存し直してから選んでください。