テクニック

ドット絵テクニック8選|プロが使う表現技法

更新: 高橋 ドット
テクニック

ドット絵テクニック8選|プロが使う表現技法

ドット絵の見栄えは、技法をたくさん足した量ではなく、1pxをどこに置くかの判断で決まります。この記事は、32x32や64x64の小さなキャンバスで表現を磨きたい人に向けて、題材に応じて選ぶべき8つの技法を、定義・効果・具体配置・失敗例までセットで整理していきます。

ドット絵の見栄えは、技法をたくさん足した量ではなく、1pxをどこに置くかの判断で決まります。
この記事は、32x32や64x64の小さなキャンバスで表現を磨きたい人に向けて、題材に応じて選ぶべき8つの技法を、定義・効果・具体配置・失敗例までセットで整理していきます。

以下は本記事で便宜上整理した8つの技法です。呼称や優先順位は流派や作者により異なる場合があることに留意してください。

最初にアンチエイリアスとディザリング、線整理と色トレス、静止画の仕上げとアニメ補助表現の違いを切り分けるので、似た言葉で迷わなくなります。
32x32の顔アイコンでも、輪郭の階段状の段差に1pxの中間色(例:#808080)を置くと頬や額の角が丸く見えやすくなることがありますが、効果はパレットや背景に依存するため、あくまで一例として試してみてください。
全部盛りにすると絵は整うどころか濁ります。
必要な技法だけを選び、使わない判断まで含めて設計することが、プロっぽさより先に「読める絵」を作る近道です。

ドット絵テクニックは全部使うより使い分けることが大切

ドット絵の技法は、知っている数が多いほど強いわけではありません。
効く場面が違う道具を、同じ絵に無差別に重ねると、輪郭は鈍り、質感は散り、情報の優先順位が崩れます。
特に小さなキャンバスでは、その差がすぐに表面化します。
32x32は合計1,024px、64x64でも4,096pxしかないので、1pxごとの意図がそのまま画面の印象になります。
サイズが小さいほど「ここに置く意味があるか」を毎回問われる、と考えたほうが実態に近いです。

整理して見ると、技法は大きく2つの群に分けられます。
ひとつは線整理や色トレスのような、線・輪郭を整える系です。
こちらはまず絵を読める状態にするための土台で、キャラでも小物でも先に効きます。
もうひとつはアンチエイリアスやディザリングのような、色・質感・空間を広げる系です。
こちらは作風と題材で使い分ける領域で、丸みを出したい顔には有効でも、くっきり見せたい8ビット風のUIでは邪魔になることがあります。
先に土台を整え、必要なときだけ表情を足す。
この順番で考えると、技法同士がぶつかりません。

32x32でその違いがいちばん分かりやすいのが、輪郭の1pxです。
私は小さいキャラを直すとき、顔や髪より先にシルエットの出っ張りを疑います。
たとえば肩から頭へつながる外周に、意図せず1pxだけ外へ飛び出した点があると、それだけで首が詰まって見えたり、髪が膨らんで見えたりします。
拡大中はただの点に見えても、等倍に戻すと「なんとなく形が変」に見える典型です。
32x32ではその1pxが輪郭線の癖ではなく、体の構造そのものとして読まれてしまいます。
64x64になると少し余裕は出ますが、それでも1pxのノイズが消えるわけではなく、今度は頬の丸みや顎の角度の甘さとして残ります。

アンチエイリアスも、こうした「どこに、どれだけ置くか」の判断で効き方が変わります。
たとえば32x32のキャラの頬が階段状に3段で落ちている場面を考えてみてください。
ベースの輪郭色と肌色のあいだに、角だけを狙って1pxだけ中間色を置くと、段差の硬さが和らぎ、頬が少し丸く見えます。
置く前は、斜め線の角がひっかかって見え、顔の下半分だけ硬い印象が残ります。
置いた後は、輪郭そのものを削っていないのに、角の刺さりだけが抜けて見えます。
ところが同じ3段のすべてに中間色を並べると、今度は輪郭の芯が薄くなり、頬の境界がにじんだように見えることがある。
ジャギを消したかったのに、形の読みやすさまで削ってしまうわけです。
Before/Afterの差は「滑らかになったか」だけではなく、「形が立っているか」まで含めて見ないと判断を誤ります。

この感覚は、技法を足す方向より、削る方向で掴むと安定します。
線整理で輪郭の段差を整えたあとに、まだ角だけが強いならAAを1px足す。
色数が足りず面が単調なら、ディザリングで質感を補う。
最初から全部入れるのではなく、問題の種類に合わせて一手ずつ選ぶほうが、絵の密度と読みやすさが両立します。
ドット絵では「できる技法」より「今は使わない技法」を決められるほうが、画面が締まります。

ここで静止画向けの仕上げ技法と、アニメーションを助ける技法は分けて考えておきたいところです。
静止画では1枚の中で輪郭、配色、質感をどう成立させるかが中心になります。
一方でアニメ補助の技法は、コマをまたいだ見え方、動きのつながり、残像の印象まで含めて設計します。
同じ1pxでも、止め絵で効く置き方が動かすとノイズになることは珍しくありません。
この棲み分けを押さえておくと、本文中の各テクニックを「1枚絵の精度を上げるための道具」なのか、「動きを成立させるための道具」なのかで整理して読めます。

まず押さえたい前提|キャンバスサイズ・色数・保存形式

カラーモード

ドット絵は低解像度の画面で1px単位の配置がそのまま見た目に出る表現なので、最初に制作条件を固定しておくと後の判断がぶれません。
練習用なら32x32、少し情報量を増やした作例なら64x64が基準になります。
32x32は1,024px、64x64は4,096pxしかないので、キャンバスを広く取ってから縮小する描き方とは発想が変わります。
拡大しながら打つのは当然として、見え方の確認は整数倍のプレビューで行うのが前提です。
2倍、4倍、8倍のようにきれいに拡大された状態なら、線の段差や色の置きすぎをそのまま判断できます。

色の前提として知っておきたいのが、24ビットRGBと少色運用は別の話だという点です。
24ビットRGBは8ビット×3チャネルで、16,777,216色を扱えます。
現代の制作環境ではこのカラーモード自体は普通です。
ただ、ドット絵ではその全色を自由に使うことが上達への近道にはなりません。
むしろ最初から少色パレットに絞ったほうが、どの色が面を分け、どの色が影を支えるのかがはっきりします。

私は練習段階では8色前後に制限して始めることが多いです。
理由は単純で、色数が増えるほど「足りないから足す」判断が増え、形の整理より色選びに意識を持っていかれるからです。
8色くらいまで絞ると、明るい色・中間色・影色・アクセント色の役割を意図的に設計せざるを得ません。
この制約があると、髪だけの影色、服だけの影色と分けるより、同じ影色を髪にも服にも再利用したほうが画面がまとまります。
実際、茶髪のキャラと青い服の組み合わせでも、少し冷たい共通の影色を1つ持たせるだけで、別々に塗ったパーツがひとつの照明の下に乗ったように見えます。
少色運用の統一感は、色を削った副産物ではなく、共有色を設計した結果として生まれます。

ここで効いてくるのが、明度差と色相差の設計です。
たとえば同じ暗い色でも、明るさだけを落とした影と、少し色相をずらした影では印象が変わります。
頬や布の折れ目に使う影色をひとつ共有するなら、黒に近づけるだけではなく、少し寒色寄りにする、あるいは彩度を落として中立に寄せると、複数の素材にまたがって使っても破綻しません。
後のアンチエイリアスやディザリングも、この土台が決まっていないと効果よりノイズが先に出ます。

保存形式

保存形式は見た目をそのまま保てるものを選ぶ必要があります。
ドット絵ではPNGかGIFが基本で、静止画ならまずPNGを選ぶのが安定です。
PNGはピクセル単位の色と輪郭をそのまま保持できるので、打ったドットが保存時に崩れません。
透過との相性もよく、キャラやUI素材の管理にも向いています。

GIFも有効ですが、前提として最大256色です。
その範囲に収まるドット絵なら問題になりにくく、簡単なアニメや軽量な配布物にも使えます。
減色するときに色の飛び方が気になる場面では、Floyd–Steinberg ditheringのような誤差拡散が役に立ちます(誤差を周囲へ7/16、3/16、5/16、1/16の比率で分配する方式)。
参考: Floyd–Steinberg dithering

ℹ️ Note

静止画の完成データはPNG、GIFを使うのは色数制限やアニメ用途が明確なとき、という切り分けにしておくと運用がぶれません。

具体例

たとえば64x64のポートレートを仕上げるなら、制作中は24ビットRGBのまま作業して問題ありません。
ただし運用は少色で考えます。
サンプル画像を掲載する場合は、自作かライセンス確認済みの素材のみを使用し、作者名とライセンスを明記してください。
掲載画像には具体的な alt テキストを付けると、視認性の検証やアクセシビリティ対応がしやすくなります。
同じ画像をGIF化する場合は、256色パレットを前提に減色します。
64x64のポートレート程度なら256色という上限は十分広いのですが、元データに微妙な中間色や半端なグラデーションが多いと、減色時に段差が急に見えることがあります。
そういうときはFloyd–Steinberg ditheringを併用すると、誤差を周囲へ散らしながら見た目のつながりを保てます。
係数は7/16・3/16・5/16・1/16です。
均一な面まで無理に散らすと粒状感が出るので、肌のなめらかさを優先するのか、レトロなざらつきを残すのかで使いどころを分けると破綻しません。

練習の入り口としては、32x32で顔アイコンを作り、8色前後のパレット、PNG保存、整数倍プレビューという条件を固定すると、後の技法の効き方が見やすくなります。
64x64へ広げる段階でも前提を同じにしておくと、増えた情報量が「描き込み」なのか「ノイズ」なのかを切り分けやすく、アンチエイリアスやディザリングを足す意味も判断しやすくなります。

テクニック1〜4|線と輪郭を整える表現技法

1) 線整理

線整理は、輪郭線や斜線の並びに規則を与えて、形の読み取りを安定させる技法です。
ドット絵では1pxの揺れがそのまま目立つので、同じ長さの並びを続けるのか、意図してリズムを変えるのかを決めるだけで印象が変わります。
フリーハンドで引いた線をそのまま残すと、線そのものより「迷い」が見えてしまいます。

効果が出やすいのは、輪郭の外周や髪の斜めの束、肩のライン、武器の刃のように、線の方向が画面の印象を支える場所です。
たとえば右下へ向かう斜線なら、1px進んで1px下がる並びを続けるのか、2px進んで2px下がる並びを続けるのかで見え方は変わります。
ここに1,1,2,2の規則を作るつもりだったのに、途中で1,2,1,3のような揺れが混ざると、線の角度が一瞬だけ変わったように見えます。
私は顔アイコンの顎線や前髪でこの崩れをよく見ますが、1,1,2,2のパターンへ整え直しただけで、何を描いているのかの読み取りが一段クリアになります。
特に等倍表示では気づきにくくても、整数倍で拡大すると線の迷いがすぐ出ます。

1px単位の配置例としては、32x32の顔アイコンで頬から顎へ落ちる輪郭を、1px・1px・2px・2pxの段差で右下に送る形が扱いやすいのが利点です。
逆に、1px・2px・1px・2pxと交互に振れると、滑らかな線ではなくギザギザした折れ線として見えます。
剣の刃のように直進感を出したい題材なら2px・2px・2pxと揃えたほうが硬さが出ますし、柔らかい髪や布なら1,1,2,2のほうが自然に収まります。

失敗は、規則を意識しすぎて形そのものを壊すことです。
たとえば本来は丸い頬なのに、線だけをきれいな2,2,2に揃えると、輪郭が角張って顔が痩せて見えます。
線整理は「線を整える」作業ですが、目的は形の可読性なので、規則そのものが主役ではありません。
形を優先した結果、局所的に不規則が残ることもあります。

向く題材はほぼ全般ですが、特にキャラクターの輪郭、UIアイコン、武器、メカの外周で差が出ます。
一方で、崩した手描き感を前面に出す作風や、ノイズ混じりのラフさを味として残したい場面では、線を揃えすぎると勢いが消えます。
その場合は、主要な輪郭だけ整理して内部の細線は少し荒らす、といった使い分けのほうが画面に芯が残ります。

2) アンチエイリアス

アンチエイリアス(Anti-aliasing)は、輪郭の境界に中間色を1px置いて、ジャギーを視覚的に和らげる技法です。
黒線と明るい背景が直接ぶつかると段差が強く見えますが、その間に1段だけ橋渡しの色を挟むと、目にはより滑らかな曲線として届きます。
ドット絵では自動処理より手で置くAAのほうが意図を保ちやすく、どこを丸く見せたいのかを明確に反映できます。

効果が分かりやすいのは、円、顔、肩、指先、小さな装飾です。
たとえば黒の輪郭線の外側に、背景が明るいグレーならその中間にあたる灰色を1pxだけ置くと、角が削れたように見えます。
64x64の顔で頬の外周にある急な折れを処理する場合、段差の角へ1pxだけ中間色を足すだけで、線の硬さがほどけます。
2px以上の帯にすると、今度は輪郭が膨らんで見え、ぼやけた印象になります。

配置例を1pxで言うなら、黒い輪郭の階段状の角に対して、外側のくぼみへ中間色を1px置くのが基本です。
斜め線の全区間へ均等に置くのではなく、角が立って見える箇所だけに打つほうが締まりが残ります。
鼻先の1px、肩の角の1px、靴先の跳ねた1pxのように、目が引っかかる場所へ限定すると効果が高いです。

失敗として多いのは、AAを入れれば入れるほど上手く見えると考えてしまうことです。
境界のほぼ全周に中間色を巻くと、輪郭線が太ったうえで弱くなり、ピクセルの切れ味が消えます。
もうひとつの失敗は、内部の面にも同じ感覚で中間色を散らしてしまうことです。
AAは輪郭のための処理であって、立体の陰影づけとは役割が違います。

向く題材は曲線の多いキャラクター、顔、丸い小物、金属の縁です。
逆に、くっきりした8ビット風の硬い絵柄を狙うなら、AAなしのほうが意図に合います。
UIや記号でも、1px単位のシャープさを優先する場面では入れない判断が正解です。
ジャギーを消すこと自体が目的ではなく、輪郭の印象を整えるために使うものだと捉えると迷いません。

3) 色トレス/Selective Outlining

色トレス、あるいはSelective Outliningは、黒い輪郭線の一部を周辺色に近い色へ置き換えて、線の強さをコントロールする技法です。
輪郭を全部黒で囲むと読み取りは強くなりますが、顔や布のような柔らかいモチーフでは硬さも同時に出ます。
そこで、必要な場所だけ線を弱めると、形は保ったまま質感を変えられます。
初心者にとって即効性が高いのは、色を増やすのではなく「黒を残す場所」と「なじませる場所」を分けるだけで印象が変わるからです。

効果が出やすいのは、顔、手、布、丸い小物です。
私がよく使うのは、顔の頬の上側だけ黒線を肌の暗色へ置き換えるやり方です。
同じ輪郭でも、顎下や髪の影の境界は黒を残し、頬上部だけ肌の暗色に変えると、頬骨のあたりが急に柔らかく見えます。
顔全体の線を薄くするとぼやけますが、黒を残す場所を下側や接地側に寄せると、立体感を崩さずに表情だけをやわらげられます。

1px単位の例では、黒線で描いた頬の輪郭が5px続いているなら、そのうち上側の2pxだけを肌の影色へ差し替え、下側の3pxは黒のまま残す形が分かりやすいのが利点です。
布の袖口でも、光が当たる上辺の黒線1pxを中間色に、影側の下辺1pxは黒のままにすると、素材が軽く見えます。
金属やメカでは逆で、輪郭の大半を黒で締めたほうが硬さが出るので、色トレスは控えめに使います。

失敗は、輪郭を弱めすぎて形が読めなくなることです。
背景と近い色に置き換えた瞬間、線ではなく塗りの端に見えてしまう箇所があります。
特に小さいキャンバスでは1pxの黒が担う役割が大きいので、目、口、指の境目、シルエットの角まで薄くすると、情報が溶けます。
色トレスは線を消す作業ではなく、線圧の強弱を色で作る作業です。

向く題材はキャラクター、アイコン、小物、UIパーツです。
髪の内側や服の折り返しにも相性があります。
一方で、強い黒アウトラインが作風の柱になっている絵では、色トレスを入れるほど輪郭の統一感が崩れます。
その場合は、全体に広げるのではなく、頬や手など硬さが気になる一点だけに留めたほうが画面のルールを壊しません。

4) シルエット重視

シルエット重視は、内部の描き込みより先に、外形だけで何のモチーフか伝わる形を作る考え方です。
ドット絵は1pxが基本単位なので、情報を足すより削る判断のほうが出来を左右します。
輪郭が弱いまま模様や陰影を入れても、細部が形を救ってくれることはありません。
先に外形が読めていれば、内部の情報は少なくても成立します。

効果が大きいのは、32x32のキャラクター、アイテムアイコン、敵シルエット、動物の顔です。
たとえば剣なら、柄・鍔・刃の区別が1px単位でも外周に現れているかが先です。
刃の先端を1px尖らせる、鍔を左右に1px張り出させる、柄尻を1pxだけ太くする、といった差だけで「棒」から「剣」に変わります。
人物でも、髪の束を内側に描き込む前に、頭頂の丸み、前髪の出っ張り、首から肩への落ち方がシルエットに出ていれば、顔パーツが少なくても人物として読めます。

1px単位の配置例としては、真正面の顔アイコンで、輪郭の外周を左右対称に置くだけで満足せず、片側の髪を1px外へ張り出させて前髪の流れを作る方法があります。
猫の顔なら、耳を頭の丸から1pxずつ上へ突き出すだけで、内部線がなくても猫に見えます。
逆に、輪郭がただの丸のままで、中に目や口だけ入れると、何の頭部なのか判別が弱くなります。

失敗は、シルエットの段階で情報を詰め込みすぎることです。
外周に凹凸を入れすぎると、アイコンサイズではノイズの塊になります。
もうひとつは、内側の模様で補う前提で外形を単純化しすぎることです。
小さなキャンバスでは、内部線より外周の1pxのほうが目に入りやすいので、シルエットが弱い絵は縮小した瞬間に読めなくなります。

向く題材は全般ですが、特に小サイズのキャラ、敵、アイテム、UI記号で差が出ます。
使わない判断が必要なのは、あえて内部の模様や色面の分割で見せる抽象表現くらいです。
それでも最低限の外形は必要で、シルエットを無視して成立する場面は多くありません。
線整理、AA、色トレスのどれを使うにしても、土台になるのは外形の強さです。
ここが決まっている絵は、1pxの追加や削除がそのまま説得力に変わります。

テクニック5〜8|色・質感・空間を広げる表現技法

5) ディザリング

ディザリングは、限られた色数の中で中間色や空気感、素材の粒立ちを補うために、2色以上のドットを意図的に混ぜて見せる技法です。
AAが輪郭の境界を整える処理だとすれば、ディザリングは面の内部で階調や質感を増やす処理です。
少ない色数で描くドット絵では、色を増やせない代わりに並べ方で見え方を増やします。
24ビットRGBでは16,777,216通りの色を扱えますが、ピクセルアートではあえて色を絞る場面が多く、その制約があるからこそディザリングが効いてきます。

効果が出やすいのは、空、霧、地面、壁、岩、金属、曇ったガラスのように、面積が広くて単色だと平板に見えやすい題材です。
たとえば夕方の空を青と紫の2色だけでつなぎたいとき、境界をべたっと切り替えると帯のように見えます。
そこで境界付近の数pxだけ2色を交互に置くと、色数を増やさずにグラデーションの途中があるように感じられます。
土の地面では、同じ茶色系2色でも規則的に並べると人工物っぽくなり、塊と隙間を混ぜるとざらつきが出ます。
金属では、均一なパターンよりも反射の方向に沿って密度を変えるほうが面の向きが伝わります。

配置例は1px単位で考えると理解しやすくなります。
もっとも基本なのは市松状の交互配置ですが、これをそのまま広く敷くと「混ざった色」ではなく「模様」に見えます。
空のグラデーションを2色だけで処理したとき、私は一度この失敗をよくやりました。
境界にきれいな市松を並べた結果、空気の層ではなく布の柄のように見えたのです。
修正するときは、交互配置を全面に広げず、短い横ラインや1px飛ばしの塊を混ぜました。
たとえば4px幅の領域なら、1行は交互、次の行は2pxだけ暗色を続け、その次は明色を多めにする、といった具合です。
規則を少し崩すと、目は模様より階調として受け取ります。

失敗は二つに分かれます。
ひとつは均一すぎて市松模様が前に出ること、もうひとつは無秩序すぎてノイズになることです。
前者は「きれいに並べた」こと自体が敗因で、後者は面の流れや光の方向と関係なく散らしたことが原因です。
壁や地面なら、面の広がりに沿って密度を変える必要があります。
霧なら輪郭の近くほど密に、抜ける方向ほど疎にする、といったルールが要ります。
ディザリングはランダムに打つ技法ではなく、見せたい面積と素材感に合わせて密度を設計する技法です。

向く題材は風景、背景、自然物、広い面を持つ人工物です。
キャラクターの顔や小さなUIには不向きなことが多く、1pxの粒が肌荒れや汚れのように見えるからです。
色数がすでに足りている場面でも、無理に入れる理由はありません。
中間色を1色足したほうが面が静かにまとまるなら、そのほうが画面全体の品位は上がります。
逆に、GIFへ減色する前提のアニメや配布素材では、256色以内でグラデーションの破綻を抑える補助として意味が出ます。
自動減色ではFloyd–Steinberg系の誤差拡散が使われることも多いですが、静止画の仕上げでは手で密度を決めたほうが、どこを見せたいかがはっきり残ります。

6) パレット設計

パレット設計は、使う色を先に制限し、画面全体のルールを決める工程です。
ドット絵では「描きながら欲しい色を足す」と、その場では整って見えても、完成時に色の役割が重複して濁ります。
少ない面積の中で情報を整理するには、線のルールと同じくらい色のルールが要ります。
色数を絞る目的は節約ではなく、何を目立たせて何を引っ込めるかを制御することにあります。

効果が大きいのは、統一感、読みやすさ、修正の速さです。
たとえば32x32のキャラクターなら、肌、髪、服、影、輪郭のどれに何色を兼用させるかで密度の出方が変わります。
1色を複数の部位で再利用すると、画面に共通の空気が生まれます。
64x64のポートレートでも、影色を部位ごとに別管理するより、同系統の影色を横断的に使ったほうがまとまりが出ます。
色数を先に絞ると、足りない表現をディザリングや色トレスで補う判断も立てやすくなります。

実作業では、ベース色、明部、暗部、最暗部、アクセント色という役割から組むと安定します。
たとえば服の青と金属の反射に同じ寒色系ハイライトを使う、肌の影と木の中間影に少し近い色を共有する、といった設計です。
1px単位の配置に落とすと、隣り合う2色の差が強すぎる場所では段差が出て、差が弱すぎる場所では面が分かれません。
ここで役立つのが、色単体ではなく「接する場所でどう見えるか」を基準に組む考え方です。
単独では地味に見える色でも、黒線の代替や半影に入ると効きます。

失敗は、色数過多でノイズ化することと、逆に削りすぎて役割が足りなくなることです。
前者は「この部分専用の色」を増やし続けた結果、画面のどこにも再登場しない色が量産される状態です。
後者は、明暗差だけで全部を回そうとして、素材差も光源差も消えてしまう状態です。
少色で描くときほど、色相のズレや彩度の差が意味を持ちます。
明るい色を足すのではなく、少し冷たい影を置く、輪郭寄りの色を一段落とす、といった選び方のほうが、少ない色で画面が広がります。

向く題材は全般です。
キャラクター、背景、UI、アイテム、どれでも土台になります。
最初から色数を極端に縛ると、学習段階では「表現不足なのか設計不足なのか」が判別しにくくなります。
練習では32x32程度の小さな作例で、色数を少しだけ制限し、各色に役割を持たせる経験を積むと判断の軸ができます。
パレット設計を入れないほうがよいのは、色の実験そのものが目的のラフ段階くらいです。
仕上げに入る段階では、色のルールがない絵ほど修正箇所が増えます。

💡 Tip

良いパレットは「色数が少ないこと」ではなく、「同じ色が別の場所でも役割を持っていること」で見分けられます。再利用できない色が増えるほど、画面は散ります。

7) 光源・陰影・リムライト

光源・陰影・リムライトは、形を立体として読ませるための技法です。
ドット絵では陰影が単なる塗り分けになりやすいのですが、光がどこから来ているかを固定すると、少ない面数でも説得力が出ます。
リムライトはその補助として、輪郭の一部に細い光を置き、背景との分離や素材感を強める方法です。
線や色が整っていても、光のルールが曖昧だと物体は平面的に見えます。

効果が大きいのは、顔、金属、布、ガラス、メカ、夜景のキャラクターです。
たとえば顔では、額、鼻筋、頬骨、顎下の関係が1px単位で整理されるだけで、正面顔でも厚みが生まれます。
金属では、明暗の境界を柔らかくつなぐより、面ごとに切り替えたほうが硬さが出ます。
布では逆に、影を大きめの塊で置いたほうが折れ目として読めます。
リムライトは、暗い背景の前に立つ人物の肩や髪の外周に1pxだけ置くと、輪郭線を太くせずに抜けが作れます。

配置例としては、左上光源なら、箱の上面に明部、右側面に中間影、下面や接地部に最暗部を置くのが基本です。
球体なら、ハイライトを中心から少し光源側へずらし、反対側の外周に影を寄せます。
リムライトは外周を全部囲わず、光が回り込む側だけに限定します。
髪の束の外側3pxのうち、頂点側の1pxだけ明るい色に置き換え、下側は線を残す、といった使い方が効果的です。
全部を光らせると輪郭線の意味が消え、発光体のように見えます。

失敗は、光源が面ごとに変わること、影を描き込みすぎること、リムライトを輪郭装飾として乱用することです。
特に小さなキャンバスでは、陰影の段数を増やすより、どの面が光を受けているかをはっきり分けたほうが読み取りやすくなります。
顔に細かい影を入れすぎると、しわや汚れに見えることもあります。
リムライトも、背景とのコントラストが十分あるなら不要です。
なく装飾の縁取りになります。

向く題材は立体感を見せたいもの全般ですが、特に素材差を描き分けたい場面で効きます。
使わない判断が必要なのは、記号性を優先するアイコンや、フラットな塗りを狙う画面です。
光源を固定した瞬間、絵の空気は決まります。
だからこそ、最初に「どこから照らすか」を決めないまま陰影を足すと、修正が連鎖します。
線整理やパレット設計が済んだあとにこの工程を入れると、どの色をどの面に置くかの迷いが減ります。

8) アイソメトリック

アイソメトリックは、遠近法の消失点を使わず、一定の角度で立体空間を整理する表現です。
ドット絵では、建物、室内、街並み、家具、ダンジョンの床などでよく使われます。
基準になるのは2:1のラインパターンで、横に2px進んだら縦に1px動く規則です。
この比率で引かれた斜線は、見た目として約26.5度相当の安定した傾きになり、面どうしの整列が取りやすくなります。

効果は、空間を広く見せながら、情報を整理して並べられることにあります。
正面視の背景は重なりで奥行きを作りますが、アイソメトリックは床面・壁面・天面を同時に見せられるので、狭い画面でも「歩ける場所」「置ける物」「段差」が伝わります。
部屋のレイアウトや街路の密度を見せたいとき、真正面より情報量を増やせます。
家具や箱、階段のような直方体ベースのモチーフでは、ルールがそのまま読みやすさになります。

配置例として分かりやすいのは箱です。
上面の左右の辺を2:1で引き、そこから垂直に落として側面を作ります。
ここで1pxのズレが出ると、面の歪みがすぐ見えます。
実際、2:1線で箱を描くときは、角から角までの歩幅が1回でも崩れるだけで、上面が台形に見えたり、右面だけ長く見えたりします。
私は建物の屋根を描いている途中で、片側だけ2,2,1,2のようなリズムになっていたことがあり、たった1pxの狂いで壁がねじれたように見えました。
アイソメトリックは立体感の技法であると同時に、線の規律がそのまま空間の精度になる技法です。

失敗は、2:1の基準を守らない斜線を混ぜること、左右の長さ対応が崩れること、垂直線の始点終点が揃わないことです。
見た目では近い角度でも、1本だけ別のリズムが混ざると、床タイルや壁面の連続性が切れます。
とくに階段、窓枠、棚の段差はズレが目立ちます。
もうひとつ多いのが、立体を描こうとして陰影だけでごまかすケースです。
アイソメトリックでは、まず線と面の整合があり、そのうえで色と影が乗ります。
骨格が崩れたまま陰影を足しても、説得力は戻りません。

向く題材は建物、部屋、街、タイルマップ、小物を並べた空間です。
人物単体の感情表現や、曲線主体のモチーフでは恩恵が薄いことがあります。
その場合は正面や3/4ビューのほうが顔やポーズを見せやすくなります。
アイソメトリックを使わない判断は、空間を正確に見せる必要がないとき、あるいは輪郭の勢いを優先したいときです。
ルールが強いぶん、自由なデフォルメと相性がぶつかる場面もあります。

補足|静止画表現とアニメーション補助の違い

ここまでの4技法は、静止画の密度を上げるための考え方として使う場面が中心です。
ただ、ドット絵では静止画で正しい処理が、そのままアニメーションでも正解になるとは限りません。
ループアニメでは、1枚ごとの美しさより、動いたときの連続性が優先されます。
静止画で気持ちよく見えるディザリングやリムライトが、動くとちらつきやノイズとして目立つことがあります。

典型的なのは、歩行や待機のループで、陰影の形をフレームごとに描き込みすぎるケースです。
歩行アニメは8フレーム構成が基本例として扱われることがありますが、このくらいの短い周期では、影の位置が毎回変わると面が動いているのか光が揺れているのか分からなくなります。
補助表現として入れるなら、主役はシルエットと重心移動に置き、陰影は最小限に留めたほうが動きが読めます。
Aseprite の公式ドキュメントも参照すると、オニオンスキンやループプレビューの使い方が確認できます。

ディザリングもアニメでは扱いが変わります。
静止画では短いラインの混在で自然に見えた面が、フレームごとに位置を変えると、素材感ではなくちらつきになります。
空や霧のような大面積を動かすときは、パターンそのものを揺らすより、塊としてスクロールさせるほうが安定します。
リムライトも、毎フレーム輪郭を追いかけると発光表現に寄りすぎるので、当たる面を固定する考え方が必要です。

アイソメトリックでも同じで、静止画なら1pxのズレは一部の歪みに見えるだけですが、アニメではそのズレがフレーム間で跳ねます。
箱や床タイルが上下に脈打つように見える原因は、たいてい基準線の揺れです。
ループアニメの補助として空間を使うなら、まず2:1の骨格を固定し、そのうえでキャラクターやエフェクトだけを動かしたほうが画面が安定します。
静止画の描き込みを増やす技法と、動きを支える技法は目的が違います。
1枚絵では情報量が価値になり、アニメでは再現性が価値になります。
この切り分けができると、どこを削ってどこを残すべきかが見えてきます。

よくある失敗|使いすぎると逆効果になる技法

テクニックは足せば足すほど上手く見えるわけではありません。
ドット絵は1px単位の判断がそのまま輪郭、面、質感に出るので、効かせたい処理を広げすぎると、むしろ情報が濁ります。
とくに小さなサイズではその傾向が強く、32x32のUIアイコンのように総ピクセル数が1,024pxしかない画面では、数ドットの追加だけで印象が変わります。

アンチエイリアス過多で輪郭が死ぬ

失敗としてまず多いのが、アンチエイリアスを輪郭の全辺に入れてしまうことです。
ジャギーを消したい気持ちで中間色を増やすと、今度は輪郭の芯がなくなります。
とくに直線や短い辺までAAでなぞると、エッジが立つべき場所まで灰色っぽくにじみ、記号としての読みやすさが落ちます。

以前、32x32のUIアイコンを仕上げたときに、丸みを出したくて外周のほぼ全辺に1pxのAAを入れたことがありました。
拡大表示では丁寧に見えたのですが、実寸に戻すと輪郭が滲んで、何のアイコンか一瞬で読めなくなりました。
そこで処理を見直し、曲面の角だけに1pxの中間色を残し、直線部分は原色の輪郭に戻したところ、形の判別が一気に戻りました。
AAは「輪郭全体を柔らかくする技法」ではなく、「角の痛さだけを取る技法」と考えたほうが崩れません。

均一すぎるディザリングと市松模様化

ディザリングも、入れた瞬間にそれらしく見えるぶん、使いどころを誤ると面が汚れます。
ありがちな失敗は、広い面を同じ密度の交互配置で埋めてしまうことです。
均一すぎるディザリングは階調ではなくザラつきとして見え、しかも規則が強すぎると市松模様そのものが主張し始めます。
壁や空のような面でこれが起きると、素材感ではなく「パターンを貼った感じ」だけが残ります。

対策は、交互配置だけに頼らないことです。
短い線や不規則な点を少し混ぜると、面としての自然さが戻ります。
もうひとつ効くのが、ディザリングを隣接する2色の間だけに限定することです。
離れた色同士を無理につなぐと、階調の補完ではなくノイズの衝突になります。
GIFの減色で使われるFloyd–Steinberg系の誤差拡散も、原理としては近い色の誤差を近傍へ逃がして見た目を整える考え方です。
手打ちのディザリングでも、この「近い2色の橋渡し」に留めたほうが面が安定します。

色数過多によるノイズ

色を増やせば情報量が増える、という感覚も落とし穴です。
24ビットRGBでは16,777,216通りの色を扱えますが、ドット絵でその自由度をそのまま持ち込むと、1色ごとの役割が曖昧になります。
影のための暗色、反射のための中間色、輪郭をなじませるための色がそれぞれ被り始めると、画面全体が「どの色も少しずつ必要そう」に見えて削れなくなります。

実作業では、中間色が多すぎるパレットほど画面が散ります。
似た明度・似た彩度の色が複数並んでいるなら、どれかが役割を失っています。
こういうときは、役割が被る中間色を削って、8色前後に再統合すると見違えます。
少ない色数に戻すと、明るい色は光、暗い色は影、強い色は注目点という役割分担がはっきりします。
色が足りないからディザリングを使うのであって、色を増やしてからさらにディザリングを重ねると、面の整理が追いつきません。

無秩序な斜線は手ブレに見える

斜線も、法則がないと一気に粗く見えます。
1px単位の線は少しの揺れでも目立つので、1,1,2,2のような並びが途中で崩れたり、孤立した1pxが飛び出したりすると、それだけで手ブレした輪郭に見えます。
とくに剣、髪の外周、服の裾、建物の屋根の辺は、斜線の乱れがそのまま形の弱さになります。

対策は単純で、パターンを先に決めて揃えることです。
1,1,2,2でも2,2でも構いませんが、同じ辺の中でリズムを混ぜないことが前提です。
そして途中に出る孤立1pxは、意味がある突出でなければ埋めるか削るかのどちらかに寄せます。
中途半端に残すと、その1pxだけが視線を引っかけます。
線整理は地味ですが、ドット絵の「上手そうに見える輪郭」は、この規則性で決まります。

アイソメ線のズレは立体を一瞬で壊す

アイソメトリックでの失敗はさらに分かりやすく、2:1の基準を一度でも崩すと、面の説得力が消えます。
左の辺だけ2:1、右の辺が途中から別の歩幅になると、箱は箱に見えず、ねじれた台形に見えます。
床タイルも同じで、継ぎ目が整数pxで合っていないと、連続するはずの面が途中で跳ねます。

ここで見るべきなのは感覚ではなくカウントです。
各辺のpx数を左右で一致させ、上面の対になる辺が同じ歩幅で進んでいるかを数えます。
タイルの継ぎ目も、端点を整数pxで合わせておかないと、並べたときに段差が出ます。
アイソメは雰囲気の技法ではなく、2:1の繰り返しで空間を作る技法です。
線の勢いで押し切ろうとすると、立体より先にズレが見えてしまいます。

保存形式で判断を狂わせない

描いている最中は整って見えたのに、書き出した画像を見ると輪郭がにじんでいる、というケースもあります。
この原因が技法そのものではなく保存形式にあることは珍しくありません。
JPG保存は圧縮ノイズが境界に乗るので、1pxの判断が必要なドット絵では相性が悪いです。
輪郭の外に余計な色がにじむと、AAを入れすぎたのか、ディザリングが荒いのか、本来の問題点まで見えにくくなります。

ドット絵の確認と公開にはPNGかGIFを使ったほうが、置いたピクセルをそのまま見られます。
とくに失敗を直している段階では、圧縮によるノイズが入らない形式で比べないと、どの1pxが効いていて、どの1pxが邪魔なのか判断できません。

⚠️ Warning

仕上げで迷ったときは、「輪郭を読ませる処理」と「面をなじませる処理」が同じ場所に重なりすぎていないかを見ると、崩れ方の原因が見つかります。AA、ディザリング、色追加を同時に盛るより、どれか1つを引いたほうが画面が締まる場面は多いです。

32x32で試す実践ミニ課題|3つの技法だけで見た目を改善する

32x32pxは、技法の効き方を見比べる練習にちょうどいい大きさです。
合計1,024pxしかないので、どの1pxが形を支え、どの1pxがノイズになるかを追いやすく、仕上げの差もはっきり出ます。
ここでは同じモチーフを2通りで処理して、見た目がどう変わるかを体感できるミニ課題に絞ります。
片方は輪郭を整えて柔らかく見せる流れ、もう片方は面の情報を整理して質感を出す流れです。
実際に並べてみると、前者は線の圧が下がって顔や小物がなじみ、後者は壁や服、背景の面に密度が出ます。
同じ下描きでも、何を優先して仕上げたかで印象がここまで変わります。

課題A

課題Aでは、ベース絵から始めて、線整理、色トレス、控えめなアンチエイリアスまでを一気に通します。
題材は顔アイコン、肩まで入ったキャラ、丸みのある小物のどれかが向いています。
輪郭が主役のモチーフほど、変化が読み取りやすいからです。

この課題で見るポイントは、線を増やすことではなく、黒線の主張を必要な場所だけに残すことです。
ベース絵の段階では少し硬く見えても問題ありません。
むしろ最初は角ばった印象のほうが、線整理と色トレスの効果を確認できます。
仕上がりの狙いは、輪郭が消えることではなく、読めるまま柔らぐことです。

手順Aの具体

まず32x32に下描きを置きます。
髪型でも顔でも装備でも構いませんが、情報を詰め込みすぎず、シルエットが一目で分かる形に絞ります。
小さなキャンバスでは、描き込み量より外形の読みやすさのほうが先に効きます。

次に、輪郭を1pxで引き直し、斜線の並びを1,1,2,2のリズムに整えます。
ここでは勢いで描いた線をそのまま残さず、同じ辺の中で歩幅をそろえるのが肝です。
頬のカーブ、肩の外周、髪の先端など、揺れが出やすい場所ほど差が出ます。
整列前の線は少しずつ太さが揺れて見えますが、整列後は形そのものが安定して見えます。

そのうえで、光源を左上に固定し、上側と左側の黒線の一部を面の暗色に1pxずつ置き換えます。
いわゆる色トレスです。
全部を置換すると輪郭が痩せるので、光が当たる側だけを選びます。
顔なら額の上辺や頬の外側、服なら肩の上辺などが効きます。
黒の輪郭がそのまま残った状態では、切り絵のように輪郭が先に目へ入ります。
暗色へ置換すると、線が面の中へ少し溶け込み、輪郭の存在感は保ったまま圧だけが下がります。

アンチエイリアスは控えめに入れます。
頬や肩の角、髪の丸みの頂点のように、角が痛く見える場所へ中間色を1pxだけ置きます。
ここで2px以上の帯にすると、32x32では輪郭そのものがぼやけます。
1pxだけ置いて、角の刺さりを取る感覚で十分です。

BeforeとAfterを文章で比べるなら、Beforeは「黒い輪郭が全面に立ち、顔の丸みより線の強さが先に見える状態」、Afterは「輪郭は残っているのに頬や肩の角が自然につながり、面の中に線が収まって見える状態」です。
自分で作業していると差が小さく見えても、100%表示で並べると、線の硬さが抜けたぶん視線が表情や配色へ移ります。

手順Bの具体

課題Bは、同じベース絵を面の処理中心で仕上げる練習です。
流れは、ベース絵からパレット整理、ディザリング、ハイライトの順です。
こちらは背景付きのバストアップ、壁際の小物、服の面積が広いキャラなどが向いています。
輪郭を柔らげるというより、少ない色で面の密度を上げるのが目的です。

最初に、使う色を8色前後へ統合します。
24ビットRGBなら16,777,216色を扱えますが、32x32の練習ではその自由度は武器になりません。
近い色をいくつも並べるより、明部、中間、暗部、アクセントの役割が分かれた少数パレットのほうが、何をどこで見せたいかが明確になります。
ここで色を削るだけでも、画面の散り方が止まることが多いです。

続いて、背景の広い面に隣接する2色だけを使ってディザリングを入れます。
置き方は市松模様で埋めるのではなく、1x2の短い線と点を混ぜます。
壁なら同じ密度で均一に敷かず、光が当たる側は点を少なめ、影に寄るほど短線を増やすと、平面の中に濃淡の流れが出ます。
服や金属でも同じで、2色の橋渡しとして使うと質感が立ちます。
離れた色同士をつなぐとノイズが勝つので、隣の色同士だけで組むのが基本です。

そのあとで、物体の最も明るい縁に1pxのハイライトを置きます。
左上光源なら、額の上端、肩のいちばん出た角、瓶や金属の縁など、光が先に当たる場所へ絞ります。
広く塗るのではなく、縁のいちばん明るい一点を切り出すと、面の情報が締まります。
ディザリングで中間のつながりを作ったあとにハイライトを乗せると、単なる白い点ではなく、素材の硬さや湿り気として読まれます。

同じモチーフを手順Aと手順Bで処理すると、見え方の差がはっきり出ます。
手順Aは輪郭の角が取れて、キャラの顔や小物がやさしく見えます。
手順Bは線の印象はそこまで変えずに、服や背景の面に空気や素材感が乗ります。
自分の制作でも、顔アイコンはAで整えたほうがまとまり、壁や床のあるカットはBで処理したほうが画面の薄さが消えます。
どちらが上というより、輪郭を見せたいのか、面を見せたいのかで選ぶと迷いません。

保存はPNGが基準です。
JPGは境界に圧縮ノイズが乗るので、この種の比較課題には向きません。
GIF化する場合は256色の制限内でまとめ、減色ではFloyd–Steinbergの誤差拡散を使うと、手打ちのディザリングとぶつかりにくくなります。

💡 Tip

評価は100%ズームで、シルエット、輪郭、面の順に読むとブレません。まず外形が読めるかを見て、その次に線の硬さや揺れを確認し、そこから面のつながりや質感を見る流れにすると、どの工程で崩れたのかを言葉にしやすくなります。

評価結果は短文で残すのが有効です。
たとえば「肩の角はAAで改善したが、頬は置きすぎて輪郭が薄い」「背景のディザリングで面の密度は出たが、中央まで同じパターンが続いて布ではなく壁紙に見える」といった具合です。
改善点を文章で記録すると、次の32x32でも同じ失敗を避けやすくなります。

どの技法をどの題材で使うか|人物・風景・UI・アニメでの使い分け

技法は単体で覚えるより、題材ごとに優先順位を決めたほうが迷いません。
人物、風景、UI、アイソメ、アニメは、それぞれ「どこを読ませたいか」が違うからです。
静止画の補助技法とアニメの補助技法も役割が別で、前者は最終見た目を整えるため、後者はコマ同士のつながりを保つために使います。
この切り分けができると、同じ1pxでも置く理由がはっきりします。

人物は輪郭制御を先に考える

人物では、まず線整理と色トレスで輪郭の強弱を作るのが軸です。
顔、髪、肩、服の外周はどれも1pxの差で印象が変わりますが、全部を黒で閉じると、表情より先に輪郭の圧が立ちます。
そこで、外形は保ちつつ、光が当たる側や背景になじませたい側だけを面の近い色へ置き換えます。
輪郭を消すのではなく、黒線の強さを調整する発想です。

アンチエイリアスは人物でも常用ではなく、曲面に絞って少量入れるのが効きます。
頬、肩、二の腕、髪の丸い束の頂点など、角が刺さって見える場所に1pxだけ差すと、面のつながりが自然になります。
逆に、鼻先やまつげのような情報量の少ない場所まで均等にAAを入れると、顔が眠く見えます。
人物でAAが効くのは、線をなめらかにするというより、曲面の読みを助ける場面です。

背景と人物が近い明度でぶつかる場面では、1pxのリムライトも有効です。
ただし、これは常時入れる装飾ではありません。
暗い背景に暗髪のキャラを置く、夕景の中で服の肩線が沈む、そうした「分離が必要な時」にだけ外周の一部へ入れると、人物が一歩前に出ます。
人物の仕上げは、線整理、色トレス、必要な箇所だけのAA、必要な時だけの1pxリムライト、この順で考えると破綻しません。

風景は面の整理と空気感を優先する

風景では、人物ほど輪郭の強弱に頼らず、広い面の明暗設計とディザリングが主役になります。
空、霧、地面、壁、水面のように面積が広い場所は、色をベタで分けただけでは平たく見えます。
そこで隣り合う2色の間にディザリングを入れて、面の切り替わりをなだらかにしつつ、質感も足します。
霧なら密度の疎密で遠近が出ますし、地面なら粒の置き方で乾いた土か湿った土かまで変わります。

ここで先に決めるべきなのは光の方向です。
左上から光が来るのか、正面から差すのか、それが曖昧なままディザリングを広げると、模様だけが残ります。
建物の壁、道、草地、岩肌を面単位で分け、どの面が明るく、どの面が落ちるかを先に整理してから、境界の橋渡しとしてディザリングを使うと画面が締まります。
風景のディザリングは「全部に敷く模様」ではなく、「面の差を埋めるための密度調整」です。

風景で光を足す時も、点の数より位置が効きます。
木漏れ日なら地面の一部だけ、金属の柵なら縁だけ、雲の縁なら光源側だけに明るい色を置くと、面の向きが読めます。
広い背景ほど、光の方向と面の区切りが見えていないとノイズが増えます。
人物に比べて風景は輪郭線が薄くても成立するぶん、明暗の整理が甘いと一気に崩れます。

UIはクリスプさを最優先にする

UIは静止画の中でも別ルールで考えたほうが安定します。
求められるのは質感より可読性なので、AAは基本オフです。
輪郭を柔らげるより、1pxのエッジを立て、明度差と彩度差をはっきり取ったほうが情報が速く伝わります。
アイコン、ボタン、カーソル、数字、ゲージの目盛りは、まず形が即読できることが先です。

実作業でも、16px前後の小さなUIアイコンにAAを入れた時より、思い切ってAAを切ってエッジを立てた時のほうが、一覧の中で意味が通りやすくなります。
たとえば白地に濃色の設定アイコンを置く場面で、歯車の歯先へ中間色を足すと、単体ではきれいでも並んだ瞬間に輪郭が甘くなります。
AAを外し、外周を1pxで締め、内側の穴との明度差を明確にしたほうが、縮小表示でも歯車として読めます。
UIでは「きれいな輪郭」より「読める輪郭」を優先したほうが結果が良くなります。

色トレスもUIでは有効ですが、人物とは目的が少し違います。
人物では線を面になじませるために使い、UIでは黒一辺倒の圧を避けつつ、必要なコントラストは残すために使います。
外周は濃く、内側の区切り線は一段明るくするだけでも、情報の階層が出ます。

アイソメは2:1線とタイルの一致を守る

アイソメトリック表現では、建物や部屋を立体的に見せる前に、2:1線を崩さないことが最優先です。
斜めの辺を2:1のパターンで引くと、壁、床、屋根、机、ベッドの角度がそろい、空間全体が安定します。
ここが崩れると、窓だけ別角度に見えたり、床タイルが途中からねじれたりして、立体感より違和感が先に立ちます。

アイソメでよくある失敗は、単体の小物だけ見て描き進め、あとからタイル化した時に辺のpxが合わなくなることです。
実際には、床の1マス、壁の高さ、窓枠の幅を先に決め、繰り返す単位を固定したうえで建物や部屋を組んだほうが破綻が出ません。
扉の左右の斜線、棚の天板、階段の段差など、2:1が連続する場所ほど誤差が目立つので、見栄えよりまず整列です。

アイソメではAAやディザリングを後から足す余地はありますが、基準線がずれたままでは何を重ねても整いません。人物や風景よりも「線のルール」が土台になります。

アニメは見た目よりコマ間のつながりを管理する

アニメでは、静止画の仕上げ技法をそのまま増やすより、パーツの使い回しとオニオンスキンでコマ同士の関係を守るほうが効きます。
静止画の補助は一枚の見た目を整えるためのものですが、アニメの補助は前後フレームのつながりを壊さないためのものです。
この違いを意識しないと、一枚ごとは良く見えても、動いた瞬間にガタつきます。

歩行の8フレームでは、対になるコマの対応を先に押さえると安定します。
1と5、2と6は体の向きや重心の考え方が対応しているので、胴体、頭、腕、脚を毎回描き直すより、共通化できるパーツを残したほうが崩れません。
Asepriteのようにオニオンスキンで前後のコマを重ね、ループプレビューを回しながら、接地足の位置と肩の上下だけを重点的に合わせていくと、どこで跳ねたかがすぐ見えます。
自分も8フレーム歩行を組む時は、まず1フレーム目を基準に5フレーム目の腰と頭の位置をそろえ、次に2と6の腕振りを反転ベースで合わせます。
この順で進めると、毎コマをゼロから描くより足運びの破綻が減り、直す場所も絞れます。

アニメでは、細かな揺れを全部ピクセル単位で動かすと段差が目立つ場面があります。
髪先、布端、呼吸による胸元の上下のような微細な動きは、サブピクセル的な発想で明暗や位置を補って見せると、コマ数を増やさなくても滑らかに感じます。
ただし、ここでも主役は補助です。
歩行なら接地、重心移動、振り子運動が先で、微細な揺れはそのあとに足します。
アニメの技法選びは、1枚の完成度より連続した時の自然さで判断するとぶれません。

まとめ|最初に極めるべきはこの3つ

迷ったら、最初に極めるのは線整理、次にパレット設計、そこから控えめなアンチエイリアスです。
この順で触ると、輪郭の読みやすさが先に立ち、次に全体の統一感が出て、そこへ曲線部だけの滑らかさが乗るので、少ない手数でも見た目が締まります。
自分も作業を見比べる時は、この3段階で触れた版ほど差分がはっきり出ます。

次は32x32のモチーフを1つ決めて、線整理だけの版、8色パレット版、曲線部のみAAを入れた版を並べて比べてください。
風景を選ぶなら、ディザリングは隣接した2色だけで試すと面の差が読み取りやすくなります。

関連記事(サイト内で作成を推奨):

  • tutorials-32x32-line-cleaning.md (線整理の具体チュートリアル)
  • techniques-dithering.md (ディザリングの詳細解説)

シェア

高橋 ドット

ゲーム会社でドット絵グラフィッカーとして10年以上の経験を持つ。ファミコン・スーファミ時代のレトロゲームに影響を受け、現在はインディーゲームのアート制作を手がける。制作テクニックの体系化に情熱を持つ。

関連記事

テクニック

ドット絵 影の付け方|光源と陰影3パターン

ドット絵の影付けは、色数より先に光をどこから当てるかを固定すると一気に整います。この記事は、16x16〜32x32の小さなキャラや顔アイコンで立体感を出したい初心者に向けて、左上・右上・逆光の3方向を最短で描き分ける考え方を、フラット、ディザリング、リムライトの3パターンに整理して解説します。

テクニック

ドット絵 輪郭線の色と太さの選び方|16x16・32x32

16x16のキャラ頭部で、最初は黒の1px外周にしていたものを影側だけ2pxへ切り替えたことがあります。白背景のSNSでは輪郭が拾われやすくなり、黒背景では外周の重さだけが前に出る感じも薄れて、同じ絵なのに見え方が一段整いました。

テクニック

ドット絵 アンチエイリアスのコツ|ジャギ消しの基本と応用

ドット絵のアンチエイリアスは、斜線や曲線の境界に中間色を置いて、ピクセルの段差を「ぼかす」のではなく「整えて見せる」作業です。とくにAsepriteで32x32前後のアイコンやスプライトを描き始めた人ほど、まずはピクセル配置そのものを直し、

テクニック

ディザリングとは|ドット絵の色数を増やす基本と使い方

ドット絵で色数が足りないとき、境界の段差をそのまま受け入れる必要はありません。ディザリングを覚えると、2色しかない場面でも中間色や階調を擬似的に作れますし、16x16や32x32の小さなキャンバスでも陰影の説得力が一段上がります。