ドット絵は、絵の中でもとりわけ始めやすいのに、完成させにくいジャンルです。道具は無料でも手に入り、キャンバスも小さい。それなのに、描き始めると「なんか違う」で止まってしまう。
原因のほとんどは画力ではなく、手順を知らないことです。ドット絵には、上手い人が例外なく踏んでいる順番があります。この記事では、その順番を最初の1枚を仕上げるところまで通しで説明します。
📌 この記事の3行まとめ
① 最初は16×16か32×32。大きいキャンバスは、初心者にとって難しさが増すだけ
② シルエット → 線 → 3色の陰影 → 仕上げの順に進める。細部は最後
③ ジャギー（線のガタつき）の整え方を覚えると、それだけで「それっぽく」なる
キャンバスサイズは、小さいほど簡単
最初にやりがちな失敗が、128×128などの大きなキャンバスから始めることです。「大きいほうが描きやすいのでは」と思いがちですが、ドット絵に関しては逆です。
ドットが増えるということは、打つべき判断の数が増えるということです。しかも、大きいキャンバスは普通のイラストに近づくため、ドット絵ならではの気持ちよさ（少ない情報で形が立ち上がる感覚）が薄れます。
用途別の目安は次のとおりです。
| サイズ | 向いているもの |
|---|---|
| 8×8 | アイコン、タイル、小さな装飾。練習に最適 |
| 16×16 | 最初の1枚に最適。ファミコン期のキャラクター相当 |
| 32×32 | 表情や装備が描き分けられる。慣れたらここへ |
| 64×64 | 立ちポーズのキャラクター、アイテム、UI素材 |
| 128×128以上 | 背景、1枚絵。かなり時間がかかる |
まずは16×16で、リンゴ・剣・きのこ・鍵のような単純な物を描く。これが最も効率のいい入り口です。
ステップ1：シルエットだけを、1色で描く
いきなり色を塗らないでください。最初にやるのは、黒1色でシルエットを描くことです。
理由は明快で、ドット絵は遠目のシルエットで9割決まるからです。ゲーム画面の中で小さく表示されたとき、プレイヤーが見分けているのは色でも線でもなく形です。
シルエットを描くときのポイントは3つです。
- 輪郭を単純にする。細かい凹凸は16×16では表現できません
- 左右非対称を1か所入れる。完全な左右対称は、記号的でつまらない印象になります
- 画面を縮小して確認する。実際に表示されるサイズで見て、何か分かるかを確かめます
ここで「何を描いたか分からない」なら、色を塗っても解決しません。シルエットの段階で戻るのが正解です。
ステップ2：ジャギーを整える
ドット絵が「素人っぽく」見える最大の原因が、ジャギー（線のガタつき）です。斜めの線を引いたとき、ドットの並びが不揃いになる現象です。
きれいな斜め線は、同じ長さのドットの塊が規則的に並んでいます。
- 45度の線 → 1ドットずつずらす（1, 1, 1, 1…）
- 緩やかな斜線 → 2ドットずつ（2, 2, 2, 2…）
- さらに緩やか → 3ドット、4ドット…
やってはいけないのは、塊の長さが不規則に変わること（2, 1, 3, 1, 2… のような並び）と、1ドットだけ飛び出た角です。この2つを直すだけで、線は劇的にきれいになります。
曲線の場合は、塊の長さを一方向に変化させます（1, 1, 2, 3, 5… のように、だんだん長く）。行ったり来たりさせないのがコツです。
💡 確認方法
描いた線を目で追って、「ドットが何個ずつ並んでいるか」を数えてみてください。数列が乱れている場所が、そのまま違和感のある場所です。
ステップ3：色は3色から始める
いきなり多くの色を使わないでください。ベース色・影色・ハイライト色の3色で、立体感は十分に作れます。
塗る順番はこうです。
- ベース色でシルエットの内側を全部塗る
- 光の向きを1つ決める（左上からが定番）
- 光と反対側に影色を置く
- 光が当たる面の縁にハイライト色を少しだけ置く
ここで重要なのが、光源を1つに決めて最後まで変えないことです。初心者の絵が平面的に見える最大の理由は、影の向きが場所ごとにバラバラだからです。
3色でまとまったら、影とベースの間に中間色を1つ足す（4色）。さらに必要なら反射光を足す（5色）。この順で増やせば破綻しません。色の選び方そのものについては、ドット絵の配色とパレット設計で詳しく扱っています。
ステップ4：輪郭線をどうするか決める
輪郭線には3つの方針があり、どれを選ぶかで絵の印象が変わります。
- 黒い輪郭線で全体を囲む：はっきりして見やすい。背景が複雑なゲームに強い。初心者はまずこれ
- 選択的な輪郭線：光が当たる側の輪郭を明るい色にする。柔らかく、絵としてこなれて見える
- 輪郭線なし：シルエットの縁を直接ベース色にする。背景と馴染む。難易度は高い
輪郭線に真っ黒（#000000）を使わないというのも、覚えておくと効く小技です。ベース色をぐっと暗くした色（たとえば紫寄りの濃色）にすると、それだけで絵が締まりつつ柔らかくなります。
ステップ5：アンチエイリアスとディザリング
ここまでできたら、仕上げの2つの技法です。どちらも「使いすぎない」ことが最も重要です。
アンチエイリアスは、2色の境界に中間色のドットを置いて、ガタつきを目立たなくする手法です。ドット絵では自動処理ではなく手で置きます。ポイントは、
- 斜めの線の「角」にあたる部分にだけ置く
- 置くのは1〜2ドット。連ねない
- 輪郭の外側には置かない（背景色が変わると汚く見えるため）
ディザリングは、2色を市松模様のように混ぜて、中間の階調やざらついた質感を作る手法です。パレットの色数が厳しく制限されていた時代の技術で、グラデーションや金属・石の質感に使えます。ただし、16×16のような小さい絵ではまず不要です。ノイズにしか見えません。使うなら64×64以上の背景や大きな面から試してください。
よくある失敗と、その直し方
| 症状 | 原因 | 直し方 |
|---|---|---|
| ぼやけて見える | 明度差が足りない | 影色をもっと暗く。彩度ではなく明度を離す |
| 汚く見える | 色数が多すぎる | 一度3色に戻して組み直す |
| 平面的に見える | 光源が定まっていない | 光の向きを1つ決め、影を全部そちらに揃える |
| 何を描いたか分からない | シルエットの問題 | 縮小表示で確認し、輪郭から作り直す |
| 線がガタつく | ドットの塊が不規則 | 塊の長さを数えて揃える |
練習メニュー：最初の2週間
順番に進めれば、迷わず力がつきます。
- 8×8で単純な物を10個（ハート、星、コイン、鍵、剣…）— シルエットの練習
- 16×16で同じ物を色付きで— 3色の陰影の練習
- 16×16のキャラクターを1体— 正面向きの立ち姿
- 同じキャラを32×32で— 情報量が増えたときの描き方
- 2フレームのアニメーション— 待機モーション（1〜2ドット上下させるだけ）
毎日1枚、完成させることがいちばん効きます。上手く描くことより、終わらせる回数が上達を決めます。
PixelHubなら、学びながらそのまま描けます
ドット絵の学習でよくあるのが、解説を読む場所と描く場所が分かれてしまう問題です。記事や動画で理解しても、別のアプリを開いて設定を作り直しているうちに、何をやろうとしていたか分からなくなる。
当社が開発した PixelHub - ドット絵エディタと学習講座 は、その分断をなくすために作ったiPhone・iPad向けアプリです。
- 11コース・134レッスン：1ドットの置き方から、線、形、光と影、質感、キャラクター、背景、アイソメトリック、アニメーションまで順に進みます
- 合計402問の実技：読むだけで終わらず、その場で手を動かして確認します
- 本格エディタ：ペン・消しゴム・スポイト・塗りつぶし・直線・矩形・色置き換え、矩形選択／なげなわ／マジックワンド、レイヤー、200段階のUndo / Redo
- 最大32色のパレット：HSV編集、PICO-8やDawnBringerなどのプリセット、GPL形式の読み込み・書き出し。色をパレット側で変えると作品全体に反映されるので、配色の試行錯誤が速い
- 下絵の透過表示：写真やラフの上からなぞって練習できます
- フレームアニメーション：オニオンスキン付き。スプライトシートPNGとタイミングJSONで書き出せます
- 完全オフライン：通信不要で動作します
レッスンと自由制作で操作が変わらないので、覚えた技術をそのまま自分の作品に使えます。買い切り2,000円です。
配色でつまずいたらドット絵の配色とパレット設計、開発の背景はPixelHubリリース記事をご覧ください。
