グリッドにドット絵を描き、フレームをアニメ化して PNG・GIF・コードで書き出せます。
最終更新
Coddyはブラウザ上で実際にコードを書きながら学ぶサービスです。インタラクティブなレッスン、即時フィードバック、行き詰まったときのAIサポート付き。
ドット絵メーカーは、固定グリッドを土台にした描画ツールです。自由な筆致ではなく、1マスずつピクセルを置いていきます。この制約こそがドット絵(ピクセルアート)の魅力: ゲームのスプライト、レトロなアイコン、アバター、8ビット風イラストは、すべてのピクセルを意図して選ぶことで生まれます。
このエディタには、スプライトエディタの定番ツール一式が揃っています。8x8〜64x64 のグリッドで使える鉛筆・消しゴム・塗りつぶし・スポイト、そしてライブプレビュー付きのコマ送りアニメーション。結果は任意サイズのくっきりした PNG、アニメーション GIF、ゲームエンジンで使えるスプライトシートとして書き出せます。
そして Coddy なので、描いた絵はそのままコードにもなります。ワンクリックでグリッドが Python の2次元配列、JavaScript の canvas スニペット、CSS の box-shadow アート、SVG、表計算で開ける CSV に変換されます。画像が色の配列にすぎないことを体感できる楽しい方法です。
まずは小さく 16x16 か 32x32 から。小さなグリッドはシンプルで読み取りやすい形を強制します。クラシックなゲームスプライトの多くは 16x16 か 32x32 です。サイズは後から変えても絵は失われません。
輪郭は鉛筆、広い面は塗りつぶしで。まず1色で全体の形を描き、それから細部を足します。右クリック(または消しゴム)でピクセルを消せます。
素材ごとに2〜3トーン: ベース・ハイライト・シャドウ。内蔵パレットはこの色の階段を探しやすい順に並んでいて、スポイトはキャンバス上の色を拾えます。
フレームを複製して数ピクセル動かし、再生を押すだけ。まばたきや炎の揺らぎなら2〜3フレームで十分です。
最大32倍スケールの PNG、アニメーション GIF、全フレームを並べたスプライトシートをダウンロード。あるいはコードパネルを開いて、Python・JavaScript・CSS・SVG・CSV としてコピーしましょう。
よく使うキャンバスサイズと書き出し形式、その使いどころ。
| 選択肢 | 向いている用途 | メモ |
|---|---|---|
| 16x16 グリッド | アイコン、ファビコン、小さなスプライト | 定番のスプライトサイズ: 1ピクセルが勝負 |
| 32x32 グリッド | ゲームキャラ、アバター | ディテールと手間のちょうどいいバランス |
| 64x64 グリッド | 細かいシーン、ポートレート | 先にシルエットを設計: 4,096ピクセルは埋めるのに時間がかかる |
| PNG 書き出し | アバター、スタンプ、アセット | 16倍以上に拡大してピクセルをくっきり保つ |
| GIF 書き出し | チャットやウェブのアニメ | FPS 設定を使用。透過対応 |
| スプライトシート | ゲームエンジン | 全フレームを1枚の PNG に横並び |
| コード書き出し | 学習、ジェネラティブアート | Python・JavaScript・CSS・SVG・CSV |
PIXELS = [ [None, "#e43b44", "#e43b44", None], ["#e43b44", "#a22633", "#a22633", "#e43b44"], [None, "#e43b44", "#a22633", None], [None, None, "#e43b44", None],]
for row in PIXELS: print("".join("█" if c else " " for c in row))コード書き出しは、各ピクセルを hex カラーとして入れ子リストに書き出し、PNG に戻す Pillow スニペットも付けます。このミニ版はターミナルに形を印字します。画像がただの2次元配列である証拠です。
.pixel-art { --px: 12px; width: var(--px); height: var(--px); box-shadow: calc(1 * var(--px)) 0 0 0 #e43b44, calc(2 * var(--px)) 0 0 0 #e43b44, calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}CSS 書き出しは各ピクセルを単一 div の box-shadow オフセットに変換します。フロントエンドの古典的トリック。どのページにも貼れて、--px を変えれば作品全体をリサイズできます。
,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,
CSV 書き出しはセルごとに hex コードを1つ入れます。Google スプレッドシートや Excel で開き、列を正方形まで縮めて、値でセルを塗る条件付き書式を1つ設定すれば、表計算ドット絵の完成です。
小さなグリッドに1ピクセルずつ置いて作るデジタルアートで、どのマスも意図的に配置されます。クラシックゲームのビジュアルスタイルであり、今もインディーゲーム、アバター、アイコン、プロフィール画像など至るところにあります。
16x16 グリッドと3〜4色から。ハート、きのこ、剣など簡単なもののシルエットを描き、ハイライトと影を1トーンずつ足しましょう。内蔵ステンシルが塗り替え・編集できる出発点になります。簡単なドット絵は、ディテールではなくきれいな形が命です。
16x16 と 32x32 が定番のスプライトサイズで、始めるのに最適。32x32 ならほとんどのキャラやアバターに足ります。64x64 は本当にディテールが必要なときだけ。書き出す際は16倍・32倍に拡大するとピクセルがくっきり保たれます。
「複製」で2枚目のフレームを追加し、数ピクセル変えて(目を閉じる、炎を揺らす)、FPS を設定して再生でプレビュー。「GIF をダウンロード」で透過対応のループ GIF が書き出され、チャットアプリや Discord、ウェブでそのまま使えます。
全アニメーションフレームを横に並べた1枚の画像です。Unity・Godot・Phaser などのエンジンはシートを一度読み込み、表示範囲をずらしてフレームを再生します。書き出しは一定のセルサイズでフレームを一列に並べます。
使えます。各フレームを描き、ゲームのフレームレートでループを確認し、透過背景のスプライトシート PNG を書き出しましょう。SVG や PNG の書き出しは UI アイコンやタイルにも使えます。
Piskel の基本ワークフロー(グリッド描画、フレームアニメ、GIF・スプライトシート書き出し)をカバーし、インストール不要で完全にブラウザ内で動き、さらにコード書き出しが加わります。シンプルでメンテナンスされているオンラインスプライトエディタを探しているなら、まさにそのために作られています。
教室発の定番トリック: 表計算のセルを正方形まで縮め、色を塗って絵にする遊びです。CSV 書き出しはセルごとに hex コードを出すので、Google スプレッドシートや Excel の条件付き書式1つで絵が再現されます。
コードパネルで形式を選ぶだけ。Python は2次元リストと Pillow レンダラー、JavaScript は canvas 描画、CSS は div 1つの box-shadow アート、SVG はくっきりしたベクター矩形、CSV は表計算用データになります。
はい。無料・登録不要・ウォーターマークなし。すべてブラウザ内でローカルに動き、作品は端末に自動保存され、サーバーにアップロードされることはありません。
