ドット絵エディタ — ブラウザで作るピクセルアート作成ツール

使い方

1. キャンバスサイズを選択する（8×8〜64×64）。ゲームキャラは16×16、アイコンは32×32がおすすめです。
2. ツールを選択する。ペン・消しゴム・バケツ塗り・スポイトの4種類から選べます。
3. カラーパレットから色を選ぶか、カスタムカラーピッカーで好みの色を指定します。ゲームボーイ・ファミコン・NESの3種類のレトロパレットを収録しています。
4. キャンバスに描画する。クリック＆ドラッグで連続描画、スマートフォンはタッチで操作できます。
5. レイヤーを活用する。最大3レイヤーを追加し、背景・キャラ・エフェクトを分けて描けます。レイヤーの不透明度も調整可能です。
6. アニメーションフレームを追加して歩行・攻撃モーションなどを作成します。最大8フレームまで対応しています。
7. プレビューボタンでアニメーションを確認し、FPSを調整します。
8. 満足したらPNG保存ボタンで書き出し。1x〜8xのスケールを選んでダウンロードできます。

ショートカットキー

ドット絵エディタとは

ドット絵エディタ（ピクセルアートエディタ）とは、画像を1ピクセル単位で描画・編集するためのツールです。 レトロゲームのグラフィックやインディゲームのスプライト、アイコン、SNSアイコンなどの制作に広く使われています。 海外ではAsepriteが$19.99の有料ソフトとして定評がありますが、本ツールはブラウザ上で無料・ソフトウェアインストール不要で同等の基本機能を提供します。 レイヤー機能で描画を分けて管理でき、アニメーションフレーム機能でキャラクターの歩行・攻撃・エフェクトなどのモーションも作成可能です。 完成したドット絵はPNG形式で1x〜8xのスケールでダウンロードできるため、ゲームエンジン（Unity・Godot・RPGツクール）へそのまま取り込めます。

ドット絵の基本 — 少ないマス目で形を伝える

16×16のキャンバスは、たった256マスしかありません。デジタル写真の1枚が数百万画素であることを思えば、その1万分の1以下です。 ドット絵が普通のイラストと決定的に違うのは、この制約下では1マス置くか置かないかが絵の意味を変えてしまう点にあります。目を1マス右にずらせば表情が変わり、輪郭を1マス太らせればキャラクターの体格が変わります。上手く描くコツは細部を描き込むことではなく、削っても壊れない形を先に決めることです。

そのために有効なのがシルエット優先の描き方です。まず単色で塗りつぶした影絵だけを描き、それが何であるか分かるかを確認します。剣を持った戦士なら、色を塗る前の黒い塊の段階で「剣を持っている」と読み取れなければなりません。輪郭が読めない絵は、あとから色数を増やしても読めるようにはなりません。

次が色数を絞ることです。立体感は「暗・中・明」の3色あれば十分に出せます。中間色を面として広く置き、光源のある側に明色を細く入れ、反対側に暗色を落とす。この3色を1セットとして、肌・服・金属のようにパーツごとに用意するのが基本構成です。 本ツールのGBタブに並ぶ最初の4色（#0f380f・#306230・#8bac0f・#9bbc0f）は、この暗→明のグラデーションがそのまま並んでいるため、練習用のセットとして扱いやすくなっています。

最後に階段（ジャギー）を揃えること。斜めの線は必ず階段状になりますが、段の長さが「3マス、1マス、4マス、2マス」のようにバラバラだと線がガタついて見えます。「2マス、2マス、2マス」のように同じ長さで刻むと、同じ角度でもはるかに滑らかに見えます。曲線は段の長さを端に向けて徐々に変える（4→3→2→1）と自然になります。 本ツールのペンは1マスを完全な不透明色で塗るだけで、中間色を自動で挟むアンチエイリアス処理は行いません。滑らかさは階段の刻み方だけで作る、という前提で線を引いてください。

ケーススタディ1：16×16のキャラクターアイコンを作る

1. サイズは16×16のまま（初期値）で始めます。あとから変更すると全消去されるため、最初に決めきってください。
2. 下描き用のレイヤーを先に用意します。「+ レイヤー追加」を1回押します。ここで追加されたレイヤー2は、レイヤー1の背面に入ります（このツールは番号が小さいほど手前です）。レイヤー2を選んだ状態で、明るい色でシルエットのあたりを描きます。
3. レイヤー2の不透明度の数値を 30 に下げます。下描きが薄く透けた状態になります。
4. レイヤー1をクリックして選び、下描きをなぞる形で輪郭を清書します。輪郭は暗い色1色で描き、まだ内部は塗りません。
5. 輪郭が閉じたら、バケツ塗り（Fキー）で内部を中間色で塗ります。ここで塗りが外へ漏れる場合、輪郭に1マスの隙間が残っています。
6. 光源を左上と決め、明色を左上の縁に、暗色を右下の縁に置いていきます。ペン（Pキー）と、既に置いた色を拾うスポイト（Iキー）を往復させると速く進みます。
7. 完成したら、レイヤー2の目のアイコンを押して下描きを非表示にします。書き出しは表示中のレイヤーだけが対象なので、これで下描きは出力されません。
8. 出力スケールを 8x にして「PNG保存」。16×16 が128×128ピクセルのPNGとして保存されます。

ケーススタディ2：32×32のアイコンをSNS用に書き出す

SNSのプロフィール画像やアプリのアイコンには、16×16では情報が足りないことが多く、32×32が扱いやすいサイズです。1,024マスあるので、顔の造作や小物まで表現できます。 ただしサイズ変更は現在の内容をすべて破棄するため、必ず作業開始前に「サイズ」から32×32を選んでください。

書き出し時のポイントはスケールの選び方です。本ツールの拡大は整数倍でマス目をそのまま引き伸ばす方式で、拡大時にぼかしや補間が入りません。そのためドットの輪郭は何倍にしても鋭いままです。用途に合わせて次のように選びます。

ゲームエンジンに取り込む場合は、拡大せず 1x の原寸で書き出すのが正解です。拡大はエンジン側の設定（Unityなら Filter Mode を Point、Godot なら Filter を無効）で行うほうが、後から表示倍率を変えられて扱いやすくなります。描いていないマスは透明のまま保存されるため、背景を抜く作業は不要です。

ケーススタディ3：2フレームの歩行アニメーションを作る

レトロゲームの歩行モーションは、2フレームの交互切り替えだけで十分に成立します。手順は次のとおりです。

1. 1フレーム目に、片足を前に出した立ち姿を描きます。
2. フレーム欄の「+」を押して2枚目を追加します。追加されるフレームは空で、1枚目の複製ではありません。
3. 2フレーム目には、左右の足を入れ替えた姿を描きます。全身を描き直す必要がありますが、変えるのは足の数マスだけと決めておけば、1枚目を見ながら手早く再現できます。
4. 「▶ プレビュー」を押し、FPSスライダーを 6〜8 に合わせます。歩行はこのあたりが自然です。8FPSなら1枚あたり0.125秒で切り替わります。
5. 点滅するアイテムや炎などの速い動きは12〜16FPS、ゆっくり呼吸する待機モーションは2〜4FPSが目安です。スライダーを動かすとその場でプレビューが作り直されるので、実際に見比べて決めてください。

アニメーションを他の場所で使う場合は、フレームを1枚ずつ選択して個別にPNG保存し、ゲームエンジンやGIF作成ソフト側で並べる形になります。本ツールにGIFやスプライトシートとしてまとめて書き出す機能はありません。

このツールならではの使いこなし

• レイヤーは番号が小さいほど手前：レイヤー1が最前面で、「+ レイヤー追加」で増えるレイヤーは既存より後ろに入ります。前面に足すことはできないため、キャラクターを描くレイヤー1を先に確保し、背景や下描きを後から後ろに追加していく順序で作業してください。
• 書き出されるのは表示中のレイヤーだけ：非表示にしたレイヤーはPNGに含まれず、不透明度を下げたレイヤーはその薄さのまま焼き込まれます。下描きは非表示、薄く残したい影のレイヤーは不透明度そのまま、と使い分けられます。
• バケツ塗りは選択中のレイヤーしか見ていません：輪郭をレイヤー1に、塗りをレイヤー2に分けている状態でレイヤー2にバケツを使うと、レイヤー2には何も描かれていないため塗りがキャンバス全面に広がります。輪郭と塗りは同じレイヤーで行うのが安全です。
• バケツは上下左右の4方向にだけ広がります：斜めにしか接していないマスへは進めないため、45度の階段状の線でも塗りは外へ漏れません。逆に、線が1マスでも途切れているとそこから全面に流れ出します。漏れたらすぐ Ctrl+Z で戻し、隙間を探してください。
• スポイトは一番手前の色を拾い、自動でペンに戻ります：どのレイヤーを選んでいても、その位置にある最前面の不透明なマスの色を取得します。取得後はペンに切り替わるので、Iキーで拾って即座に描き続けられます。何も描かれていない透明な位置を拾おうとした場合は、色は変わりません。
• グリッド線は白の半透明：暗い色の上でははっきり見え、明るい色や白の上ではほとんど見えません。明るい絵を描いていてマス目を見失ったら、Gキーで一度消して全体のシルエットを確認する、という使い方が向いています。
• ドラッグ中の飛びは自動で補間されます：素早くドラッグしても点が飛び飛びにならないよう、前回の位置と現在の位置の間が線で埋められます。ただしキャンバスの外へポインタが出ると描画がそこで終わるため、戻ってきたら押し直しが必要です。

陥りやすい誤解・注意点

• 作品は保存されません：ブラウザを閉じる、再読み込みする、別ページへ移動する——いずれの場合も描画データは消えます。自動保存もありません。区切りのいいところで必ずPNG保存してください。書き出したPNGを読み込み直す機能もないため、PNGは記録用と割り切り、続きを描く可能性がある作品は一度に仕上げるのが現実的です。
• MYパレットもリロードで消えます：「+ 色を保存」で追加した色はページを開いている間だけ保持されます。配色を再現したい場合は、パレットの各色にマウスを乗せると表示されるカラーコードを控えておいてください。
• PNG保存は選択中の1フレームのみ：複数フレームがあっても、書き出されるのは今表示しているフレーム1枚です。ファイル名にフレーム番号は付かないため、連番で保存する際は自分でリネームしてください。
• レイヤーはフレームごとに独立しています：フレーム2の背景レイヤーはフレーム1と共有されません。「背景は1枚描けば全フレームに反映される」という動きにはならないので、動かない部分もフレームごとに描く必要があります。アニメーションは2〜3フレームに絞るのが現実的です。
• 「元に戻す」は20手まで、対象は描画データ：1回のドラッグが1手として記録され、それを超えると古い操作から破棄されます。またレイヤーやフレームの削除は、Undoしても一覧の構成までは元どおりになりません。キャンバスサイズの変更にいたっては、Undo履歴そのものが消去されるため取り消せません。削除とサイズ変更の前にはPNG保存を習慣にしてください。
• 64×64はスマートフォンでは細かすぎます：1マスの表示サイズは画面の幅をマス数で割って決まるため、スマートフォンの画面幅では64×64だと1マスが5ピクセル前後になり、狙ったマスを指で押すのが困難です。スマートフォンで描くなら16×16、大きくても32×32までに留めるのが実用的です。
• 「全クリア」は現在のレイヤーだけ：ゴミ箱ボタンが消すのは、今選んでいるフレームの、今選んでいるレイヤーの内容だけです。全部を消したい場合は各レイヤーで繰り返す必要があります。こちらはUndoで元に戻せます。

よくある質問

作成したドット絵はブラウザを閉じても保存されますか？

いいえ。現在の実装ではlocalStorageなどへの自動保存機能はなく、作成中のデータはブラウザのタブを閉じると失われます。作業を中断する場合は、こまめに「PNG保存」ボタンで書き出しておくことをおすすめします。

アニメーションをGIFとして保存できますか？

現在は静止画PNGの書き出しのみに対応しています。「PNG保存」ボタンで書き出せるのは選択中の1フレームのみで、アニメーション全体をGIF等の動画形式でまとめてダウンロードする機能はありません。複数フレームを使う場合は各フレームを個別にPNG保存してください。

レイヤー・フレームは何枚まで作成できますか？

レイヤーは最大3枚、アニメーションフレームは最大8枚まで作成できます。上限に達すると追加ボタンを押した際にアラートで通知されます。

キャンバスサイズを途中で変更するとどうなりますか？

キャンバスサイズ（8×8〜64×64）を変更すると、確認ダイアログの後に現在の描画内容・レイヤー・フレームがすべてリセットされます。サイズを変更する前に必要なデータはPNG保存しておいてください。

元に戻す（Undo）は何回までできますか？

Undo履歴は直近20手順まで保持されます。それ以前の操作は元に戻せませんのでご注意ください。

参照情報・免責事項

免責事項：本ツールはブラウザ内で完結しており、描画データがサーバーへ送信されることはありません。収録しているゲームボーイ・ファミコン・NES風のカラーパレットは各ハードウェアの色調を再現した参考カラーであり、公式のライセンスカラーではありません。作業内容は自動保存されないため、こまめなPNG書き出しをおすすめします。