ドット絵ジャンプモーションの作り方｜予備動作・滞空・着地を8フレームで完成させる

ドット絵のジャンプモーションは、8フレーム構成を基準にすると立ち・予備動作・中割り・蹴り上げ・滞空・落下・着地までを自然につなげやすい表現です。
16×16px級のキャラクターでも、スクワッシュとストレッチを数ピクセル単位で入れるだけで跳ね上がりの説得力が増します。
フレームは均一に並べるより、予備動作60〜80ms、滞空120〜180ms、着地80〜120msのように配分したほうが動きに緩急が出るでしょう。
Celesteのように強めの変形を使う作品もありますが、微細な変化でも60fps以上なら十分に効きます。
AsepriteやLibreSpriteで6種類ほど描き起こせば、流用を前提に8フレームへ組み立てやすいです。
まずは小さく作って、動きの山と谷をはっきり見せてみてください。

この記事でわかること

• ドット絵ジャンプモーションを8フレーム構成で組むときの、立ち・予備動作・中割り・蹴り上げ・滞空・落下・着地の流れ
• 16×16pxキャラクターに対して、スクワッシュで縦2〜3px縮めて横1px広げる見せ方
• ストレッチで縦1〜2px伸ばし、横1px縮めると跳躍感が出る理由
• 予備動作60〜80ms、滞空120〜180ms、着地80〜120msという時間配分の考え方
• Aseprite、LibreSprite、Piskelを使った描き起こしと練習の進め方

ジャンプモーションの全体構成を理解する

ジャンプモーションは、立ちから着地までを8フレームで組み立てるのが標準です。
立ちで重心を安定させ、予備動作で沈み込みを作り、蹴り上げで地面を押し返し、上昇から滞空で頂点の軽さを見せ、落下で重さを戻し、着地で衝撃を受け止める。
この順番があるから、短い動きでも「跳んだ」と一目で伝わります。
描き起こし自体は6種類にまとめて流用できるため、見た目の工程よりも、各フレームの役割分担を先に整理しておくのが近道でしょう。

ただし、インディーゲームなら最低3フレームでも成立します。
予備動作・滞空・着地だけでも、跳躍の意図と結果は伝えられるからです。
細かい中割りを削るぶん、ポーズの差を大きく取り、瞬間ごとの情報を明確にすることがポイントになります。
特に小さなドット絵では、フレーム数を増やすほど滑らかさは出ますが、読み取りやすさが落ちることもある。
まずは成立ラインを3フレームで押さえ、そこから必要に応じて蹴り上げや落下を足していく考え方が扱いやすいです。

サイズ設計では、48×48ピクセルを基準に考えると組み立てやすくなります。
32×32の基本サイズに、跳び上がる空間を上へ足した発想で、頭上の抜けや脚の伸びを確保できるからです。
キャンバスが狭いままだと、予備動作の沈み込みや着地の反動が切れてしまい、動きの説得力が弱まります。
16×16のような小型キャラでも、周囲の余白を含めた画面設計にしておくと、スクワッシュ&ストレッチの変化も載せやすくなる。
Celeste（2018年）のように、ジャンプの気持ちよさを見せる作品ほど、この余白の扱いが巧みです。

再生速度は、ドット絵では8〜12fpsが標準域です。
ここで大切なのは、全フレームを均等に置くことではなく、予備動作60〜80ms、滞空120〜180ms、着地80〜120msのように山を作ることにあります。
見せたいのは「速さ」ではなく「重さの移動」だからです。
フランク・トーマスとオリー・ジョンストンが『The Illusion of Life』で整理したスクワッシュ&ストレッチやアンティシペーションも、この時間差に落とし込むと扱いやすい。
Aseprite、LibreSprite、Piskelのどれで始めても、まずは8〜12fpsの中で緩急を付けてみてください。

予備動作（アンティシペーション）の描き方

アンティシペーションは、ディズニーの12原則の1つで、主動作の前に逆方向の動きを入れて「これから何が起こるか」を見せる技法です。
ドット絵のジャンプでも、いきなり跳ばずに少し沈み込むだけで重心移動が伝わり、動作に説得力が生まれます。
とくに16px前後の小さなキャラでは、形の変化が小さいぶん、予備動作の有無が印象を左右します。
ここを省くと、動きは速く見えても、どこか平板になるのです。

スクワッシュ（つぶし）は、その予備動作を見せるうえで相性がよい表現です。
16×16pxキャラクターなら、縦を12〜13pxまで縮めて、横幅を1px広げるだけで、押しつぶされた圧力が読めます。
大きく崩す必要はありません。
むしろ微細な変化のほうが、60fps以上のゲーム画面では自然に効きます。
ストレッチも同様で、縦を1〜2px伸ばす程度で十分に跳躍感が出るため、派手さよりもタイミングと比率を意識してみてください。

小さいドット絵で質感を出すなら、膝・腰・肩の関節を意識して形を折りたたむことが要点になります。
関節がどこで曲がるかを先に決めると、ただ上下するだけの動きではなく、体重がどこに乗っているかまで見えてきます。
ジャンプの標準構成が「立ち・予備動作・中割り・蹴り上げ×2・滞空・落下×2・着地」の8フレームで組めるのも、この関節の見せ場を分解しやすいからです。
描き起こしを6種類に抑えて流用する設計でも、関節の曲げ方を丁寧に扱えば、動きの情報量は落ちません。

タイミングは均一にしないほうが自然です。
予備動作は60〜80ms、滞空は120〜180ms、着地は80〜120msを目安にすると、沈み込みから跳び上がる流れに緩急がつきます。
さらに、基本ポーズと縮みポーズの間に中割りを1枚入れると、動きがつながって見えやすくなります。
細かい一枚ですが、ここで「ため」が生まれると、ジャンプ全体の気持ちよさが変わります。
Celeste（2018年）が積極的なスクワッシュ&ストレッチを使っているのも、見た目の誇張ではなく、操作感を伝えるためでしょう。

蹴り上げ〜上昇フェーズの描き方

ストレッチ（伸ばし）は、跳び出す瞬間の反動を見せるための準備です。
キャラクターを15〜16px に縦長化し、横幅を1px 狭めるだけで、静止していた体が一気に力をためた印象になります。
横方向を少し削るのは、空中へ抜ける直前の圧縮感を強めるためで、画面が小さいピクセル表現ほど効きます。
まずはこの一瞬で、次の動きの勢いを作りましょう。

上昇フェーズは2フレーム（低位置・高位置）に分けて浮き上がりを表現すると、跳躍の軌道が読みやすくなります。
低位置で地面との接地感を残し、高位置で重心を持ち上げると、ただ位置を変えただけの移動よりも「上がっている」感覚が明確です。
こうした段階分けは、動きの始点と終点を整理する効果もあり、後の滞空フレームにつなげやすくなります。

腕を上げ、膝を曲げた蹴り上げポーズが速度感を強調するのも、体の各部が同じ方向へ集まるからです。
腕が上がると上半身の勢いが見え、膝を曲げると脚の反発が強く見えます。
Celeste（2018年、Maddy Thorson＆Noel Berry 制作）はジャンプ時に大幅な変形を取り入れた参考作品で、輪郭の変形だけで跳躍の手応えを作れることを示しています。
細い変化でも、姿勢の意図が通ると動きははっきりします。

蹴り上げフレームから滞空への遷移は、均一タイミングを避けイージングをかけると自然です。
最初の一歩は強く、次に少し落ち着かせることで、踏み切りの勢いが空中で抜けていく感じが出ます。
一定間隔のまま切り替えると機械的に見えやすいので、ここは間の取り方が肝心です。
勢いのピークを短く、抜け際を長めにすると、跳躍の余韻まで描けます。

滞空フェーズと慣性の表現

滞空フェーズでは、最高点の前後に1〜2フレームのホールドを入れると、ジャンプがただの通過点ではなく「空中で止まった」印象になります。
120〜180ms ほど静止を挟むと、速度のピークが見えやすくなり、見ている側は重力が反転する瞬間を自然に受け取れるでしょう。
ここで大切なのは、止めること自体よりも、次の落下へ入るための準備として見せることです。

重力の設計も、滞空感の見え方を左右します。
gravity scale は 1.2〜2、coyoteTime は 0.08〜0.15秒が実装目安になり、上昇の余韻と着地の許容を両立しやすい値です。
数字が少し変わるだけで、跳ね返るような軽さにも、鈍く沈む重さにも寄るため、まずはこの範囲を起点に調整すると狙いが立てやすいです。
空中の印象は感覚論に見えて、実際にはこのあたりのパラメータでかなり整理できるのです。

滞空中は体を緩やかに縮める mid-air tuck が効きます。
腕や脚を少し内側へ寄せるだけで、上昇中の勢いが抜け、最高点で体重が消えるような空気感が出るからです。
伸び切った姿勢のままだと速度変化が読みにくく、ただ浮いているだけに見えやすい。
逆に、胸郭を少し畳んで重心を中央に寄せると、次の下降へ移るための「間」が生まれます。
短い動きでも、空中らしさはここで決まるでしょう。

滞空から落下へ切り替える瞬間は、足を前に出す、髪が重力方向に流れる、といった細部が効きます。
止まっていた体が下へ引かれる前兆が見えると、見る側は重力の存在を一拍遅れて理解できるためです。
足先の向きが変わるだけでも体勢の崩れ方に説得力が出るし、髪や装飾の流れが加われば、落下への移行が滑らかに読めます。
こうした小さな差分を重ねると、最高点の静止感と次の加速がはっきり分かれるのです。

着地フェーズとオーバーシュートの描き方

落下フェーズは、まず高位置から低位置へ切り替える2フレームで組むと、重力に引かれて速度が上がっていく感触を作りやすいです。
高い位置を長く見せすぎると浮遊に寄り、低い位置だけを置くと着地の前段が抜けるため、段階を分けること自体が加速の視覚化になります。
ここで大事なのは、移動量よりも「落ち方の順番」を見せること。
順序があるだけで、短いアニメでも体が下へ吸い込まれるように見えます。

着地ポーズは、予備動作のスクワッシュと同じドット絵を流用できます。
足を伸ばした状態から膝を曲げる形に変えるだけで地面への接触が読み取れ、同じシルエットでも意味が反転するのです。
新規の絵を増やさなくても、伸びた姿勢をつぶす方向へ少し変えるだけで、跳躍の終わりと衝撃の始まりがつながります。
制作コストを抑えつつ、見た目の説得力は落とさないやり方としておすすめです。

オーバーシュートは、着地後に体が少し沈み込む1フレームを足すだけで衝撃感が増します。
止まる直前に沈む動きが入ると、硬い床に当たった反動が伝わり、単なる停止よりも「受け止められた」印象が強くなるからです。
着地フレームの表示時間は80〜120ms が目安で、短すぎると接触が見えず、長すぎると動きが鈍く見えます。
ここは数値を軸にテンポを決め、着地の瞬間だけは少しだけ間を置いてみてください。

実装の感覚としては、落下→接地→沈み込みの3点を一息でつなげると扱いやすいでしょう。
とくに着地ポーズは、膝を曲げた瞬間に「今、床を踏んだ」と読めることが最優先です。
細かな揺れや装飾を増やす前に、この接触の一拍をはっきり出しましょう。
そうすると、跳ぶ側の勢いも、止める側の重さも、どちらもきれいに立ち上がります。

Aseprite を使った実際の制作フロー

Aseprite はドット絵・スプライト特化の有料ソフトで、Steam で販売されています。
最初から制作機能がアニメーション前提でまとまっているため、静止画よりも「動かす絵」を描く工程が組みやすいのが強みです。
無料で試すなら LibreSprite があり、旧 Aseprite OSS フォークとして基本の流れをつかむ練習に向きます。

実制作では、まずタイムラインを開いてラフフレームをすべて並べ、あとから清書する順番が効率的です。
1枚ずつ完成させようとすると動きの流れが見えにくいですが、最初に全体を置けば、歩き方や待機モーションの間隔を俯瞰したまま修正できます。
絵の完成度より、動きの設計を先に固める。
これが作業の迷いを減らします。

オニオンスキン機能は、中割りを描くときに特に役立ちます。
前後フレームを半透明で重ねて見られるので、どの位置で形を変えるべきかが一目で分かり、線のブレも抑えやすくなります。
動きの速いアニメほど、目印がないと中間フレームを入れすぎたり抜きすぎたりしがちです。
半透明表示を使って基準線を確認しながら進めると、枚数を増やしても破綻しにくくなります。

書き出しは File → Export Sprite Sheet で行います。
フレーム単位のままでは使いにくい素材でも、スプライトシートにまとめるとゲームエンジン側で扱いやすくなり、差し替えや管理も整理しやすいでしょう。
特にキャラクターの待機・歩行・攻撃のように複数動作を並べる場合、1枚に集約されているほうが確認もしやすく、制作後半の手戻りを減らせます。

Piskel はブラウザ無料でインストール不要なので、Aseprite の前に練習したい人に向いています。
環境構築で止まらず、そのままフレーム作成に入れるため、初回は「描く手順を覚える」ことに集中できます。
短いアニメを何本か試してから Aseprite に移ると、タイムライン操作や中割りの考え方が自然に身につきます。
まずは軽い題材で触ってみてください。

よくある失敗と改善のチェックリスト

初心者がつまずく原因は、見た目の派手さより、動きの骨格を外してしまうことにあります。
まずは全フレームを均一タイミングで再生しないことです。
一定間隔だけで動かすと人形のように見えやすく、加速と減速をつけるイージング調整で重心の移動が自然になります。
止める瞬間にわずかな余韻を残すだけでも、動きはかなり生きた印象になるでしょう。

スクワッシュ・ストレッチは強い表現ですが、入れすぎるとコミカル寄りになります。
そこでは、作品全体の世界観に合わせて強度を決めるのがおすすめです。
シリアスな場面なら伸縮は控えめに、軽快な演出なら誇張を少し増やしてみてください。
要するに、技法そのものよりも、キャラクターの雰囲気と画面の温度に合わせる意識が基準になります。

ラフ確認を飛ばして細部を描き込む流れも、失敗を招きやすいです。
輪郭やポーズの段階で動きの流れを確かめておけば、後から関節の向きや重心のズレに気づけますが、完成直前まで放置すると修正範囲が広がります。
特に肘・膝・肩・腰は動きの支点なので、ここを無視すると硬さが出ます。
まずラフで関節の角度を見て、そのあとに描き込みへ進めましょう。

関節の可動を意識すると、アニメーションは一気に安定します。
肩だけ、膝だけを動かすのではなく、腰から末端まで連動させると、体重移動の説得力が増すのです。
おすすめなのは、各ポーズで「どこが支点か」を先に決めること。
支点が明確だと、次のフレームでどこを少し遅らせ、どこを先に送るか判断しやすくなります。
自然な動きは、細部より先に骨組みを整えるところから生まれます。