横向きキャラのドット絵の描き方｜5ステップ実践

横向きキャラとは、RPGやアクションゲームの移動スプライトで標準的に使われる視点のドット絵であり、正面絵とは比べものにならないほど顔の出っぱりや重心の置き方が効いてきます。
ゲーム会社で横向き移動スプライトを量産してきた経験でも、初心者が最初につまずくのはこの「顔の比率」と「輪郭のガタつき」で、32×32のキャンバスに32個前後のピクセルをどう割り振るかで印象は大きく変わるものです。
横向きは重心の取り方、左右非対称の輪郭線、横顔の比率という3点を先に押さえるだけで崩れの大半を防げますし、静止1枚から歩行3枚アニメまで見通しよく進められるでしょう。
Step1の32×32アタリ、Step2のシルエット、Step3の横顔比率、Step4のアウトラインと影、Step5の歩行アニメ、そして失敗の立て直しまでを順にたどれば、手を動かしながら横向きキャラを完成させられます。

横向きキャラを描く前に：正面絵との違いとゴール

横向きキャラは、正面絵の左右対称な感覚のまま描くと崩れやすく、まず重心と向きを先に決めるのが出発点になります。
鼻先やつま先の片側への出っ張り、輪郭線の左右非対称、横顔の比率の取り直しという3点を押さえるだけで、どっちを向いているか分からない絵はかなり減らせます。
小さなドット絵ほど1pxの差が印象を動かすので、最初の位置決めがそのまま完成度に直結します。

正面絵と横向き絵で変わる3つのポイント

正面絵は左右の情報をそろえて見せる前提ですが、横向きではその前提が崩れます。
まず変わるのは重心で、キャラがどっちへ進むのかを1px単位で決めないと、足運びをつけたときに身体だけが前へ流れて見えます。
現場で移動スプライトを描くときも、先に重心を置いてから手を動かすと、後から歩行アニメに展開した際に足が滑りにくくなる実感がありました。

次に輪郭線です。
横向きでは鼻先やつま先が片側に出るので、正面絵のような均等な外形にはなりませんし、片側だけ前に張り出すことで向きが読み取れるようになります。
初心者の横向き絵で「どっちを向いているか分からない」ことが多いのは、ここを左右対称のまま処理してしまうからです。
向きを伝える要素を最初に決めてしまえば、シルエットだけでもかなり読める絵になります。

三つ目は横顔の比率です。
目、鼻、顎の位置関係は正面の感覚で置くとすぐに破綻し、小さなキャンバスでは特に目の位置が1pxずれるだけで顔つきが変わります。
小さなドット絵ではパーツの位置の正確さがそのまま説得力になるので、横向きでは「どのパーツをどこに置くか」を先に固めてから塗るほうが安定します。

この記事で作る完成イメージ

この記事のゴールは、静止した横向きキャラ1枚と、そこから展開する歩行3枚アニメです。
最初に完成形を共有しておくと、各工程で何のために手を動かすのかがぶれません。
いきなり細部を詰めるのではなく、まずは1枚で成立する横向きキャラを作り、その延長で歩行へつなげる流れが見えてきます。

この構成にしておくと、シルエット確認、顔の位置決め、足の前後の入れ替えが別々の作業ではなく、一続きの設計として扱えます。
歩行3枚なら左足前・真横・右足前で基本動作を表現できるので、完成像が明確だと「今はどの枚を作っているのか」が追いやすいのも利点です。
まずは1枚、そこから3枚へ広げましょう。

横向きが活きる用途と視点の考え方

横向きキャラは、RPGやアクションゲームの移動スプライトとして標準的な視点に置かれます。
特にアクションゲームでは歩く・走るといった動きと結びつきやすく、横向きが描けるだけで表現できる行動が一気に増えます。
制作の入口としても手応えが出やすいので、最初の題材としておすすめです。

視点の考え方もここでそろえておきましょう。
横向きは「見せる絵」より「動く絵」に向いているため、正面絵のような整った対称性より、前後の重心と接地感が優先されます。
32×32は読みやすさと制作コストのバランスが良く、16×16なら目は2〜3px、24×24なら中間サイズとして扱いやすいです。
2〜3頭身のデフォルメも相性が良く、3頭身なら頭：上半身：下半身をおよそ1：1：1で考えると設計しやすくなります。
こうした視点で作ると、歩行アニメへ進む準備が自然に整います。

Step1：キャンバスサイズと下絵（アタリ）を決める

32×32は、横向きキャラの顔や輪郭を読みやすく保ちながら、描き込みの手数も抑えやすい基準になります。
初めて横向きを描くならここから始めると、鼻先やつま先の処理で迷いにくく、現場の研修でも手戻りが少ない進め方として扱いやすいです。
16×16は素早く作れる反面、情報量が少なくて横顔の鼻と口が潰れやすいので、まずは32×32で形をつかみ、慣れてから縮める流れが安全でしょう。

16×16・24×24・32×32の選び方

キャンバスは最初に決めるべきで、ここが曖昧だと目や鼻、手足の置き方まで連鎖して崩れます。
32×32は読みやすさと制作コストの釣り合いが良く、多くのインディーゲームで定番になっています。
もっと軽く仕上げたいなら16×16、中間の密度が欲しいなら24×24という順で考えると、必要な情報量を見誤りにくいです。
特に16×16では目を2〜3pxで表現する前提になるため、横顔の印象を支える線を増やしすぎない判断が要ります。

2〜3頭身SDの比率とデフォルメの考え方

横向きキャラは2〜3頭身のSDが扱いやすく、歩行アニメにもつなげやすい形です。
3頭身なら頭：上半身：下半身をおよそ1：1：1にそろえると、画面が小さくても各パーツが潰れにくくなります。
頭部の幅は8〜10px程度に収めることが多く、この段階で比率を決めておくと、あとから目や耳を足しても「頭でかすぎ」「小さすぎ」の行き来が起こりにくい。
横顔では目が小さく見えやすいので、正面よりも輪郭の出っ張りを少し強めに見せる意識が効きます。

頭・胴・手足を塊で置くアタリの取り方

アタリは線で描き込むより、頭・胴・手足を面の塊としてざっくり置くほうが安定します。
横向きでは胴体の厚みと、前後の足がどこで重なるかを塊の段階で決めておくと、後工程で塗りと輪郭を足しても重心がぶれません。
遠目で見たときに、人らしさ、向き、重さが一目で読めるかを先に確認しましょう。
細部より先にシルエットを固めるのが鉄則で、ここが決まると鼻先やつま先のような片側に寄る形も自然に収まります。

Step2：シルエットで「向き」と「重心」を固める

32×32のドット絵では、描き込みを始める前にシルエットで「人に見えるか」「向きと重心が読めるか」を決めておくと、その後の作業が驚くほど安定します。
頭・胴・手足を細部ではなく面の塊として置き、輪郭だけで成立するかを先に見るのがコツです。
横向きスプライトでは、鼻先やつま先のような片側への出っぱりがあるだけで、正面と横の差が一気に伝わるでしょう。

頭・胴・手足を面の塊で置く

32×32では、線を描き込むほど情報が増えるように見えて、実際には形が崩れやすくなります。
だから最初にやるべきなのは、頭、胴、手足を細部抜きで大きな塊として並べ、遠目で見てもキャラの姿勢が読めるかを確かめることです。
輪郭の段階で人型として成立していれば、あとから服のしわや装飾を足しても迷子になりません。
新人の頃は描き込みから入って何度も全部やり直しましたが、シルエットを先に固める習慣に変えてから、横向きスプライトの完成スピードは体感で倍になりました。

この段階では、黒一色で塗りつぶして遠目で見るチェックが役に立ちます。
自分では描けているつもりでも、縮小すると腕と胴がつながって見えたり、足が短すぎて重心が宙に浮いて見えたりするからです。
輪郭だけ見て何のスプライトか分からないなら、形をいったん簡略化してでも、特徴を強く残す方向に寄せたほうがいいでしょう。

鼻先・つま先の向きで「横向き」を伝える

横向きに見せたいときは、左右対称のままでは足りません。
鼻先、つま先、髪の束のような片側への出っぱりがあるだけで、視線の向きが明確になり、正面顔との混同を避けやすくなります。
シルエットの段階でこの出っぱりを意図的に作っておくと、あとから顔のパーツを置いたときにも、向きの情報がぶれません。
小さなドット絵キャラほど、この差が効いてきます。

出っぱりは大きければよいわけではなく、どこにあるかが重要です。
鼻先が前に出ていれば顔の向きが伝わり、つま先が進行方向を向いていれば歩く姿勢の説得力が増します。
逆に、輪郭が丸くまとまりすぎると、どちらを向いているのかが曖昧になりがちです。
シルエットだけで識別できる状態まで簡略化し、そのうえで必要な特徴だけを残す、これが横向きスプライトの土台になります。

遠目チェックで重心と読みやすさを確認

重心は前足側か後ろ足側かで、立ち姿の印象そのものを変えます。
前に寄せれば踏み出す気配が出ますし、後ろに置けば少し引いた落ち着きが出る。
どちらにするかを立ち姿の時点で決めておくと、Step5の歩行アニメで足が滑って見えにくくなります。
重心が最初から定まっていれば、動きの一歩目がどこから始まるかも自然に読めるからです。

ここでも、黒一色のシルエットを遠目で見る確認が効きます。
見たいのは細部ではなく、向きと重心です。
人として読めるか、横向きとして読めるか、そして足元が地面に乗っているように見えるかを順に見ていけば、修正箇所はかなり絞れます。
横向きのスプライトは、描き込みで完成させるものではなく、シルエットで勝負を決めてから育てるものだと言えるでしょう。

Step3：横顔の比率（目・鼻・口）を整える

横顔は、ピクセル数が少ないほど比率のズレが目立つ部位です。
まずは目を頭頂と顎の中間、鼻先を目と顎のちょうど中間に置く意識を持つと、顔全体の重心がそろって見えます。
鼻筋の起点も目尻とほぼ同じ高さに合わせると、前に出すぎず引っ込みすぎない、落ち着いた横顔になります。

横顔の目・鼻・口の高さの目安

横向きの顔で最初に崩れやすいのは、目と鼻の高さの取り方です。
目は球体が横を向くぶんだけ正面より小さく見え、鼻は向きを示す主役として前へ張り出します。
そのため、頭頂と顎の中間に目、そこからさらに中間地点に鼻先を置くと、横顔の立体感が素直に通りやすくなるのです。
鼻筋の始まりを目尻とほぼ同じ高さにそろえるだけでも、顔の面が一気に整います。

初心者の横顔は鼻を出しすぎて、どうしても天狗のように見えがちです。
鼻先が前へ伸びるほど顔の向きが強く出るので、少ないピクセルではなおさら慎重に置きたいところでしょう。
研修生にこの目安を伝えたときも、鼻先を目と顎の中間に収めるだけで、横顔が急に自然になりました。
横顔の比率は細かな装飾より先に、骨格の位置関係で決まると考えると整理しやすいです。

少ないピクセルでパーツを置くコツ

少ないピクセルで横顔を描くときは、最初から表情を作り込まず、基本の配置を先に決めるのがおすすめです。
目と口を仮置きして、輪郭との干渉が少ない位置を探してから、鼻の出方を調整すると迷いが減ります。
横向きでは、目を正面絵と同じ大きさで置くと違和感が出やすいので、目尻側だけが見える前提で小さくまとめると収まりがよくなります。

実作業では、目・鼻・口を1pxずつ動かしながら「一番キャラっぽく見える位置」を探す流れが役立ちます。
1pxの差で別人に見えるので、横向きこそ微調整が効く部分だと割り切るとよいでしょう。
目と口の位置が決まれば、表情の変化はその2点だけで十分に作れます。
まず基準の顔を固定し、差分は最小限にする。
これが少ないピクセルで破綻を避ける近道です。

1pxの差が印象を変える調整ポイント

横顔の調整で効くのは、輪郭全体を大きく描き直すことではなく、1px単位のずらし方です。
鼻先が1px前に出るだけで強気に見え、口元が1px下がるだけで幼く見えることがあります。
目の高さも同じで、ほんの少し上がるだけで緊張感が増し、下がると穏やかな印象になります。
だからこそ、横顔では「どこを動かすか」を決めてから触るのが効率的です。

この段階では、目・鼻・口の三点を固定したまま、1pxずつ順番に動かして比較するのが有効でしょう。
どの差分がキャラらしさを作るかを見極めれば、横顔の再現性が上がります。
特に初心者向けの説明では、鼻先の位置を目と顎の中間に置く基準を先に示すだけで、試行錯誤の出発点がそろうのです。
そこから少しずつ詰めれば、破綻しないまま個性も出しやすくなります。

Step4：アウトライン・色塗り・影で立体感を出す

輪郭線、光、影、明度の3要素をそろえると、16×16の小さな絵でも立体感は一気に安定します。
まずは黒アウトラインで形を締め、次に光源を決めて影とハイライトの位置を固定し、最後に暗・中・明の3段階で色を整理すると迷いません。
横向きのキャラほど面の切り替わりが見えやすいので、この順番で組むと破綻しにくいです。

黒・カラー・seloutアウトラインの使い分け

アウトラインは、黒で全体を締める方法、各パーツの濃い色で輪郭を立てるカラーアウトライン、光が当たる側だけ明るい線に置き換えるseloutを使い分けるとです。
初心者はまず黒アウトラインで輪郭1pxを基本にすると、形の崩れが見抜きやすく、ゲーム画面でも視認性が保ちやすくなります。
カラーアウトラインは胴体や服、髪の色に馴染ませたい場面で効きますし、seloutは面の向きが読める反面、入れすぎると輪郭がぼやけます。
頭頂と肩だけを明るく抜く程度に抑えると、強い光を受けた印象だけを足せるでしょう。

光源を決めて影とハイライトを入れる

色を塗る前に光源を先に決めると、影の形、長さ、色がそろい、ハイライトの位置もぶれません。
左上から光を当てると決めたら、右下に1pxの影を置き、上辺と左辺にハイライトを寄せるだけで、小さな画面でも立体感が出ます。
複数キャラを並べる場面では、この光源を左上に固定する癖が効きました。
影の向きがそろうので、横向きでも前後の足の落ち方が統一され、チーム制作で画面全体が散らかりにくくなるのです。

3明度でまとめる色の作り方

各色グループは、暗・中・明の3段階に分けて考えると破綻しにくいです。
横向きのキャラは胴体の厚みや前後の足で面が分かれるため、面ごとに3明度を割り当てると、どこが前に出ていてどこが奥に下がっているかが自然に読めます。
明度差を細かく増やしすぎるより、面ごとの役割を明確にしたほうが画面は締まります。
16×16以下ではアンチエイリアスがかえって邪魔になることがあるので、まずは輪郭と大きな面を1pxで整理し、32×32以上で輪郭やパーツの境目に限定して使うと、にじまず扱いやすいでしょう。

Step5：歩行3枚アニメへ展開する

静止した横向きキャラができたら、歩行アニメは左足前・真横・右足前の3枚から組み立てるのが基本です。
ファミコンからスーファミのミニキャラの歩きが成立するのは、この3枚だけでも重心移動と接地の差を十分に見せられるからです。
まず真横の1枚を完成させ、そこから足だけを差分で動かす流れにすると、作業の見通しが一気によくなります。

歩行3枚（左前・真横・右前）の描き分け

3枚構成で大切なのは、毎回まったく別の絵を描くことではありません。
真横ポーズを基準にして、左足前、真横、右足前の順で前後関係だけを整理すれば、体の輪郭や顔の向きはほぼ共通のまま保てます。
横向きは視点が固定されるぶん、足の差分だけに集中しやすく、初心者でも破綻しにくいのが利点です。

真横の1枚をきちんと作ってから歩行へ進めると、3枚を仕上げる時間は目に見えて縮みます。
どのフレームでも共通する頭・胴体・腕を先に固めておけば、変更点は脚と接地位置だけになるからです。
横向きはこの流用が最も効く視点で、短い枚数でもキャラらしい歩きに見せやすいでしょう。

足の入れ替えで枚数を増やすコツ

3枚の歩行は、左右の足の前後が入れ替わるだけで基本のディティールはほとんど同じです。
だからこそ、左前と右前を別々にゼロから描くより、真横を起点にしてペアを流用したほうが低コストで作れます。
左右反転で済む部分はそのまま使い、接地している足だけを明確に変えると、少ない手数でも動きが安定します。

GIFで再生して足が滑るときは、たいてい接地している足が1フレームで動いてしまっています。
ここで見るべきなのは見た目の派手さではなく、地面に触れている足を止められているかどうかです。
接地足を固定する意識で見直すと、初心者の歩きでも一気にそれっぽくなります。

もも上げ追加で5〜6枚にしてなめらかにする

もっとなめらかにしたい場合や、等身を上げて自然な重心移動を見せたい場合は、真横と足前の間に「もも上げ」動作を2枚足します。
これで5〜6枚になり、1歩ごとの情報量が増えて、走りにも応用しやすくなります。
3枚では省略していた脚の振り上げが入るぶん、動きの密度が上がるわけです。

完成後はGIFやスプライトシートで連続再生し、足が地面で滑らないかを必ず確認します。
判定基準は重心と接地です。
滑りが出たら、Step2で決めた重心と各フレームの足位置を見直しましょう。
地面に残る足と運ぶ足の役割を分けて整理すると、枚数を増やしても歩きの芯は崩れません。

よくある失敗とリカバリー

横向きキャラで崩れやすいのは、輪郭のガタつき、光源を無視した影、そして塗りの途中に残る孤立点です。
等倍では見逃しやすいので、最後は400%程度まで拡大して確認すると、段差やノイズが一気に見えてきます。
直し方の軸は単純で、線は段階をそろえ、影は光の向きに従い、余計な点は周囲に溶かすことです。

輪郭のジャギーを消す

ジャギーは、なめらかな線の途中で段が意図せず崩れた状態です。
とくに横向きの背中や顔の曲線では目立ちやすく、1px・2px・3pxなど一定のピクセル数で段を作ると、輪郭が安定して見えます。
段の幅が途中でばらつくと、視線が引っかかって形そのものまで不安定に感じられるため、曲線は「少しずつ同じリズムで降りる」意識が役立ちます。
提出前に400%程度へ拡大すると、この乱れは等倍よりずっと早く見つかるでしょう。

輪郭を直すときは、細い部分を無理に滑らかにしようとせず、段の数を整理してから再配置します。
曲線をいったん単純化し、必要なところだけ1pxずつ足していくと、線が暴れにくくなります。
おすすめです。

ピロー影を避けて光源に沿わせる

ピロー影は、光源を無視して全周を均一に暗くしてしまう失敗です。
丸みを出したい気持ちが先に立つと起こりやすいですが、横向きキャラでは胴体の奥側や足の奥側に影を寄せるだけで、形は十分に立体的に見えます。
研修生の横向き絵でも多いのはこの型で、光源を左上に固定し「影は右下だけ」と一言でルール化しただけで、絵の説得力が変わりました。
影は装飾ではなく、光の向きを伝える情報なのです。

Step4で決めた光源を描く前に思い出し、暗くする場所を先に決めましょう。
全周を同じ濃さで囲うより、光と反対側にだけ影を置いたほうが、面の向きがはっきりします。
横向きの胴体や脚は、奥へ回り込む部分だけを狙って落とすと、少ない色数でも締まって見えます。

孤立ピクセルとダブル線を整理する

孤立ピクセル、つまりオーファンは、周囲とつながらない単独の点です。
ノイズになりやすく、意味を持たないことが多いので、塗り終わったら拡大して周辺の色に馴染ませます。
さらに初心者は、輪郭を2pxで引いてしまうダブル線も起こしがちです。
基本は1pxで通し、太さを出したい場所だけ意図的に2pxへ切り替えると、輪郭に締まりが出ます。

この2つは別の失敗に見えて、実際には「形の境界を整理しきれていない」点でつながっています。
孤立点が残ると面の連続が切れ、不要な2pxが混じると線の強弱が曖昧になるため、どちらも拡大チェックでまとめて拾うのが効率的です。
点を消し、線を整え、必要な場所だけ太らせる。
その順で手を入れてみてください。