ドット絵メーカー(ピクセルアートエディター)

8×8から64×64までのグリッドにクリック・ドラッグで色を置いてドット絵(ピクセルアート)を描ける無料エディターです。手持ちの写真やイラストを読み込んでドット絵化することもでき、塗りつぶし・消しゴム機能付きで、完成した作品はPNG画像としてダウンロードできます。

ドット絵メーカーとは

ドット絵メーカーは、正方形のマス目(グリッド)に1マスずつ色を置いていくことでドット絵・ピクセルアートを作成できる無料のブラウザツールです。グリッドサイズは8×8の小さなアイコンサイズから64×64の細密なイラストまで選べ、クリックまたはドラッグで色を塗り、塗りつぶしツールで同じ色がつながった広い範囲を一気に塗り替えられます。

完成した作品はワンクリックでPNG画像としてダウンロードでき、ゲームのドット絵アイコン・SNSのアイコン画像・掲示板向けのちょっとしたイラストなど、幅広い用途にそのまま使えます。すべての処理はブラウザ内で完結するため、描いたデータが外部のサーバーに送信されることはありません。

ドット絵の描き方

  1. グリッドサイズを選ぶ 作りたい絵の細かさに応じて8×8〜64×64からサイズを選びます。後から変更するとキャンバスがリセットされます。
  2. 画像から作る場合は読み込む(任意) 「画像から作る」でファイルを選ぶか、キャンバスへドラッグ&ドロップすると、その画像を現在のグリッドサイズに合わせてドット絵化します。読み込んだあとはペンや消しゴムで自由に描き足せます。
  3. 色を選ぶ カラーピッカーで自由に色を選ぶか、よく使う色のパレットからワンクリックで選択します。
  4. マス目をクリック・ドラッグして塗る ペンツールでマス目をクリックすると色が置かれます。ドラッグすると連続したマスをまとめて塗れます。
  5. 消しゴム・塗りつぶしを使い分ける 消しゴムで1マスずつ消し、塗りつぶしツールで同じ色が連続する範囲をまとめて塗り替えます。
  6. PNGでダウンロードする 完成したら「PNGでダウンロード」を押すと、透過背景付きの画像ファイルとして保存されます。書き出しサイズは原寸(1マス=1ピクセル)から整数倍まで選べます。

使いこなすためのヒント

  • 小さいグリッド(8×8・16×16)はゲームのアイテムアイコンやSNSのアバター向き、大きいグリッド(32×32以上)はキャラクターの全身や背景付きのイラストに向いています。
  • 塗りつぶしツールは、同じ色(未着色の透明部分も含む)が上下左右につながっている範囲だけをまとめて塗り替えます。離れた場所には影響しません。
  • 陰影をつけたいときは、ベースの色より少し暗い色・明るい色を1〜2階調用意し、立体感を出したい辺だけに少しずつ置くと簡易的なドット絵の陰影表現になります。
  • グリッドサイズを変更すると描いた内容はリセットされるため、サイズは描き始める前に決めておくことをおすすめします。
  • 透過部分を残したまま保存すると、SNSのアイコンやアプリの素材としてそのまま重ねて使いやすくなります。
  • 写真を読み込むときは、被写体が大きく写っていて背景が単純なものほどドット絵にしたときに何が描かれているか分かりやすくなります。輪郭がぼやける場合は「16色パレットに色を寄せる」を有効にすると、色数が減ってドット絵らしいはっきりした見た目になります。
  • 編集画面は拡大表示なので、原寸プレビューで実際の見え方を確かめながら描くと失敗が減ります。とくに8×8や16×16では、原寸で潰れてしまう細部は思い切って省いたほうが何を描いたか伝わりやすくなります。

こんな場面で使えます

ゲーム制作の仮素材づくり

インディーゲーム制作で、キャラクターやアイテムのドット絵アイコンをアイデア段階で素早く試作するのに使えます。

SNS・掲示板用のアイコン作成

X(旧Twitter)やDiscordのアイコン、掲示板のちょっとしたキャラクター画像を手軽に作れます。

レトロゲーム風イラストの練習

ファミコン・スーパーファミコン時代のようなドット絵表現を練習したい初心者の入門ツールとして使えます。

ドット文字・ロゴのラフ作成

グリッドの特性を活かして、ドット文字やシンプルな幾何学模様のロゴのラフ案を作るのにも向いています。

用語集

ドット絵(ピクセルアート)
正方形の点(ピクセル)を1つの単位として組み合わせて描く絵の様式です。初期のコンピューターやゲーム機の表示制約から生まれ、現在は独自の表現スタイルとして親しまれています。
グリッド
ドット絵を描くための格子状のマス目のことです。1マスが1ピクセルに対応し、マス目の数(例: 16×16)がそのまま画像の解像度になります。
塗りつぶし(バケツ)ツール
クリックした地点と同じ色でつながっている範囲をまとめて別の色に塗り替える機能です。広い面を1マスずつ塗る手間を省けます。
透過(アルファチャンネル)
画像の一部を「色を塗らない」状態のまま保存できる機能です。背景を透明にしたままPNGとして書き出すと、他の画像やページに重ねて使いやすくなります。
ラスターグラフィック
ドット絵のように、画像を格子状の点の集まりとして扱う形式です。拡大するとマス目がそのまま見える点が、輪郭線を数式で保持するベクター形式と異なります。

よくある質問

このツールで作成した画像自体の著作権について当サイトは制限を設けていません。ただし配色やモチーフを既存の作品から模倣した場合は、その元となった作品の権利にご注意ください。

グリッドサイズを変更すると、マス目の数が変わるためそれまで描いた内容は消去されます。サイズを変えたい場合は先にPNGとしてダウンロードしておくことをおすすめします。

現在のバージョンでは、ブラウザを閉じたり画面を再読み込みするとキャンバスの内容は失われます。編集を再開できる下書き保存機能は今後の検討事項です。なお、書き出したPNGはこのツールで読み込み直せます。グリッド線を含まない画像として書き出しているため、マスの色がそのまま復元されます。いったんダウンロードしておけば、あとで読み込んで編集を続けられます。

送信されません。マス目への着色・塗りつぶし・PNG書き出しはすべてお使いのブラウザの中だけで処理され、外部に保存されることはありません。

使えます。タッチ操作でのタップ・ドラッグに対応しているため、指やタッチペンでマス目を塗ることができます。

できます。「画像から作る」からファイルを選ぶか、キャンバスへ画像をドラッグ&ドロップしてください。現在のグリッドサイズに合わせて1マスぶんの範囲の平均色を求めて変換します。正方形でない画像は「中央を切り抜く」か「全体を収める」かを選べます。変換したあとはペン・消しゴム・塗りつぶしで手直しできます。

「書き出しサイズ」で選べます。既定は原寸で、16×16のグリッドなら16×16ピクセルのPNGになります。これがドット絵本来の解像度で、ゲーム素材にはこのまま使えます。SNSのアイコンなど大きさが必要な場面では2倍・4倍といった整数倍を選んでください。拡大は必ず整数倍で行うため、マスの幅が揃ったまま、ぼやけずに大きくなります。
ツールくん

余談ですが ― ドット絵はなぜ今も愛され続けているのか

ドット絵という表現様式が生まれたのは、1970年代から80年代にかけてのコンピューターやゲーム機の表示能力に限界があった時代です。当時のディスプレイは扱える色数や解像度がごくわずかで、限られたマス目と色数の中でキャラクターや背景をいかに魅力的に見せるかという工夫の積み重ねが、独自の美学として発展していきました。

技術が進歩し、写実的なグラフィックが当たり前になった現在でも、ドット絵は根強い人気を保ち続けています。インディーゲームの世界では「レトロな見た目」そのものが魅力として選ばれることが多く、限られた表現の中で個性を出す職人的な技術として、今も多くの作り手に受け継がれています。

近年はドット絵編集ソフトの多くが有料・高機能化する一方で、ちょっとしたアイコンや思いつきのイラストを手早く作りたいという需要も根強くあります。ブラウザだけで完結する手軽さは、まさに「グリッドに色を置く」というドット絵本来のシンプルな楽しさに立ち返るための入口だといえるでしょう。