本文へスキップ
オモシロWeb
つくる

ドット絵メーカー

ぽちぽち置くだけ。ミニなドット絵。

仕掛けを準備しています…
← 他の仕掛けを見る

これは何?

方眼のマス目を指やマウスで塗るだけで、レトロなドット絵(ピクセルアート)が作れます。色パレットから選んで置く、ぬりつぶしで一気に埋める、消しゴムで透明に戻す——それだけのシンプルさなので、絵が苦手でも気軽にアイコンや小さなキャラが描けます。

キャンバスは8×8から64×64まで選べ、16色のパレットは好きな色に変更可能。完成した絵は透過PNGでダウンロードできるほか、絵そのものがURLに埋め込まれるので、URLをコピーして送れば相手の画面に同じドット絵が再現されます(サーバー保存なし・全部ブラウザ内で完結)。

あそびかた

  1. パレットで色を選び、マス目をなぞって塗る(ぬり/消しゴムも切替)。
  2. サイズ(8×8〜64×64マス)を選び、好きな色に変えて描き込む。
  3. 「PNGで保存」で書き出し、「URLで共有」で相手にも同じ絵を送る。

なぜドット絵メーカーなのか

ドット絵は、いちばん敷居の低い創作だと思います。8×8マスでも、置く場所さえ合っていれば猫にもキノコにも見える。線を引く技術がいらないぶん、誰でも「作れた」に届きます。

SNSのアイコンを作りたい、というくらいの実用性はほしかったので、背景を透明にしたまま保存できるようにしました。

どうやって動いているのか

絵の中身は、マスごとの色番号がただ並んだものです。これをそのままURLに入れると長すぎるので、同じ色が続く部分をまとめる圧縮(ランレングス圧縮)をかけ、URLで安全に使える文字だけに変換しています。だからURLをコピーするだけで、絵ごと相手に渡せます。

PNGの書き出しは、外部のライブラリを使わずに自前で組み立てています。画像形式の仕様に沿って、無圧縮のデータ列に検査用の符号を付けるところまで手で書いているので、追加の読み込みが一切ありません。透明な部分は透明のまま保存されます。

もっと楽しむコツ

まず8×8で形を掴んでから、16×16に上げると迷いません。16色のパレットは自由に変更できるので、先に色を決めてしまうと雰囲気が揃います。描けたらURLをコピーして、友達の画面で続きを描いてもらうこともできます。

よくある質問

描いた絵はどこに保存されますか?

サーバーには送信しません。「PNGで保存」でお使いの端末に画像としてダウンロードできます。また絵の内容はURL自体に埋め込まれるため、URLを保存・共有すれば同じ絵を再現できます。

スマホでも描けますか?透過はできますか?

指でなぞって描けます(タップ/ドラッグ対応)。何も塗っていないマスは透明として書き出されるので、背景が透けた透過PNGのアイコンも作れます。

背景を透明にしたまま保存できますか?

できます。塗っていないマスは透明のままPNGとして書き出されるため、SNSのアイコンやスタンプにそのまま使えます。

描きかけの絵を保存したり、共有したりできますか?

絵の内容はURLに埋め込まれます。ブックマークすれば続きから描け、URLを送れば相手の画面に同じ絵が開きます。

どのくらいの大きさのドット絵が作れますか?

8×8から64×64マスまで選べます。アイコンなら16×16、しっかり描き込むなら32×32〜64×64が目安です。サイズを変えても、すでに描いた絵は左上を基準に残ります。

大きいサイズだとURL共有できないことがありますか?

あります。絵の情報量が多いとURLに収まらず壊れてしまうため、その場合はURL共有を止めて画面でお知らせします(PNGでの保存は問題なくできます)。同じ色が続く絵ほど小さくなるので、64×64でも共有できることは多いです。