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

ドット絵のアンチエイリアスは、斜線や曲線の境界に中間色を置いて、ピクセルの段差を「ぼかす」のではなく「整えて見せる」作業です。
とくにAsepriteで32x32前後のアイコンやスプライトを描き始めた人ほど、まずはピクセル配置そのものを直し、そのうえで角に1pxだけ中間色を置く発想を持つと輪郭の質が一段上がります。
実際、32x32の丸アイコンをAAなし、線形修正のみ、1px手打ちAAありの3段階で見比べると、角の1px置換だけで読み取りやすさがはっきり変わります。
この記事では、斜線と曲線の角に置く1px中間色の具体ルールを色コードつきで示しつつ、内側AA、外側AA、ディザリング、線形修正だけで止める判断を先に整理します。
先に押さえたいのは、AAは入れれば入れるほど良くなる処理ではないということです。
背景が変わるスプライトに外側AAを足すと縁が浮き、輪郭にディザリングを混ぜるとノイズになり、段差整理を飛ばしてAAだけ足すとにじみます。
必要最小限の1pxを、置く場所を選んで打つのが手打ちAAの芯です。

ドット絵のアンチエイリアスとは？ジャギ消しの基本

用語の整理

まず言葉をそろえておくと、ジャギーは斜線や曲線の輪郭に出る、階段状のギザギザのことです。
四角いピクセルで斜めや丸みを表そうとすると、どうしても段差が発生します。
ドット絵ではこの段差そのものが表現の一部でもありますが、目立ちすぎると線が硬く見えたり、形の読み取りが鈍ったりします。

そこで使うのがアンチエイリアシング（anti-aliasing）です。
ドット絵の文脈では、境界の見え方をなだらかにするために、隣り合う2色のあいだへ中間色のピクセルを手で置く技法を指します。
一般的な画像処理で連想される、自動のぼかしフィルタや半透明のにじみとは別物です。
ドット絵では1pxごとに意味があるので、AAも「効果をかける」のではなく「必要な場所へ1px置く」と考えたほうが実践に直結します。

たとえば32x32の白背景アイコンで黒のアウトラインが階段状に折れる角があるとします。
ここでは、黒と白のあいだに中間灰を1pxだけ噛ませる一例を示します（例: 黒 #000000、白 #ffffff、中間灰 #808080）。
これらの色コードはあくまで筆者の経験に基づく例示で、モチーフや使用パレットに応じて明度や色相を調整してください。
目的は角の引っかかりだけを落として輪郭の芯を残すことです。

低解像度でAAが効く理由

ドット絵でAAの効果が見えやすいのは、低解像度では1pxの比重が大きいからです。
32x32の中では、1pxの追加や削除が形そのものに直結します。
斜線の角に1px置くだけで、線の太さの印象や丸みの読み取りが変わるのはそのためです。

逆に、高解像度の画像や高ppiの表示では、同じ1pxの段差が相対的に目立ちにくくなります。
人が個々の画素を見分けにくくなる目安は約450±50 ppiです。
この密度に近づくほど、境界の階段感は視認しづらくなります。
つまり、ドット絵でAAを強く意識する必要があるのは、ピクセルが形として見えるサイズと密度で扱うときです。
低解像度のスプライトやアイコンほど、AAの有無が画面の印象に出ます。

ただし、低解像度だから何でもAAを入れればよいわけではありません。
効くのは、色差が大きい境界の、目立つ角だけです。
黒線と白背景のように差が大きい組み合わせでは、中間灰が緩衝材として働きます。
32x32の例なら、黒と白の階段角に灰を1px置くのが基本形です。
黒は#000000、白は#ffffff、灰は#808080です。
この1pxは、角の外側または内側で最も引っかかって見える位置に置きます。
ここでありがちな失敗は、その灰色を角から離して長く引くことです。
1pxの補助色を線のように並べると、輪郭が二重線になり、細い線が太って見えます。

AAを「カド落とし」と捉えると、この加減がつかみやすくなります。
狙いは境界全体を曖昧にすることではなく、段差の角だけを視覚的に削ることです。
とくに小さな円、斜めの棒、記号の外周では、1pxだけで足りる場面が多く、2px以上を連ねると別の問題が出ます。
黒い線の存在感を残したいUIアイコンで、角だけ処理して他は触らないのは、この考え方に沿っています。

表示倍率と検証の基本

AAは原寸で効いていなければ意味がありません。
確認の基準は100%表示の見え方です。
そこで形が読み取れるか、線がにじんで見えないか、角だけが自然に整っているかを見ます。
拡大表示は作業のために使い、評価は原寸で下します。
この順番が逆になると、拡大中に気持ちよく並んだピクセルが、100%では余計な灰色の縁に見えることがあります。

一方で、ピクセル配置そのものの検査には大きく拡大した表示が欠かせません。
ジャギーや置き忘れの1pxを点検するなら、501%以上をひとつの目安にするとグリッド単位で追えます。
高ピクセル密度の画面では、801%以上まで上げると境界の判断が安定します。
最近傍補間で拡大すると、元の1pxがそのまま大きなブロックとして見えるので、AAの置き位置を確認しやすくなります。
32x32を4倍にすると128x128になり、1つの元ピクセルが4x4の同色ブロックとして並ぶため、角の1pxがどこに効いているかを視認しやすくなります。

このセクションでは、本文中にAAなし→線形修正→AAありの3段階比較図を入れる前提で話を進めます。
見せ方としては、同じ32x32モチーフを横並びにして、まずジャギーが残った状態を示し、次に段差パターンだけ整えた状態を置き、そのあとで角へ1pxの中間色を入れた状態を見せるのが分かりやすい構成です。
AAが魔法ではなく、線形修正の延長にあることが一目で伝わるからです。

altテキストはまず画像の目的や意味を簡潔に伝えることを優先してください。
ピクセル単位の配置や色コードのような詳細は、altではなく図版下のキャプションや本文内の注記で補足するのがアクセシビリティ上も実用的です。
例: alt="白背景の32x32黒アウトラインアイコン（角を一部処理した比較図）"。
ピクセル単位の説明（例: 右上の階段角に#808080を1px追加）はキャプションに記載してください。

まずは線の形を整える：AA前に直すべきジャギー

段差パターンの基礎

手打ちAAは、乱れた線を隠すための化粧ではありません。
先にやるべきなのは、アウトラインそのものの段差を整えることです。
ドット絵の斜線や曲線は、1pxごとの段差の並びで見た目が決まります。
この並びが素直なら、AAなしでも輪郭は締まって見えます。
逆に並びが崩れていると、中間色を置いても線の芯がぶれて見えます。

ここで見るべきなのが、段差のランレングスです。
たとえば 1,1,1 や 2,2,2 のように、同じ長さの段差が規則的に続く線は安定して見えます。
斜め45度寄りなら 1,1,1、もう少し寝た角度なら 2,2,2 という具合です。
規則があると、目はそれをひとつの方向性として読めます。

一方で、1,2,1 のような崩れ方は、短い段差と長い段差が一度だけ混ざるため、そこだけ線がひっかかって見えます。
形としてはつながっていても、視覚的には「途中で角度が変わった」ように映るのが問題です。
ジャギーを直すときは、まずこの不自然な乱れを探します。

曲線でも考え方は同じです。
ただし曲線は、まっすぐな斜線のように同じ長さを繰り返すより、段差の長さが漸進的に変化するほうが自然です。
たとえば 1→1→2→2→3 のように少しずつ伸びていく並びは、丸みの流れを作れます。
逆に 1→3→1 のような飛び方をすると、その部分だけ膨らみやへこみとして読まれてしまいます。
丸くしたいのに、折れた印象が残る原因はここにあります。

この段差整理は、小さいサイズほど効きます。
16x16の丸角アイコンでは、AAを入れる前に 1,2,1 の乱れを 2,2 にそろえるだけで、縮小表示時のガタつきが消える場面が多くあります。
私も小さなUI記号を詰めるとき、まず中間色を足したくなるのですが、実際には線形だけ直して終わることが少なくありません。
16x16くらいだと、1pxのAAより先に1pxの配置そのもののほうが形に効くからです。

NG例

線形修正の前にAAを足すと、ジャギーが減るどころか別のノイズを呼びます。代表的なのがダブルとバンディングです。

ダブルは、輪郭のすぐ横にもう1本の線が並走して見える状態です。
たとえば黒い外周の外か内に、中間色を長く引きすぎると、本来ひとつだったエッジが二重に見えます。
角を落とすつもりで置いた1pxが、線の流れに沿って連なった瞬間、補助色ではなく第二の輪郭になってしまいます。
これが起きると、線は滑らかになるどころか太って見え、しかも芯がぼけます。

バンディングは、輪郭とその隣の色面が平行に帯状で並び、にじんだ縁取りのように見える状態です。
外周に沿って同じ幅で色が続くと、目はそれを「なじみ」ではなく「帯」として認識します。
ドット絵では1pxの帯でも存在感が強いため、AAのつもりで置いた中間色がそのまま汚れに見えることがあります。
輪郭にディザリングを混ぜたときのノイズ感も、根っこはこの帯状の乱れに近いです。

こうした失敗は、AAの色選びより前に、元のアウトラインが整っていないところから始まります。
顎の下や頬のふくらみなど、曲線の途中に 1,2,1 の崩れが残っている状態で中間色を足しても、元の折れは消えません。
折れた線の周りを薄く囲うだけなので、結果としてダブルやバンディングになりやすいわけです。
つまり、AA以前に直すべきなのは「色」ではなく「形」です。

線形修正の手順

実作業では、輪郭を見た瞬間に全部を直そうとすると迷います。32x32の顔輪郭なら、私は段差の流れを3段階で見ます。

1. まず、不自然な崩れを規則形に戻します。顎下に 1,2,1 の並びがあれば、先に 2,2 へそろえます。ここで1px増減しても、曲線全体の流れがつながるなら正解です。局所的な“揺れ”を消すだけで、線の落ち着きが一段変わります。

1. 次に、1px段差が長く続きすぎていないかを見ます。たとえば頬から顎へ向かう区間で、細かい 1,1,1,1 が続きすぎると、角度が立ちすぎてガサついて見えます。そういう箇所は 1,1,2 のように再配分して、段差の長さに少し伸びを作ります。曲線は同じ調子を延々と続けるより、少しずつ変化したほうが丸みに見えます。

1. 角の突出を引きます。輪郭の途中で1pxだけ外へ飛び出した点があると、そこが小さなトゲとして目に入ります。顎先やこめかみの切り返しで起こりやすいので、その1pxを内側へ引いて、前後の段差とつながる位置に置き直します。角を丸めるというより、流れに乗っていない点を除く感覚です。

この3つを済ませてから原寸に戻すと、AAなしでも十分読める線になっていることが多くあります。
とくに16x16では、その傾向が強いです。
丸角アイコンや小さな顔パーツは、段差最適化だけで輪郭が素直に見える場面が多く、AAを足すとかえって密度過多になります。
小サイズでは「まず形を整える」「まだ角が立つ場所だけAAを考える」という順番のほうが、結果が安定します。

基本の入れ方：中間色をどこに何px置くか

1px角のAA配置ルール

たとえば、白背景 #ffffff の上に黒線を引いたとき、黒 #1e1e1e と白の境界がきつく出る箇所に灰色 #6b6b6b を1px挟むと段差の角が少しだけ丸く読まれます。
ここでの色指定はあくまで例示であり、モチーフやパレットによって最適値は変わります。
実務上は「まずは内側から1pxだけ試す」「効果が出るかを原寸で確認する」を繰り返して最適色を決めてください。

配置の頻度については、筆者の経験則として「まずは少なめに置くこと」を推奨します。連続配置を避けて角に点在させ、必要なら段階的に増やして判断してください。

中間色は、単に「薄い灰色」を置けばよいわけではありません。
明るすぎる色を角に置くと、黒線の横に白っぽい粉が乗ったように見えます。
逆に暗すぎると、AAではなく線の太りになります。
黒と白の中間にあることに加えて、元の線色にまだつながって見える明度が必要です。
だから、黒線 #1e1e1e に対して #6b6b6b は使いやすく、#b3b3b3 は一段外側や広めの境界向きです。
黒線 #2b2b2b でも、最初の角には #6b6b6b が収まりやすく、白に近い灰色から入ると輪郭の芯が逃げます。

色選びで迷ったら、輪郭と背景だけを見るのではなく、どちらの側に寄せたいAAかを決めると判断が速くなります。
外周より内側から始めるAAなら、線色寄りの中間色を使ったほうが輪郭の密度を保てます。
逆に背景寄りの明るい灰色を先に置くと、内側AAなのに外へ溶ける印象が出ます。
ドット絵のAAは自動処理のぼかしではなく、読ませたい形を手で整える作業なので、色も「平均」より「役割」で選ぶほうが安定します。

サイズ別の目安

サイズが変わると、同じ1pxでも見え方の比重が変わります。
16x16では1pxの存在感が大きいため、AAはごく少なく置くのが前提です。
小丸や小さな記号なら、最も角ばる場所にだけ1pxで触るほうが形が保てます。
上下左右の45度付近に #808080 を点で置くくらいで、円周を一周なぞる必要はありません。
むしろ全周を埋めると、輪郭の情報量より灰色の面積が勝って、ぼやけた丸に寄ります。

32x32は、AAの効果と入れすぎの失敗が両方見えやすいサイズです。
初心者が最初にルールを掴むなら、この大きさがいちばん扱いやすいと感じます。
2-1の斜線や小さな顔輪郭なら、角に #6b6b6b を1pxずつ置くだけで変化がはっきり出ます。
線に沿って3px以上連続させるとすぐにダブル化します。
だから32x32では、角に単発で置く、長くても2か所まで、という制限が効きます。
ここで「硬さを少し残す」くらいに止めると、ドット絵らしい輪郭の芯が消えません。

64x64になると、緩い曲線に対して1pxのAAを点在させる余地が生まれます。
ただし、ここでも帯状に並べるのは禁物です。
まず角に1px置き、それでも折れが目につく箇所だけ、1ドット間隔を空けながら散らします。
等間隔に並べると、滑らかさではなく規則的な縁取りに見えます。
少し不均一なくらいのほうが、曲線の流れに沿った補助色として機能します。
64x64で必要になるのは量ではなく、どこに置かないかの判断です。

この3サイズを通して共通するのは、AAを「輪郭全体に足す処理」と考えないことです。
角だけに1px、外周より内側から、色差の大きい2色の間には中間色を挟む。
この3つを守るだけで、最初の一歩としては十分に再現できます。
配置を増やす判断は、そのあとに形を見ながら足せば間に合います。

応用：内側AA・外側AA・線の太さ調整

内側AAの安全地帯

応用に入っても、基準として置きやすいのは内側AAです。
これはスプライトの外周ではなく、内部の色境界に中間色を差す方法で、背景色に引っぱられません。
輪郭線のすぐ外に灰色を置くのではなく、輪郭線の内側、たとえば髪の房の境目や頬のふくらみの内側に #6b6b6b を1px入れて、段差の読まれ方だけを整えます。
外へ溶かすのではなく、内側の面に接続する意識で置くと、線の芯が残ります。

このやり方が安全なのは、スプライト単体で成立する補正だからです。
ゲーム用のキャラクターは背景が差し替わる前提で使うことが多く、草地の上にも暗い室内にも乗ります。
そのとき外周に背景寄りのAAを打っていると、場面が変わった瞬間に縁だけ別の色として浮きます。
実制作でも、背景が変わるスプライトでは外側AAを切って、頬や髪の内側だけで柔らかさを足したほうが、どのシーンでも破綻せずにまとまりました。
顔まわりの印象は保ちつつ、外周の輪郭は常に同じ密度で読ませられるからです。

64x64の髪束なら、この差がよく見えます。
外周のシルエットは触らず、房の内側の凹凸だけに #6b6b6b を1pxずつ点在させると、束感が自然に出ます。
ここで帯のように連続配置すると、髪の段差が消える代わりに灰色の線が一本増えたように見えます。
房エッジのバンディングも起こしやすいので、点で散らして、面の流れに合わせて止めるほうがまとまります。

肘や膝、髪先の尖りのように、硬さそのものが形の意味になる場所では、内側AAであっても入れない判断が効きます。
全部を丸く処理すると、関節の張りや先端の切れ味まで失われます。
柔らかく見せたい頬には1px入れるのに、肘の角はあえて立てたままにする。
この緩急があると、スプライト全体が均一にぬるくならず、見る側も「どこが柔らかく、どこが硬いか」を読み取りやすくなります。

外側AAの可否判断

外側AAは、スプライトの外周と背景の境界をなじませる処理です。
効く場面は多いですが、原則として背景色が固定される場合に有効であり、背景が可変な場面では慎重に扱うべきです（工夫次第で例外的に使えるケースもあります）。

固定背景で成立する例は、UIのアイコン、看板、ウィンドウ枠にはめ込む装飾、特定の背景画像の上にだけ置くオブジェクトです。
たとえば明るいベージュのパネルの上に常設されるピクトなら、輪郭外周にその背景へつながる中間色を1px置くことで、角の立ち方を穏やかにできます。
このときは「背景とセットで一枚の絵として見る」ので、外周AAが理にかないます。

反対に、キャラクタースプライトやドロップアイテムのように、ステージやライティングの違う場面をまたいで使うものは、外側AAが弱点になります。
明るい背景に合わせた薄い灰色の縁は、暗い背景では粉っぽい縁取りになり、暗い背景に合わせたAAは明るい場所で汚れに見えます。
外周が背景に依存する以上、このズレは避けられません。
だからゲーム用の汎用スプライトでは、外側AAを足すより、輪郭そのものをきれいに取り、柔らかさは内側で作るほうが安定します。

外側AAを使う場合でも、全面に均等に入れる発想は避けたほうが収まりがよくなります。
背景とのコントラストが強く出る角だけに絞ると、輪郭の芯を残したまま見え方を調整できます。
外周全体をなぞると、境界を整える処理ではなく、背景色で輪郭を縁取った処理に変わります。
特にドット絵では、その1pxがすぐ別線として見えるので、可の場面でも少量で止めるのが前提です。

色の錯視で線幅をコントロール

AAは段差をなだらかにするだけでなく、線の太さの見え方も操作します。
輪郭は物理的なピクセル数だけでなく、周囲との明度差で太くも細くも感じられます。
線色が暗く、地色が明るいほど境界は強く立ち、同じ1pxでも太い線として読まれます。
逆に線色を少し持ち上げ、中間色を薄くつなぐと、芯を保ったまま細く見せられます。

たとえば黒線を #1e1e1e で引いていた場面を #2b2b2b に寄せ、内側AAを #6b6b6b で薄く添えると、線の実寸は同じでも圧が下がります。
目は「真っ黒な境界」より「少し明るい輪郭」を細く受け取るので、顔や髪のように重くしたくない部分で有効です。
逆に力を出したい輪郭では、線色を締めてAAを減らすと、同じ1pxでも骨格が強く見えます。
ここではピクセル数をいじる前に、明度差の設計で見え方を変えているわけです。

この錯視は、入れすぎたAAの違和感を判断する物差しにもなります。
中間色が増えすぎると線が細くなるのではなく、輪郭のまわりに半透明の面が増えたように見えます。
すると本来の線幅はそのままなのに、外側へにじんだ分だけ太く感じます。
細見えを狙うなら、明るい色を足していくのではなく、線色とAA色の距離を詰めて、少数のピクセルで処理したほうがまとまります。

ここでも緩急が効きます。
頬や髪の房の内側は、線色を少し起こしてAAを添えると柔らかく見えますが、尖った毛先や肘の角まで同じ調子で丸めると、エッジの役割がなくなります。
先端や関節のように緊張感を持たせたい箇所は、あえてAAを抜き、暗い線をそのまま見せると締まります。
全部を均一に整えるのではなく、細く見せたい場所と硬く見せたい場所で錯視を使い分けると、同じパレットでも表情差を作れます。

ディザリングとの違いと使い分け

AAとディザの役割分担

アンチエイリアシングとディザリングは、どちらも中間色を使うので混同されがちですが、担当している仕事は別です。
AAは輪郭や色境界を滑らかに見せる処理で、段差の読みにくさを減らすために使います。
対してディザリングは、少ない色数の中で中間調や面のつながりを作る処理です。
こちらは輪郭を整えるというより、空や地面、影の広い面で「色が足りないぶんを並びで補う」ための技法です。

この分担で考えると、迷いが減ります。
輪郭は形を読ませる場所なので、1pxの置き方がそのままシルエットの精度になります。
面は色の量感やグラデーションを見せる場所なので、ピクセルを交互に混ぜて色の段差を和らげる価値があります。
つまり、輪郭はAA、面はディザリングが基本です。

制作中も、この分業にしてから失敗が減りました。
輪郭までディザで処理すると、小さいサイズでは縁が整うどころか砂をまぶしたような見え方になりやすく、形の読み取りが落ちます。
とくに16x16や32x32のような密度では、境界の1pxは「質感」ではなく「輪郭そのもの」として見られるので、境界処理はAA、面の階調はディザと切り分けたほうが収まりません。

輪郭でディザがNGになりやすい理由

ディザリングはピクセルを規則的または半規則的に散らして、中間色があるように見せる技法です。
この「散らす」性質が、輪郭では裏目に出ます。
輪郭に必要なのは、どこが線の芯で、どこが補助の中間色かが一目で分かる配置です。
ところがディザを輪郭全面に敷くと、芯の線と補助色の差が崩れ、境界がノイズとして見えます。

小サイズで起きやすいのが、いわゆる“砂目の縁”です。
斜線や曲線の外周に1:1の交互配置を長く走らせると、滑らかさよりザラつきが先に立ちます。
面の中ならそれが階調として読まれても、輪郭では「輪郭が震えている」「汚れて見える」という受け取られ方になります。
輪郭は外形の情報量が少ないぶん、1pxのノイズがそのまま読みづらさに直結します。

雲や髪束のように柔らかいモチーフでも、この原則は変わりません。
柔らかさを出したいからといって輪郭全体をディザで崩すと、やわらかいのではなく締まりのない形になります。
角やカーブのきつい部分だけに1pxの中間色を置くAAなら、輪郭の芯を残したまま当たりを丸められます。
柔らかさは境界の要所で作り、面の密度差は内側のディザで見せるほうが、形と質感の両方が立ちます。

ケース別の選択肢

使い分けを具体化すると、32x32の空グラデーションはディザリングの出番です。
青から明るい青へ移る広い面では、1:1の交互配置だけで押し切るより、場所によって2:1も混ぜたほうが、単調な市松模様になりません。
ここでやっているのは輪郭処理ではなく、少色数で面内の中間調をつなぐ作業です。

その空に浮かぶ雲の輪郭はAAで整えます。
外周の角やきついカーブだけに1pxの中間色を置き、輪郭線の芯は残します。
雲の内側にある明暗差や影のふくらみには軽いディザを使っても、外周まで同じ密度で散らす必要はありません。
見せたいのは雲のふわっとした量感であって、外形のザラつきではないからです。

併用が必要な場面もあります。
たとえば面内のディザ境界が輪郭近くまで来るケースでは、境界の処理をそのまま外周へ延ばすと、輪郭が一気に粗く見えます。
このときは輪郭側をAA優先にして、ディザは1段だけ接続して終わらせるとまとまります。
終端を少し散らして面の流れだけを残し、外周の線は中間色1pxで静かに受けるわけです。
ディザの勢いを輪郭まで持ち込まないことが、形を崩さずに面のなじみを残すコツです。

よくある失敗：ぼやける・にじむ・背景で浮く

過剰AAとその見分け方

初心者がいちばん踏みやすい失敗は、ジャギーを消したい気持ちが強すぎて、輪郭のまわりに中間色を並べすぎることです。
角を丸めるための1pxだったはずが、気づくと直線部分にまで中間色が続き、輪郭の外側や内側に細い“帯”ができています。
こうなると段差は減っても、今度は線の芯がぼやけて、形そのものが鈍って見えます。
AAは輪郭を消す技法ではなく、輪郭の読ませ方を整える技法です。
芯の線より中間色の面積が目立ち始めたら、入れすぎです。

とくに危ないのが、角以外にも「なんとなく滑らかに見えそう」という理由で中間色を横並びに増やすパターンです。
斜線や曲線では効果がある配置でも、直線部分で同じことをすると、線幅が太ったように見えたり、灰色の膜をかぶせたように見えたりします。
実作業では、角だけ1pxを基本にして、連続して置く場所も最大2箇所くらいで止めると破綻しません。
そこから1px削って見比べると、必要なAAと惰性で置いたAAがはっきり分かれます。
私は迷ったとき、まず1px消して原寸に戻します。
消しても印象が変わらないAAは、たいてい不要です。

色選びでも失敗は起きます。
完全な黒（#000000）を線色にすると、その次に置ける中間色の効き幅が狭くなり、AAが効く前に灰色っぽい汚れに見えがちです。
暗い背景に暗い線を置いたときも同じで、中間色のコントラストが足りず、滑らかさではなくにじみに見えます。
こういう場面では、線色を少しだけ持ち上げて、たとえば#1e台の暗色を#2b台へ寄せるようにすると、中間色が働く余地が生まれます。
暗背景×暗線で輪郭が溶けるときは、AAを足すより先に明度差を組み直すほうが効きます。
内側に明るい面を先に作ってから境界を整えると、輪郭の役割が戻ります。

バンディングの回避策

AAがあるのに汚く見えるときは、色数不足ではなく並べ方の問題であることが多いです。
その代表がバンディングです。
内側AAを境界に沿って一直線に並べると、元の線とAAが平行な二重線になり、滑らかになるどころか“帯”として読まれます。
輪郭の段差を細く分解したつもりでも、目には一本の太い境界として映るので、結果はむしろ重たくなります。

これは髪の束、袖の折れ目、影の境界でよく起きます。
輪郭線のすぐ内側に中間色を同じ間隔で並べると、整然として見える反面、面の境目が固く残ります。
ドット絵では、整列した中間色はグラデーションではなく構造物として見えます。
だからAAは、きれいに並べるほど良いわけではありません。
必要なところだけに点在させて、等間隔を避けるほうが自然です。
角のきつい場所、カーブが急に折れる場所、階段の段差が長く見える場所だけに絞ると、帯にならずに効きます。

作業中は、AA色が「境界に追従している」のか、「境界の複製になっている」のかを見ると判断しやすくなります。
前者は形の補助ですが、後者はバンディングです。
一本の線に対して、内側へもう一本線を引いたように見えた時点で危険信号です。
そういうときは、連続したAAを一部抜いて間を空けるだけで見え方が落ち着きます。
AAは面を塗る作業ではなく、視線が引っかかる段差だけを局所的にほぐす作業だと考えると、置きすぎを防げます。

外周AAが失敗する条件

外周AAは見た目の効果が分かりやすいぶん、使いどころを間違えると破綻も目立ちます。
背景が未確定なのに外周へ中間色を置くと、その色が背景との間に残り続けるからです。
制作中はきれいに見えても、配置先の背景色が変わった瞬間に、輪郭まわりだけ灰色の縁が浮きます。
キャラ単体で描いていたときは自然でも、ステージを差し替えたら縁だけ発光したように見える、という事故は珍しくありません。
実際、外周AAを入れたキャラが背景変更で急に馴染まなくなる場面は何度もありました。
安全策としては、外周AAは固定背景のときだけに限定し、背景が動く素材や複数ステージで使うスプライトでは封印するのが堅実です。

背景が確定していない素材では、内側AAだけで十分です。
スプライト内部の明暗境界や色境界は背景依存が低いので、場面が変わっても破綻しません。
反対に、UIパネルやメッセージウィンドウのように、置かれる背景が決まっている素材なら外周AAも成立します。
背景色とセットで成立する処理だからこそ、単体素材へ汎用的に持ち込まないことが肝心です。

外周AAが失敗しやすいのは、背景色だけの問題ではありません。
暗色同士の組み合わせでも事故が起きます。
暗い背景に暗い輪郭、その間にさらに暗い中間色を置いても、境界の整理にはならず、輪郭がにじんで見えるだけです。
この場合は、外周AAで解決する発想をいったん捨てて、線色と背景の明度差を再設計したほうが早いです。
線を少し起こすか、内側に明るい受けを作って輪郭を読ませると、AAなしでも形が立ちます。
背景未確定の段階で外周を触るより、まず形と配色の関係を安定させるほうが失敗が減ります。

実践チェックリスト：仕上げ前に確認するポイント

表示倍率とピクセルグリッド確認

仕上げ前の確認は、原寸と高倍率を往復する順番で進めると判断がぶれません。
まず100%表示で、文字や記号として読めるか、輪郭がにじまず立っているかを見ます。
ここで形が通っていれば、次は拡大表示に切り替えて、角や曲線の1pxが意図した位置に置かれているかを点検します。
グリッド単位で追うなら501%以上、HiDPIの画面なら801%以上まで上げると、角の処理が帯になっていないか拾えます。

この往復確認は、見落としを止める効果がはっきりあります。
私も501%まで拡大して見直したとき、角に1pxだけ置いたつもりのAAが、実際には直線に沿った細い帯になっていたことが何度もありました。
100%では「少し整った」程度に見えていても、高倍率では輪郭の複製に見える。
その逆もあって、拡大中は邪魔に見えた1pxが、原寸へ戻すとちょうど引っかかりだけ消していることがあります。
だから、原寸だけでも拡大だけでも足りません。

ここで見るべき対象は、絵全体ではなく角と境界です。
斜線の折れ目、丸の頂点、記号の先端、服の折れ返しのような「1pxの有無で見え方が変わる場所」に絞ると、修正量が増えません。
拡大縮小の確認は最近傍法を前提に行い、拡大時にピクセルがそのままブロックとして見える状態で点検します。
ぼかし補間のまま確認すると、AAの効きではなく表示側の補間を見てしまいます。

比較図を記事やチーム内資料に残す場合は、画像のaltにも手を入れておくと伝達精度が上がります。
たとえば「右上角に中間色を1px、内側へ配置」「左下角のAAを削除した比較」のように、どの角に何色を1px置いたかまで書いておくと、見た人が学びを再現できます。
単に「AAあり」「AAなし」だけでは、どこを見ればよいか伝わりません。

背景あり/なし比較

外周が絡むAAは、透明のまま見た印象だけで決めると危険です。
透明格子の上で整って見えても、実際の配置先が明るい背景、暗い背景、色のある背景に変わると、外周の中間色だけが縁として浮くことがあります。
仕上げ前は、透明格子と想定背景の両方に載せて見比べ、輪郭まわりに色被りが出ていないかを確認します。

この比較で注目するのは、輪郭線そのものより外周1pxです。
明るい背景では淡い縁、暗い背景ではくすんだ縁、色背景では輪郭の周囲だけ別色の膜のように見えることがあります。
背景が固定されたUIやパネルなら外周AAが効く場面もありますが、可変背景で使うキャラやアイコンなら、外周AAを外したほうが結果は安定します。
背景に依存しない境界だけを残す、という考え方です。

迷ったときは、AAを足すより削って比べたほうが判断が早いです。
角に入れたAAのうち1pxだけ消し、BeforeとAfterを並べて見ます。
その1pxがなくなることで角の読みにくさが戻るなら残す価値があります。
消しても印象がほとんど変わらず、むしろ背景へのなじみが良くなるなら、そのAAは惰性で置かれていた可能性が高いです。
必要な場所だけAAする、という原則は、この1px削除テストで具体化できます。

保存形式は用途に合わせてAAの見え方まで考慮して決めます。
ゲーム用スプライトやウェブ掲載の静止画像なら、まずPNGが基準です（可逆圧縮・透過対応で1pxの配置が崩れにくい）。
仕様や実装差については MDN の画像形式解説やツール側のドキュメントを参照して、書き出し設定や減色の影響を確認してください。
GIF は最大256色のため、中間色が多いAAの絵は減色で崩れるリスクがあります。

練習課題と次のステップ

まずは1つのモチーフだけを決めて、線を直す段階とAAを足す段階を分けて比べてください。
角の1pxは、増やすことより減らして残すことのほうが判断を磨きます。
背景条件まで含めて検証すると、内側AAと外側AAの使い分けが手に入ります。
そこまで見えたら、次は面をなじませる技法と、動きの中で効く技法へ進む流れが自然です。