🎨 ドット絵デザイナー

🎨 ドット絵デザイナーへようこそ

このアプリはブラウザだけで動く無料のドット絵エディタです。手描き・AI生成・画像変換でドット絵を作り、アニメーションGIFとして書き出せます。インストール・登録・サーバー保存は一切不要です。

🖌️ 基本操作

1. 左パネル: カラーパレット（80色）から色を選び、ツール（ペン・消しゴム・塗りつぶし・スポイト・直線・四角）で描きます。
2. 中央パネル: ドット絵を描くキャンバス。ズーム切替・グリッド表示あり。
3. 右パネル: プレビュー（静止画＋アニメ）、画像→ドット絵変換、エクスポート。
4. キーボード: 123でフレーム切替、Zでひとつ戻す。

🎬 アニメーション

最大3フレームでGIFアニメを作れます。中央上の「使うフレーム数」を選び、各フレームを描いて、右パネルの「🎬 アニメGIF」で保存。アニメ速度はプレビュー下のスライダーで調整。

🤖 AI ドット絵ジェネレート（左パネル）

1. OpenAI の APIキー（sk-...）を「API設定」に入力（ローカル保存）。
2. プリセットを押すか、自分で「描いてほしいもの」を入力。
3. モデルはgpt-4o 推奨（gpt-4o-mini は崩れやすい）。
4. 「AIに生成してもらう」で生成 → 自動的に現在フレームに反映。

サイズの注意: AI生成は 32×32 まで（推奨 16×16〜24×32）。50×50 以上は出力トークン上限を超え空応答になります。大きな絵は「画像→ドット絵」をご利用ください。

🖼️ 画像 → ドット絵変換（右パネル）

手元の画像ファイルをドット絵化できます。変換方式は5種類：

• ニアレストネイバー：高速・くっきり
• 平均色：なめらか（推奨）
• 中央値：ノイズに強い
• パレット制限：既定80色に揃える
• ディザリング：Floyd-Steinberg、階調感を出す

📤 エクスポート

• 現フレームPNG：透過PNG（1倍）
• スプライトシート：全フレームを横並びPNG
• アニメGIF：動画GIF（4倍拡大）
• 描画コード：JavaScript描画関数
• Base64：埋め込み用文字列

🔒 プライバシー

作成データ・APIキーはすべてあなたのブラウザ内（localStorage）にのみ保存され、外部送信は OpenAI API（AI生成時のみ）と gif.js のCDN取得だけです。