ピクセルアートジェネレーター

ピクセルアートジェネレーターについて

このピクセルアートジェネレーターは完全にブラウザ内で動作します。グリッドサイズを選び、色を拾ってキャンバスに描き始めましょう。ペイント・消去・塗りつぶし（バケツ）・スポイトを切り替えられます。完成したら、作品を PNG 画像・SVG ファイル・CSS box-shadow コードとして書き出し、そのままウェブページに使えます。すべての描画は JavaScript と Canvas でローカルに処理され、アップロードは一切ありません。

ツールの説明

• ペイント —— グリッド上でクリックまたはドラッグして、選んだ色でピクセルを塗ります。
• 消去 —— クリックまたはドラッグでピクセルを削除し、透明にします。
• 塗りつぶし —— 領域をクリックすると、つながっている同色ピクセルを一括で塗り替えます。
• スポイト —— ピクセルをクリックすると、その色をカラーピッカーに取り込みます。

書き出し形式

• PNG —— 透過対応のラスター画像。デバイスに直接ダウンロードされます。
• SVG —— 長方形で構成されたベクター画像。サイズを変えても劣化しません。
• CSS box-shadow —— 複数の box-shadow を使った1つの CSS ルールでピクセルアートを再現。軽量なウェブグラフィックに最適。

使い方

1. グリッドサイズを選びます（8×8 〜 32×32）。
2. 色を選び、ペイントツールを選択します。
3. キャンバス上でクリック＆ドラッグして描画します。消去で修正、塗りつぶしで広範囲、スポイトで色を再利用。
4. 元に戻すで直前の操作を取り消すか、クリアでやり直せます。
5. 書き出しボタンを押して PNG をダウンロード、または SVG/CSS コードを出力ボックスに生成します。

よくある質問

作品はアップロードされますか？ いいえ。すべての描画と書き出しはローカルブラウザで行われ、作品がデバイスから外に出ることはありません。

最大グリッドサイズは？ 32×32 で、アイコンやゲームスプライトには十分です。これ以上は小画面で編集しづらくなります。

透過は対応していますか？ はい。消去されたピクセルは透明で、PNG・SVG 書き出しでも保持されます。

CSS box-shadow 書き出しの仕組みは？ 塗られた各ピクセルがグリッド位置でオフセットされた box-shadow エントリになるため、1つの HTML 要素に1つの CSS ルールを当てるだけで画像全体が描画されます。