ドット絵 手の描き方｜指の省略とサイズ別設計

ドット絵の手は、実物のように5本指を再現しようとするとすぐ黒いカタマリになります。
16x16のような小さなキャンバスでは1本の指に割ける幅が足りず、ゲーム会社で新人グラフィッカーに最初に「手を描き込むな」と教えたのも、この失敗を何度も見てきたからです。
だから本記事では、手は写実ではなく可読性のために大胆に簡略化する方針を押し出します。
16x16はミトン型、32x32は親指とまとめた2〜3指、64x64以上で初めて5本指が見えてくる、というサイズ別の早見を覚えるだけで、描きすぎによる崩れはかなり減らせます。
手順もいきなり指から入らず、アタリからシルエットを固めて親指の位置を決め、最後に指を分けていきます。
指と指の間に1pxの暗い影色を置くだけで輪郭は保ったまま分離できるので、「細部を足す」のではなく「隙間を作る」と考えてみてください。
この順番さえ守れば、手は塊として自然に見え、初心者がやりがちな黒い失敗も避けやすくなります。

ゴールイメージ：ドット絵の手は『簡略化』が正解

ドット絵の手は、現実の解剖学を細かく再現するほど良くなるわけではありません。
小さなキャンバスほど、まず優先すべきなのは「何をしている手か」が一目で伝わる可読性であり、そのためには指を足すより削る判断が効きます。
完成像は写実ではなく、シルエットで役割が読める手です。

写実ではなく『何をしている手か』が伝われば勝ち

手で最初に残すべきなのは、輪郭の塊と親指の向きです。
現実の手は細かい関節や指の長さが気になりますが、ドット絵ではそこまで追うと情報が飽和し、かえって黒いカタマリに見えやすくなります。
アタリを取ったら単色ベタでポーズを確認し、そこから必要な分だけ指を割る流れが安定します。
グー、パー、軽い握りのどれに見せたいかを先に決めるだけで、迷いはかなり減るでしょう。

現場では16x16のフィールドキャラの手を、肩から伸びた1〜2pxの線の先の小さな点で済ませることがよくありました。
それでも歩行や攻撃モーションの中に置けば、見る側は手として受け取ります。
つまり、情報量が少ない場面ほど、細部ではなく「動きの文脈」で読ませる設計が生きるのです。
手の表現は、細かさより役割の明快さで決まります。

サイズ別・指の本数早見イメージ

サイズが小さいほど、指は機械的に省略したほうが読みやすくなります。
16x16では手は2〜4px四方の塊として扱い、指は分けずミトン型でまとめるのが定石です。
これなら「手がそこにある」という事実は十分伝わりますし、輪郭も崩れにくい。
32x32になると手に4〜6px幅を割けるので、親指1本＋まとめた2〜3指という構成が現実的です。
64x64以上で初めて、1指あたり1〜2pxを使った5本指分離が視野に入ります。

逆に言えば、サイズが小さいのに5本指を無理に描くと、各指がつぶれて全体のシルエットが濁ります。
指は増やすほど精密になるのではなく、キャンバスに対して適正な密度があるだけです。
1指は最低2px幅を確保し、足りない分は「描かない」ほうが強い判断になります。
ここを割り切れると、手の失敗はかなり減るはずです。

レトロゲームの手がミトン型だった理由

ファミコンやスーファミ時代の名作キャラにミトン型の手が多いのは、ハード制約だけが理由ではありません。
小さくても読める形として、あの省略は実に合理的だったからです。
手の本質は細かな指先よりも、武器を持つ、歩く、殴るといった動作の方向性にあります。
その方向がシルエットで伝わるなら、ミトン型でも役目は果たせます。

64x64のバストアップ用キャラで、同じ感覚のままミトン型を続けたところ、手抜きに見えると指摘されたことがあります。
そこで初めて、サイズに応じて情報密度を上げる必要を痛感しました。
小さな画面で有効な省略も、面積が増えれば説明不足になるのです。
レトロな省略は今も有効ですが、使う場面は見極めてしましょう。

描く順番もシンプルです。
塊として正しい手を先に作り、そこへ必要最小限の指の分割と陰影を足していく。
この引き算ベースの考え方が、ドット絵の手をいちばん安定させます。
見栄えを盛る前に、まず読める形を作る。
おすすめです。

前提：実物の手を3パーツに分解して捉える

手をドットに落とす前は、現実の構造をいったん最小単位までほどいておくと崩れにくくなります。
見るべきなのは手のひら、親指以外の4指、親指の3つで、ここを押さえるだけで省略しても「手として読める」土台ができます。
とくに大切なのは、全部を細かく描くことではなく、何を残して何を捨てるかを先に決めることです。
親指の向きと手の輪郭シルエットさえ守れれば、情報量が少ないサイズでも形が迷子になりにくいでしょう。

手のひら・4指・親指の3分割で考える

実物の手は、手のひら、親指以外の4指、親指の3パーツに分けて捉えると安定します。
手が苦手な人に紙の上で実際の手を観察させ、三つに線を引かせる指導をすると、ドットに移したときの崩れが目に見えて減りました。
細部を覚える前に骨格のような区切りを頭に入れるほうが、描画中に迷いにくいからです。
5本の指を同じ強さで追いかけると、完成前に情報が飽和して黒いカタマリになりやすいです。
3分割なら、まず手のひらで面を取り、次に4指のまとまりを置き、最後に親指で向きの違いを足す、という順番で整理できます。

比率の目安

指の長さは手全体の長さのおよそ半分です。
手のひらと指がほぼ1:1だと考えておくと、デフォルメしたときに手のひらだけが膨らみすぎたり、逆に指だけが不自然に長く伸びたりする崩れを防げます。
この比率は、細部の正確さよりも「全体の読みやすさ」を優先する場面で効きます。
とくに小さなドットでは、数値そのものを厳密に守るより、手のひらと指の重さが拮抗して見えることのほうが効くからです。
グー、パー、軽い握りのどれでも、まずこの大づかみの関係を確認してみてください。

ピクセル化で『捨てる情報』と『残す情報』

ピクセル化では、情報を捨てる作業が避けられません。
捨ててよいのは指の関節や爪などの細部で、絶対に残すのは手の輪郭シルエットと親指の向きの2つです。
ここを固定すると、手は小さくなっても「どの向きに開いているか」が読めます。
親指だけは他の4指と向きも付き方も違い、手のひらの側面から斜めに生えます。
この特異性を残すかどうかで手らしさが大きく変わるため、デフォルメでも親指の向きは最優先で死守します。
実際、親指の位置だけ意識して描き直してもらうと、それまで「何かおかしい」と言われていた手が一気に手らしく見えることがありました。

この考え方は、次のステップ2で何本の指を残すかを決める基準にもなります。
小さいサイズほど削る判断が重要になり、残すべき情報がはっきりしているほど、完成形は読みやすくなるでしょう。

ステップ1：アタリとシルエットを置く

キャンバスサイズと手の専有px数を決める

手は最初にサイズを確保したほうがいいです。
キャラ全体が32x32なら手に4〜6px四方、16x16なら2〜4px四方を先に押さえ、そこから指や輪郭を詰めていくと破綻しにくくなります。
面積が足りないまま細部へ進むと、指の形を足した瞬間に全体のバランスが崩れやすいからです。

1色ベタ塗りでポーズの可読性を確認

いきなり指を描かず、まずは黒や濃いグレー、あるいは赤一色でもいいので、手全体を単色のシルエットで置きます。
こうすると「握っている手」なのか「開いた手」なのかが一目で読めるかを先に確認でき、形として弱い部分がすぐ見えます。
赤一色で置いてから黒に置き換える進め方を教えると、初心者でもチェックの視点が揃いやすく、手戻りが減りました。
読めない輪郭は、どれだけ指を増やしても読みやすくはならないでしょう。

シルエット段階で親指の位置も先に決めておくと、後工程が楽になります。
親指は手のひらの左右どちら側につくかで向きの印象が決まるため、あとから差し込もうとするとスペースが足りず、形がつぶれやすいからです。
受講者の中にも、親指を最後に足そうとして毎回つぶれていた人がいましたが、「シルエットのうちに親指の場所を空ける」と伝えただけで解決しました。

基本3ポーズ（グー・パー・武器持ち）の選び方

基本ポーズは、まずグー（握り）、パー（開き）、軽い握り（武器・道具持ち）の3型から選ぶと迷いません。
多くのゲームキャラの手は、この3つの組み合わせでほぼ足ります。
ポーズを増やす前に形の役割を整理すると、短いpx数でも伝わる手になります。
グーはまとまり、パーは開放感、軽い握りは行動の意図が出しやすい形です。

シルエットが読めて、親指の位置まで決まった時点で、手の8割は完成していると考えていいです。
残りは指の分割や陰影の調整で、ここから先は「何を足すか」より「何を削るか」が効いてきます。
基本3ポーズを土台にしておけば、迷いが減って、手の表情も安定します。
まずはこの3つを使い分けてみてください。

ステップ2：指を分割する

16x16では指を分けず、手全体をひとつの塊として見せるのが正解です。
無理に5本へ割ると線が詰まり、黒くつぶれて形が読めなくなります。
まずはミトン型でシルエットを安定させ、輪郭の気持ちよさを優先しましょう。

16x16：指を描かないミトン型

16x16は、指先の情報を入れるには面積が足りません。
ここで必要なのは「指の本数」ではなく「手らしさ」で、親指のふくらみや手のひらの外形が伝われば十分です。
指を刻むほど形は細くなり、1px単位の線が増えて読み取りにくくなるので、潔く分割しないほうが完成度は上がります。

実際、5本指を詰め込もうとしていた手をミトン型に戻すだけで、輪郭が落ち着いて見えることは珍しくありません。
小さく描くほど情報量の整理が効くので、ここは削る判断が強いです。

32x32：親指＋2〜3指にまとめる

32x32になると、指の存在を少しずつ出せます。
ただし、5本を均等に並べる発想はまだ早く、親指1本と残りを1〜2塊にまとめるほうが安定します。
人差し指側の塊と小指側の塊に寄せるだけでも、手の向きや動きは十分に伝わるでしょう。

5本指に挑戦して毎回つぶしていた人には、まず本数を減らすことをおすすめします。
親指＋2塊の3パーツにした途端、初めて指として読める手が描けるケースは多いです。
1指の幅は最低2pxを確保し、足りないなら本数を減らす。
ここで大事なのは、数を守ることではなく、見えることです。

64x64：5本指を1pxの隙間で分離

64x64以上になると、ようやく5本指の分離が現実的になります。
1指あたり1〜2pxを確保し、付け根から先端へ向かって自然に短くなる流れを作ると、人間の手らしいリズムが出ます。
特に小指側を1px下げると、平板な横並びにならず、形に軽い傾きが生まれて見栄えがよくなります。

分離の肝は、指と指の間に1pxの暗い色を入れることです。
輪郭線で区切るより、影色で割ったほうが面のつながりを壊さず、指先だけがすっと浮きます。
格子状に見えていた手が、柔らかい塊として立ち上がるので、64x64ではこの1pxがもっとも効く一手になります。
おすすめです。

ステップ3：陰影とアウトラインで立体感を出す

平面的に見える手を立体へ変える鍵は、光源の向きと色数の絞り込みです。
左上か右上のどちらか一方向に光を固定し、影・ハイライト・アウトラインをその前提でそろえると、関節の凹凸や指の重なりが急に読みやすくなります。
色を増やしすぎず、どこに暗さを置き、どこだけを光らせるかを決めることが大切です。

光源を1方向に固定して影を置く

光源は左上か右上のどちらか一方向に固定し、手だけでなくキャラ全体でも同じ向きにそろえるのが基本です。
ここがぶれると、指は右から光っているのに甲は左から当たっている、といった矛盾が起きてしまいます。
小さな手ほど情報量の誤差が目立つため、まずは反対側の下面に1px帯で影を通し、関節の下や指の間のくぼみにだけ暗さを足していきましょう。
影の位置が決まると、平らな塊だった手に奥行きが生まれます。

影色をただ黒くすると、輪郭は締まっても肌の柔らかさが消えやすいです。
そこでベース色より明度を20〜30%下げ、少し青紫に寄せると、暗さの中に温度差が残って自然になります。
影を置く場所も、面全体ではなく指の間、手のひらの凹み、関節の折れ目に絞るのがコツです。
以前、影色を黒一辺倒で処理していた人に「明度を下げて少し青紫に寄せる」方法を試してもらったところ、プラスチックっぽさが消えて肌の質感が出たと驚かれました。
おすすめです。

ベース・影・ハイライトの3色配色

手の塗りは、ベース・影・ハイライトの3色で組むと整理しやすくなります。
1パーツにつき3色を基本にし、手全体でも多くて6色程度に抑えると、面のつながりが保たれてノイズが減ります。
色数が増えるほど、指の短い面や小さな関節に細かな段差が増えたように見え、かえって読みにくいのです。
少色で立体を作る意識を持つと、塗りの迷いが減って、形そのものを見せやすくなります。

ハイライトは光源側の指の山、つまり関節の上や甲の高い面に1〜2pxだけ入れるのが効きます。
広く塗ると金属のように反射してしまうので、最も光が当たる一点に絞るのがよいでしょう。
暗部との対比がはっきりすると、指の丸みや骨の出っ張りが自然に伝わります。
影・ベース・ハイライトの役割が分かれていれば、色を足さなくても十分に立体感は出せます。
しましょう。

アウトラインは『黒』より『暗い肌色』

アウトラインは純黒にすると、手だけが背景から浮きやすくなります。
とくにキャラ本体がやや柔らかい色設計のとき、手だけ黒縁だと別パーツのように見えやすいです。
そこでベース色を暗くした濃い肌色を線に使うと、境界は保ちながらも全体の色味がつながります。
全パーツを黒で囲っていたキャラの手だけをこの方法に変えた検証では、手が体から浮かず、一体感が増しました。
おすすめ。

このやり方は、線を消すのではなく、線の主張を素材に合わせて弱める発想です。
アウトラインが肌の延長に見えると、腕から手へ、指先へと視線が途切れず流れます。
背景や服の色が近い場面でも馴染みやすく、手だけが記号的に目立つ問題も抑えられます。
黒で締める気持ちよさはありますが、手のような小さいパーツでは、暗い肌色のほうが形の説得力を保ちやすいでしょう。
試してみてください。

よくある崩れと1px単位の直し方

手が黒いカタマリに見える崩れは、描き込み不足よりも「隙間が見えていない」ことが原因です。
まずは輪郭を足す前に、指の間へ影色を1pxだけ差し込んで、集合した面に分節を作りましょう。
たったそれだけで、黒い塊だった手が指の集まりとして読めるようになります。

症状1：手が黒いカタマリになる

この症状は、指の間に入るべき影色1pxが抜けていると起こります。
受講者の手を黒い塊のまま見せたあと、こちらで影色を2か所だけ足すデモをすると、全員が「そんな少しで」と驚くのが定番です。
実際、塊に見える原因は情報不足ではなく境界の欠落なので、隙間になる位置へ1px足すだけで、指のまとまりが急に立ち上がります。
描き直しの量ではなく、分離の位置を見極めることが肝心です。

症状2：親指の位置・向きが不自然

親指が逆向きに見えるときは、シルエット段階で親指の場所を決めていないことが多いです。
手のひらを基準に、握りなら内側、開きなら側面下方へ親指を置き直すと、骨格の流れがそろいます。
左右反転して確認するとズレが露出しやすく、親指が逆だったキャラにその場で内側配置へ直し戻しただけで、本人が原因を理解して再発しなくなった例もあります。
形の違和感は、細部より先に全体の向きで解決することが多いでしょう。

症状3：指を描きすぎて読めない

32x32以下のサイズで指を増やしすぎると、1本あたりの幅が細くなり、情報が互いに干渉して読みにくくなります。
指は2〜3本に減らし、1指あたりの幅を2px以上に広げると、まず輪郭が追えるようになります。
細部を足すほど見やすくなるわけではなく、むしろ情報を減らして隙間を作ったほうが安定するのが手描きの面白いところです。
手が苦手なうちは、描き込むより削る方向で整える癖をつけましょう。

次のステップ：武器・ポーズ・アニメへの応用

武器を持つ手は、まず「握っている」と読める形を作るのが先です。
細い指を先に描き込むより、軽く握ったシルエットを置き、剣の柄や道具の持ち手を1〜2pxだけ前面に出して重ねると、手と物の関係が一気に伝わります。
指差しや手を振るポーズでも順番は同じで、シルエットで意図が読めるかを確かめてから指を足しましょう。

武器・道具を持つ手の作り方

武器を握る手は『軽い握り』をベースにすると扱いやすいです。
握りを強くしすぎると指先の形が詰まり、小さいサイズでは何を持っているのか判別しにくくなります。
そこで、まず手の塊を見せ、柄や持ち手だけを少し前に出して輪郭を分けます。
制作現場でも、剣の柄が手の後ろに隠れて「握って見えない」絵になっていたものを、柄を1px前面に出しただけで解決できました。
たった1pxでも、前後関係が読めると説得力は跳ね上がるのです。

この考え方は、武器に限らず物を持つ手全般に使えます。
たとえば指差しや手を振るポーズでも、先にシルエットで「何をしている手か」を決め、そのあとで必要な指だけを足していくと破綻しにくいでしょう。
ポーズの種類が増えても、基本フローは変わりません。
軽い握りから始めて、見せたい道具だけを少し前に出す。
これが小サイズで読みやすい手の作り方です。

アニメーションでの手の扱い

アニメーションでは、手のシルエットを優先してコマ間の変化を大きく捉えるのが鉄則です。
小さい手で1pxの指を毎コマ描き分けると、動きより先にチラつきが目立ちます。
塊の輪郭が安定していれば、指の細部を細かく変えなくても動きは十分に見えるものです。
新人の歩行アニメで指先ばかり変えて不自然に見えた場面も、手をシルエットの塊として扱うよう修正した途端、流れが滑らかになりました。

歩行や攻撃モーションでは、手は腕の先端として大きな動きの一部になります。
1コマごとに指を描き分けるより、手全体の位置と向きを少しずつずらす方が、小サイズではずっと効果的です。
振り下ろしの途中で手の輪郭が安定していれば、動きの勢いが伝わりますし、見ている側の視線も迷いません。
アニメは細部の足し算ではなく、塊の動かし方で決まる場面が多いのです。

もっと上達するための関連トピック

手の描き方は、これだけで独立して完成するというより、全身の設計の中で効いてきます。
顔の向き、腕の長さ、服の袖口、さらにはキャラクター全体のシルエットが揃って、ようやく1体として見えるからです。
手だけを単体で見て整えるのではなく、関連トピックへ進んで他パーツとのつながりを確認すると、絵全体の説得力が上がります。
次はキャラクター全体や顔、服の作り方にも目を向けてみてください。