ピクセルアートメーカー (ドット絵エディタ)

このツールは、ブラウザだけで本格的なピクセルアート（ドット絵）を作成できる無料のオンラインエディタです。インストール不要で、PC・タブレット・スマートフォンから利用できます。

ピクセルアートは、1ピクセル単位で色を配置して絵を描く表現技法です。1970〜90 年代の 8bit / 16bit 世代の家庭用・携帯型ゲーム機のグラフィックで広く使われ、ハードウェアの色数・解像度制限の中で最大限の表現を追求する職人的な技術として発展しました。近年ではインディーゲームやNFTアート、SNSアイコンの制作手段として再び注目を集めています。

画像データとプロジェクトファイルはブラウザ内で処理され、NanTooの処理サーバーには送信されません。サイト共通の広告配信・アクセス解析については、プライバシーポリシーをご確認ください。

ツール	機能	用途
✏️ ペン	クリック/ドラッグで1ピクセルずつ描画	基本の描画操作
🧹 消しゴム	ピクセルを透明に戻す	描き間違いの修正
🪣 バケツ	同色の連続領域を一括塗りつぶし（BFS）	広い領域の塗り
💧 スポイト	キャンバス上の色を取得	既存の色を再利用
📏 直線	始点→終点をドラッグして直線を描画	輪郭線・斜め線
⬜ 四角形	ドラッグで矩形を描画（塗りつぶし切替可）	建物・UI要素

直線ツールは Bresenham のアルゴリズムを採用しており、整数座標上で途切れにくい直線のピクセル列を生成します。これは 1965 年に Jack Bresenham が提案した古典的手法で、現代のピクセルアートエディタでも標準的に使われています。

バケツツールは幅優先探索（BFS）による Flood Fill を実装しています。クリックした位置と同じ色のピクセルを上下左右に探索し、連続する領域を一括で塗りつぶします。

4段階のキャンバスサイズから目的に応じて選択できます:

サイズ	ピクセル数	おすすめ用途
8×8	64 px	ファビコン、ミニアイコン、絵文字
16×16	256 px	ゲームキャラクター、SNSアイコン
32×32	1,024 px	詳細なキャラ、アイテム、タイルマップ
64×64	4,096 px	ポートレート、風景、高精細ドット絵

初心者には 16×16 がおすすめです。制約が適度にあるため「どこに何色を置くか」を考えやすく、ピクセルアートの基礎を学ぶのに最適なサイズです。

1980 年代のレトロゲーム機を意識した配色を含む 4 種類のプリセットを搭載しています:

• パレットA (16色 汎用カラー): 汎用的な基本カラーセット。あらゆるジャンルのドット絵に対応
• パレットB (4階調モノクログリーン): 1989 年頃の携帯型ゲーム機の緑色液晶を意識した 4 階調 (#0f380f, #306230, #8bac0f, #9bbc0f)
• パレットC (16色 レトロカラー): 高彩度の色を中心に構成したレトロゲーム風カラー。輪郭やアクセントを付けたい作品向け
• パレットD (16色 パステル): 柔らかいトーンのパステルカラー。かわいいキャラクターやアイコン制作向け

プリセット以外の色も、カラーピッカーまたはHEXコード直接入力で自由に使用できます。制限されたパレットで描くことは、統一感のあるドット絵を作るための重要なテクニックです。

左右対称（ミラー）モードを有効にすると、キャンバスの中央に赤い点線ガイドが表示され、描画位置と左右対称の位置へ同時に反映されます。ペン、消しゴム、バケツ、直線、四角形で利用できます。

このモードは以下のような制作で特に効果的です:

• キャラクターの正面図: 人物やモンスターの左右対称な顔・体を効率よく描ける
• 乗り物・建物: 正面から見た自動車や城門などのシンメトリーなオブジェクト
• UI要素・アイコン: ハートや星、盾などの対称形状
• 模様・パターン: 幾何学模様やタイルテクスチャ

左右を個別に描く手間を減らせます。非対称な部分（髪型や武器など）は、ミラーモードをオフにしてから描き足してください。

完成した作品は PNG 形式でダウンロードできます。出力時に以下の設定が可能です:

• 拡大倍率 (1x〜16x): 1ピクセルを何ピクセルに拡大するかを指定。16×16 キャンバスを 8x で出力すると 128×128 px の画像になります。SNS投稿やWebサイトのアセットには 4x〜8x、印刷用途には 16x がおすすめです
• 背景色: カラーピッカーで任意の色を指定可能。デフォルトは白 (#ffffff)
• 背景透過: チェックを入れると背景なしの透過 PNG を出力。ゲームのスプライトや Web素材として使う場合に便利です

PNG出力では各セルを整数倍の四角形として描くため、拡大時に補間によるぼかしを加えません。JPEG は非可逆圧縮でドット絵のエッジにノイズが発生するため、ピクセルアートの保存には不向きです。

制作途中の作品は JSON ファイルとして保存・読込ができます。JSON にはキャンバスサイズとピクセルごとの色情報が含まれており、次回アクセス時に作業を再開できます。読み込めるのは128KB以下の本ツール用JSONです。読込時は現在の作品を置き換え、Undo/Redo履歴を消去します。

JSONフォーマットは以下の構造です:

• version: フォーマットバージョン (現在 1)
• size: キャンバスサイズ (8/16/32/64)
• grid: 2次元配列。各要素は HEX カラーコード (空文字は透明)

テキスト形式のためファイルサイズが小さく、Git 等のバージョン管理にも適しています。

• Ctrl + Z: 元に戻す (Undo) — 最大50手まで遡れます
• Ctrl + Y: やり直し (Redo)
• Canvasのキーボード操作: 矢印キーでセルを移動し、EnterまたはSpaceで実行。直線・四角形は始点と終点で2回実行
• スポイトツール: キャンバス上の色をクリックで取得し、自動でペンツールに戻ります
• グリッド表示: 大きなキャンバス (32×32以上) ではグリッドを非表示にすると全体の印象を確認しやすくなります

ピクセルアート初心者へのアドバイス:

1. 最初に輪郭線（アウトライン）を黒または暗い色で描く
2. 内側をベースカラーで塗りつぶす（バケツツールが便利）
3. 影をベースカラーより暗い色で入れる（光源は左上が定番）
4. ハイライトをベースカラーより明るい色で加える
5. 最後にアウトラインを周囲の色に馴染ませる（セルアウト技法）

ピクセルアートの歴史はコンピュータグラフィックスの黎明期にまで遡ります。1970年代のアーケードゲーム（スペースインベーダー、1978年）や、1980年代の家庭用ゲーム機の普及とともに、限られたハードウェア資源の中で視覚表現を追求する技法として確立されました。

1980 年代の代表的な 8bit 家庭用ゲーム機は同時表示 25 色・スプライト解像度 8×8 / 8×16 px、同時期の携帯型ゲーム機は 4 階調モノクロという厳しい制約がありましたが、その中で生まれた表現技法は現代でも芸術的価値を認められています。

2010年代以降、Undertale、Celeste、Stardew Valley などのインディーゲームがピクセルアートを採用して世界的ヒットとなり、懐かしさと新しさを兼ね備えた表現様式として再評価されています。ゲーム以外にも、SNSのプロフィール画像やWeb用アイコンなどへ用途が広がっています。

本ツールは以下の Web 標準技術で構築されています:

• HTML5 Canvas API: ピクセル単位の描画とチェッカーボード背景の表示
• Pointer Events API: マウス・タッチ・ペンを統一的に処理。PointerCapture により、キャンバス外にドラッグしても描画が途切れません
• Bresenham の直線アルゴリズム: 整数演算のみで最適なピクセルの並びを算出する古典的手法
• BFS Flood Fill: 幅優先探索によるバケツ塗り。再帰ではなくキューを使用し、大きなキャンバスでもスタックオーバーフローしません
• 不変データ構造: すべての描画操作はグリッドの新しいコピーを返す純粋関数として実装。Undo/Redo はグリッドのスナップショットをスタックで管理

描画、PNG生成、プロジェクト読込はクライアントサイドで完結し、画像・プロジェクトデータをNanTooの処理サーバーへ送信しません。