ドット絵の作り方｜16×16から始めるドットアート入門

最初に決めるのはドット数（キャンバスの細かさ）

ドット絵で最初につまずくのは、描き方よりもサイズ選びです。大きくすればきれいに描けそうに思えますが、ドット絵はマス目が増えるほど「1マスずつ判断する回数」が増えるため、初めての1枚で64×64を選ぶと高い確率で途中で止まります。題材に対して必要最小限のマス数を選ぶのが、完成までの最短ルートです。

注意したいのは、ドット数を2倍にするとマス数は4倍になるという点です。16×16 の256マスなら30分ほどで打ち切れますが、32×32 は1,024マスあり、同じ密度で描こうとすると単純計算で4倍の時間がかかります。まずは16×16で1枚完成させて、物足りなければ次を32×32にする、という進め方が挫折しにくい順番です。

ブラウザでドット絵を作る手順

インストールもアカウント登録も不要です。ドット数を入れてグリッドを作り、マスをクリックして打っていくだけで進みます。打つ順番だけ意識すると、初めてでも形が崩れにくくなります。

1. 1

   ドット数を入力してグリッドを生成する

   1辺のドット数を入力して「グリッドを生成」を押すと、空のキャンバスが表示されます。あとからサイズを変えると打った内容はリセットされるので、描き始める前に決めておきます。

2. 2

   外側のシルエットから打つ

   顔の輪郭、体の外形など、いちばん外側の線から打ちます。ドット絵は細部よりシルエットで印象が決まるため、輪郭が決まればあとは埋めるだけになります。中央から描き始めると、端が入りきらずに描き直しになりがちです。

3. 3

   内側のディテールを足す

   目、口、模様などを打ちます。16×16 では目は1〜2マスが目安です。ここで欲張って細かく打つと、縮小表示したときに何が描いてあるか分からなくなります。

4. 4

   「不要な場所」をグレーで潰す

   背景として確実に何も置かないマスは、薄いグレーで打っておきます。残りの白いマスが「まだ決めていない場所」として浮かび上がるので、打ち忘れを見つけやすくなります。

5. 5

   PNGで書き出す

   「PNG 保存」を押すと、そのままの見た目で画像として保存されます。作業を続けたい場合は「途中保存」を押しておけば、同じブラウザから再開できます。

黒・グレー・白の3状態を使い分ける

このツールのマスは、単純な「塗った／塗っていない」の2択ではなく3つの状態を持ちます。この違いを使い分けられるかどうかで、作業のしやすさがかなり変わります。

• 白を「残タスク」として使う：先に不要な場所をグレーで潰しておくと、白いマスの数がそのまま残作業の量になります
• 下描きの代わりに使う：迷っている領域を白のまま残し、確定したところだけ黒にしていくと、消しゴム作業が減ります
• 図案として渡す：ビーズアイロン、編み図、方眼紙の下絵など、黒いマスの数がそのまま材料の必要数になります
• 左右対称の確認に使う：片側を打った時点で、対になる側をグレーで先に埋めておくと軸がずれません

グリッドの下には「必要ドット」「不要ドット」「合計」の数が表示されます。ビーズやブロックで実物を作る場合は、この必要ドットの数がそのまま用意すべき個数になるので、買い出し前に確認しておくと無駄がありません。

ドット絵をきれいに見せる5つのコツ

ドット絵が「なんとなく下手に見える」理由は、絵の上手さよりもマスの並べ方にあることがほとんどです。次の5点を守るだけで、同じ題材でも見え方が変わります。

• ①シルエットを最優先する：小さいサイズでは、影絵にしたときに何か分かる形になっているかがすべてです
• ②斜め線は階段の幅をそろえる：1マスずつ、または2マスずつと規則的に下げます。3マス→1マス→2マスのように不規則だと線がガタついて見えます
• ③孤立した1マスを置かない：ぽつんと離れた1マスはノイズに見えます。線としてつなげるか、思い切って消します
• ④左右対称のものは片側だけ打つ：顔や記号は半分打った時点で全体のバランスを確認し、それから反対側を写すと崩れません
• ⑤外周に1マス余白を残す：端ぴったりまで描くと、アイコンとして使ったときに切れて見えます

特に効くのは②です。ドット絵の斜め線は「階段」でしか表現できないため、段の幅がそろっているかどうかが線のなめらかさを決めます。円を描くときも、上下左右の頂点付近は横に長く、45度付近は1マスずつ、と段の幅を意識して打つと自然な丸みになります。

PNG保存と、画像として使うときの注意

完成したら「PNG 保存」で画像として書き出せます。書き出される内容には少しクセがあるので、用途に応じて把握しておくと後で困りません。

• ファイル名は「dot-art-16x16.png」のように、ドット数がそのまま入ります
• 画像の大きさは1辺およそ512pxです（1マスあたりのピクセル数は512÷ドット数を切り捨てた値で、最小4px）
• 画面に見えているマス目の区切り線も、そのまま画像に含まれます
• 白いマスは透明ではなく白色として書き出されます（背景が透過したPNGにはなりません）

区切り線ごと書き出されるため、方眼紙のような図案・設計図としてはそのまま使えます。一方、区切り線のないベタなアイコンが欲しい場合は、書き出したPNGを画像編集ソフトでドット数と同じピクセル数まで縮小してから、必要なサイズへ拡大し直すのが手軽です。拡大するときは補間方法を「ニアレストネイバー」にすると、ドットの角がぼやけずにくっきり残ります。

途中保存の仕組みと、消さないための使い方

32×32以上になると一度で打ち切れないこともあります。「途中保存」を押すと作業中の状態を保存でき、次に開いたときに「保存を読み込む」で再開できます。ただし保存先はサーバーではなく、使っているブラウザの中です。

• 保存できるのは1件だけです。もう一度「途中保存」を押すと前の内容は上書きされます
• 同じ端末・同じブラウザからのみ再開できます。スマホで保存してPCで続ける、といった使い方はできません
• ブラウザの閲覧データ（サイトデータ）を削除すると消えます
• シークレットモード／プライベートブラウズでは、ウィンドウを閉じた時点で消えます

よくある質問

ドット絵は何マスから始めるのがいいですか？

初めての1枚は16×16がおすすめです。256マスあれば顔やアイコン程度は十分表現でき、30分ほどで完成まで持っていけます。記号やマークだけなら8×8でも作れます。

写真や画像を読み込んで自動でドット絵に変換できますか？

ドットアートジェネレーターは自動変換には対応しておらず、空のグリッドに自分でマスを打っていく方式です。そのぶん1マス単位で意図どおりの形を作れるため、アイコンや図案づくりに向いています。

スマートフォンでも作れますか？

作れます。マスをタップすると打てるため、16×16程度までならスマートフォンでも問題ありません。64×64以上の細かいグリッドは1マスが小さくなるため、PCのほうが打ちやすくなります。

作ったドット絵は自由に使えますか？

自分で打った図案はご自身の作品として利用できます。ただし既存のキャラクターやロゴをマス目に写した場合は、元の著作権・商標が引き続き有効なので、公開や商用利用の前に権利者の条件を確認してください。

保存したデータは別の端末でも開けますか？

開けません。途中保存はブラウザ内に保存する仕組みのため、同じ端末・同じブラウザでのみ再開できます。端末をまたぎたい場合は、PNGとして書き出したファイルを共有してください。