ドット絵グリッドメーカー | マス目に描いて透過PNGまで完結

8×8から最大64×64までのグリッドにマウスやタップで色を置き、ドット絵をそのまま透過PNGとして書き出すツール。12色の基本パレットに加え、カラーピッカーから好きな色も追加できる。チェッカー模様の背景で透明部分が一目で分かる。

💡 このツールについて

ドット絵を描きたいとき、本格的なお絵描きソフトを起動するのは少し大げさに感じることがある。アイコン用に16×16の小さな絵が欲しい、TRPGのコマやアバターを試作したい、ゲームのスプライトをラフに置いてみたい——そんな「マス目に色を置くだけ」の用途には、このグリッドメーカーが向く。

マス目はクリックで1セル、ドラッグで連続して塗れる。消しゴムに切り替えればそのセルを透明に戻せるので、はみ出しの修正も気軽。グリッド線のオン・オフを切り替えれば、描いている途中はマス目を頼りに、完成イメージの確認時は線なしで見られる。書き出したPNGは塗っていないマスが透明のまま残るため、背景色を後から自由に敷ける。

🧐 よくある質問

Q. 最大何マスまで描けますか? カスタムサイズで縦横それぞれ2〜64マスまで指定できる。アイコンなら16×16、少し描き込むなら32×32が扱いやすい。

Q. 出力したPNGの背景は白ですか? 塗っていないマスは透明として書き出される。画面上のチェッカー模様は透明であることを示す表示で、画像には含まれない。

Q. 1マスは何ピクセルで出力されますか? 書き出し時に1マスを複数ピクセルに拡大し、長辺がおおよそ512px前後になるよう自動調整する。小さなグリッドでも荒れずに見られるサイズになる。

Q. パレットにない色は使えますか? カラーピッカーで色を選び追加ボタンを押すと、パレットの末尾にその色が加わる。よく使う色を手元に並べておける。

Q. 描いた絵を保存し直せますか? データはブラウザ内だけで保持され、ページを離れると消える。続きを描く予定があれば、その都度PNGとして書き出しておくとよい。

📚 豆知識

ドット絵が「四角いマスの集合」として成立する背景には、初期の家庭用ゲーム機やパソコンが扱えた色数と解像度の制約がある。限られたマス目の中で形を伝えるため、輪郭を1ドットずらすだけで印象が変わる——この緊張感が、今もドット絵特有の魅力として愛されている。小さなグリッドで描くほど1マスの判断が効いてくるので、まずは16×16あたりで「少ない手数で何を表せるか」を試すと、ドット絵の勘所がつかみやすい。