【無料】ドット絵ツール Dot × Dot｜ブラウザで描いて PNG・SVG で保存

アイコンやスタンプ、ゲームの素材に、ドット絵を描いてみたい。でも、描くためだけにソフトを入れたり、会員登録をしたりするのは手間です。

描き終わったあとにも、ひと手間あります。ドット絵は 1 マスが 1 ピクセルなので、そのまま保存すると小さな画像になります。ふつうに拡大すると、マスのふちがにじむこともあります。

「Dot × Dot」とは

Dot × Dot は、ブラウザでドット絵を描いて、PNG・JPEG・SVG で保存できる無料のツールです。

道具は、ペン・消しゴム・塗りつぶし・スポイト・直線・四角・丸の7つです。ペンの太さは 1・2・3 から選べて、「左右対称に描く」もあります。色は「基本の 16 色」「PICO-8 風 16 色」「ゲーム機風 4 色」「白黒 8 段」の4つの見本から選べるほか、好きな色も使えます。絵を何枚かに分けて重ねる「レイヤー」も使えます。

描いた絵は、使っているブラウザの中に自動で保存されます。同じブラウザでページを開き直すと、続きから描けます。このツールは、描いた絵をどこにも送りません。会員登録も要りません。

「Dot × Dot」の使い方

3つのステップで使えます。

「そのまま」を選ぶと、1 マスが 1 ピクセルの画像になります。512px と 1024px では、1 マスを同じ大きさの四角に広げて、長い辺を 512px か 1024px に近づけます。拡大するときに、マスのふちをぼかしません。たとえば 64 × 36 マスの絵を 1024px で保存すると、1024 × 576 の画像になります。JPEG では透明を選べず、背景は白か黒になります。

画像からドット絵にするとき

写真やイラストを、ドット絵のもとにすることもできます。上の「キャンバス」から「画像からドット絵にする」を選んで画像を選ぶと、いまの絵の大きさ（マスの数）のドット絵になります。読み込める画像は 10MB までです。

このとき、画像の縦と横の比率はそのままにならず、いまのマスの数に合わせて伸び縮みします。最初の 16 × 16 のまま横長の写真を入れると、横から押し縮めたような絵になります。

形を保ちたいときは、先に「絵の大きさ」で、横と縦のマスの数を画像と同じ比率にします。上の右の絵は、「横と縦をそろえる（切）」にして、1920 × 1080 の写真に合わせて 64 × 36 にしました。

画像を入れると、いま選んでいるレイヤーの絵は置きかわります。描いた絵を残したいときは、先に「レイヤーを追加」で新しいレイヤーを作ってから入れます。新しいレイヤーは上に重なるので、前の絵は写真の下にかくれます。レイヤーの欄の目の印で写真のレイヤーを隠すと、前の絵が見えます。置きかわったあとでも、「戻す」で元に戻せます。

まとめ

Dot × Dot でできることを整理します。

---

写真を正方形などに切り抜いてからドット絵にしたいときは、QuickCrop（画像切り抜き専用ツール）が使えます。

ほかにも、ブラウザで使える無料のツールをブラウザツールの一覧にまとめています。画像やWebサイトの制作のご相談は、お問い合わせフォームからお願いします。