DevTools Japan トップへ

画像ドット絵変換ツール

写真やイラストをドット絵に変換し、ドット単位で修正して書き出し(すべてブラウザ内で処理)

画像を読み込む

クリックして画像を選択、またはここにドラッグ&ドロップ
Ctrl+V(Command+V)で貼り付けもできます / PNG・JPEG・WebP・GIF・SVG

変換設定

8px
ドット
8〜256。縦は元画像の比率で自動計算
16色

ドット編集

表示倍率8倍
画像を読み込むと、ここにドット絵が表示されます
-

書き出し

透過はPNG・WebP・SVGのみ。JPEGは背景色で塗ります
出力サイズ: -
このツールは 100% クライアントサイドで動作します。読み込んだ画像はサーバーに送信されず、変換・編集・書き出しはすべてお使いのブラウザ内で処理されます。

画像ドット絵変換ツールの使い方

写真やイラストを、昔のゲームのようなドット絵(ピクセルアート)に変換できる無料ツールです。変換後はそのままドット単位で修正でき、拡大してもにじまない形式で書き出せます。

  1. 画像をクリックで選択するか、ドラッグ&ドロップ、または貼り付けで読み込みます。
  2. 「粗さ」または「横ドット数」でドットの大きさを決めます。どちらかを動かすともう一方も連動します。
  3. カラーモード(白黒・グレースケール・カラー・色指定)を選び、必要ならディザリングをオンにします。設定を変えると即座に再変換されます。
  4. ドット編集欄で、ペン・消しゴム・スポイト・塗りつぶしを使って気になるドットを修正します。
  5. 形式と拡大倍率を選んで、ダウンロードまたはクリップボードにコピーします。

変換設定を変更すると結果は作り直されますが、直前に編集していた状態は「元に戻す」で復元できます。

カラーモードの違い

モード使う色向いている用途
白黒黒と白の2色(しきい値で調整)シルエット、スタンプ、刺しゅうやビーズの図案
グレースケール2〜16段階の灰色モノクロ写真風、レトロな液晶風
カラー画像から自動抽出した2〜64色写真やイラストを自然な色でドット化
色指定自分で決めた色、またはプリセットファミコン風・ゲームボーイ風・PICO-8風の再現、ブランドカラーの統一

カラーモードではメディアンカット法で色空間を分割してから、k-means法で代表色を整えて減色パレットを作ります。色指定モードでは、各ドットを人の目の感じ方に近い重み付き距離で最も近いパレット色に置き換えます。「変換結果の色を取り込む」を使うと、カラーモードで作られたパレットを色指定モードに移して1色ずつ調整することもできます。

ドット編集の操作

道具・操作内容キー
ペン描画色でドットを塗る(ドラッグで連続描画)B
消しゴムドットを透明にするE
スポイトクリックしたドットの色を描画色にするI
塗りつぶし同じ色でつながった範囲をまとめて塗るG
元に戻す / やり直し直前の操作を取り消す / 取り消しを戻すCtrl+Z / Ctrl+Y

編集欄の下には、いま使われている色が並びます。色をクリックすると描画色になります。マウスだけでなく、スマートフォンやタブレットの指やペンでも描けます。

書き出し形式と拡大倍率

ドット絵は拡大するときに補間されるとぼやけてしまうため、本ツールはニアレストネイバー(最近傍)方式で1ドットをそのまま正方形に拡大します。PNGは劣化がなく透過も保てるため、ドット絵の保存に最も適しています。JPEGは透過できないため背景色で塗られ、圧縮による色ずれが出ることがあります。SVGは同じ色が横に続くドットを1つの長方形にまとめたベクター形式で、どれだけ拡大しても輪郭がくっきり保たれます。

よくある質問

どのくらいのドット数にするとドット絵らしくなりますか?
アイコンやキャラクターなら横32〜64ドット、風景や写真の雰囲気を残したい場合は横96〜160ドット程度が目安です。ドット数が少ないほど1ドットが大きくなり、昔のゲームのような粗い見た目になります。本ツールでは「粗さ」スライダーと「横ドット数」が連動しているので、プレビューを見ながら好みの粗さに調整できます。
白黒・グレースケール・カラー・色指定の違いは何ですか?
白黒はしきい値を境に黒と白の2色だけで表現します。グレースケールは指定した段階数の灰色で表現します。カラーは画像の色を分析して指定した色数(2〜64色)のパレットを自動で作ります。色指定は自分で決めた色だけを使うモードで、ファミコン風・ゲームボーイ風・PICO-8などのプリセットを読み込んだり、色を追加・削除したりできます。
ディザリングとは何ですか?
ディザリングは、少ない色数で中間色やグラデーションを表現するために、色の誤差を周囲のドットに分散させる手法です。本ツールではフロイド-スタインバーグ法を使っています。色数が少ないときに滑らかさが増しますが、細かい粒状の模様が出るため、すっきりしたドット絵にしたい場合はオフにしてください。
変換後に一部のドットだけ修正できますか?
はい。ドット編集欄でペン・消しゴム(透明)・スポイト・塗りつぶしを使って1ドット単位で修正できます。使用中の色をクリックして描画色を選べるほか、カラーピッカーで任意の色も使えます。Ctrl+Zで元に戻す、Ctrl+Yでやり直しができ、マウスだけでなくスマートフォンやタブレットのタッチ操作にも対応しています。
画像はサーバーに送信されますか?
いいえ。画像の読み込み・変換・編集・書き出しはすべてお使いのブラウザ内のJavaScriptで処理され、画像がサーバーへ送信・保存されることは一切ありません。個人的な写真や未公開のイラストでも安心して利用できます。

関連ツール

画像カラーパレット抽出画像モザイク画像形式変換