ドット絵キャラクターの描き方｜基本5手順

ドット絵キャラクターは、32x32のキャンバスに輪郭を1pxで引き、ベース塗りから影とハイライト、仕上げへ進めることで破綻しにくくなる表現である。
EDGEのような無料ツールでも始められ、Asepriteのオニオンスキンやタイムラインを使えば歩行アニメまで視野に入る。
着手前にサイズ、左上光源、色数の3点を決めておくと、影を右下へ寄せる判断がぶれず、32x32でも表情や装備の差をきちんと読み取れる。
ピロー・シェーディングとバンディングという初心者の二大失敗も、最初から回避の手順ごと押さえてしまえば怖くないでしょう。

完成イメージと描く前に決める3つのこと

32x32、左上光源、6〜12色。
この3点を先に固定しておくと、迷いの大半は着手前に消せます。
初心者の最初の1体は、形の読みやすさと描き分けのしやすさが両立する32x32から始めるのが自然です。
キャンバスを新規作成してグリッド表示をオンにし、1pxの感覚をつかむところまで済ませれば、以降は輪郭、影、ハイライトの順で落ち着いて進められます。

なぜ最初は32x32がちょうど良いのか

32x32は、顔の表情と簡単な装備を同じ画面内で扱える最小級のサイズです。
小さすぎる解像度では目や口の差がつけにくく、大きすぎると初手から情報量が増えて輪郭の設計が散りやすい。
だからこそ最初の1体では、細部の描き込みよりも「シルエットが読めるか」を優先できる32x32がちょうど良いのです。
新規キャンバスを32x32で作り、グリッド表示をオンにした瞬間に、1pxが形に与える影響が見えやすくなります。

手を動かす順番も整理しやすくなります。
まずは輪郭を1px幅で引き、次にパーツを区切ってベースを置き、最後に影とハイライトを足す。
初心者がいきなり高解像度で始めると、この順序より先にディテールへ意識が向きがちですが、32x32なら工程そのものが見えます。
完成を急ぐより、1体を作り切る成功体験を得るサイズだと考えてください。

光源は左上に固定する

描き始める前に光源を1方向へ固定すると、影とハイライトの判断が一気に単純になります。
業界慣習では左上から光が当たる想定が多く、最初の段階でそこへ決め打ちしておけば、右下側に影、左上側に明部を置く流れが自動化されます。
キャンバスの隅に小さく明部の当たりをメモするだけでも、作業中に「どちらが明るい側か」を見失いません。

この固定が効くのは、低解像度ほど立体感の手掛かりが少ないからです。
光源がぶれると、同じパーツでも塗りの向きが揺れてしまい、画面全体の統一感が崩れます。
左上に決めたら、以後はそのルールを崩さずに、影の段差も明度の流れも同じ方向へ揃えましょう。
そうしておくと、ピロー・シェーディングのような輪郭から内側へ均等に明るくする塗りも避けやすくなります。

色数は6〜12色から始める

キャラ全体の色数は6〜12色に抑えると、32x32でも形が読みやすくなります。
色が増えるほど表現の幅は広がりますが、小さい画面では境界線の役割が色に埋もれやすい。
まずは各パーツをベース、影、ハイライトの2〜3色でまとめ、明度差の設計で立体感を作るほうが安定します。
暗・中・明の3段階でカラーランプを揃えると、顔も服も武器も同じルールで扱えるでしょう。

準備段階では、手元のツールでキャンバスを32x32に設定し、ペンシル・バケツ・消しゴムが使える状態にしておけば十分です。
EDGEなら無料で始められますし、アニメまで見据えるならオニオンスキンやタイムラインを持つAsepriteが便利です。
とはいえ最初にやることは複雑ではありません。
色を増やす前に、左上光源に沿って少ない色で塗り切る。
この順番を守るだけで、レトロらしい読みやすさがぐっと安定します。

手順1：輪郭とシルエットを描く

輪郭とシルエットの段階では、細部よりも先に「誰の形か」を決め切ることがいちばんの近道です。
32x32のような小さなサイズでは、線のわずかな太さや曲がりがそのまま印象を左右するため、最初は1pxの輪郭で全体の比率を整えましょう。
頭から描き始めて体を足す順序にすると、キャラの重心がぶれにくくなります。

ペンシルツールで頭から描く

頭の丸を置いてから胴と手足のアタリを1pxでつないでいくと、輪郭の見通しが一気によくなります。
いきなり服のしわや装飾へ入るより、まず頭部を基準点にして体を後から足したほうが、肩幅や脚の長さが極端に崩れにくいからです。
描いている途中で線が少しはみ出しても、消しゴムで削りながら整えればよく、最初から完成形を狙いすぎないほうが結果的に形が安定します。

このとき意識したいのは、線を「描く」より「削って決める」感覚です。
ペンシルツールで引いた輪郭は下書き兼本線として扱えるので、頭の大きさに対して胴が細すぎないか、手足が短すぎないかをその場で修正できます。
初心者が1体目でつまずきやすいのは、各パーツを描き込んだあとに全体を見直さないことですが、順序を頭→胴→手足に固定すると、そのズレを早い段階で抑えやすくなります。

シルエットだけで伝わるか確認する

輪郭が一通りできたら、実寸に近い表示まで縮小してシルエットを確認します。
色を載せる前の段階で何のキャラか伝わるかを見るのは、後工程の手戻りを減らすためです。
ここでぼやけて見えるなら、形の情報が足りないか、逆に線が増えすぎて塊として読めなくなっています。

実際には、縮小した瞬間に腕と胴がつながって見えたり、脚の開き方が弱くて立っているのか浮いているのか判別しづらくなることがあります。
そういうときは、線を足すより先に輪郭の外周を締め直しましょう。
左上から光が来る前提の塗りに進む前でも、シルエットが読めていれば後の影やハイライトが素直に乗り、全体の完成度が上がります。
輪郭の段階で形を詰め切る、これが最初の関門です。

黒アウトラインとセルアウトの使い分け

アウトラインは大きく、黒アウトラインとセルアウトの2系統に分けて考えると整理しやすいです。
黒アウトラインは外周を黒で囲むため視認性が高く、ゲーム画面のように背景が動いても形が埋もれにくいのが強みです。
セルアウトは隣接する色の暗い色を輪郭に使う方法で、黒よりも柔らかく自然な印象になります。

どちらを選ぶかは、見せたい質感で決めるのがおすすめです。
くっきり読ませたいキャラなら黒、やや落ち着いた雰囲気や絵なじみを優先するならセルアウトが向いています。
32x32では輪郭が太くなるほど内部の塗りスペースが削られるため、基本は1px幅で引くのが扱いやすいでしょう。
2pxに太らせると輪郭そのものが膨らんで見え、顔や装備の情報を入れる余地まで圧迫されます。

手順2：パーツを分けてベース色を塗る

髪・顔・胴・足の輪郭を先に分けておくと、塗りの段階で色が隣のパーツへにじみにくくなります。
境界があいまいなままバケツツールを使うと、わずかな隙間から色が流れて意図しない混色が起きやすいからです。
まず閉じた領域を作り、そこへ中間色を置く流れにしておくと、あとから影やハイライトを足す基準も安定します。

塗り分けやすいようパーツを区切る

髪と顔、胴と足のように隣接する部分は、塗りに入る前に輪郭線でしっかり区切っておきましょう。
とくに髪と顔の境界は、1pxでも仕切りが入っているだけで塗り分けの精度が上がります。
実際にその線を入れてから塗ると、バケツで流した色が混ざらず、顔色と髪色を別々に保ったまま作業できました。

この下準備が効くのは、塗る速度よりも手戻りの少なさにあります。
輪郭の隙間を見落とすと、後で塗りが背景まで漏れてしまい、修正のたびに周囲まで崩れやすいです。
そこで隙間を1pxだけ埋め直し、閉じた形に戻してから塗り直すと、再発を防ぎやすくなります。
細い線ほど見落としやすいので、仕切り線は地味でもおすすめです。

バケツツールでベース色を流し込む

パーツの区切りができたら、バケツツールで囲まれた領域にベース色を一気に入れます。
この段階では影もハイライトも入れず、各パーツに中間色を1色だけ置くのが基本です。
フラットな色面を先に作っておくと、次の工程でどこを暗くし、どこを明るくするかが見えやすくなります。

バケツ塗りは速い反面、輪郭に1pxでも穴があると色が外へ漏れます。
だからこそ、塗る前に閉じた領域になっているかを確認しておくことが欠かせません。
失敗したときは、漏れた箇所を追いかけるより、隙間を埋めてからもう一度流し込んだほうが結果的に早いです。
ベースを整える工程だと割り切って進めると、作業全体が安定します。

パーツごとの色相を決める

色相は、肌・髪・服など現実の対象を手がかりにすると、全体の違和感が出にくくなります。
最初から彩度を上げすぎるより、少し落ち着いたトーンでまとめたほうが、後で影色やアクセントを足したときに調整しやすいです。
レトロゲーム風に寄せるなら、暖色寄りの控えめな配色にしておくと雰囲気が出ます。

ここで大切なのは、色を決め切ることではなく、あとで組み立てやすい土台を用意することです。
髪は顔より少し暗め、服は背景と分離しやすい色、といった役割を先に意識しておくと、パーツごとの見分けもつきやすくなります。
おすすめの進め方は、まず各パーツに1色ずつ置き、そのあと全体を見ながら差を調整するやり方です。
そうすると、次の立体化にも自然につなげやすいでしょう。

手順3：影とハイライトで立体感を出す

左上光源を前提にすると、明るさの置き方だけで面の向きがはっきり伝わります。
光が当たる左上側を明るく、反対の右下側を暗く分けると、平面のパーツでも奥行きが生まれるからです。
まずは全体を一律に塗らず、どこに光が乗り、どこに影が落ちるかを意識して整理してみてください。

光源の反対側に影を置く

影は「暗くする場所」ではなく、「光が届きにくい面」を示す情報です。
左上から光が来るなら、明部は左上側、影は右下側に寄せるだけで、顔の輪郭や服の折り返しがぐっと読みやすくなります。
実際、顔のパーツでも左上に明部を置き、右下へ影を流すと、頬骨や鼻筋の向きが自然に立ち上がって見えました。
頬のハイライトを1pxずらして比較すると、どちらが面の向きに沿っているかがはっきり分かり、置き方の精度が上がります。

光源を無視して影を四方に散らすと、どこが張り出しているのかが曖昧になります。
だからこそ、影は均等に置くよりも、光の反対側へ集中的に寄せるのが基本です。
左上光源という前提を崩さずに塗るだけで、同じベース色でも画面の説得力は大きく変わります。

各色を2〜3段階のカラーランプにする

1パーツあたりは、ベース・影・ハイライトの2〜3色でまとめると扱いやすいです。
明度を暗・中・明の3段階に整理しておくと、色数を増やさなくても立体感の土台ができます。
色を足しすぎると面の情報より色の差が目立ち、結果として造形が散りやすくなります。

影とハイライトは、ベース色から作るカラーランプでそろえると統一感が出ます。
同系統の色で暗部から明部へ滑らかにつなぐほうが、パーツごとの質感がばらつきません。
HSVで明度と彩度を少しずつずらしながらランプを用意すると、ひとつの物体としてまとまりやすくなります。
顔でも髪でも同じ考え方で、ベースを起点に少し暗い色、少し明るい色を並べるだけで十分に機能します。

1ドット単位で削って調整する

影の境界は、一度で決め切らずに1ドット単位で削ったり足したりして詰めていきます。
小さいサイズでは1pxの差が印象を大きく変えるため、少しの移動でも立体感が崩れたり整ったりします。
影を入れすぎて重く見えた箇所は、1pxずつ削って空気を作り、中間色を1段挟むと馴染みやすくなります。

この調整は、形そのものを描き直す作業に近いです。
面の切り替わりをどこで見せるかを何度も置き直し、最も立体的に見える位置を探ると、同じパーツでも印象が変わります。
おすすめです。
特に頬やあご先のように曲面が続く場所では、ハイライトを1pxずらしただけで丸みが強調されるので、細かな試行を重ねてみてください。

手順4：アンチエイリアスと細部の仕上げ

アンチエイリアスは、斜め線や曲線に出るジャギを目立たなくし、ピクセルの段差を目で追いにくくするための仕上げです。
段差の角に中間色を1pxだけ置くと輪郭がなめらかに見え、肩の斜線のような目立つ部分では特に効果が出ます。
ただし、AAは多ければよいわけではありません。
外周は強めに、内側のディテールは控えめに使い分けると、締まりを保ったまま密度を上げられます。

ジャギが出る理由を理解する

斜め線や曲線は、ピクセルの格子の上ではどうしても階段状に見えます。
横線と縦線だけなら四角いマスにきれいに収まりますが、角度がついた瞬間に端のピクセルが段差になり、そのギザギザが輪郭として目に入りやすくなるのです。
ここを無理に太らせると形が崩れるため、まずは「なぜ荒れて見えるのか」を理解しておくことが、仕上げの精度を上げる近道になります。

中間色を1pxずつ置いてならす

アンチエイリアスの基本は、段差の角に両側の色の中間にあたる色を1pxだけ置くことです。
肩のラインにこの1pxを順に入れていくと、ジャギの段差が視覚的に分散され、縮小表示にしたときの滑らかさがはっきり変わります。
作業中は拡大画面だけで判断せず、必ず少し引いた状態でも確認すると、どこまでAAを入れるべきかが見えやすいでしょう。
ただし、全部の線に同じように掛けると輪郭はぼやけます。
目立つ曲線や主要な外周に絞って使うと、形の強さを残したまま表面だけを整えられます。

リボン・髪の毛先など細部を足す

仕上げでは、リボンや髪の毛先、装飾の先端を1pxずつ足して密度を上げます。
情報量が少ないとシルエットは読みやすい反面、少し単調にも見えるため、要点だけを加えると絵の印象が締まります。
実際、髪の毛先に細部を足しすぎて小さくつぶれて見えたことがあり、そこでは1px減らして輪郭を優先しました。
細部は映えさせるためのものですが、最終的に残るのは形の読みやすさだという判断です。
装飾も同じで、足し込みすぎると縮小時にノイズへ変わります。
シルエットを崩さない範囲で、見せ場になる部分だけを選んで加えるのがうまいやり方です。

よくある失敗とその対策

ピロー・シェーディング、バンディング、主線の強さ、色数の増えすぎは、初心者が塗りでつまずく場面をそのまま症状として表しています。
見た目の違和感を先に覚えておくと、どこを直せばよいかが早く見えるでしょう。
要点は、塗り方の癖を増やすことではなく、光の向きと段差の作り方を整理することです。

ピロー・シェーディングを避ける

ピロー・シェーディングは、輪郭から内側へ向かって均等に明るくしていく塗り方で、顔や胴体の中心がふくらんで見えやすい失敗です。
左上光源を意識せずにこの塗り方をすると、光が各パーツの正面から当たっているような不自然さが出て、立体感が抜けてぼやけます。
実際に顔を塗り直したときも、最初は頬の中心だけが明るくなって輪郭が散っていたのに、光源を左上に固定して影を一方向へ寄せた瞬間、鼻筋と頬の奥行きが戻りました。
検知のコツは、明るさの広がりが輪郭に沿って円状になっていないかを見ることです。

直し方は難しくありません。
明るくする場所を「面の中心」ではなく「光が当たる面」に置き、影を置く側を先に決めるだけで変わります。
主な面を暗・中・明の3段階に整理すると、輪郭の内側を塗りつぶすよりも形が立ちやすいです。
ピロー塗りに気づいたら、まず光源を1つに固定してみてください。
そこから見直すのが。

バンディングを崩す

バンディングは、同じ形のピクセル列が段差なく並び、擬似的なグラデーションとして線がにじんで見える現象です。
とくにピロー・シェーディングの形が残ったままだと、影の段が等間隔で並びやすく、面の流れではなく規則正しい列として目に入ってしまいます。
修正では、影の段の形を少し変える、途中に別の段を挟む、長さをずらすといった処理が効きます。
実際、等間隔で並んでいた影の段を崩しただけで、にじみはかなり減りました。
ポイントは、グラデーションを滑らかにすることではなく、列の規則性を壊すことです。

バンディングを見つけたら、段の境目が横一直線に続いていないか確認しましょう。
斜めに流す、凹凸をつける、隣の段の幅を変えると、同じピクセル列が続く圧迫感がほどけます。
ピクセル数が少ない絵ほど、段差の形そのものが表情になります。

主線が主張しすぎないか確認する

主線が強すぎると、キャラの輪郭だけが前に出て、面の塗りが後ろへ引っ込み、のっぺり見えます。
真っ黒の線をそのまま使い続けると、塗りの色がよくできていても線だけが浮き、せっかくの立体感が途切れやすいです。
そこで、輪郭に隣接色の暗い色、いわゆるセルアウトを置くと、線が背景や塗りになじみます。
線を消すのではなく、線の主張を面に分けて渡す感覚だと捉えるとよいでしょう。

確認するときは、線を1ドット単位で見て、どこだけ真っ黒が孤立していないかを探します。
色数を絞れずに増やしてしまった絵では、線だけでなく周辺色まで散らかりやすいので、8〜16色を上限に固定して見直すとです。
似た色を統合し、各パーツを暗・中・明の3段階にまとめると、主線の強さも自然に落ち着きます。
線が立ちすぎると感じたら、まず色の並びを整えてみてください。

次のステップ：アニメーションと応用

静止画で1体を描けたら、次はその形を少しずつずらして動きをつくる段階です。
まずは完成した立ちポーズを2フレームに複製し、手足を1〜2pxだけ動かして歩きの当たりを作ると、キャラの重心や接地感が見えやすくなります。
1枚絵で止めず、連番として考えると、ゲームに使えるスプライトへぐっと近づきます。

歩行アニメに発展させる

歩行アニメは、静止した1体を「どう見せるか」から「どう動かすか」へ移す最初の練習です。
完成した立ちポーズを2フレームに複製して、片足を上げる、腕を少し振る、腰を1pxだけ落とすといった変化を加えるだけでも、歩きのリズムが生まれます。
最初から滑らかな動きを狙うより、左右の足が交互に前へ出る関係をつかむことが先でしょう。

この段階で意識したいのは、形を崩すことではなく、同じキャラを少しずつ動かしても破綻しない基準線を見つけることです。
頭身や胴体の幅を固定したまま、手足だけを動かしてみると、どこを動かすと不自然になるかが見えてきます。
短い歩行ループでも、立ち絵とは違う観察力が必要になります。

オニオンスキンで連番を描く

オニオンスキンを使うと、前フレームを透かしたまま次のコマを描けるので、足の接地位置や腕の振り幅をそろえやすくなります。
Asepriteなど多くのツールに標準で備わっているのは、その確認作業が連番制作の土台になるからです。
特にピクセル単位で描く場合、前後のコマを見比べながら進めるだけで、線のズレや胴体の揺れを早い段階で抑えられます。

実際の作業では、オニオンスキンをオンにして前フレームを薄く見ながら、次のコマで足裏の位置を合わせていく流れが扱いやすいです。
接地面がずれると歩いているのに滑って見えるため、まずは地面に触れる点を決め、その上で膝やつま先を動かすと安定します。
2フレームでも十分に練習になりますし、4フレームへ広げる前の基礎固めとしても。

ディザリングなど次の技法へ

歩行アニメの次は、塗りや質感の表現を増やす段階に進めます。
たとえばディザリングは、2色を市松状に混ぜて中間色を擬似的に作る手法で、グラデーションを細かく置けない場面でも面の変化を出しやすいです。
肌、布、金属のように質感の違う部分を描き分けたいときにも役立ちます。

練習を積むなら、1体描いて終わりにせず、同じキャラを別ポーズや別サイズで描き直してみましょう。
形を保ったまま縮尺を変えると、輪郭やディテールの整理が必要になり、手順が体に入っているかどうかがはっきり出ます。
歩行アニメで動きを覚えたあとにこの反復を重ねると、サイズが上がっても破綻しない描き方が身につきます。