自分のゲームに、自分で描いたキャラクターを登場させたい。ドット絵なら絵が得意でなくても描けそうだけれど、何から始めればいいのか分からない。この記事は、そんな人のために書きました。
ドット絵の基本的な描き方の手順と、無料で使えるツール、きれいに見せるコツを紹介します。
ドット絵とは：小さな四角を並べて描く絵
ドット絵（ピクセルアート）は、画面の1マス（ピクセル）を1つずつ塗って描く絵のことです。 昔の家庭用ゲーム機では、表示できる色や画素の数が限られていたため、少ないマスと色で表現する描き方が発達しました。今では、その味わいを生かした表現として、インディーゲームでもよく使われています。
普通のイラストと比べて、次のような特徴があります。
- 小さなサイズで描ける：16×16マスや32×32マスほどでキャラクターが描ける
- 線の上手さに左右されにくい：1マスずつ置いていくので、ペンを思いどおりに動かせなくても描ける
- アニメーションにしやすい：描く量が少ないので、歩く・跳ぶなどのコマを用意しやすい
ゲームに使う素材を自分で作れると、作品の個性が出しやすくなります。すぐに使える素材が欲しいときは、ゲーム素材のフリーサイトも参考にしてください。
ドット絵の作り方：5つの手順
ドット絵は「大きさを決める → 形をとる → 色を塗る → 影と光をつける → 書き出す」の順で描きます。 最初は16×16マスくらいの小さなキャラクターやアイテムから始めるのがおすすめです。
1. キャンバスの大きさを決める
まず、何マス×何マスで描くかを決めます。 ゲームのキャラクターなら、16×16、32×32、48×48 あたりがよく使われます。小さいほど描くマスが少なくて済みますが、表現できる細かさも減ります。
| 大きさ | 向いているもの |
|---|---|
| 16×16 | アイテム、アイコン、小さなキャラクター |
| 32×32 | ゲームのキャラクター、敵、マップの部品 |
| 64×64 以上 | 細かく描き込みたいキャラクター、立ち絵 |
ゲームに使う場合は、マップの1マスの大きさに合わせておくと、あとで並べたときにずれません。
2. 線で形をとる
1色で、キャラクターの外側の形（シルエット）を描きます。 最初は大まかに置いていき、あとから1マスずつ整えていけば大丈夫です。
ドット絵の線は、マスが斜めや角だけでつながるように置くのが基本です。線が太くなったり、段差の幅がばらばらだったりすると、ガタガタした見た目（ジャギー）になります。斜めの線は「2マス進んで1段上がる」のように、規則正しい段差にすると、なめらかに見えます。
3. 少ない色で塗る
形ができたら、色を塗ります。 ドット絵では、最初に使う色を決めておき（パレット）、その中の色だけで塗るのがコツです。色数を絞ると、全体にまとまりが出ます。
小さなキャラクターなら、肌・髪・服など部分ごとに2〜3色、全体で十数色ほどに収めると、ドット絵らしいすっきりした見た目になります。
4. 影と光をつける
光がどちらから当たっているかを決めて、反対側に影の色、当たる側に明るい色を置きます。 たとえば左上から光が当たっているなら、右下に影をつけます。基本の色、影の色、明るい色の3段階があれば、立体感が出ます。
影の色は、基本の色を単に暗くするより、少し青や紫に寄せると、くすまずに自然に見えます。
5. 書き出して、ゲームで使う
描き終えたら、PNG 形式で書き出します。 PNG なら背景を透明にでき、色もにじみません。JPEG は色が劣化してドットがにじむので、ドット絵には向きません。
拡大して使うときは、2倍、3倍のように整数倍で拡大します。中途半端な倍率で拡大したり、なめらかに補間する設定で拡大したりすると、ドットがぼやけてしまいます。ゲームエンジンで使う場合も、画像の補間（フィルター）を「なし」や「ポイント」にしておくと、くっきり表示されます。
無料で使えるドット絵ツール・アプリ
専用のツールを使うと、グリッドの表示、色の管理、アニメーションの確認がしやすくなります。 まずは無料のものから試してみましょう。
| ツール | 使う場所 | 料金 | 特徴 |
|---|---|---|---|
| Piskel | ブラウザ（オフライン版もあり） | 無料 | インストール不要。アニメーションと GIF 書き出しができる |
| Aseprite | Windows・macOS・Ubuntu | 有料（体験版あり） | ドット絵とアニメーションの定番ツール |
| LibreSprite | Windows・macOS・Linux・Android | 無料 | Aseprite がオープンソースだった時期のコードから分かれた、オープンソース版 |
| dotpict | スマホ（iPhone など） | 無料（アプリ内課金あり） | スマホで手軽に描ける。毎日のお題などで描く習慣をつけやすい |
Piskel：ブラウザですぐ始められる
Piskel は、アニメーションつきのスプライト（ゲームのキャラクター画像）とドット絵のための、無料のオンラインエディターです。 ブラウザで開くだけで描き始められ、描きながらアニメーションの動きを確認できます。アニメーション GIF や、ゲームで使いやすいスプライトシート（コマを1枚にまとめた画像）として書き出せます。
Windows、macOS、Linux 向けの無料のオフライン版もあり、オープンソースで公開されています。最初の1枚を描くなら、Piskel から始めるのが手軽です。
Aseprite：本格的に描くならこれ
Aseprite は、ドット絵とアニメーション制作のための有料ツールで、インディーゲームの制作でよく使われています。 レイヤー、アニメーションのタグ付け、前後のコマを薄く表示して描けるオニオンスキン、パレットの管理など、ドット絵に必要な機能がそろっています。
体験版（Trial Version）が用意されているので、まず試してから購入を決められます。お金をかけたくない場合は、Aseprite の以前のバージョンをもとにした無料の LibreSprite という選択肢もあります。
スマホで描くなら dotpict
スマホで描きたいなら、ドット絵アプリの dotpict があります。 App Store では無料（アプリ内課金あり）で配信されていて、通勤中などのすき間時間に少しずつ描けます。描いた作品を投稿して、ほかの人の作品を見られるのも、続けるきっかけになります。
ドット絵をきれいに見せるコツ
ドット絵の上手さは、マスの置き方の細かな気配りで決まります。 次のポイントを意識するだけで、見た目が大きく変わります。
- 線の段差をそろえる：斜めの線は「1・1・1」「2・2・2」のように同じ長さの段差が続くようにする
- 余計な1マスを消す：線の角にできる、2マスが L 字に重なった部分を1マス削ると、線が細くすっきりする
- シルエットで判別できるか確かめる：全部を1色で塗りつぶしても、何の形か分かるようにする
- 縮小表示で確認する：ゲームで表示される実際の大きさで見て、つぶれていないかを確かめる
- ほかの人の作品をよく見る：好きなゲームのドット絵を拡大して、色数や影の置き方を観察する
まとめ
ドット絵の作り方は、次の5つの手順です。
- 16×16 や 32×32 など、キャンバスの大きさを決める
- 1色でシルエットを描き、線の段差を整える
- パレットを決めて、少ない色で塗る
- 光の向きを決めて、影と明るい色をつける
- PNG で書き出し、整数倍で拡大して使う
最初は上手に描けなくても、小さなアイテムを何個か描くうちに、マスの置き方の感覚がつかめてきます。まずは Piskel を開いて、16×16 のりんごを1つ描いてみてください。描いたドット絵でゲームを作るなら、個人でゲームを作る方法も参考にしてください。
完成したゲームは、Devoch に掲載して、遊んでくれる人に届けることができます。
