ピクセルアートメーカー
フラッドフィル、スポイト、元に戻す/やり直し、PNGエクスポート機能付きのブラウザベースのピクセルアートエディタ。
このツールについて
8×8、16×16、または32×32のグリッドでブラウザ内で直接ピクセルアートを作成します。32種類のプリセットカラーから選択するか任意のカスタムカラーを選択し、鉛筆で描いたり、消しゴムで消したり、バケツツールで領域を塗りつぶしたり、スポイトで既存の色をサンプリングしたりできます。最大20段階の元に戻す/やり直しで編集内容を保護できます。完成したら、ピクセルが鮮明に見えるよう10倍にスケールされたPNGとしてアートワークをエクスポートできます。
使い方
- 1 グリッドサイズ（8×8、16×16、または32×32）を選択し、ツールを選択してください：鉛筆、消しゴム、バケツフィル、またはスポイト。
- 2 32種類のプリセットスウォッチからカラーを選択するか、カスタムカラーピッカーを開いて任意の色相を選択してください。
- 3 グリッドをクリックまたはドラッグして描画し、元に戻す/やり直しボタンで前後に移動してください。
- 4 「PNGをエクスポート」をクリックして、くっきりしたピクセルパーフェクトな出力のために10倍にスケールされたアートワークをダウンロードしてください。
What pixel art is and why a grid changes everything
Pixel art is illustration done one square at a time on a deliberately small grid, where every pixel is a conscious decision rather than a smooth gradient. It is the look of classic video games, retro icons, and emoji-style sprites, and the constraint is the point: with only a 16×16 grid to work in, you learn to suggest a shape with a handful of well-placed blocks. This maker gives you a true pixel canvas at three sizes — 8×8, 16×16, or 32×32 — drawn on an HTML canvas with crisp, non-blurred cells and visible grid lines so you always know exactly which square you are editing.
The four tools and what each one does
| Tool | Action |
|---|---|
| Pencil | Paints individual cells in the active colour; drag to paint a streak |
| Eraser | Clears cells back to white (transparent on export) |
| Fill | Flood-fills a connected region of one colour in a single click |
| Pick (eyedropper) | Samples the colour of any cell to make it the active colour |
The fill tool uses a classic flood fill: starting from the cell you click, it spreads outward to every orthogonally connected cell that shares the original colour, stopping at any boundary of a different colour. That is how one click can recolour an entire enclosed area — a sky, a background, the inside of a shape — without touching anything outside it.
A worked example: a simple heart
Switch to the 16×16 grid and pick a red preset. With the pencil, place two small bumps near the top — a few cells each, separated by a one-cell gap — then taper the rows below inward until they meet at a single point at the bottom. That outline alone reads as a heart at small size. Now select the Fill tool and click inside the outline: the whole interior floods red in one action. Want a lighter centre? Pick a pink with the eyedropper-free custom colour input and dab a couple of highlight cells in the upper area. If a stroke goes wrong, Undo steps back through your last changes (up to 20 levels), and Redo brings them back.
Working with colour
You get a fixed palette of 32 presets covering the primaries, secondaries, and a useful range of dark and muted tones — enough to build a coherent sprite without decision paralysis. For anything specific, the Custom colour input opens your system colour picker so you can dial in an exact hex value, and the active-colour swatch always shows what you will paint next. A practical habit from real pixel artists: keep your palette small. Limiting yourself to a handful of colours is what gives pixel art its cohesive, deliberate look — sprawling palettes tend to read as noise at this resolution.
Exporting and the scaling trick
When you click Export PNG, the tool does something important: it does not save the large on-screen canvas with its grid lines. Instead it redraws your art at the true pixel resolution — one image pixel per grid cell — and scales it up by a clean factor (10×) with no smoothing, then downloads it as a PNG. So a 16×16 drawing exports as a sharp 160×160 image where every block stays a perfect square. This matters because if you ever scale a pixel image with normal interpolation it goes blurry; pixel art must always be scaled by whole-number factors with smoothing turned off, which is exactly what the export does. Empty (erased) cells export as white.
Practical tips
- Start at the size you will ship. An icon for a tiny UI badge belongs on the 8×8 or 16×16 grid; detail you add at 32×32 disappears when displayed small.
- Outline first, fill second. Lay down the silhouette with the pencil, then use Fill for the interior — it is far faster than colouring cell by cell.
- Use the eyedropper to stay consistent. Rather than hunting the palette, pick an existing cell's colour to guarantee a match.
- Changing grid size clears the canvas. Switching between 8, 16, and 32 starts fresh, so export before you resize.
- It works on touch. The canvas supports finger drawing on phones and tablets, so you can sketch a sprite on the move.
Common mistakes
- Over-detailing. The temptation at 32×32 is to render every feature; restraint and clear silhouettes read better than busy ones.
- Relying on anti-aliasing. There is none here by design — edges are hard. Suggest curves with stair-stepped cells rather than expecting smoothing.
- Forgetting undo has a limit. History holds your last 20 steps; export periodically if you are working on something you cannot afford to lose.
The entire editor runs in your browser. Nothing is uploaded — your artwork is drawn and exported locally, and the PNG is generated on your own device.