ドット絵の歩行アニメーション｜4方向キャラの動かし方

32x32の3コマ歩行を0→1→2→1で組んだ段階では動いて見えていても、4コマ化して上下動を1px足した瞬間に足裏の接地感がぐっと出ます。
トップダウンRPG向けの4方向歩行スプライトは、この1px単位の差分設計で見た目の説得力が決まります。

この記事は、32x32と64x64のドット絵で上・下・左・右の歩行アニメを作りたい人に向けて、3コマ12枚と4コマ16枚のスプライトシートをそのまま完成まで持っていくための具体手順をまとめたものです。
手足だけでなく、肩、髪、上着の裾までどうずらすかを詰めると、64x64では歩幅を変えなくても髪と裾を1px遅らせるだけで動きが一段リッチに見えます。

歩行アニメは感覚で整えるより、フレーム順、上下動、左右反転の破綻チェックを分けて詰めたほうが失敗を拾えます。
PNGやGIFで書き出してUnityなどへ持ち込めるところまで、足滑りや動きの薄さを自力で直せる形で解説します。

4方向歩行アニメーションの基本設計

4方向歩行は、トップダウンRPGの見た目を決める基礎設計です。
横向きだけを先に作ると一見進んでいるようでも、実運用では上・下・左・右がそろった時点で破綻や違和感が見えます。
最初に4方向を1セットとして設計しておくと、歩幅、頭の上下、腕の振り、服の揺れを同じ規則で管理でき、32x32でも64x64でも仕上がりが安定します。

4方向歩行の標準構成は、1方向あたり3枚なら合計12枚、4枚なら合計16枚です。
32x32のセルを3x4で並べるならシート全体は96x128pxになり、この並びはUnityに持ち込む前提でも扱いやすい定番です。
セルサイズは32x32だけでなく32x48や64x64も実用範囲に入り、頭身や衣装量に応じて選びます。

3コマ/4コマ/8コマの選び方

3コマは、4方向歩行の出発点としてもっとも軽い構成です。
1方向3枚なので全体で12枚に収まり、レトロRPGの文脈とも相性が合います。
とくに停止コマを挟む設計にすると歩きが拍で刻まれ、町を移動するテンポが心地よくなります。
実際に3コマの step-idle-step-idle 型で組むと、BGMの拍と歩行ループが自然に噛み合い、移動そのものが気持ちよく感じられます。

4コマは、3コマの軽さを保ちながら接地感を足したい時の本命です。
1方向4枚、4方向で16枚に増えますが、増える工数に対して見た目の伸びが大きい構成です。
とくに32pxクラスの小さなキャラでは、4コマ化して体全体の上下を1px入れるだけで、足が床に触れている印象がはっきり出ます。
前のセクションで触れた通り、同じ32x32でもこの1px差が説得力を左右します。

8コマは、大きめスプライトで滑らかさを優先する場合に効きます。
1方向8枚なら4方向合計で32枚になり、足運び、肩の遅れ、髪や裾の追従まで段階的に分けて描けます。
64x64級では情報量を受け止める余地があるので、前半3フレームを作って後半に近いシルエットを流用しながら組む方法も相性が良いです。
ただし、4方向すべてに展開すると差分管理の負担が一気に増えるため、歩行の基本を固める段階では3コマか4コマから入るほうが設計の軸がぶれません。

用途別に見ると、レトロ感と軽量さを優先するなら3コマ、自然さと工数のバランスなら4コマ、滑らかさを強く求めるなら8コマという整理になります。
トップダウンRPGの標準解としては4コマがもっとも扱いやすく、3コマは意図して古典的なリズムを出したい時に強い選択です。

フレーム順の型と使い分け

コマ数を決めたら、次は並べ方の型を決めます。
歩行アニメは1枚ごとの完成度より、どの順番で再生するかで印象が変わります。
同じ3コマでも、停止コマを軸にするか、左右の足を往復させるかでテンポも接地感も別物になります。

3コマで古典的なRPGらしさを出すなら、0→1→0→2の型が扱いやすいのが利点です。
中央の停止コマを1拍おきに入れるため、見た目が軽く、レトロな歩調になります。
町歩きや会話主体のゲームではこの間が効きます。
一方で、移動の連続感を少し強めたいなら0→1→2→1の往復型が向いています。
停止を露骨に見せずにループできるので、Unityの4方向歩行実装でも収まりが良い並びです。

4コマは、0→1→2→3の循環型と0→1→2→1の往復型で考えると整理できます。
循環型は各コマに役割を分けやすく、接地、抜重、反対足の接地、抜重を均等に配置できます。
動きの山谷がきれいに一周するので、頭や肩の上下も設計しやすくなります。
往復型は左右対称の管理がしやすく、少ない差分でもまとまりやすいのが利点です。
4コマ化したばかりの段階では、往復型で上下動を確認し、その後に循環型へ拡張すると調整の筋道が立ちます。

8コマでは、歩行の前半と後半を明確に分けられます。
接地から送り足、すれ違い、次の接地までを細かく割れるので、体幹のひねりや衣装の遅れが入れやすくなります。
大きめスプライトではこの恩恵が見えやすく、髪の房や上着の裾を1pxずつ遅らせるだけでも印象が変わります。

左右方向は反転で流用できる場面もありますが、髪分け、武器、服の模様が非対称なら別絵として整えたほうが破綻が出ません。
4方向歩行は「横向きが1つできたら終わり」ではなく、上・下・左・右で同じ歩行ルールを共有させる設計作業だと捉えるとまとまりが出ます。

用途と想定fps

歩行アニメの話で混同されやすいのが、一般的なアニメーション理論と、ゲーム用ドット絵の実務です。
汎用のウォークサイクルでは24fps前後、2歩ぶんで約1秒という考え方が基礎になりますが、トップダウンRPGのスプライトはそのままの枚数を必要としません。
画面内での表示サイズが小さく、ループ再生が前提なので、1方向あたり3〜4フレームでも成立します。

この違いは、手抜きかどうかではなく設計対象の違いです。
たとえば32x32のキャラは、1歩ごとの体重移動をフルフレームで見せるより、接地の瞬間と頭の上下1pxを明確に置いたほうが歩いて見えます。
だから実務では3コマや4コマがよく使われますし、4方向スプライトシートとしても管理しやすい形に収まります。

想定fpsは、コマ数とセットで考えると迷いません。
3コマの往復型なら軽快なテンポが出る速度に置くと古典的RPGの歩調になります。
4コマは1コマごとの役割が分かれるので、少しゆとりを持たせると接地感が残ります。
8コマは細かな差分を読ませる前提なので、早回しにすると枚数の意味が薄れます。
重要なのは「高fpsほど上質」という発想ではなく、セルサイズとコマ数に対して読める速度を選ぶことです。

実制作では、シート設計と再生速度を同時に決めると噛み合います。
32x32の3x4構成で96x128pxにまとめるなら、軽い歩調の3コマか、接地感を足した4コマが中心になります。
32x48は足の見せ場を少し増やしたい時、64x64は髪や服の遅れまで描きたい時に向いており、コマ数を増やした効果も出やすくなります。
用途、セルサイズ、フレーム順、再生速度を別々に考えず、4方向1セットで揃えておくことが基本設計の芯になります。

準備：キャンバスサイズとスプライトシートの組み方

描き始める前にセルサイズ、行列の並び、余白、原点を固定しておくと、あとで歩幅や上下動を詰める工程がぶれません。
4方向歩行は1枚ごとの出来より、シート全体の規格がそろっているかで作業効率も実装の安定感も変わるので、最初に「どの枠に何を入れるか」を決め切ってしまうのが得策です。

セルサイズと全体サイズの例

トップダウンRPG向けの4方向歩行スプライトでは、初心者から実戦まで扱いやすい基準が32x32pxです。
1方向3コマ、4方向で組むなら3x4の格子になり、シート全体は96x128pxになります。
これは12フレームを無駄なく並べられる定番サイズで、Unityへ持ち込む前提でも切り分けの規則を作りやすい形です。

もう少し情報量を持たせたいなら64x64pxも有力です。
32pxでは足、腕、頭の上下1pxが主役になりますが、64pxでは髪や上着の裾、肩の遅れまで入れられるので、同じ4方向歩行でも見せられる差分が増えます。
前のセクションで触れた1pxの上下動も、64pxでは「頭」「胴体」「裾」で別々に効かせられます。

縦方向に余裕がほしいキャラでは32x48pxや64x64pxを使う選択もあります。
32x48を使うなら、32x32より縦に16px余白が増えるので、帽子や長い髪、足元の上下動を安全に収められます。
歩行中に体を上下へ2pxまで揺らす前提なら、この縦の余白があるだけで足先や髪先が枠外へ触れにくくなります。

保存形式はPNGかGIFでまとめるのが前提です。
ドット絵は各ピクセルの配置に意味がある表現なので、輪郭が崩れる保存形式を挟まないほうが、スプライトシートの切り出し精度も保てます。

行・列と命名規則

命名規則も先に決めておくと、差分修正の往復が減ります。
たとえば char_walk_down_0 char_walk_down_1 char_walk_down_2 のように、キャラ名_動作_方向_フレーム番号で統一すると、3コマでも4コマでも拡張が利きます。
行列の見た目とファイル名の規則が一致していると、シートを分割したあとに単体フレームで管理する場面でも混乱しません。
行順（シート上の並び方）については実装先の規格で異なるため、ここでの並びは「筆者のワークフロー例」であることを明記しておきます。

余白と原点（pivot）設計の注意点

原点（pivot）は、実装先のエンジンで中央基準になる想定で描くと扱いやすくなります。
Grid By Cell Size で等分スライスする前提では、セルサイズが固定されているほど各フレームの中心位置をそろえやすく、歩行中に体が左右へ揺れて見える事故も減ります。
とくに32x48や64x64で縦方向の余白を足す場合は、見た目の頭頂や足先ではなく、キャラの胴体中心と接地位置の関係が各フレームでぶれないように置くのが肝心です。

歩行アニメでは、足が接地しているフレームだけ下へ1〜2px伸びることがあります。
その揺れ幅を安全に収めるには、セルサイズの数字だけでなく、どこを中心にして描くかまで同時に設計しておく必要があります。
シートの規格が先に固まっていれば、このあと入れる歩幅、頭の上下、服の遅れも同じルールで積み上げられます。
（注）余白や下端の安全マージンについては、エンジンやスライス方法により適切値が変わります。
本記事で示す「2px」は筆者の経験則による例です。
実装先の仕様に合わせて調整してください。

ステップ1：停止ポーズを4方向ぶん作る

4方向歩行の土台は、まず各方向の停止ポーズを1枚ずつ成立させることから始まります。
歩かせる前に下向き・上向き・横向きの「その向きに見える静止形」を固めておくと、あとで足や腕を動かしても芯がぶれません。
ここで見るべきなのは、単純な向きの違いだけではなく、顔の情報量、背面の見せ場、頭身や肩幅の見え方まで方向ごとに描き分けることです。

下向きの見せ場

下向きは4方向の中でも、顔の情報量で読ませる向きです。
32x32では使える面積が限られるので、目と口を欲張って描くより、少ない画素で「顔が正面寄りに見えている」と伝えるほうが効きます。
私はまず目の位置から決めます。
左右の目を各1pxで置き、間隔を2〜3px空けると、顔幅を広げすぎずに視線の存在が立ちます。
これだけで下向きの判読力が一段上がります。

鼻と口は、32x32なら1pxラインで省略気味に扱っても十分通ります。
鼻を独立した塊として置くより、肌色の段差や口元の1pxで顔の中央を示したほうが、画面が散らばりません。
目、鼻、口を全部同じ強さで描くと、停止ポーズの時点で密度が偏ってしまい、歩行差分を増やしたときに顔だけ騒がしく見えます。
下向きは情報を足す向きですが、足し方には順番があります。

体の見え方も方向で変わります。
下向きでは胸元と首元が少し見えるぶん、首を+1px見せると安定感が出ます。
32x32の人型ではこの1pxで頭身の印象が変わり、頭だけ大きく浮いて見えるのを防げます。
肩幅も正面寄りに見えるので、上向きより気持ち広く取ると、胴体の重心が下へ落ち着きます。
停止ポーズの時点でこの重心が取れていれば、接地フレームを作ったときに足元だけが不自然に細く見える崩れを避けられます。

上向きの見せ場

上向きは顔を見せる向きではなく、後頭部からうなじ、背中にかけての面で方向を出す向きです。
前髪や目で判別できないぶん、頭の丸みと肩の置き方がそのまま向きの説得力になります。
停止ポーズでは、後頭部のハイライトを頭頂から1px下に置くと、真上ではなく「少し後ろへ回り込んだ頭」に見えます。
この1pxが頭頂に乗ってしまうと、球体の天面だけが光っているように見え、進行方向の情報が抜けます。

背中側は、肩甲骨の気配を左右1pxの角で示すとまとまりやすいのが利点です。
広い面積で背中を塗るだけでは下向きとの差が弱くなりがちなので、肩甲骨の輪郭で方向を補助すると良く読めます。

肩幅も少し絞るとまとまります。
下向きより肩の前端が見えないぶん、同じ幅で描くと上半身だけ横に広がって見えます。
頭身のバランスは全方向で統一したくなりますが、実際には見え方に合わせて1px単位で調整したほうが統一感が出ます。
4方向の停止ポーズを並べたとき、数字上の同寸より、同じキャラに見えるかどうかを優先したほうが歩行へつなげやすくなります。

横向きと左右反転の判断基準

横向きは、鼻先か前髪の先端を進行方向へ1px突き出すだけで向きの判別が安定します。
真横シルエットは情報が少ないので、顔の前側がどこかを明示する画素が必要です。
鼻を出すか、前髪の先を出すかはキャラのデザイン次第ですが、どちらも引っ込んでいると、頭がただの楕円に見えて左右の差が消えます。

横向きの停止ポーズでは、私は頭を1px上げた形を基準にしています。
DOT ART PLAYの32px作例でもこの処理は歩行への接続がよく、実際に自分の素材でも、横向き停止で頭頂を+1px上げたところ、歩行差分に移行した際の上下動が“出ている”と感じられました。
それ以来、この設計を継続しています。
停止コマの段階で頭の位置に基準差を作っておくと、中割りや接地フレームで下げたときの変化量が読み取りやすくなります。

左右は反転で節約できますが、非対称の要素がある場合は流用の限界がはっきり出ます。
髪分け、肩当て、服の模様、持ち物が左右で違うなら、単純反転では別人に見えます。
たとえば右肩にポール武器を担いでいるキャラは、反転すると左肩へ自然に持ち替えたようには見えません。
肩と腕の関係、重心、装備の位置までまとめて変わるので、ここは描き直したほうが破綻しません。

横向きでは肩幅も判断材料になります。
真正面と同じ肩幅を残すと、体が板のように厚く見えます。
逆に細くしすぎると、頭だけ大きい幼いシルエットに寄ります。
停止ポーズを4方向ぶん並べたとき、下向きは少し広く、上向きは少し詰め、横向きは前後の厚みを抑える、という差を入れると、頭身の統一と方向感が両立します。
歩行アニメーションは1方向3コマなら全体で12フレームになりますが、その12枚の印象は最初の4枚の停止ポーズでほぼ決まります。
ここで方向ごとの見せ場を分けておくと、あとから足踏みを加えたときも「ただ揺れているだけ」の動きになりません。

ステップ2：3コマ歩行を作る

3コマ歩行は、停止ポーズを少しずつ崩すだけで歩いて見える最小単位です。
基準になるのは停止、右足前、停止、左足前という考え方で、まずは接地の位置を固定し、そのうえで腕と胴体に1px単位の差分を足すとループがまとまります。
私は実制作ではこの基本形を作ってから並び順を試し、RPGの移動速度なら止めを挟む構成と往復構成で見え方がどう変わるかを毎回確認しています。

コマごとの差分リスト

3コマ歩行の芯になるのは、0を停止、1を右足前、2を左足前として、どの部位をどれだけ動かすかを最初に決め切ることです。
32x32では変化量を増やしすぎると別ポーズに見えるので、足、腕、胴体をそれぞれ1〜2pxの範囲で管理するとまとまります。
DOT ART PLAYの32px作例でも、横向きで頭を1px上げる処理が効いており、私も横向きだけは頭頂の位置を1px持ち上げた停止コマを基準に置くことが多いです。

足はまず接地足を基準にします。
右足前のコマでは右足を接地足として、靴先を床ラインから1px下げます。
反対側の左足は非接地足として2px持ち上げ、前後どちらかにずらして差を作ります。
左足前のコマではこの関係を入れ替えます。
床に触れている足の同一点が毎コマで一致していれば、歩幅が小さくても滑って見えません。
踵で合わせるか、拇指球で合わせるかを最初に決めておき、ズレたぶんは靴底の1px段差で吸収すると、見た目の接地感が崩れません。

胴体はコマ1とコマ2で上下に1px動かすだけでも歩行感が出ます。
正面や背面では胴体全体を1px下げて接地側の重さを見せ、横向きでは前述の通り頭を1px上げた停止形を基準にして、歩行コマで元の高さへ戻すと揺れが読み取りやすくなります。
横ブレは0〜1pxで十分で、ここを大きく振ると足より先に胴体が暴れて見えます。

腕は足と逆相にすると自然につながります。
右足が前に出るコマでは左手先を前へ2px、右手先を後ろへ2px動かし、肩は回転のニュアンスとして1pxだけ添えます。
肩まで大きく振ると32x32では上半身が分解して見えるので、肩の差分は最小限に留め、変化は手先で読ませるほうが安定します。
停止コマから見て手先だけが前後し、胴はほぼその場に残る設計だと、キャラの輪郭が崩れません。

顔と髪も少しだけ動かすと、止め絵の寄せ集め感が消えます。
横向きでは前髪の先端を進行方向へ1px出し、後髪を1px遅らせると、頭部全体が前へ運ばれている印象になります。
髪を胴体と同じタイミングでまるごと追従させると動きが硬く見えるので、先端だけ1フレームほどずらす処理が効きます。

フレーム順とタイミング設定

3コマ歩行の並べ方には、停止を挟む型と往復させる型の2通りがあります。
基本形として扱いやすいのは、停止から右足前へ進み、もう一度停止に戻ってから左足前へ移る構成です。
この並びなら一歩ごとに重心が中央へ戻るので、レトロRPGの落ち着いたテンポに合います。

一方で、0→1→2→1の往復は止めが消えるぶん、3コマでも流れが途切れません。
私はこの並びを実際の移動キャラで試したとき、止めを挟まないのに不安定にはならず、むしろ3コマだけで十分に歩いている感触が出ると感じました。
RPGの移動速度ではこの往復のほうがループが扱いやすく、キー入力に対して素直に反応して見える場面が多いです。

タイミングは0.1秒刻みで置くと調整の基準が明快です。
たとえば0、1、2、1を各0.1秒で回すと、1ループ0.4秒になり、軽快な移動に向いたテンポになります。
一般的な歩行アニメーションはもっと多いフレーム数で組まれることがありますが、トップダウンの小さなスプライトでは、1枚ごとの差分が明確なら短い周期でも歩行として成立します。
4方向スプライトキャラクターの歩行アニメーションを実装するで使われる3コマ4方向の考え方も、実装時に並び順を明快にしやすい点と相性がいいです。

64x64での拡張

64x64では32x32と同じ設計を拡大するだけではなく、見える情報量が増えるぶん、遅れや回転のニュアンスを1px追加しても破綻しません。
基本の考え方は変わらず、停止、右足前、停止、左足前、または往復の並びを使いますが、髪や服の端にもう1段だけ遅れを入れる余地が生まれます。

足まわりでは、接地足の基準点をそろえる考え方はそのままで、靴底の厚みやつま先の反りを描き分けられます。
32x32では靴先を床ラインから1px下げるだけで十分だった場面でも、64x64では足首の角度やふくらはぎの前後差を1pxずつ足せます。
ただし歩幅まで広げると別モーションに見えるので、まずは接地足と遊脚の高低差を保ち、その範囲で形を整えるのが先です。

腕振りも、手先の前後2pxに加えて、袖口や肘に1pxの遅れを入れると立体感が出ます。
肩は相変わらず1px程度の回転ニュアンスで十分で、ここを大きく振る必要はありません。
胴体の横ブレも1pxまでに抑えたほうが、足運びの印象が前に出ます。

髪は64x64で差がつきやすい部分です。
横向きでは前髪先端を前へ1px、後髪を後ろへ1px遅らせる基本形に加えて、毛先だけさらに1px遅らせると揺れの層ができます。
64×64ドット絵アニメーション 歩くドット絵GIFの作り方のような大きめセルの作例でも、この「本体より先端を遅らせる」考え方は相性がよく、私も64x64では髪先と裾だけ差分を増やして密度を調整しています。
3コマのままでも、こうした局所的な拡張だけで情報量が増え、1歩ごとの手応えがはっきり出ます。

ステップ3：4コマ歩行に拡張する

3コマで足運びの骨格ができたら、次は4コマ化で接地と体重移動を分けて描きます。
トップダウンRPGの歩行では、1方向あたり4枚に増やすだけで足裏の着地、胴体の沈み、髪や服の遅れまで説明でき、自然さと実装負荷の釣り合いが最も取りやすい段階です。

接地/中間/反対脚/中間の分解

4コマ歩行は整理しやすくするために、接地をフレーム0、中間をフレーム1、反対脚接地をフレーム2、再び中間をフレーム3として考えるとよいです。
3コマの0→1→2→1では中央の往復で流れを作れましたが、4コマにすると「どの足が床を踏んでいるか」と「重心がどこへ移っているか」を別の絵で持たせられます。
4方向ぶんでは16フレームになり、枚数の増え方は小さいのに、見た目の説得力は一段上がります。

トップダウンでは横から見た歩行のような大きい足の弧より、床を踏んでいる印象を優先したほうがまとまります。
そこで接地コマでは靴底ラインをはっきり見せ、床に触れている足の輪郭を曖昧にしません。
つま先の向きや靴底の厚みを少し整えるより、まず接地している側の足裏が読めることのほうが効きます。
特に正面・背面では、足が前後に広がりにくいぶん、接地コマの床ラインが歩行の基準になります。

中間コマは、両足の役割が入れ替わる途中を見せるための絵です。
ここで足を大きく振るより、接地足が抜けていく気配と、反対脚が次の接地へ向かう流れを1px単位でつなぐほうが自然に見えます。
0と2が「踏む」、1と3が「移る」という役割分担にすると、アニメを再生したときに一歩ごとの重みが出ます。

私は4コマ化するとき、足先の派手な形変化を先に足すより、0と2の接地コマだけを先に完成させることが多いです。
この2枚で床に吸い付く位置が決まると、1と3はその間を埋める作業になり、歩幅を広げすぎずに済みます。
Top Down Character Sprites系の4フレーム設計とも相性がよく、トップダウン歩行ではこの4分解が最も無理が出ません。

上下動と重心移動のpx設計

4コマ化の効果が最も見えやすいのは上下動です。
接地コマで重心を1px下げ、中間コマで1px上げるだけで、足が出る方向と胴体の高さが連動します。
32x32ではこの振幅を±1pxに収めると輪郭が暴れず、64x64では±1〜2pxまで広げても情報量に負けません。
接地で沈み、中間で抜けるという高低差があると、歩幅そのものを大きくしなくても歩いている圧が出ます。

数式のように置くなら、0で-1px、1で+1px、2で-1px、3で+1pxです。
これで接地の瞬間に体重が乗り、中間で少し持ち上がるリズムができます。
横方向の移動量を増やすより、この縦の差を先に作ったほうが、トップダウンの小さなスプライトでは効果が読み取りやすくなります。
歩幅だけを広げると滑って見える場面でも、重心の上下が入ると足の出し引きに意味が生まれます。

私は一度、上下動を±1pxから±2pxへそのまま広げて比較したことがあります。
64pxでは胴の起伏が豊かになって、肩や腰の送りも見えやすくなりましたが、32pxでは一気に揺れとして目立ち、歩行より上下に跳ねる印象が先に立ちました。
この差を見てからは、サイズごとに振幅を分ける判断が有効だと実感しています。
同じ設計思想でも、32pxは最小限、64pxはもう1段だけ広げるという配分のほうが安定します。

64x64では、この上下動に合わせてフレームの再利用もしやすくなります。
1〜3まで作れば、後半の4〜6に相当する動きはシルエットを流用しながら微修正で回せます。
歩行全体を8コマへ広げる前段としても扱いやすく、情報量を増やしつつ工数を抑えられます。

セカンダリアクション（髪・服・小物）の位相差

4コマ歩行が3コマより自然に見える理由は、足だけでなく二次的な揺れに居場所を作れるからです。
中間コマの1と3で、髪先や上着の裾を進行方向と逆へ1px遅らせ、接地コマの0と2で元の位置へ戻すと、本体が先に進み、軽いパーツが少し遅れて追いつく流れが生まれます。
ここで髪全体を動かす必要はなく、先端だけの遅れで十分に伝わります。

肩の処理も同じ考え方で、足や腕に対してわずかに遅れて見せると硬さが消えます。
肩そのものを大きく振るのではなく、接地で戻り、中間で1pxだけ抜ける程度にすると、上半身の回転が読み取れます。
前のステップで作った腕の逆相に、この肩の遅れを重ねると、胴が一枚板のように見えません。

64x64では、髪先と裾だけでなく耳飾りやストラップのような小物にも1pxの位相差を足せます。
本体、髪先、小物の順に少しずつ遅れる層を作ると、密度の高いセルでも動きが分解されません。
私は64x64の歩行を組むとき、髪先だけ先に遅らせてみて、まだ静かなら耳飾りを1px追加する順で調整します。
この順番だと、差分の入れすぎで輪郭を散らしにくくなります。

4コマ歩行は、8コマほどの滑らかさはなくても、接地感と重心移動とセカンダリアクションを一通り載せられます。
トップダウンRPGでは、この密度が最もコストに見合います。
3コマから1枚増やすだけで、足裏の説明、胴体の沈み、肩や髪の遅れまで整理できるので、制作でも実装でも扱いやすい形に収まります。

方向別の描き分け：下・上・左・右はどこを変えるか

4方向歩行は、同じ歩幅を向きだけ変えて流用するとすぐに平板になります。
下・上・横で見える情報量が違うので、顔、後頭部、肩、背中、脚の前後差といった「その向きで読める部位」に差分を集中させると、4方向がただの色違いではなく別アングルとして立ちます。
トップダウンでは足先の派手な軌道より、床に触れている線を揃えるほうが歩行の説得力に直結します。

下向き

下向きは4方向の中で顔情報が最も多く、眉・目・口の3点だけで感情やテンポまで乗せられます。
正面向きの歩行では脚の前後差が横向きほど広がらないぶん、視線の強さや口元の開閉がそのまま「前へ進んでいる感じ」につながります。
停止ポーズを基準にしたら、接地コマでは顎の影を1pxだけ濃くし、中間コマでは頬のハイライトを1px上げると、顔まわりに沈みと抜けのリズムが生まれます。

この処理が効く理由は、接地で頭部がわずかに落ち、次の中間で体が抜ける流れを、顔の陰影だけで補強できるからです。
胴体の上下動を入れていても、顔の処理が毎コマ同じだと正面歩行だけ静止画の差し替えに見えます。
顎影を接地コマで一段締めると重心が下がった瞬間が読めて、頬ハイライトを中間で上げると持ち上がりが目に入り、3コマから4コマへ増やした恩恵が下向きで特に見えます。

口の扱いも地味に効きます。
笑顔や無表情を大きく崩す必要はなく、接地で口角を据え、中間で1pxだけ抜く程度で十分です。
下向きは情報を足しすぎると顔だけが騒がしくなるので、眉・目・口のどれか1つを主役に決め、残りは接地と中間の高低差に合わせて補助へ回すとまとまります。

上向き

上向きは顔がほぼ見えないので、後頭部・肩・背中で差を作る設計に切り替えます。
ここで下向きと同じ感覚で頭だけ上下させても、向きの違いが弱く見えます。
上向きでは後頭部の丸み、肩の前後差、背中の皺が主役です。
歩行中の肩ラインは左右を同時に動かすのではなく、前に出る側と引く側で±1pxずらすと、腕振りと胴のねじれが背面から読めます。

背中は布の情報を使うと差分を置きやすくなります。
上着やシャツの中央にあるV字の皺は、接地コマで1px深くすると体重が乗った瞬間の圧が見えます。
中間コマではその皺を浅く戻し、肩の高さも少し抜くと、背中全体が呼吸しているようなリズムになります。
顔情報がないぶん、上向きはこの1pxの皺変化がそのまま歩行感へ直結します。

後頭部も一定の丸に固定しないほうが動きが立ちます。
接地で首元の影を締め、次の中間で少し軽くすると、頭が胴に乗っている感じが出ます。
私は上向きを詰めるとき、顔がないから楽だと考えず、むしろ肩と背中で説明し切るつもりで組みます。
その意識に切り替えると、下向きのコピーに見える背面から抜け出せます。

横向き

横向きは足の前後差が最も分かりやすく、4方向の中で歩行そのものを見せやすい角度です。
64x64では近い脚の太腿と脛をそれぞれ1px太くし、遠い脚を1px細くするだけで、前後関係が一気に整理されます。
輪郭の太さを同じにすると、脚が交差した瞬間にどちらが前なのか判別しづらくなります。
近脚は面積で押し出し、遠脚は削って引っ込めるのが基本です。

32x32では太腿や脛の太さだけで差を出す余白が少ないので、靴の明度差と輪郭の濃淡に役割を移します。
前に出た脚の靴は少し明るく、後ろ脚は一段落とし、さらに近脚の靴アウトラインだけを1px太らせると、歩幅を変えなくても「今どちらの脚が前か」がすぐ読めます。
私はこの調整を入れたとき、同じ歩幅のままでも前に出た脚がはっきり伝わるようになって、横向きの見栄えが一段締まりました。
脚そのものの形を大きく変えるより、靴の輪郭1pxのほうが効く場面は多いです。

横向きは脚だけでなく、腕や装備の前後差も入れやすい角度です。
武器を持っているなら、進行方向へ1px先行させてから接地で戻すと、質量のあるものが少し遅れて収まる鈍い慣性が出ます。
布装備なら、マントの裾を接地コマで1px下げ、中間で1px上げると、脚の上下動と連動して布の重さが見えてきます。
横向きは足の前後差が主役ですが、こうした装備の追従を重ねると単なる足踏みから抜けられます。

トップダウンの接地感の作り方

トップダウンでは足の大きな弧を描きたくなりますが、優先するのは弧ではなく靴底の設置ラインです。
床に触れている水平線が毎回ぶれると、どれだけ足先を振っても滑って見えます。
接地コマでは靴底の水平ラインを2〜3pxはっきり見せ、非接地コマでは靴底を1px短くして、床から離れた瞬間を整理します。
これで踏んでいる足と抜ける足の役割が明確になります。

とくに正面・背面は脚の前後差を大きく取れないので、靴底ラインの統一が歩行全体の基準線になります。
足の弧を誇張すると、上から見た歩行なのに横視点の走り方のような印象が混ざります。
トップダウンRPGの4フレーム設計では、この接地線の安定が1枚ごとの読みやすさを支えます。
Top Down Character Spritesのような実務寄りの設計と相性がいいのも、床に対する説明を先に置けるからです。

装備品も接地感に合わせて位相を揃えると自然に見えます。
マントは接地コマで裾を1px下げ、中間で1px上げると、体が沈んだ瞬間だけ重さが出ます。
武器は進行方向へ1px先行させ、接地で元へ戻すと、腕より少し遅れて収束する感触が生まれます。
足の軌道だけを派手にするより、靴底、裾、武器の3つが接地と中間で同じリズムを刻んでいるほうが、トップダウンでは「床の上を歩いている」と読めます。

よくある失敗と修正方法

歩行アニメの破綻は、派手な描き直しより1px単位の基準合わせで直るものが多いです。
足が滑る、脚を引きずる見え方になる、全身が固定される、手を振りすぎる、上下方向だけ動きが弱い、左右反転だけで済ませて破綻する、といった失敗は原因が分かれているので、症状ごとに見る場所を固定すると修正量が急に絞れます。

足滑りの検出と1px補正の手順

足が滑って見えるときは、まず接地点を疑います。
見るべき場所は接地している足の踵か拇指球で、そこにガイドを置き、全フレームで同じ点が同じY座標に乗っているかを追います。
ここが1pxでも上下すると、胴体の上下動ではなく靴底そのものが床をなぞっているように見え、接地感が消えます。

私は床タイルに1pxの基準線を仮置きして確認するようになってから、足滑りの検出が一気に速くなりました。
靴底だけを見ていると目が慣れてしまいますが、床側に水平の物差しを置くと、接地コマのズレがすぐ露出します。
とくにトップダウンでは靴底の長さや角度より、接地点のY位置が揃っているかどうかのほうが歩行感へ直結します。

ズレを見つけたら、修正は単純です。
接地している足の靴底を1px再配置し、全フレームで整合を取ります。
+1px下へ落ちていたなら1px上げる、逆なら1px下げるだけで十分です。
ここで脚全体を大きく描き直す必要はなく、靴底の接地点を先に固定し、その後で脛や裾を追従させる順番にすると破綻が広がりません。

脚を引きずる見え方も、足滑りの近縁として出やすい症状です。
非接地脚の膝位置を+1px上げ、靴先を+1px前へ出すと、床から離れて前へ抜ける動きが読み取れます。
これだけだと上半身が置いていかれることがあるので、腕振りも+1pxだけ強め、脚と腕の相倒れを避けます。
足だけ持ち上げて腕が静止したままだと、脚を無理に引っ張っている印象になり、引きずって見えるからです。

上下動・肩揺れの最小差分の追加

全身が固定されて見えるときは、四肢の差分不足よりも胴体の位相が止まっていることが原因です。
歩いているのに頭、肩、腰が同じ高さに貼り付いていると、足だけが入れ替わる足踏みに見えます。
こういうときは胴体全体へ上下動を±1px追加し、接地と中間で高さを分けるだけで印象が変わります。

上下方向だけ動きが弱い場合は、設定そのものが0pxになっていないかを見ます。
0pxなら、接地コマを-1px、中間コマを+1pxに置き直すと、沈み込みと抜けが生まれます。
頭か胴のどちらか片方だけでも成立しますが、32px級では頭、64px級では胴のほうが差分の意味が読み取りやすい場面が多いです。
両方を同時に動かしてもいいものの、まず片方だけで効きを確認したほうが、どの差分が歩行感に効いているか判断しやすくなります。

肩揺れも止まっていると、上半身が板のように見えます。
肩ラインを左右±1pxで揺らし、前に出る腕側の肩をわずかに上げるか下げるかを統一すると、腕振りと胴のねじれがつながります。
さらに腰のベルトやウエストの基準線を中間コマで-1px上げると、重心が左右へ移っていることまで読めます。
頭、肩、腰の3点がまったく同じ位置に並ぶと、足だけ変えても全身が固定された印象から抜けません。

手を振りすぎると歩行より腕だけが目立ちます。
手先の移動幅が±3pxあるなら±2pxへ抑え、肩の揺れも±2pxから±1pxへ落とすと、視線が腕に吸われず脚へ戻ります。
横ブレも0〜1pxにとどめると、画面内で暴れて見えません。
腕振りは大きいほど元気に見えるわけではなく、胴体の上下動と肩揺れが入っていれば、振り幅は1段小さくても歩いている説得力が残ります。

左右反転破綻のチェックリスト

左右反転は作業時間を節約できますが、反転しただけでは片付きません。
髪分け、服の柄、紋章、ベルトの留め具、片側だけの防具のような非対称要素が残っていると、歩行中に向きだけ変わったはずなのにデザインの意味まで反転して見えます。
これが「左右反転だけで済ませて破綻するケース」の典型です。

チェックする項目は多くありません。
髪の分け目が進行方向に対して不自然になっていないか、胸や腰の柄が左右逆転していないか、紋章や文字的な模様が鏡像になっていないか、片肩装備が反対側へ移っていないかを見ます。
反転後に残る違和感は、たいてい1〜2pxの描き直しで消せます。
輪郭を1px戻す、柄の端を1px詰める、影だけ左右を入れ替える、といった小修正で“嘘”が目立たなくなります。

武器を持っているキャラは、反転の破綻がもっと出やすくなります。
剣や槍をただ左右反転すると、肩から手首までの流れと武器の角度が噛み合わず、手で持っているというより貼り付いているように見えます。
この場合は武器だけをひっくり返すのではなく、肩から手首のラインを描き直し、その延長に武器の柄や刃を置き直します。
腕の関節線が成立していれば、武器位置の修正量は少なくても自然に見えます。

左右反転のチェックでは、静止画の見栄えだけでなく往復再生での違和感も見ます。
正面では問題なく見えても、左向きだけ髪の重さが逆へ流れたり、右向きだけ肩章が浮いたりすると、歩行ループの途中で視線が引っかかります。
反転素材は便利ですが、非対称の意味を1つずつ戻してこそ完成します。
ここを詰めると、単なる時短のコピーではなく、左右それぞれに立った向きの絵になります。

ゲーム実装を見越した書き出しと確認

歩行ループは描けた時点で完成ではなく、ゲームへ入れた瞬間に崩れない形へ整えるところまでが制作です。
書き出しの形式、スライスの基準、エンジンごとの規格確認を先に揃えておくと、後から1px単位の修正を何度もやり直さずに済みます。
私自身、昔一度だけJPGで保存して輪郭ににじみが出て、結局ほぼ全コマを再描画したことがあり、それ以来は実装用素材をPNGで統一しています。

保存形式とカラープロファイルの注意

実装用の歩行素材を書き出す前に、保存形式とカラープロファイルの扱いを決めておくと、実装時の色ズレや輪郭崩れを防げます。
以下の節で具体的なフォーマットと注意点を説明します。
実装用の歩行素材はPNG保存が前提です。
透過をそのまま保持でき、輪郭の1pxを崩さず持ち込めるからです。
歩行アニメは接地や上下動を最小差分で組んでいるぶん、圧縮で輪郭が濁ると破綻が目立ちます。
とくに靴底、袖口、髪先のような外周は、にじみが出た瞬間に接地感とキレが落ちます。

JPGは非推奨です。
非可逆圧縮なので、単色で切っているはずの境界に中間色が混ざり、ドットの角が甘くなります。
私は一度これで痛い目を見ました。
見た目では軽い劣化に見えても、拡大すると輪郭の外側に薄い色が乗り、修正のつもりが再描画になりました。
歩行素材はファイルサイズより画素の正確さを優先したほうが、制作全体の手戻りが減ります。

GIFはプレビューやSNS投稿用には使えますが、実装元データには向きません。
色数が256色に制限される仕様であるため、制作中の色調整や差分比較の基準には適しません。
作業ファイルからの最終書き出しはPNG、共有用に軽いループを見せたいときだけGIFという切り分けで進めると混乱しません（JPEG の非可逆圧縮の性質について:

カラープロファイルと色管理

カラープロファイルも見逃せない判断材料になります。
制作中と実装後で色の見え方を揃えたいなら、書き出しごとに設定を変えず、同じ条件で統一します。
歩行アニメは1コマ単位ではなく連続で見るので、1方向だけ色味が少し転ぶだけでも、別素材を継ぎ足したような違和感が残ります。

Unityの32x32スライス例

Unityへ持ち込むときは、まずスプライトシートをGrid By Cell Sizeの考え方で切ります。
セルサイズをシートに合わせて固定し、32x32で作ったなら32x32、64x64で作ったなら64x64を指定します。
公式のスプライトエディタやスライス方法については Unity のドキュメントを参照してください。

32x32の3コマ歩行なら、1キャラぶんは4方向で12フレームです。
3x4構成で組んだシート全体は96x128になり、この単位で切れば1フレームずつきれいに並びます。
ピボットはまずCenterに置いておくと汎用性があります。
接地位置で床との関係を強く見せたい用途ならBottom Centerも候補ですが、当たり判定や武器差分との整合まで含めて決めるのが安全です。
（PNG仕様の参照:

実装の一例として、3コマ往復は0→1→2→1を0.1秒刻みでループ配置すると扱いやすいのが利点です。
3枚だけを0→1→2で回すより、中央コマを戻しに使ったほうが往復の切り返しが滑らかに見えます。
ここで効くのは絵そのものだけではなく、AnimationClip名とフレーム順をメモとして残しておくことです（詳しくはスプライトシートの作り方 を参照）。

実装手順については公式ドキュメントも必ず確認してください。たとえば Unity のスプライトエディタとスプライト周りの仕様は次を参照してください:

エンジン別チェックリスト

実装前に見るべき項目は、絵の出来より規格の一致です。
同じ4方向歩行でも、使うエンジンによって行順、フレーム数、透過の扱い、命名規則が変わります。
Unityではスライスとクリップ運用が中心ですが、RPGツクール系ではシートの並びと規格そのものが前提になります。
ここを曖昧にしたまま描き始めると、完成後に並べ替えだけでは吸収できないズレが出ます。

確認項目は次の4つに絞ると漏れません。

• 方向の行順が実装先の規格と一致しているかを確認する
• 1方向あたりのフレーム数が前提と合っているかを確認する
• 透過の扱いがアルファ透過なのか、透過色指定なのかを確認する
• ファイル名とアニメーション名の命名規則を統一しているか

歩行の見え方も、実装前提で最終確認しておきます。
100%表示と拡大表示の両方で、足滑り、1pxのズレ、上下動の位相を見ます。
方向ごとに速度や歩幅が揃っているかも欠かせません。
下向きだけ歩幅が広く、横向きだけ頭が上がるタイミングが遅いと、同じキャラでも別のアニメに見えます。
3コマなら12フレーム、4コマなら16フレームという総数の把握も、実装漏れを防ぐ目安になります。

エンジン依存の情報は、絵の設計と分けて管理すると混線しません。
シート上に直接メモを書き込むより、別テキストで「行順」「セルサイズ」「ピボット」「ループ順」を残したほうが、他人に渡すときも再利用するときも崩れません。
実装は絵の延長ではありますが、規格確認は別工程として扱ったほうが事故が減ります。

スプライトシートのalt text例

スプライトシートを記事やポートフォリオに載せるなら、alt textも実装目線で書いておくと内容が伝わります。
単に「歩行スプライト」では不足で、セルサイズ、方向数、コマ数、どの差分が入っているかまで触れると、画像を見られない環境でも構造が把握できます。

この素材なら、次のように書けます。
「32x32の4方向歩行スプライト。
各方向4コマ、接地で胴体-1px・中間で+1pxの上下動、横向きで頭+1px上がる」

この書き方の利点は、見た目の説明だけでなく、アニメーション設計の要点まで短く渡せることです。
サイズ、方向、枚数、差分のルールが入っているので、資料としての価値も上がります。
シート全体を見せる画像では、装飾よりも構造が伝わる文に寄せたほうが、実装担当とのやり取りでも認識が揃います。