ドット絵エディター
ブラウザだけでドット絵（ピクセルアート）を作成できる無料オンラインエディター。大きめのドットでシンプルなキャラクターやアイコンを描けます。アニメーションフレーム機能付きで、動くドット絵も作成可能。PNG・アニメーションGIF・スプライトシートでエクスポートできます。インストール不要・サーバーアップロードなし。
フレーム (1)
プレビュー
ドット絵（ピクセルアート）とは
ドット絵（ピクセルアート）は、1ピクセル単位で色を配置して描くデジタルアートの技法です。 初期のコンピュータゲームやファミコン時代のグラフィックに端を発し、 限られたピクセル数と色数の中で表現する制約が独特の魅力を生み出しています。
近年ではレトロゲームブームやインディーゲーム文化の広がりとともに人気が再燃し、 SNSアイコン、Webサイトのマスコットキャラクター、NFTアートなど、 さまざまな用途で活用されています。 作成したドット絵をファビコンジェネレーターでファビコンに変換したり、画像リサイズツールでSNS投稿用にサイズ調整することも可能です。
主な機能
- 3サイズのグリッド — 8×8（アイコン）・16×16（キャラクター）・32×32（詳細な絵）から選択
- 描画ツール — ペン・消しゴム・塗りつぶし（フラッドフィル）・移動ツールを搭載
- カラーパレット — 30色のプリセットパレット＋カスタムカラーピッカーで自由に色を選択。カラーパレットジェネレーターで作った配色も活用できます
- アニメーションフレーム — 複数フレームの作成・複製・削除・並び替え。FPS調整とリアルタイムプレビュー
- オニオンスキン — 前フレームを薄く重ねて表示。自然な動きの作画を支援
- テンプレート — キャラクター・ハート・星などのテンプレートから始められる
- Undo / Redo — 操作の取り消し・やり直しで安心して描画
- キーボードショートカット — B（ペン）・E（消しゴム）・G（塗りつぶし）・Ctrl+Z（Undo）で効率的に操作
- 3形式のエクスポート — PNG（静止画）・アニメーションGIF・スプライトシート＋CSSコード
使い方
- グリッドサイズ（8×8 / 16×16 / 32×32）を選択します。テンプレートから始めることもできます
- ツールバーからペンツールを選び、カラーパレットで色を選択して、キャンバスのマス目をクリック・ドラッグして描画します
- アニメーションを作る場合は、フレームパネルの「+」ボタンでフレームを追加し、各フレームに少しずつ異なる絵を描きます
- 再生ボタンでアニメーションをプレビュー。FPSスライダーで速度を調整します
- 完成したら「PNG」「アニメーションGIF」「スプライトシート」のいずれかでエクスポートします
ドット絵の描き方のコツ
- まずシルエットから描き始める — 全体の形を大きなブロックで取る
- 色数を絞る — 3〜5色程度から始めると統一感が出やすい。カラーパレットジェネレーターで調和のとれた配色を事前に決めておくと効率的
- ハイライトとシャドウは1色ずつ — 明暗のコントラストでメリハリを付ける。コントラストチェッカーで視認性を確認できます
- アンチエイリアスは最後に — まずはくっきりしたドットで形を作る
- 小さいサイズ（8×8, 16×16）から始めて徐々に大きくする
グリッドサイズの使い分け
| サイズ | 用途 | 特徴 |
|---|---|---|
| 8×8 | アイコン、絵文字、ファビコン | 最小限のピクセルで表現。シンプルなシンボルに最適 |
| 16×16 | キャラクター、マスコット、SNSアイコン | 初心者におすすめ。表情や動きを表現できるバランスの良いサイズ |
| 32×32 | 詳細なキャラクター、背景、ゲーム素材 | ディテールを描き込める。色のグラデーションも可能 |
アニメーションの基本
ドット絵アニメーションは、複数のフレーム（静止画）を連続表示することで動きを表現します。 このツールではフレームの追加・複製・削除が簡単にでき、FPSを調整してアニメーション速度を制御できます。 オニオンスキン機能をONにすると前フレームが薄く表示され、フレーム間の動きの連続性を確認しながら描画できます。
基本的なアニメーションパターンとしては、待機（idle）モーション（2〜4フレーム）、 歩行サイクル（4〜8フレーム）、攻撃モーション（3〜6フレーム）などがあります。 まずは2〜3フレームの簡単な待機モーションから始めるのがおすすめです。
エクスポート形式の違い
| 形式 | 用途 | 特徴 |
|---|---|---|
| PNG | 静止画・SNSアイコン | 透過対応。Webサイト素材やファビコンの元画像に最適 |
| アニメーションGIF | SNS・チャット・ブログ | ループ再生対応。どこにでも貼れる汎用性の高い形式 |
| スプライトシート | ゲーム開発・Webアニメーション | 全フレームを1枚の画像に配置。CSSアニメーションコードも自動生成 |
活用シーン
- SNSアイコン・プロフィール画像 — オリジナルのドット絵キャラクターでSNSアイコンを作成。画像リサイズツールで各SNSの推奨サイズに調整できます
- Webサイトのファビコン — 8×8や16×16のドット絵をPNGで出力し、ファビコンジェネレーターでファビコンに変換
- ゲーム開発のキャラクター素材 — スプライトシートでエクスポートして、ゲームエンジンやCSSアニメーションで使用
- ブログ・Webサイトの装飾 — アニメーションGIFでページに動きを加える。GIFの表示パフォーマンスが気になる場合はWebMへの変換も検討してください
- ロゴ・アイコンのベクター化 — ドット絵をPNGで出力後、画像→SVG変換ツールでベクター化すれば拡大しても劣化しません
他のドット絵ツールとの違い
Aseprite（有料デスクトップアプリ）やPiskel（オープンソース）などのドット絵ツールと比較して、 このツールはブラウザベースのためインストールやアカウント登録が一切不要です。
| 比較項目 | 有料デスクトップアプリ | このツール |
|---|---|---|
| 料金 | 有料（買い切り / サブスク） | 完全無料 |
| インストール | 必要 | 不要（ブラウザで即使用） |
| アカウント登録 | 必要な場合あり | 不要 |
| GIF生成 | 対応 | 対応（ブラウザ内で生成） |
| スプライトシート | 対応 | 対応（CSSコード自動生成付き） |
| プライバシー | ローカル処理 | ブラウザ内完結・サーバー送信なし |
| 最適な用途 | プロの制作・大規模プロジェクト | 手軽な素材作成・初心者の入門 |
最近の改善
アニメーションGIFが真っ白になるバグを修正（LZWエンコーダーのコードサイズ同期問題を解決）
カラーパレットをキャンバス直下に移動し、描画中の色変更を効率化
アニメーション制作用のオニオンスキン（前フレーム透過表示）機能を追加
グリッドサイズ変更時の確認ダイアログを追加し、誤操作によるデータ消失を防止
タッチ操作（スマートフォン・タブレット）に対応
関連記事
よくある質問
- Q. ドット絵エディターで何ができますか？
- 8×8、16×16、32×32のグリッドでドット絵（ピクセルアート）を作成できます。ペン・消しゴム・塗りつぶし・移動ツールを備え、カラーパレットから色を選んでピクセル単位で描画します。複数フレームのアニメーション作成にも対応し、PNG・アニメーションGIF・スプライトシートでエクスポートできます。テンプレートから始めることもできるので、初心者でもすぐにドット絵を楽しめます。
- Q. アニメーションGIFはどうやって作りますか？
- フレームパネルの「+」ボタンで新しいフレームを追加し、各フレームに少しずつ異なる絵を描きます。再生ボタンでプレビューし、FPSで速度を調整。完成したら「アニメーションGIF」ボタンでエクスポートします。フレームの複製機能を使えば、前のフレームをベースに効率的にアニメーションを作れます。オニオンスキン機能をONにすると前フレームが薄く表示され、自然な動きの作画が容易になります。
- Q. 作成したドット絵をWebサイトで使うには？
- PNGでエクスポートした画像はそのままWebサイトの素材として使えます。CSSで image-rendering: pixelated を指定すると、拡大時もドット絵のくっきりした見た目を保てます。アニメーションはGIF形式か、スプライトシート＋CSSアニメーションで実装できます。「CSSアニメーション」ボタンでスプライトシート用のCSSコードもコピーできます。
- Q. 画像はサーバーにアップロードされますか？
- いいえ、すべての描画処理・GIF生成・PNG/スプライトシートエクスポートはブラウザ内（Canvas API + JavaScript）で完結します。サーバーへの画像アップロードは一切ないため、個人的な作品やクライアントワークの素材も安心して作成できます。
- Q. スマートフォンやタブレットでも使えますか？
- はい、タッチ操作に対応しているため、スマートフォンやタブレットのブラウザからも利用できます。アプリのインストールや会員登録は不要です。ただし画面サイズの関係上、PC・タブレットでの操作を推奨します。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。