ドット絵エディタ ブラウザ版 · 無料のピクセルアート編集
ブラウザのタブですぐ開ける、ゲーム用スプライトのためのドット絵エディタです。Asepriteでおなじみの鉛筆・バケツ・図形・選択・レイヤーがそのまま使え、描いた絵はStudioのアニメーション・パッキング・エンジン書き出しと同じプロジェクトに入ります。インストール不要で、絵が端末の外に出ることはありません。
ドット絵のスプライトを描く前に、3つを決めておきます。ゲームの解像度に合わせたキャンバスサイズ（16pxのタイルグリッドを歩くキャラなら16×16〜32×32に収まる大きさ）、少ない色数のパレット、アンチエイリアスのない1pxの輪郭です。Nerulioのピクセル作業画面でピクセル › 新しいスプライト…を選ぶと、DawnBringer 32パレット入りの32×32キャンバス（1〜4096の任意サイズ）がRGBかインデックスで開き、ツールはAsepriteと同じキーで切り替わります。結果は.asepriteかPNGフレームで保存でき、ブラウザで動き、絵が端末の外に出ることはありません。
- .aseprite検証済み· Aseprite 1.3.18
- Palette files測定確認· read back
- Engine bundles検証済み· Godot 4.7.2 · Unity 6000.5
- Frame PNG · .nerulio通常ファイル
サイズ、カラーモード、きれいな輪郭：スプライトを決める3つの判断
ドット絵はゲームが実際に描画する大きさで描き、整数倍で拡大してピクセルを正方形のまま保ちます。出発点はゲームの内部解像度です。320×180で描くゲームなら6倍で1920×1080、8倍で2560×1440、12倍で3840×2160を埋め、640×360なら倍率は3・4・6です。16pxタイルなら320×180の画面に横20マス、縦11.25マスが見えるので、16×16や16×24の主人公はタイル1マス分の幅になります。サイズは作業量も決めます。一辺を2倍にするとアニメの1フレームごとに描くピクセルは4倍です（16×16 = 256px、32×32 = 1024px、64×64 = 4096px）。
RGB（RGBA）はピクセルごとに4つの値を持ち、パレットに依存しません。RGBスプライトのパレットは色見本の集まりで、見本を直してもピクセルは変わりません。インデックスカラーはピクセルごとに最大256色のパレットを指す番号を1つ持ち、そのうち1色が透明として描かれます（既定は0番で、Asepriteと同じ決まり）。1色を変えるとその番号を使う全フレームのピクセルが一緒に変わるので、パレット替えが簡単です。Nerulioはインデックスのセルを PNG-8（PLTEパレットとtRNSの透明度）で保持し、インデックスのスプライトではブラシが常に最も近いパレット色で塗ります。
きれいな線は規則的な階段から生まれます。フリーハンドの斜め線にはL字に重なった角ができますが、ピクセルパーフェクトのフィルターが描きながら取り除き、最初からオンです。直線は段が繰り返すと均一に見えます。直線ツールでShiftを押すと、0°、26.57°（横2・縦1）、45°、63.43°（横1・縦2）、90°にそろいます。
- 内部解像度
- ゲームが拡大する前に画面を描く大きさ。例：320×180。
- 整数倍拡大
- 2・3・4倍などで拡大し、元の1ピクセルが正確な正方形のブロックになる方法。
- インデックスカラー
- ピクセルごとにパレット番号（0〜255）を持ち、実際の色はパレット側にある方式。
- 透明インデックス
- インデックスのスプライトで透明として描かれるパレットの番号。変えなければ0番。
- ピクセルパーフェクトの線
- 余分な角のピクセルを取り除き、斜めでも太さ1ピクセルを保つ手描きの線。
例：320×180のゲームで16pxグリッド用の主人公を決める
ピクセル › 新しいスプライト…に入れるキャンバスサイズの根拠です。
ゲーム解像度 320 × 180 → 6倍で1920 × 1080、8倍で2560 × 1440
画面のタイル数 320 / 16 = 横20マス、180 / 16 = 縦11.25マス
主人公のキャンバス 16 × 24 px（タイル1マス幅、1.5マスの高さ）
1pxの縁取り込み キャンバス 18 × 26 px（キャンバスサイズで上下左右+1）
1フレームのピクセル 16 × 24 = 384 （32 × 32なら1024、作業量2.7倍）
RGBAフレーム（生） 384 px × 4バイト = 1536バイト
インデックス（生） 384 px × 1バイト = 384バイト + 33色のパレット（透明 + DB32）生のサイズは1ピクセルに何が入るかを示すだけで、ディスク上のPNGは圧縮されてもっと小さくなります。33色のパレットは新しいインデックスのスプライトの初期状態で、0番が透明、その後にDawnBringerの32色が続きます。
できること
- Asepriteと同じキーのツール11種：鉛筆（B）、消しゴム（E）、バケツ（G）、スポイト（I）、直線（L）、矩形・楕円（U、Shift+U）、矩形選択（M）、なげなわ（Q）、自動選択（W）、移動（V）。ブラシは四角・丸の1〜16pxで、[ ]で変更。
- ピクセルパーフェクトが最初からオン。フリーハンドの階段状の線にできるL字の角を、描いている間に取り除きます。Shift+クリックで直前の点から直線、直線ツールのShiftはドット絵向きの角度にそろえます。
- 陰影用のインク：アルファ合成、アルファロック、パレットで選んだランプに沿って1段ずつ変えるシェーディング（右ボタンで逆方向）、濃さを決めるディザパターン（Bayer 2・4・8、チェッカー、横縞、縦縞）。
- レイヤーごとに表示・ロック・不透明度と、Asepriteの19種の合成モード（Asepriteと同じ計算）。下のレイヤーと結合、複製、並べ替え。対称は縦・横・両方で、軸の位置は数値で入力。
- 1本の線、塗りつぶし、移動、反転、パレット編集、レイヤーの変更はどれも履歴にちょうど1手順として残ります。プロジェクトはブラウザに自動保存され.nerulioファイルでも保存でき、ピクセルメニューから.aseprite・PNGで書き出せます。
使い方
- PNG、連番フレーム、GIF、.asepriteをこのページにドロップするか、空のピクセル作業画面を開いて新規スプライト（サイズ、RGBかインデックス）を作ります。
- Bで鉛筆を選択。左ボタンで描画色、右ボタンで背景色を塗り、Xで2色を入れ替えます。
- Shift+Nで陰影用のレイヤーを追加し、レイヤーパネルで合成モードを設定。線画のレイヤーはロックして誤って塗らないようにします。
- レイヤーとパレットを残すならピクセルメニューから.asepriteで保存し、ゲームに入れるときはパック＆書き出しを開いてGodot・Unity・Phaser向けに書き出します。
アニメーションの前にスプライトを確認する
- 100 %と整数倍（200 %、300 %）で表示します。プレイヤーが見る等倍でもシルエットが読み取れるはずです。
- パレット検査を開いてチェックを押します。フレームごとの色数が予算以内で、パレット外の色がないはずです。
- 鉛筆で斜め線を引いて拡大します。L字の角のピクセルがなければピクセルパーフェクトがオンです。
- ピクセルメニューからフレームをPNGで書き出して開き直します。パレット色だけのインデックスのフレームは、パレット付きのPNG-8で保存されます。
ピクセル作業画面で使えるAsepriteのキー
全一覧はStudioで?を押すと表示されます。描くときによく使うものです。
| キー | ツール・コマンド | 補足 |
|---|---|---|
| B / E / G | 鉛筆 / 消しゴム / バケツ | バケツ：隣接範囲か全体、許容値、全レイヤー参照 |
| L / U / Shift+U | 直線 / 矩形 / 楕円 | Shiftで直線をドット絵の角度に、図形を正方形・円に |
| M / Q / W | 矩形選択 / なげなわ / 自動選択 | Shiftで追加、Altで除外、Shift+Altで共通部分 |
| Ctrl+C / X / V | コピー / 切り取り / 貼り付け | 貼り付けたピクセルは浮いた状態：矢印で1px移動、Enterで確定、Escで取り消し |
| Shift+N / Ctrl+J / Ctrl+E | 新規レイヤー / 複製 / 下と結合 | どちらかのレイヤーにセルがあるすべてのフレームを結合 |
| [ / ] | ブラシサイズ1〜16 | 四角か丸の先端 |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 斜め線が太い・ギザギザ | ピクセルパーフェクトがオフか、ブラシが1pxより大きい | ツールオプションのピクセルパーフェクトとサイズを確認 | ピクセルパーフェクトをオンにし、[キーでブラシを1にして引き直す |
| 選んだ色と少し違う色で塗られる | インデックスのスプライトなので最も近いパレット色にそろう | カラーパネルにインデックスでは最も近いパレット色を使うという注意が出る | 先にパレットパネルで描画色をパレットに追加してから塗る |
| 塗っても何も変わらない | レイヤーがロック・非表示、またはレイヤー未選択 | 状態メッセージがロック中・非表示のレイヤー名を示す。レイヤーパネルの鍵と目のアイコンを確認 | ロックを外す、表示する、または別のレイヤーを選ぶ |
| 縁取りや手足が端で切れる | 絵がキャンバスの端に接している | いちばん外側の行・列に不透明ピクセルがあるか確認 | ピクセル › キャンバスサイズ…（Ctrl+Alt+C）で拡大せずに上下左右へ余白を足す |
| ここではくっきりなのにエンジンではぼやける | エンジンがテクスチャをフィルタリングしている（リニアやミップマップ） | ゲーム画面を拡大して縁がやわらかければフィルタリング | エンジン側でニアレストに設定。Godotでぼやける場合、Unityの場合を参照 |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Aseprite（有料のデスクトップアプリ） | レイヤーグループ、タイルマップレイヤー、選択範囲の回転、カスタムブラシ、Luaスクリプトが必要なとき。ファイルは双方向にやり取りできます。比較ページを参照。 |
| 描き起こさず、拡大・生成された絵を整える | 絵がすでに違う倍率で存在するなら、先にドット絵の縮小か生成画像の整理を通し、その結果をここで直します。 |
| 最初からアニメーションとして描く | 動かすスプライトなら、すぐにフレームとタグを用意します。ドット絵アニメーションを参照。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 検証済み Aseprite 1.3.18実際のAsepriteコマンドラインで、インデックスモード・レイヤー2枚・不透明度160の乗算・編集不可のロックレイヤーのまま開き直し、フレームのピクセルも一致しました。 |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 測定確認 read back各形式を書き出して読み戻し、一致を確認。Asepriteが書いた.gpl・.pal・.hex・.actと実際のAdobe .ase（16色）も読み込めました。 |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 検証済み Godot 4.7.2 · Unity 6000.5描いたスプライトはパック＆書き出しでまとめます。そのエンジン用ファイルは実在のCC0アセットで各エンジンに読み込んで確認済み（49回中47回合格。失敗2回はPhaser 3プリセットで避けられるPhaser 3.90のバグ）。 |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 通常ファイルどのツールでも使える通常ファイルで、エンジンでの検証は主張しません。 |
検証の根拠
整理のベンチマーク（元の1倍画像が分かっているCC0ケース69件）：サイズを正確に当てたのは81 %（±1px：90 %）、背景を残すとピクセルの74.0 %が完全一致。最も良い競合ツールはサイズ30 %（perfectPixel）、完全一致ピクセル44.6 %（unfake.js）。Asepriteで作った×4ニアレスト拡大は100 %、×3.78バイリニアは99.7 %一致で戻り、どちらもサイズは自動で判定。1pxのアウトラインとドロップシャドウはAsepriteの結果とピクセル単位で一致（1846px・705px）。ここで書いた.asepriteはAseprite 1.3.18でインデックスモード・レイヤー・合成モード・ロックのまま開きます。
制限
- レイヤーグループ、タイルマップレイヤー、参照レイヤー、リンクセルはありません。選択範囲は反転と90°回転のみで、自由な回転・拡大縮小はできません。
- グレースケールのカラーモードはなく、スプライトはRGBかインデックスです。
- 対称軸は数値で入力し、キャンバス上でドラッグはできません。
- ピクセル作業画面にないもの（Asepriteにはある）：レイヤーグループ、リンクセル、タイルマップレイヤー、参照レイヤー、RotSpriteと選択範囲の自由回転・拡縮（反転と90°のみ）、グラデーション・スプレー・輪郭・テキストツール、カスタムブラシ（四角・丸の1〜16px）、タイル状の連続描画、LuaスクリプトとCLI。
- 対称軸は数値入力で、キャンバス上でドラッグできません。タッチでは右ボタンがないため、背景色は入れ替えボタンかXで使います。
- 整理：JPEGは近い色で戻りますが（背景を残すと84 %がΔE 0.02以内）、完全一致はまれ（12 %）。模擬的な生成画像でサイズが完全一致したのは20 %（±1px：80 %）、実際の生成画像7枚は1枚も自動では合わせません。パネルが示すピクセルサイズを入力してください。
- インデックス変換はAsepriteのRGB距離ではなくOklabで最も近い色を選びます。テスト用スプライトでは68 %のピクセルが別の（見た目により近い）色になりました。Lospec検索が唯一の通信で、事前に確認します。
バージョンと出典
Nerulio：ピクセル作業画面の純粋なモジュールはtests/studio-pixel.test.mjs（34テスト）と、実在のCC0スプライトで76項目を確かめるブラウザテストで検証しています。ここで書き出した.asepriteはAseprite 1.3.18でレイヤー・合成モード・インデックスのパレットを保ったまま開きました。512×512で100フレームのスプライトでも、ヘッドレスChromiumで線の確定は21〜25msでした。Asepriteのカラーモードと既定パレットの説明は公式ドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
Asepriteのショートカットはそのまま使えますか？
主なものは同じです。B・E・G・I・L・U・M・Q・W・Vで同じツールを選び、Xで色の入れ替え、Shift+Nで新規レイヤー、Ctrl+Eで下と結合、Shift+H・Shift+Vで反転、Enter・F3・F7で再生・オニオンスキン・プレビューウィンドウです。キー割り当てを変える画面はまだありません。
どのくらいの大きさで描画が重くなりますか？
512×512で100フレームのスプライトで試したところ、線を描くと変わった範囲だけを描き直し（1回約0.03ms）、線の確定は21〜25ms、フレーム切り替えは16msでした（ヘッドレスChromiumで測定）。
スマホでも使えますか？
狭い画面ではパネルが下から出るシート（カラー、パレット、レイヤー、整理、チェック、タイムライン、履歴）で開き、タップ1回で1ピクセル塗れます。タッチには右ボタンがないので、背景色は入れ替えボタンかXを使ってください。2本指のジェスチャーはテストしていません。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。