オンラインでドット絵を作成する

適切なキャンバスで始める

小さなスプライトやアイコンは16 × 16、定番ゲームスプライトは32 × 32、描き込みたい作画は64 × 64、シーンは128 × 128が目安です。一辺4〜2048 pxのカスタムサイズも入力できます。現在のキャンバスサイズは常にツールバーに表示され、W×H入力でいつでもリサイズ（作品ごと拡大縮小）できます。

実際に使えるツール

• 鉛筆（B） — クリックごとに1ドット描画します。Shiftで直線、Altでツール切替なしの色採取ができます。
• 消しゴム（E） — 透明に消去します。Alt + クリックでつながった同色を一括消去します。
• 塗りつぶし（G） — 輪郭を尊重するバケツ塗りで、消した縁から漏れません。
• スポイト（I） — レイヤーを越えて見えているドットの色を採取します。
• 手のひら（Space）と移動 — 表示の移動、または作業中レイヤー全体の移動ができます。
• 元に戻す・やり直し — Ctrl/⌘ + Z、Ctrl + Shift + ZまたはCtrl + Yに対応し、小さな固定回数ではなくメモリ上限まで履歴を保持します。
• クリアと読み込み — 作業中レイヤーの消去や、写真・SVG・PDFページの新規レイヤーとしての読み込みができます。

レイヤー、不透明度、ブレンドモード

すべてのキャンバスで名前付きレイヤーを複数使えます。表示切替、ロック、ドラッグなしの並べ替え、レイヤーごとの不透明度、7種のブレンドモード（通常、乗算、スクリーン、オーバーレイ、比較（暗）、比較（明）、差の絶対値）に対応しています。レイヤー全体はCtrl/⌘ + C/X/Vでコピー・切り取り・貼り付けできます。貼り付けは賢く動作し、同一フレーム内では新規レイヤー作成、アニメのフレーム間では対応レイヤーへの描画になります。アニメツールでは🔗でレイヤーを全フレーム共有でき、背景作りに使えます。

色を混乱させないコツ

カラーパネルは保存スウォッチとキャンバス上の使用色（最大48色）を統合するので、描くほどパレットが自動で育ちます。「＋ 追加」でお気に入りを登録し、「− 削除」で整理できます。少ない色で描くのは技術です。パレットのガイドで本当に必要な色数を確認できます。

拡大、グリッド、タッチ

ホイール拡大、拡大ボタン、ワンクリックの全体表示、真の100%表示、ドットが十分大きいときに自動表示されるピクセルグリッドに対応しています。移動は中ボタン、手のひらツール、Space + ドラッグでできます。タッチ画面はすべてPointer Eventsで動作するので、指でもスタイラスでも直接描けます。

書き出しと自動保存

PNGをネイティブサイズ（1×）で、真のベクターSVGで、ベクターPDFでダウンロードできます。プロジェクト名の入力欄がファイル名になります。作業はご自身のブラウザ（localStorage）に自動保存され、全レイヤーを含むプロジェクトファイル（.piximelon.json）をダウンロードしてバックアップや端末間移動もできます。初めての方はドット絵の描き方に沿って進めるのがおすすめです。

あわせて読みたい

• ドット絵の描き方
• ドット絵キャラの作り方
• ドット絵のパレット
• ドット絵の陰影
• 動画をドット絵に変換する
• オンラインでドット絵をアニメ化する