ドット絵 キャラクター描き方｜32x32で魅力的に見せるコツ

拡大表示では整って見えたのに、等倍へ戻した瞬間に目を1pxずらしただけで表情が別人になる。
32x32のドット絵は、その1pxがキャラクターの魅力も読みにくさも決めます。
黒ベタのシルエットにして「誰かわかるか」を先に確かめると、足すべき情報と削るべき情報がすっと見えてきます。

この記事は、32x32・4〜16色という小さな制約の中で、初心者でも“つぶれない”キャラクターを完成まで持っていきたい人に向けた実践ガイドです。
シルエット、情報の優先順位、色数制限、1px修正の考え方を順に整理し、静止画を仕上げたあとに4フレーム歩行（100〜150ms）へ発展させるところまで、制作の流れに沿って具体的に進めます。

32x32がドット絵キャラクター入門に向いている理由

16x16の特性

16x16は、ドット絵の「省略」を最短で叩き込んでくれるサイズです。
1ピクセルごとの意味がむき出しになり、髪の流れ、目の位置、服の切り替えを少しでも欲張ると、すぐに塊同士がぶつかって潰れます。
アイコンや超小型スプライトには向いていますが、キャラクターとして個性を読ませるには余白が足りません。

顔まわりだけ見ても、16x16では目を描くというより「顔の向きと明暗で顔らしく見せる」発想が先に来ます。
髪型も前髪の形を描き分けるというより、頭の外形を変えて印象差を作る比重が大きくなります。
服装も襟、袖、ベルトのような要素を並べると情報が競合しやすく、結果として何を見せたいのかがぼやけます。

このサイズは制約が強いぶん、ドット絵らしい整理を学ぶには向いています。
ただ、入門段階でキャラクターを「それっぽい人型」から一歩進めて、「このキャラだ」と認識できるところまで持っていくには難所が多いです。
小さすぎるサイズは、学習になる以前に情報が潰れてしまい、初心者が手応えを得る前に詰まりやすいという壁があります。

32x32の特性

32x32は、特徴を載せられる最小クラスです。
目、髪型、服装の記号をそれぞれ最低限の形で置けて、なおかつ1pxの差が見た目に直結するので、ドット絵の基本である「何を残して何を捨てるか」が自然に身につきます。
ゲームのキャラクタースプライトで定番になっているのもこのバランスによるもので、入門サイズとして名前が挙がり続ける理由もここにあります。

16x16から32x32へ上がると、使える面積は4倍になります。
増えた面積をそのまま情報の詰め込みに使うのではなく、顔・髪・胴体・手足に役割を配分できるようになるのが大きいです。
たとえば顔なら、目をただの点で置くか、白目と輪郭を分けるかという選択肢が生まれます。
髪なら、全体を一塊で置くのではなく、前髪と後頭部のボリューム差を作れます。
服も、上着とインナー、靴と脚の境界が読み取れる段階まで持っていけます。

制作中にいちばん「32x32は入門に向いている」と実感するのは、髪の処理です。
前髪を細かく刻んでいた段階ではノイズに見えていたことがあり、実務的な目安としては房を2〜3塊にまとめると等倍で読みやすくなる場合が多いという感触が得られます。
この転換点があるサイズは、初心者にとって学びが深いです。

32x32はアニメーションとの相性も良好です。
歩行なら4フレームでも成立し、6フレームまで使えば動きに余裕を持たせられます。
上下動を1〜2pxだけ付けても歩いて見え、手足を少し大きめに設計すると動きの読み取りも安定します。
静止画だけでなく、スプライトとして動かす前提で学べる点でも、入門サイズとして筋が通っています。

図で比較するなら、同じキャラを16x16・32x32・64x64で横に並べ、「16x16では髪型は外形差中心、目は最小限、服飾は記号化」「32x32では髪の房、目の位置、服の切り替えが読める」「64x64では装飾や表情差まで載る」と説明すると、情報量の差が一目で伝わります。
alt textは「同一キャラクターを16x16、32x32、64x64で横並び比較。
16x16では髪型・目・服飾の情報が簡略化され、32x32で主要な特徴が読め、64x64で装飾と表情が増える図」くらいの具体さがちょうどいいです。

64x64の特性

64x64になると、表情、髪の段差、服の装飾、関節まわりの形まで持ち込めます。
情報量が増えるので、描けるものは確実に増えます。
ただし、入門サイズとして見ると別の難しさが出ます。
余白があるぶん省略の圧力が弱まり、ピクセルアートとしての整理を後回しにしたまま描き進められてしまうからです。

このサイズで起きやすいのが、「ドット絵」ではなく「縮小イラスト」に寄っていくことです。
輪郭線の外側にも内側にも情報を足せるので、髪の毛を1本ずつ追い、服のしわを増やし、陰影も滑らかにつなぎたくなります。
ところが等倍で見ると、その丁寧さがそのまま可読性になるとは限りません。
むしろ細部が散って、印象の芯が弱くなる場面が出ます。
私も64x64で情報を盛りすぎたキャラを等倍に戻したとき、完成度が上がったというより、小さくした通常イラストに見えたことが何度もあります。

64x64は悪いサイズではなく、用途が違います。
ポートレート寄りの立ち絵や高精細スプライトにはよく合います。
ただ、1pxの価値を学ぶ最初の一歩としては、情報を置ける余地が広すぎます。
削る理由が弱いまま進めると、ドット絵ならではの「1pxを置く必然」がぼやけます。
小さすぎる16x16では特徴が潰れ、大きすぎる64x64では整理の甘さが見逃されやすい。
その中間にある32x32は、情報量と読みやすさの釣り合いが最も取りやすく、キャラクター入門の基準点として収まりがいいです。

描く前の準備｜キャンバス・グリッド・パレットを決める

キャンバスと表示設定

描き始める前に作業環境を固めておくと、後半の修正量が目に見えて減ります。
32x32のドット絵では、1pxの線幅や1段階の明度差がそのまま印象差になるので、最初の設定が曖昧だと「線がにじむ」「色が分かれない」「端で欠ける」といった事故が連鎖します。
キャンバスは32x32で作成し、拡大表示と等倍表示をすぐ行き来できる配置にしておくと、細部の調整と見た目の判定がぶれません。

表示倍率は大きくして作業しつつ、100%表示のプレビューを常時見える位置に置くのが定番です。
Asepriteのように最近傍補間を選べるツールなら、32x32を10倍前後まで拡大しても各ピクセルがそのまま角ばったブロックとして表示されるため、輪郭の欠けや余分な1pxを拾いやすくなります。
作業画面では拡大、判断は等倍、という役割分担を最初から作っておくと、拡大時だけ整って見える錯覚に引っぱられません。

アンチエイリアスは、実務上の目安としてまずOFFにして始めることを推奨します。
ツールや表現目的による例外はあるため、AAを使う場合は等倍表示での確認を必ず行ってください。
設定を見落とすと、ペンは1pxで描いているつもりでも境界に中間色が混入し、輪郭がぼけることがあります。

図を入れるなら、32x32キャンバス設定画面のキャプチャがあると伝わりやすいのが利点です。
alt textは「32x32ピクセルの新規キャンバス設定画面。
幅32、高さ32、拡大プレビューを併設した例」といった書き方なら、何を見せたい図かがすぐ伝わります。

グリッドと1pxツールの確認

32x32では、描き始める前のチェックを1分で済ませるだけでミスが減ります。
グリッド表示はON、ブラシは1px、拡大時の補間は最近傍、そしてキャンバス端に線や塗りが張り付きすぎていないかを見る。
この4点が揃っていれば、少なくとも「描いているつもりのドット」と「実際に置かれているドット」のズレを避けられます。

グリッドは、常に頼るためというより、1マスずつ意識して置く感覚を維持するために有効です。
特に斜線や曲線では、1pxずつ階段状に並ぶリズムが崩れると、輪郭だけが浮いて見えます。
グリッドを見ながら描き、一定の間隔で100%表示に戻すと、整っている線とノイズっぽい線の差がはっきりします。
拡大表示だけで進めると、3pxの塊も「小さな調整」に見えてしまうのですが、等倍に戻すと表情やシルエットが別物になることは珍しくありません。

1pxブラシも見逃せない前提です。
鉛筆ツールが1px単位で置ける設定になっているか、にじみやぼかしを含むブラシになっていないかを最初に見ます。
ピクセル単位の補助があるツールでは、その機能を使うだけで意図しない二重線や角のふくらみが減ります。
32x32はキャンバスが小さいぶん、1pxの誤差が髪のハネにも、肩の厚みの違和感にも、そのまま出ます。

キャンバス端の1pxにも意識を向けたいところです。
端ぎりぎりまで描くと、あとでポーズ差分や歩行フレームを作る際に腕や髪がはみ出しやすくなります。
外周に1pxぶんの余白があるだけで、ポーズ変更時の逃げ場ができます。
静止画の時点では問題なく見えても、動かした瞬間に端で切れるケースは多いので、準備段階で余白を取る発想が効いてきます。

図解を置くなら、グリッドONとOFFの比較が有効です。
alt textは「同じ32x32キャラクター下描きをグリッドONとOFFで比較。
グリッドONでは1px単位の配置が把握しやすい例」としておくと内容が具体的です。

4〜16色パレットの組み方

パレットは4〜16色程度から始めると、情報の整理が進みます。
色数が増えるほど描き込めるように見えますが、32x32では色の多さがそのまま読みにくさへつながりやすく、肌・髪・服・アクセサリーといった主要パーツを少数の色でどう分けるかのほうが完成度を左右します。
少色で組むと、どの色が輪郭補助で、どの色が面の区別で、どの色がアクセントなのかが明確になります。

組み方の考え方としては、まずベース色を決め、その周辺に明るい色と暗い色を置きます。
肌、髪、服それぞれに必ず複数色が要るとは限りません。
肌は2色、髪は2〜3色、服は2〜4色、アクセント1色、輪郭補助1色くらいでも十分成立します。
同系色を並べるときは、色相差より明度差を先に確保したほうが等倍で読み取りやすくなります。
小さいスプライトでは「違う色を選んだ」ことより、「明るさが分かれた」ことのほうが視認性に直結するからです。

この明度差は、拡大中より等倍で差が出ます。
私自身、拡大表示では服と髪の境界が見えているつもりだったのに、100%に戻したら同じ暗さに見えて塊になっていたことがありました。
そこで服色を1段暗くしただけで、上半身のまとまりと腕の位置関係が急に読めるようになりました。
色の数を足すより、既存色の明るさを1段ずらすほうが効く場面は多いです。

パレットを並べる順番にも意味があります。
パーツごとに近い色をまとめておくと、後から服だけ差し替えるときに崩れません。
Asepriteのようにパレット管理ができるツールでは、色を整理しておくことで差分制作の手間が減ります。
全体で共通パレットを使う設計にも向きますし、1キャラごとに個性を出したいときも、増やしすぎの抑制が効きます。

図を添えるなら、8色の基本パレット例があると実践に落とし込みやすくなります。
alt textは「肌2色、髪2色、服3色、アクセント1色で構成した8色の基本パレット例。
明度差が分かる並び」としておくと用途が明快です。

出力形式の選択

保存形式は、静止画ならPNG、アニメーションならGIFを基準にするとドットの輪郭を保ちやすくなります。
PNGは可逆圧縮なので、1px単位で置いた色と境界をそのまま保持できます。
GIFも少色のアニメ表現と相性がよく、歩行の確認用として扱いやすい形式です。
JPGは非可逆圧縮のため色の境界が混ざりやすく、ドット絵には不向きです。

たとえば、正面向きなら肩幅と頭の対比がそのままキャラ差になります。
頭が大きく肩が狭いだけで幼さが出ますし、肩を横へ張るだけで頼もしさや重装感が出ます。
帽子をかぶせるなら、つばの横幅を頭からどれだけはみ出させるかで印象が変わります。
横向きでは顔の中身より、鼻の出方、前髪の落ち方、背中の反りや厚みのほうが先に読まれます。
私はラフの時点で黒1色に塗りつぶし、髪だけで誰か、武器だけで職業が伝わるかを見ることが多いです。
そこで判別できない形は、色を乗せてもたいてい埋もれます。

黒1色にして、不要な凹凸を1px単位で整理する

シルエット確認では、線画より黒ベタ表示のほうが判断が早くなります。
内側の情報が消えるぶん、輪郭のノイズだけが目立つからです。
この状態で見ると、意味のない出っ張りやへこみがすぐ見つかります。
よくあるのは、手の指先、髪のハネ、服の裾、武器の根元に生まれた1pxだけの突起です。
拡大中は「細かく描けている」と感じる部分でも、等倍では輪郭をざらつかせる原因になります。

実際、黒ベタで見たときに手の指の出っ張り1pxを削っただけで、全体がすっと締まる感覚があります。
情報量を減らしたというより、無駄な重量だけ落ちて身軽になったような見え方です。
輪郭の外周は、足し算より引き算のほうが効く場面が多く、1px削るだけで頭身まで整って見えることがあります。

具体例も挙げやすい部分です。
頭頂に尖った角が立っていたら、その先端を1px落として丸みに寄せると、髪の塊として読める形になります。
逆に武器の先端が埋もれているなら、刃先や銃身を1pxだけ延長すると、持ち物の存在感が前へ出ます。
どちらも変化量は小さいのに、等倍では印象差がはっきり出ます。

関節の角の処理は一つの手法として「2px→1px→2px」の階段リズムに整理すると読みやすくなることがあります。
斜めラインの幅をこの並びに揃えると、等倍で見たときのノイズが減る場合があるため、試してみる価値があります。

この段階で目指すのは、描き込みではなく判別です。
帽子がある、前髪が重い、肩幅が広い、長い武器を持っているといった外形だけで伝わる差が確認できれば合格ラインの目安になります。
色や装飾で差別化を図る前にシルエットで読めるかをチェックすると、32x32での情報競合を避けやすくなります。
まず黒ベタで読める形を作る。
この順番を守るだけでキャラクターの土台は安定します。

ステップ2｜32x32で情報を詰め込みすぎない顔と体の設計

32x32では、頭身の決め方が土台になります。
多くのチュートリアルでは入門段階の目安として2.5〜3頭身相当のデフォルメを推奨しており、頭をやや大きめに取ると顔の情報を確保しやすく、顔の可読性を優先した設計がしやすくなります。

このサイズでは、顔の中身を描き込むというより、配置で性格を作ります。
目、眉、口の位置関係がまとまっているだけで、情報量以上の説得力が出ます。
だからこそ、頭の大きさは「かわいく見せるため」だけでなく、「判断に使える顔面積を確保するため」に決めます。

目は32x32で最も変化効率の高いパーツです。
経験則として、2pxで置くか3pxで置くかだけでも印象が変わることが多く、目の幅・間隔・高さを1px単位で調整すると表情が大きく変わることがあります。
等倍での見え方を基準に、1pxずつ試してみてください。

口と鼻は最小限に留めるのが有効なことが多いです。
目安として口は1〜2px、鼻は省略するか1pxの点で表現するケースがよく見られますが、作品ごとに最適値は変わります。
眉は1pxでも感情を補えますので、まずは眉や口の位置で表情の調整を試してみてください。

髪束と服は「描写」ではなく「要約」で設計する

顔の次に詰め込みたくなるのが、髪の流れや服のしわです。
ただ、32x32ではここを描写で押し切ると一気に散らかります。
髪束は2〜3塊に要約して、前髪、横髪、後ろ髪のどこに特徴があるかだけ残すほうが強いです。
細い束を何本も立てるより、「重い前髪が額に落ちている」「片側だけ跳ねている」「後ろが丸くふくらむ」といった塊の差を見せたほうが、等倍で髪型として読めます。
髪束を3塊に減らした途端、画面全体が急に整理されて見えたときの納得感は大きく、描き込みを減らしたのに情報が増えたように感じます。
髪束と服は「描写」ではなく「要約」で設計します。
実務的な目安として髪束を2〜3塊に要約すると等倍で読みやすくなることが多いですが、最適な塊数はデザイン次第で変わります。
細い束を多数立てるより、前髪・横髪・後ろ髪のどこに特徴を残すかを決めて塊数を調整すると整理しやすくなります。
服も同様に、記号性の高い要素を優先して残すことを意識してください。
ベース塗りの段階では、まず肌、髪、服、アクセサリーをパーツごとにきっちり分けます。
このとき意識したいのは、色相の違いより明度の距離です。
肌と髪、髪と服、服とアクセがそれぞれ別の面として読めるかどうかは、等倍で見たときの明るさの差でほぼ決まります。
とくに肌・髪・服を近い明度にそろえてしまうと、配色自体は整っていても、32x32では境界が一枚に溶けて見えます。
同系色でまとめたい場面でも、片方を1段明るく、もう片方を1段暗くして、面の切り替わりだけは残しておくほうがキャラクターとして読めます。
ここで置く局所的な暗色は、パーツ境界を切り分けるための目安として1px程度を用いると効果的なことが多いです。
輪郭全周を濃い線で囲むのではなく、肌と髪が接する局所など埋もれやすいポイントだけに差し込むことで、線を増やさずに分離を取り戻せます。
色を置き始める前に、パレットの並びも決めておくと作業の迷いが減ります。
私がよくやるのは、肌系、髪系、服系という順で列を分ける並べ方です。
たとえば左から肌のハイライト・中間・影、その隣に髪の明・中・暗、その隣に服の明・中・暗、さらに装飾や金属色を置く、という形です。
こうしておくと、どの色がどのパーツ専用なのかが一目で分かり、うっかり髪の影色を服に流用して明度設計を壊す事故が減ります。

この整理は見た目の分かりやすさだけでなく、差し替えにも効きます。
服色の列だけを入れ替えれば、制服の青版、赤版、緑版のようなバリエーションが一瞬で作れます。
Asepriteで Indexed モードとパレット管理を組み合わせていると、この恩恵がとくに大きいです。
全フレームで同じインデックスを共有したまま服系の列だけ差し替えられるので、歩行アニメまで作った後でも衣装違いの展開が止まりません。
実際、服色だけ別列に分けておいたデータは、配色替えのたびに塗り直す必要がなく、管理面の気楽さが段違いでした。

色数は少なめに始め、足りない場所だけ広げる

ベース塗りの初期段階では、いきなり色を増やしません。
まずは8色前後で全体を成立させて、情報が足りない場所だけ追加していく流れのほうが安定します。
色が多いほど豪華になるわけではなく、明度設計が甘いまま色数だけ増えると、どの色が何の役目なのか分からなくなります。
肌3色、髪3色、服2〜3色、必要ならアクセ色を足す、くらいから始めると判断が速いです。
そこから影の段階差や金属パーツの反射が必要なら広げていき、上限は16色までを目安にすると、整理されたまま密度を上げられます。

配色で行き詰まったときに見直したいのも、色相ではなく明度です。
茶髪と茶色の服、青髪と紺服のように同系色を使うこと自体は問題ありません。
ただし、両方とも中間の暗さに置いてしまうと、髪の塊と肩のラインがつながって見えます。
同系色で統一感を出したいなら、髪を明るめ、服を暗めに振るか、その逆にして役割を分けます。
色味を遠ざけるより、明るさを離したほうが小さな画面では効きます。

1pxの境界色は「外周」ではなく「接地面」に置く

境界を見せたいからといって、全部を濃い輪郭で囲むと硬くなります。
顔まわり、袖と胴、髪と首元のように、パーツ同士が接する場所だけを選んで1pxの暗色を置くと、必要なところだけ分離できます。
これはアウトラインを強調する発想ではなく、ベース塗りの段階で面と面のあいだに小さな仕切りを作る発想です。
局所的に置くから、線画っぽさを増やさずに読解性だけを上げられます。

ベース塗りは、単に色を置く工程ではありません。
どのパーツを独立した面として見せるかを決める工程です。
ここで肌、髪、服の明度関係とパレットの並びを整えておくと、この後に影やハイライトを足しても崩れ方が小さく、色替えの展開も軽く回せます。

ステップ4｜影とハイライトは1px単位で立体感を足す

立体感は、広い面積を塗り分けるよりも、どちら側が光を受け、どちら側が落ちるかを1方向で統一するところから生まれます。
32x32では、光源を左上に置くなら左上は明るく、右下は暗くする、この約束を全パーツで崩さないことが効きます。
肩、胸、頬、膝のように丸みを感じさせたい場所では、右下側のエッジへ影色を1pxだけ差し込むと、平らだった面が起き上がって見えます。
私も胸板や肩の張りを調整するとき、等倍のまま右下に影1pxを置いた瞬間、さっきまで記号だった上半身に厚みが戻る感触を何度も味わってきました。
1pxなのに効き方が大きいのは、小さい絵ほど「明るい側と暗い側の境目」がそのまま形の説明になるからです。

ハイライトも同じで、左上から光が来るなら、髪の山、頬のふくらみ、肩先、胸の上面など、球や円弧として読ませたい場所に1pxから2pxだけ置きます。
ここで面全体を白っぽく持ち上げると、光っているというより色が抜けたように見えます。
狙うべきなのは、丸みの頂点だけを拾うことです。
髪束なら流れの途中ではなく、最も前へ出ている山。
頬なら輪郭線の内側を広く明るくするのではなく、左上のふくらみが当たる一点。
小さなハイライトは、描き込みではなく面の向きを示す記号だと考えると判断がぶれません。

曲線では、影やハイライトと同じくらい輪郭のジャギをどう処理するかが見た目を左右します。
肩や頬の外周はどうしても階段状になるので、その段差が急に折れて見えるところだけ、中間色を1px差し込んでアンチエイリアス（Anti-aliasing）を入れます。
ここでの中間色は、線をぼかすためではなく、角のきつさを1段だけ和らげるためのものです。
輪郭全周に入れる必要はありません。
むしろ入れすぎると境界がにじみ、せっかくのドットの芯が抜けます。
私は肩の丸みを柔らかくしたくて中間色を足したあと、等倍で見て少し眠く感じたら1pxずつ抜きます。
すると急に輪郭がシャキッと締まり、ここが引き算の最適点だったと分かることが多いです。

影、ハイライト、AAの量は、経験則として各パーツで局所的に1〜3px程度に収めることが多いです。
小さいサイズでは入れすぎると境界が曖昧になりがちなので、等倍での確認を繰り返しながら最小限を心がけてください。

1px具体例

たとえば肩を横向き気味に見せたい場面なら、ベース色だけの状態では「丸い塊」までは読めても、前に出ている感じは弱いままです。
ここで右下エッジに影色を1px置くと、肩の外周が一段落ちたように見え、肩先が前に張り出します。
Beforeでは上腕と肩の境目が平坦で、服の一部にも見えます。
Afterでは肩だけが一つの面として起き、腕との前後関係まで伝わります。

頬も同様です。
顔色のベースだけだと、輪郭の中に肌色が入っているだけで、頬骨やふくらみまでは伝わりません。
左上にハイライトを1px置くと、頬の丸みが急に前へ出ます。
Beforeでは顔全体がのっぺりして、目と口だけが浮いた印象です。
Afterでは、左上から光を受けた頬が先に見え、その下に口元が少し引っ込んで感じられます。
たった1pxでも、光源の方向と一致していれば「そこが膨らんでいる」と読むだけの情報になります。

輪郭のAAは、肩の外周や頬の斜めラインで効きます。
Beforeでは、1段飛ばしのきつい階段が目立ち、曲線なのに角張って見えます。
Afterでは、その折れが強い箇所にだけ中間色を1px差し込み、段差の急カーブを一度だけつなぎます。
このとき中間色を2px、3pxと並べると輪郭が曖昧になるので、まず1pxで止めるのが基準です。
引いた瞬間に硬さが戻るなら、その1pxは余分だったということです。

図解（alt text）

alt text: 32x32キャラクターの上半身比較。
左はベース塗りのみで肩と頬が平坦に見える状態、右は光源を左上に固定し、肩の右下エッジへ影色を1px、頬の左上へハイライトを1px追加して立体感が出た状態。
さらに肩の外周の階段が強い箇所に中間色を1pxだけ差し込み、アンチエイリアスで曲線を整えた位置を拡大表示で強調している。
入れすぎると輪郭がにじむため、追加ピクセルは局所に限定されている。

魅力的に見せる仕上げのコツ｜等倍確認・背景変更・反転チェック

仕上げでは、拡大表示で見えていた情報をいったん疑い、等倍で読めるかを基準に戻します。
ドット絵は拡大すると輪郭の乱れや色の境目を拾いやすくなりますが、完成品として見られるのは100%表示のほうです。
目、口、前髪、肩の傾きが等倍で一瞬で伝わるなら通っていますし、拡大中は整っていたのに等倍で顔が眠く見えるなら、まだ情報の置き方が甘いということです。
私は仕上げ段階に入ると、作業用の拡大画面より先に等倍のプレビューへ視線を戻します。
そこで読めない箇所だけを拡大して直す流れにすると、1px修正の目的がぶれません。

等倍で見ると崩れる場所を拾う

等倍確認でまず見るのは、顔まわりとシルエットです。
特に32x32では、片目の位置、口の高さ、肩線の傾きが1px違うだけで、表情が別のキャラに見えます。
拡大中は「ほぼ揃っている」と感じても、等倍では左右差がそのまま違和感になります。
目線が少し右へ流れている、顔だけ傾いて見える、輪郭の一部だけ欠けて見える、といった小さな崩れは、この段階で拾うのが最短です。

Asepriteのようにピクセル単位で触れるツールだと、この最終調整が速く進みます。
反転して見つけた違和感に対して、片目を1px下げる、顎先の欠けを1px埋める、肩の張りを1px引っ込める、といった修正をその場で返せるからです。
仕上げで効くのは大きな描き直しより、位置の微修正です。
仕上げで効くのは大きな描き直しより、位置の微修正です。
反転や等倍で違和感を見つけたら、片目を1px下げる、顎先の欠けを1px埋める、肩の張りを1px引っ込めるといった小さな修正を段階的に試して、等倍での読みやすさを確認してください。

完成直前ほど、背景を変えて見え方を試します。
白背景で映えていても、中間の灰色や黒背景に置いた瞬間に輪郭が沈むことがあるためです。
見るべきなのは、髪と服、服と肌、輪郭と背景の明暗差が残っているかどうかです。
背景を明・中・暗の3種類で切り替えると、どの面が埋もれるのかが一目で分かります。

私自身、白背景では問題なく見えていたキャラを灰色背景へ置いたとたん、髪と服の明度が近すぎて上半身が一枚の塊に見えたことがありました。
そのときは髪色をいじるより、服色を1段暗くしたほうが効きました。
すると首まわりの境界が戻り、顔の下に胴体がきちんと載って見えるようになります。
こういう埋もれ方は、拡大している最中より背景を変えた等倍表示で見つかります。
色数を足さなくても、既存色の明度差を少し開くだけで解決する場面は多いです。

左右反転で目線ズレと傾きをあぶり出す

もう一つ効くのが左右反転です。
描いている向きに目が慣れると、顔の傾きや目線のズレを脳が補正してしまいます。
反転するとその補正が外れ、片目だけ高い、鼻筋がわずかに流れている、前髪の重心が片側へ寄っている、といった崩れが急に見えます。
違和感の正体が見えたら、修正は大げさにせず1px単位で返します。

たとえば反転した瞬間に片目だけ1px高く見えたら、その目を1px下げるだけで表情が落ち着きます。
輪郭線の一部が反転側で欠けて見えたら、抜けている1pxを埋めるだけで顎や頬のつながりが戻ります。
肩線が反転時に落ち着かないときも、肩先を1pxだけ内側へ寄せると、上半身の軸が整います。
ドット絵の仕上げは、派手な修正よりも「どの1pxがノイズになっているか」を特定する作業だと考えると、判断が安定します。

出力形式にも気を配りたいところです。
完成データはPNGかGIFで保存し、JPGは避けます。
JPGは圧縮の過程で輪郭のまわりににじみや色の混ざりが出やすく、1px単位で整えた境界が崩れるからです。
ドット絵の輪郭や色面をそのまま保つには、可逆圧縮の形式が向いています。

図解（alt text）

alt text: 32x32キャラクターを白背景・中灰背景・黒背景に並べて比較した図。
白では読めていた髪と服の境界が、中灰では明度差不足で埋もれ、服色を1段暗くした後は輪郭が戻っている。
右側には左右反転前後の顔比較があり、反転時に片目が1px高く見えた例を下げて修正し、目線のズレが解消された状態を拡大枠つきで示している。

よくある失敗と対策

アウトラインがガタつく

斜め線や曲線を整えたつもりなのに、等倍で見ると輪郭だけがザラついて見えることがあります。
原因の多くは、階段の刻み方が場所ごとにバラついていることです。
たとえば頬から顎、肩から腕の外周で、1pxずつ並ぶ区間と2pxずつ伸びる区間が無秩序に混ざると、線の流れが途切れて見えます。
こういうときは感覚でなぞり直すより、2-1-2の階段パターンに戻して斜め線を組み直すほうが早いです。
1px、2px、1pxのように揺れる線より、2px進んで1px下がり、また2px進むリズムのほうが輪郭の意図が伝わります。

曲線をなめらかに見せたくて中間色を置きすぎるのも、別のガタつきにつながります。
必要なのは、角が立って見える箇所だけにAAを1pxだけ足すことです。
たとえば肩の外周や髪先の急な折れだけに入れると、境界の見え方が落ち着きます。
逆に輪郭全周へ均一に入れると、線がぼやけてシルエットが弱くなります。
前の工程で触れた影やハイライトより先に、まず外周の階段が揃っているかを見たほうが、見た目の改善量は大きくなります。

情報を盛りすぎて輪郭が崩れているケースも見逃せません。
32x32では、顔にまつ毛、鼻筋、口角、頬色まで入れると、等倍では一つの暗い塊に見えやすくなります。
直したのに良くならないとき、私はいったん黒ベタ確認へ戻します。
髪、頭、胴体、腕、脚の大きな塊だけを黒で見直すと、数分で詰め込みすぎた場所が見えてきます。
そこでディテールを削り、目は2〜3px、口は1pxの範囲に整理すると、顔の読み取りが戻ります。
黒ベタで読めないものは、色を足しても読めるようになりません。

色数の増やしすぎで輪郭がノイズ化している場合も、対処は同じ方向です。
パレットを8色前後まで戻し、隣接する色の明度差を広げると、髪と肌、服と腕の境界が再び立ってきます。
それでも色面同士が接近して見えるときは、境界に暗色を1pxだけ置くと分離が明確になります。
輪郭線を太くするのではなく、接点だけを切り分ける意識で入れると、絵が重くなりません。

影の位置も輪郭の不安定さに直結します。
左頬にハイライトがあるのに、左肩の外周にも影が乗っていると、形そのものがねじれて見えます。
光源は左上に固定し、右下側のエッジへ影1pxを置く基準で見直すと、立体の向きが揃います。
輪郭がガタついて見えるとき、実際には線の問題ではなく、光と影の位置がぶつかって面の向きが読めなくなっていることも多いです。

JPG保存で崩れる

完成直後は整っていたのに、保存した画像を見返すと輪郭のまわりがにじみ、境界色が濁って見えることがあります。
これは描き込み不足ではなく、JPG保存で崩れている状態です。
ドット絵は1px単位の境界で成立しているので、圧縮の段階で近い色同士が混ざると、髪の外周や目の輪郭が別物になります。
特に暗色と中間色が接する箇所では、線の芯が抜けたような見え方になりやすいのが利点です。

対策は単純で、完成データはPNGかGIFで無劣化保存に切り替えます。
Asepriteで整えた1pxの線や色面を保つなら、この2つが前提です。
既存のJPGをそのまま再保存しても失われた境界は戻らないので、描画ソースから再出力します。
元のAsepriteデータやPNG書き出し前の状態へ戻って出し直すと、目尻、口元、服の外周の締まりが戻ります。

JPG崩れは、情報過多や色数過多と重なるとさらに読みにくくなります。
もともと顔に細部を詰め込みすぎている絵では、圧縮で隣接色が混ざった瞬間に、目と前髪と眉が一塊になります。
そういう場合は保存形式だけでなく、元絵の整理も必要です。
ディテールを削ってシルエットを再確認し、色数を8色前後へ戻したうえで、境界を暗色1pxで切ると、再出力後の印象が安定します。
保存形式の問題と作画の問題を分けて見ると、直す順番が見えます。

影のにじみ方にも注意したいところです。
左上から光が当たる前提で右下へ落としていた影が、JPG圧縮後は周辺の色と混ざって広がり、影の位置が曖昧になることがあります。
すると光源そのものがぼやけて、肩や頬の面が寝て見えます。
保存後に立体感が弱くなったときは、影を濃くする前に形式を疑うほうが正確です。

図解（alt text）

失敗例と対策例を並べた図解では、BeforeとAfterの差を1px単位で読める書き方にします。
たとえば顔の比較なら、Beforeでは目が4px相当の情報量で潰れ、口も2pxに広がって表情がぼけている状態、Afterでは目を2〜3px、口を1pxへ整理して読める顔に戻した状態を示します。
輪郭の比較なら、Beforeでは斜線の階段が1-1-2-1のように乱れている外周、Afterでは2-1-2で揃えた外周と、必要箇所だけにAA1pxを加えた例が伝わる構成が向いています。

色の失敗も、説明文だけより図のほうが伝わります。
Beforeでは色数が多く、髪と服と影色が近すぎてノイズ化している状態、Afterでは8色前後に戻し、隣接色の明度差を広げ、境界へ暗色1pxを入れて分離した状態を見せると、読者が自分の絵に当てはめやすくなります。
影についても、Beforeでは光源と矛盾して左下にも影が入っている状態、Afterでは左上を光源に固定し、右下の影1pxとハイライト位置を揃えた状態まで入れると、立体の読み違いがどこで起きるかがはっきりします。

alt text自体も、単に「修正前後の比較」とせず、どのピクセルをどう直したかまで書くと情報価値が上がります。
たとえば「32x32キャラクターの肩周り比較。
左は外周の斜線が不規則で、右は2-1-2の階段へ揃え、肩の折れ点に中間色のAAを1px追加して曲線を整えた」「顔比較。
左は目と前髪が密集して潰れ、右は目を1px外側へ離し、口を1pxへ縮小して表情を読める状態に修正した」という書き方なら、画像が見えない環境でも失敗と対策の中身が伝わります。

次のステップ｜歩行アニメやゲーム用スプライトに発展させる

静止画が仕上がったら、そのまま歩行アニメへつなげられます。
出発点は4フレーム歩行で、接地、通過、反対側の接地、反対側の通過という往復を作る形です。
まずは重心線と接地している足を先に決め、どの1pxを動かすべきかを見極めます。
上下動のボブは1〜2pxで十分効果が出ることが多く、腕と脚も交互に1〜2pxの差をつけるだけでリズムが生まれます。

表示時間は各フレームを100〜150msに置くと歩きとして収まりやすく、速すぎてせわしない印象も避けられます。
Asepriteのようにフレーム単位で確認できるツールを使うと、各コマの差分確認と修正が効率的です。

• ドット絵 歩行アニメの作り方（候補スラッグ: tutorials-walk-cycle）
• パレット設計入門 — 色数と明度で差を出す（候補スラッグ: techniques-palette-design）

上記は本文から自然につなげられる関連記事の例です。サイト内に該当記事が追加されたら、本文中の関連箇所へ内部リンクを設置してください。