🎨 ドット絵デザイナーへようこそ
このアプリはブラウザだけで動く無料のドット絵エディタです。手描き・AI生成・画像変換でドット絵を作り、アニメーションGIFとして書き出せます。インストール・登録・サーバー保存は一切不要です。
🖌️ 基本操作
- 描画ツール: キャンバス上部のパレットから色を選び、ペン・消しゴム・塗りつぶし・スポイト・直線・四角で描きます。指・ペン・マウスに対応します。「移動」でキャンバスをドラッグでき、キャンバスの外では通常どおりページをスクロールできます。
- キャンバス: ドット絵を描くキャンバス。ズーム切替・グリッド表示あり。
- 右パネル: プレビュー（静止画＋アニメ）、画像→ドット絵変換、エクスポート。
- キーボード:
123でフレーム切替、Zでひとつ戻す。
💾 作品の保存と復元
「保存メニューを開く」から、新しい名前を入力して「名前を付けて保存」を押すと、完成版として保持します。保存済み作品を開いたときは元の作品名を別に表示し、新しい保存名の欄は空になります。編集や全削除は別の作業コピーに自動保存され、元の作品は上書きしません。「開く」は入力中の名前を保存しません。同じ名前の保存済み作品がある場合は、別名を入力してください。作業コピーも一覧から再開できます。削除した作品はごみ箱から復元できます。完全に削除すると元に戻せません。大切な作品はJSONで保管してください。一括バックアップはごみ箱を含み、復元は既存作品を上書きせず追加します（128MB以下、使用中50件・ごみ箱込み200件まで）。
編集後、約0.6秒で作業コピーをこのブラウザに自動保存し、次回起動時に復元します。保存済み作品を見ただけではコピーは増えません。全レイヤーの16枠の絵（未使用のフレームも含む）、レイヤー名・順序・表示・ロック・不透明度、選択中のレイヤー、サイズ、使用フレーム数、選択中のフレーム、アニメ速度を保存します。「戻す」「やり直す」の履歴は再起動後には復元されません。
「戻す」「やり直す」は作品全体で直近の最大20操作に適用します。描画、レイヤーの追加・削除・複製・並べ替え・設定変更、サイズ変更を取り消せます。操作したレイヤーとフレームも復元します。スプライトシート読み込みは1操作として戻せます。Z／Ctrl・Command＋Zで戻す、Shift＋Z／Ctrl・Command＋Yでやり直します。サンプルへの置き換え、JSON復元、再起動では履歴をリセットします。
保存状態は保存メニューの下と保存ダイアログに表示します。容量不足やブラウザの制限で保存できない場合は「未保存」と表示します。「端末に保存・バックアップ／作品の整理」の「編集中の作品をJSON保存」でファイルとして保管でき、「JSONから復元」で編集を再開できます。バックアップにAPIキーは含まれません。
自動保存は同じブラウザ・同じサイトでのみ利用できます。ブラウザのデータ削除やプライベートモード終了で失われる場合があります。HTMLを直接開く場合は、ファイルの移動・名前変更・ブラウザの違いで復元できないことがあります。大切な作品はJSONも保存してください。別タブから保存が変わった場合は上書きを停止します。
📏 サイズとサンプル
サイズのプリセット、または幅・高さをそれぞれ1〜256マスの整数で指定して「サイズ適用」を押します。絵は左上を基準に保持されます。縮小で絵が切れる場合や消去を選んだ場合は確認が表示されます。大きなキャンバスは「全体表示」やスクロールで操作できます。
「ドット絵サンプル」の人・犬・木・雲・歩く人を選ぶと、全レイヤー・全フレームが1枚のサンプルレイヤーに置き換わります。歩く人は2枚セットで、読み込み後すぐにアニメーションを確認できます。サンプルは商用利用・改変・再配布ができ、クレジットは不要です。
📱 スマホでの操作
上部の「描く・レイヤー・設定・出力」で操作欄を切り替えます。描画画面の「その他の編集」「フレーム数・オニオンスキン」「拡大率・グリッド」はタップで開きます。フレーム一覧は横にスクロールできます。キャンバスをスクロールするときは「移動」ツールを選びます。レイヤー変更後は「描く」で制作に戻れます。スマホでは「出力」→「保存メニューを開く」から保存・作品の読み込みを行います。JSONバックアップはダイアログ内の「端末に保存・バックアップ／作品の整理」にあります。
▤ レイヤー
最大8枚を追加・複製・削除・並べ替えできます。一覧の上ほど手前に重なります。各レイヤーは16枠の絵を持ち、名前・順序・表示・ロック・不透明度は全フレーム共通です。選択中のレイヤーに描画し、範囲選択・消去・画像読み込みも選択中のレイヤーに適用します。
「全レイヤーをクリア（このフレーム）」は非表示レイヤーも含め、現在のフレームだけをまとめて消去します。「戻す」で復元できます。絵があるレイヤーがロック中の場合は消去せず、解除を案内します。
非表示または編集ロック中のレイヤーには描画できません。ロック中の削除もできません。作品全体のサイズ変更は全レイヤーに適用します。最後の1枚は削除できません。
PNG・スプライトシート・GIF・コード出力には、表示中のレイヤーを不透明度と順序どおりに重ねた結果を使います。PNGは透明度を保持し、GIFは白背景になります。レイヤーを編集可能な状態で残すにはJSONバックアップを使用してください。
▧ 範囲選択
「範囲選択」で長方形を囲み、範囲内をドラッグすると移動できます。矢印キーで1マスずつ移動します。「範囲コピー」「貼り付け」は別フレーム・別レイヤーにも使えます。移動・貼り付けは透明部分を含め移動先を上書きし、「戻す」で取り消せます。Deleteで範囲消去、Escapeで解除。選択範囲とコピー内容は再起動後には復元されません。
🎬 アニメーション
最大16フレームでGIFアニメを作れます。枚数を減らしても非表示の絵は保持され、枚数を戻すと再表示されます。中央上の「使うフレーム数」を選び、各フレームを描いて、右パネルの「🎬 アニメGIF」で保存。アニメ速度はプレビュー下のスライダーで調整。
オニオンスキンは前フレームを赤、次フレームを青で薄く重ねます。濃さと前後の表示を変更できます。先頭・末尾でループせず、非表示のフレームは参照しません。補助表示は作品や書き出し画像には含まれません。
旧3フレーム・16フレームの自動保存・JSONも1枚のレイヤーとして読み込めます。新形式のJSONは旧版アプリでは開けません。大きな作品でブラウザの保存容量を超えた場合は、JSONバックアップで保管してください。
🤖 AI画像生成
制作の設定内でAPIキーと描いてほしいものを入力して画像を生成します。生成結果はキャンバスサイズへ縮小・減色されます。色数変更やキャンバスサイズ変更後の再変換は端末内で行います。プレビューを確認し「表示中の作品・フレームへ新規レイヤーで取り込む」で採用します。取り込みは1操作として戻せます。生成だけでは作品を書き換えません。生成中に作品を切り替えても自動適用はしません。
アプリへのログインは不要ですが、OpenAI APIの利用アカウント・キー・利用料が必要です。キーは初期設定で保存しません。生成にはgpt-image-2を使用します。
🖼️ 画像 → ドット絵変換（右パネル）
手元の画像ファイルをドット絵化できます。変換方式は5種類：
- ニアレストネイバー：高速・くっきり
- 平均色：なめらか（推奨）
- 中央値：ノイズに強い
- パレット制限：既定80色に揃える
- ディザリング：Floyd-Steinberg、階調感を出す
📤 エクスポート
- 現フレームPNG：透過PNG（1倍）
- スプライトシート：全フレームを横並びPNG
- アニメGIF：使用中のフレームを白背景・4倍拡大で保存。生成状況と失敗時の案内を表示します。
- 描画コード：JavaScript描画関数
- Base64：埋め込み用文字列
🔒 プライバシー
作品の自動保存先はこのブラウザ内のIndexedDBです。作品の自動保存・復元では外部送信しません。APIキーは明示的に保存を有効にした場合だけブラウザ内へ保存され、AI生成のリクエストはOpenAI APIへ送信されます。GIF生成は同梱ライブラリで端末内で行います。また、このページにはGoogle Analyticsの計測コードが含まれています。