ドット絵 服・衣装の描き方｜シワと素材感を表現するコツ完全解説

ドット絵の服・衣装は、32×32ピクセル前後の制約の中で、シルエットと代表的なシワラインをどう残すかが肝心です。
色数は1スプライトあたり8〜16色に収め、影色は単に暗くするだけでなく色相をわずかにずらすと、衣装の立体感がぐっと安定します。
光源は左上を基準にそろえ、素材ごとにハイライトの形を変えれば、シルクの鋭さやコットンの柔らかさ、レザーの硬さまで読み取りやすくなるでしょう。
麻やウールにはディザリングが効く場面もありますが、輪郭沿いに均一な影を敷くピラーシェーディングは避けて、素材の個性が伝わる描き分けを目指しましょう。

この記事を要約すると

• 32×32ピクセルが初心者向け標準スプライトサイズ（ゲーム業界慣例）
• 推奨パレット色数：1スプライトにつき8〜16色（衣装・肌・小物合計）
• 光源方向：左上固定がピクセルアートの慣例的な標準
• ディザリング（メッシュ）：麻・ウール等ざらつき素材に有効、シルク・レザーには逆効果
• ピラーシェーディング（輪郭沿いに均一に影を入れる手法）は避けるべきアンチパターン

ドット絵で服を描く前の基礎知識

32×32ピクセルは、初心者が服の形を学ぶのにちょうどよい標準サイズです。
広すぎない画面だからこそ、襟、袖、裾、前身ごろの重なりをどこまで残し、どこを省くかの判断がそのまま完成度になります。
シワを一本ずつ描き込むより、体の動きが伝わる代表的なラインだけを拾うほうが、むしろ読みやすい服になるのです。

色数も強く制限されます。
1スプライトに使う色は一般的に8〜16色が推奨され、服・肌・小物で色を共有する配分設計が欠かせません。
たとえば影色を別々に増やしすぎると全体が濁りやすいので、同系色の濃淡をまとめて扱い、必要な差だけを残すと整理しやすくなります。
色を増やすより、役割を決めて使い分ける発想が向いています。

光源は左上固定が慣例で、右下に影、左上辺にハイライトを1pxずつ置くのが基本ルールです。
ここが揃うと、同じ服でも立体感が安定し、素材の硬さや厚みまで伝わりやすくなります。
影色は単に暗くするだけでなく、わずかに色相をずらすと沈み込みを防げますし、面の切り替えも自然に見えます。
シルクなら鋭い線、コットンなら広い面、デニムなら斜めの点、レザーなら高コントラストの点を意識してみてください。

そして忘れたいのが「着ぶくれさせない」ことです。
袖口や裾を少し広げる程度にとどめ、体型ラインを保つと、服の情報量を増やしても人物の輪郭が崩れません。
特に小さなスプライトでは、布の厚みを欲張るほど顔や手足との境界が曖昧になりやすいので、シルエットの読みやすさを優先して描きましょう。
結果として、服の説得力も上がるでしょう。

シワの基本：力のかかる方向を理解する

シワは、布に力が加わる点で生まれます。
引っ張られる場所、押さえ込まれる場所、ほかの布と重なる場所がテンションポイントになり、そこから放射状に線が走るのです。
だから、闇雲に細い線を増やすより、どこに力が集まっているかを先に見極めるほうが、形の説得力は上がります。

服の基本パターンは、垂れ下がるシワ、引っ張られるシワ、たまるシワ、重なるシワの4つです。
たとえば肩や肘では引っ張られた線が出やすく、腰回りや裾では布が余ってたまりますし、袖口やベルト周りでは重なりが影になる。
ここを押さえると、シワを「装飾」ではなく「力の結果」として扱えるようになります。
理由はシンプルで、服は静止画でも必ず重力と接点の影響を受けるからです。

ドット絵では、実際のシワをすべて描く必要はありません。
代表的な1〜2本のシワラインだけを残し、残りはシルエットと面の切り替えで読ませるほうが、32×32pxのような小さな画面では見やすくなります。
細部を増やしすぎると、かえって形がぼやけるからです。
まず大きな輪郭、次に必要最小限の折れ、という順で整理してみてください。

生地の性格も、線の出方を決めます。
デニムやレザーのような硬い素材は、力がかかった部分で直線的に折れやすく、シワも角の立った表現になります。
シルクや薄手綿のように柔らかい素材は、布がたわみながら流れるので、曲線的でなめらかなシワが合います。
64px以上のスプライトなら描き込みを増やして素材差を出しやすいですが、16〜32pxではシワを省略しても十分です。
解像度に合わせてどこまで描くかを切り替える判断こそ、仕上がりを整える近道でしょう。

素材別の描き分け：光の反射と影の形状を変える

コットンは光が広く拡散するので、ハイライトも一点ではなく面として置くと自然です。
影も硬く切らず、輪郭に沿って柔らかく曲線的に落とし、明部・中間部・暗部の2〜3色で段差をなだらかに見せると、布のやわらかさが伝わります。
細かく刻むより、広い面をまとめて塗る意識が向いています。

シルク・サテンは逆に、高コントラストの素材として扱うのが基本です。
1〜2px幅の明色ラインを折れ目や張りの頂点に通すと、つるりとした表面が立ち上がりやすく、点状のハイライトより線状の光のほうが質感に合います。
深い影を隣接させて差を強く出すと、滑らかさと艶が同時に読み取れるでしょう。

デニムは斜め方向の織り目を、細かいドットパターンで拾うと安定します。
影は暗めの青系に寄せ、光が当たる側には白みがかった水色を置くと、厚手の綿布らしい冷たさと摩耗感が出やすいです。
織り目を線で描き込むと騒がしくなりやすいので、点の密度で硬さを調整してみてください。

レザーは色の濃淡差が大きく、折り目に沿って鮮明なハイライトと深い影を入れると素材感が締まります。
ここではディザリングを使わず、面の切り替えをはっきり見せるほうが革の厚みや張りが出るのです。
メッシュのようなディザリングは麻やウールのざらつきには効きますが、シルクのような滑らかな素材では逆効果になるため、素材の表面を先に決めてから陰影を選びましょう。

色選びとシェーディングの実践テクニック

限られた色数で衣装を立ち上げるなら、影をただ暗くするのではなく、服の色に寄せた有彩色で組むほうがまとまりやすいです。
青い服なら影を藍色や紫寄りに置き、緑の服なら青緑から青系へ少し色相をずらすだけで、面の奥行きが自然に見えてきます。
無彩色の白・黒・グレーは画面を鈍らせやすいので、輪郭も影も同系の有彩色でつなぐ発想が向いています。

特に1スプライトでは、影色は1〜3色に収めるのが扱いやすいでしょう。
色数を増やしすぎると小サイズでは境界がにごり、シルエットの切れ味まで失われます。
おすすめです。
明部・中間部・暗部を最小限で整理し、まずは大きい面の差で読ませてみてください。

ハイライトは素材で置き方を変えると効きます。
目や金属、シルクのような反射が強い部分は1pxの点ハイライトが合い、布面は複数pxの面ハイライトにすると質感が崩れにくいです。
光っている場所を細く尖らせるべきか、広く受け止めるべきかで見え方が変わるため、ここを分けて考えましょう。
布面に点を置きすぎると硬くなり、反射素材に面を広げると鈍く見えます。

輪郭も同じで、黒で囲むより服の色を暗くした有彩色で線を引くと、衣装が周囲となじみ、立体感も出しやすくなります。
とくに袖口や襟のように形が重なる部分では、アウトラインがただの境界線ではなく、面の向きを示す情報になります。
影色、ハイライト、輪郭色を同じ設計思想でそろえて、画面全体を一つの塊として見せてみてください。

衣装パーツ別の描き方：トップス・ボトムス・ローブ

シャツやトップスは、脇・肘・腰の3箇所にシワを集めると、布がどこで引かれているかが一目で伝わります。
首まわりはタイトに詰め、体の動きに沿ってわずかに変形させると、服が胴体から浮かずに自然に見えます。
広い面を均一に刻むより、力が集中する場所だけを強く出すほうが読みやすいでしょう。

ズボンやボトムスは、股関節と膝の2点にシワを寄せ、裾のたまりは2〜3本の曲線で省略すると収まりがよくなります。
細かい折り目を増やしすぎると脚の形が埋もれるため、関節の曲がりと重力の方向を先に決めてから線を置いてみてください。
短い線でも、荷重の流れが通れば十分に伝わるのです。

マントやローブは、重力方向の垂れ線を等間隔に並べると、布の重量感が素直に出ます。
端部にだけ影を差すとひだが締まり、中央は広く、外周は暗くという面の差で厚みが読めます。
袖口・襟・縫い目は1pxの細線、あるいは1pxの明暗差で拾うと、解像度の低い画面でも輪郭がぼけにくいです。
柄物のストライプやチェックは小サイズでは省略が基本で、32px以下なら単色、64px以上からドットパターンへ切り替えると、情報量と可読性の釣り合いが取りやすくなります。

アニメーション対応：動いても崩れない衣装の描き方

歩行や走行の衣装は、体の動きに合わせてシワをその場で固定しないほうが自然です。
腕や足が振られた瞬間に布だけが同時に反応すると、硬い紙人形のように見えます。
そこで、シワの位置を1〜2フレーム遅らせる「揺れの遅延表現」を入れると、布が慣性を持って追従している感じが出ます。
小さなスプライトでも、この遅れがあるだけで服が生き物の動きに乗って見えるでしょう。

マントや裾のように大きく翻る部分は、3〜4フレームのループで設計すると破綻しにくいです。
最大まで開くフレーム、戻り始めるフレーム、元のシルエットに収束するフレームを分けて考えると、動きが単なる揺れではなく、布の重みとして読めます。
シルエットの外形が変わる瞬間を意識しておくと、細かな線を増やさなくても動きが伝わりますし、ループの頭と終わりもつなぎやすくなります。
おすすめです。

ドット絵アニメでは、ディザリングパターンは避けたほうが安全です。
静止画では質感づくりに使えても、フレーム間で点の位置が少しずれるだけでちらつきが目立ち、モアレのような不快な揺れに変わります。
とくに衣装アニメでは、布の柔らかさを表したつもりが画面ノイズに見えてしまうため、面の切り替えとハイライトの形で質感を作るほうが安定します。
派手さより読みやすさを優先しましょう。

制作時は Aseprite が扱いやすく、タグ管理で歩行・待機・攻撃のフレームを整理しつつ、オニオンスキン機能で前後コマのずれを見比べられます。
Pyxel Edit はタイルセット連動が強く、衣装パーツを背景や小物と同じ設計で扱いたい場面に向いています。
どちらも、1コマずつ描いて終わりにせず、フレーム間の差を確認しながら調整するための道具です。
動きの不自然さは、だいたい隣のコマとの関係で見つかるもの。
そこを詰めていきましょう。

参考ゲームと練習方法

参考作品としてまず挙げたいのが『Celeste』（2018年、Matt Makes Games）です。
キャラクタースプライトは32×32pxという小ささなのに、衣装の省略がとても上手く、襟や袖の形を細部まで描かなくても服の種類がすぐ読めます。
小さい画面では、描き込む量よりも「何を残すか」の判断が見え方を決めるので、この作品は省略の基準を学ぶのに向いています。

『Dead Cells』（2018年、Motion Twin）は64px超のスプライトで、素材感の描き分けを掴むのに役立ちます。
布、革、金属の境目がはっきりしているため、同じキャラクターでも服の厚みや硬さの違いをどう見せるかが追いやすいのです。
32×32pxでは再現しきれない情報が増えるぶん、どこを簡略化すると読みにくくなるのかまで見えてきます。

『Undertale』（2015年、Toby Fox）は、モノクロ系パレットで服の立体感を最小色数で実現している例です。
色が少ないほど、輪郭線、影、ハイライトの置き方がそのまま質感になるため、面の切り替えをどう整理するかがよく分かります。
色数で押し切るのではなく、明暗の配置で説得力を作る感覚を養いやすいでしょう。

練習法は、実在の服の写真を参照しながら32×32pxにリダクションし、どの情報を残し、何を省略するかを判断する訓練です。
たとえば襟の角度、袖口の広がり、布のたまりを見比べながら、1枚の写真から3つの要点だけを拾うように描いてみてください。
さらにLospec（lospec.com）のClothing・Fabricタグを使えば、海外アーティストのチュートリアルを無料で参照でき、同じテーマでも表現の解き方が複数あると分かります。
そこから自分の描きやすい省略ルールを固めていきましょう。