ドット絵の減色テクニック｜色数を減らしてまとめる手順

減色は、フルカラー画像を指定した色数まで落とす色量子化の工程であり、パレットを選ぶ作業とは役割が違います。
Aseprite でドット絵を打ち始めて10年以上、最初は減色ボタンを1回押せば済むと思って失敗を重ねましたが、写真をそのまま16色に落としただけでは主役のキャラが背景に溶けてしまいます。
だからこそ、中央値分割や八分木、k-means、NeuQuantのような手法の違いを知り、絵の性質に合わせて選ぶ視点が要ります。
さらに、16〜32色のイラスト風や4〜8色のアイコン、ファミコンやゲームボーイの制約のように色数のゴールを先に決めれば、ツール選びも仕上げの方向もぶれません。

減色とは何か｜パレット選びとの違いと目的

減色は、フルカラー画像の色数を指定した数まで削る色量子化の工程です。
ディザリングで見た目を補う作業や、どの色を残すかを決めるパレット設計とは役割が違い、まずここを分けて考えると迷いが減ります。
ドット絵ではインデックスカラーを使い、色そのものをパレット、つまり CLUT に置き、各ピクセルは0〜255の番号でその色を参照します。

減色(色量子化)とインデックスカラーの基礎

インデックスカラーは、1つ1つのピクセルに色名を持たせるのではなく、番号札のような参照値を持たせる方式です。
だからパレットの1色を変えるだけで、その番号を参照していた全ピクセルの見た目がまとめて変わります。
手数を減らしながら画面全体の色を管理しやすいのは、この仕組みがあるからです。
ここでの減色は、元の画像をそのまま活かしつつ、使う色数だけを指定値へ丸める操作です。
写真の取り込みや塗り分けの最終段階で効いてくるのはこの工程で、ディザリングはその後に段差をなだらかに見せる補助役だと捉えると整理しやすいでしょう。

『パレットを作る』と『減色する』は別の作業

『パレットを作る』のは、作品に残したい色の方向性を設計する作業です。
肌の階調をどう持たせるか、影色をどこまで共通化するか、金属や布の差をどの色で見せるかを決める段階で、絵作りの意図が強く出ます。
『減色する』のは、その設計を元画像に反映して、指定色数に収まる形へ丸める処理です。
Aseprite で手描きパレットを用意していたのに写真取り込みだけが汚かったとき、原因は減色とパレット適用を一括でやっていたことでした。
先に残す色を決め、次にその色へ画像を合わせる順番に直すと、結果が安定します。
依頼制作で容量を絞るために32色から16色へ落とした場面でも、役割分担を先に整理しただけで進みが一気に滑らかになりました。

なぜ色数を減らすとドット絵はまとまるのか

色数を絞ると、面の塊がそろって見え、画面内の情報が整理されます。
細かな色差が減るぶん、輪郭の近くで色がバラつきにくくなり、キャラと背景の関係も読み取りやすくなるのです。
明度差と色の役割分担を外さないまま減色できれば、少ない色でも主役が埋もれにくい。
実務では、この「まとまり」がそのまま効いてきます。
容量削減が必要な制作では扱うデータが軽くなり、レトロ機準拠の案件では最初から使える色数が限られるため、減色は表現の前提になります。
だからこそ、どのアルゴリズムを使うかより先に、何色まで落とすかを決めておくのがおすすめです。
ベタ面中心なら高速型、写真風なら高品質型を選び分けてみてください。

減色アルゴリズムの種類と選び分け

減色はフルカラー画像を指定した色数へ落とす色量子化で、パレット作りとは役割が違います。
どの色を残すかで絵の見え方が変わるため、同じ元画像でもアルゴリズム次第で輪郭の立ち方や面のまとまりが別物になります。
特にドット絵のインデックスカラーでは、容量と表現の両方を左右する工程になるので、速度と品質のトレードオフを先に理解しておくと判断がぶれません。

中央値分割法と八分木法(高速・分割型)

中央値分割法はRGB色立体を最も長い軸の中央値で再帰的に分割していくため、処理が軽く、まず候補を素早く絞り込みたい場面に向いています。
ただし各ボックスの平均色を採る都合で、元の絵に実在しない中間色が前に出やすく、空や肌のように微妙な連続変化を持つ部分では差が見えやすいです。
実際、同じ風景写真を中央値分割と高品質系で並べると、空のグラデーションの滑らかさはかなり違って見えました。

八分木法は最大8つの子を持つ木で色分布を表し、下から近い色同士を併合してK色まで減らします。
色の近さを手がかりに統合するので、分割だけを進めるより破綻が出にくく、輪郭まわりの色飛びも抑えやすいです。
アイコン素材のようにベタ面が中心ならこの系統で十分で、処理の速さを優先しつつ見た目の崩れを抑えたいときに使いやすいでしょう。

k-means法とNeuQuant(高品質・低速型)

k-means法は色を3次元空間の点として扱い、近いものをクラスタリングして各クラスタの代表色をパレットにします。
分布に沿って色が決まるので、結果の自然さは高いですが、収束まで反復計算を回すぶん重くなります。
写真風の素材や、色数を削っても階調感を残したい絵では強い選択肢です。
高品質と引き換えに時間を払う手法だと言えます。

NeuQuantはKohonen型ニューラルネットで原画の色分布を学習し、256色に減色する方式です。
特にグラデーションを含む画像で滑らかさが出やすく、空、光、肌のなめらかな変化を残したいときに向きます。
ベタ面主体の絵なら高速型でも足りますが、写真風や階調の細かい絵では高品質型を使う、という逆算が定石になります。
使い分けを体で覚えると、減色後に色が潰れて困る場面が減っていくはずです。

目的別アルゴリズムの選び方

選び方の軸は単純で、絵の情報量と許容できる計算時間です。
輪郭が強く面がはっきりしたアイコンやロゴなら、中央値分割法や八分木法で速く回し、必要なら手作業で明度差を整えるほうが効率的です。
逆に、写真風、空、肌、霧のように連続階調が主役なら、k-means法やNeuQuantのほうが仕上がりの差を取りやすくなります。

減色後は必ずバンディングや色潰れが出るため、アルゴリズムだけで完成を狙わず、誤差拡散や順序ディザの前提で考えると安定します。
目標色数を先に決め、16〜32色のイラスト、4〜8色のアイコン、256色のインデックス画像のように用途を切り分けてから選ぶと迷いにくいです。
どの絵をどこまで守るかを先に決めてから手法を当てる、これがいちばんおすすめです。

Aseprite で減色する手順

Asepriteで減色するなら、最初にRGBからIndexedへ切り替える流れを押さえておくと迷いません。
Indexedは最大256色のモードなので、変換した瞬間に色はその上限へ丸められます。
初回はここで見た目が飛んだように感じて焦りやすいですが、減色の前提が変わっただけだと分かると落ち着いて対処できるでしょう。

カラーモードをIndexedに変える

RGBのままでは、Asepriteは描画の自由度が高い代わりに、パレットを基準にした管理がしにくくなります。
そこで先にIndexedへ切り替え、色数を256色以内のルールに乗せるのが出発点です。
切り替えた直後に色が変わるのは、表示の都合ではなく色そのものの持ち方が変わるからで、ここを理解しておくと後工程の見通しが立ちます。
実際、最初に切り替えた瞬間に色が飛んで驚いたものの、モード変換だと把握してからは手順どおり進められました。

スプライトから目標色数のパレットを生成する

Indexedにしたあと、次は目標の色数でパレットを作り直します。
パレット右上のメニューから「New Palette from Sprite」を選び、ポップアップで使いたい色数を数値で指定する流れです。
ここで数値を明示するのが肝で、なんとなく自動で整うのを待つより、完成形に近い色数を先に決めたほうが配色の整理が速くなります。
色数を絞るほど輪郭や陰影の役割分担がはっきりし、ドット絵らしい見え方も作りやすいです。
目標色数でパレットを作り直したら、切り替え直後の違和感が意図通りの範囲に収まった、という感覚が得られます。

Remap Paletteで色を差し替える

色を入れ替えたら、必ず「Remap Palette」を押して全ピクセルへ反映させます。
これを挟まないと、パレット上の番号だけが先に変わり、キャンバス上の色表示と参照先がずれて見える失敗が起きます。
減色作業で厄介なのは、見た目はそれらしくても内部では別の色番号を掴んでいる状態で、あとから修正しようとしても原因を追いにくいことです。
だから減色は「生成→Remap」までが1セットだと覚えておくとよいでしょう。
反映を忘れて色がぐちゃぐちゃに見えた経験があると、この手順の意味は体に入ります。

減色後のAsepriteが便利なのは、パレットを直接編集したときの波及の速さです。
Indexedではインデックス参照で全体がつながっているため、パレット1色を直すだけで絵全体の印象をまとめ直せます。
影色のわずかなずれや肌色の温度感を後から揃える場面でも、描き直しではなく色設計の修正として処理できるのが強みです。
こうした仕組みを前提にすると、減色は単なる色数削減ではなく、見た目の整理と調整を同時に進める作業だと分かります。

Photoshop・ブラウザツールで減色する手順

Photoshopの減色は、RGB画像をそのまま眺める段階からIndexed Colorへ切り替え、使う色数とパレットの振る舞いを先に決める流れが基本です。
写真をドット絵素材へ落とす前処理としても扱いやすく、16色前後まで絞ると階調の残し方や輪郭の見え方がはっきり変わります。
配布用の決め打ちパレットへ合わせる場面では、ブラウザツールのLospec Palette Quantizerが手早いです。
色を詰める工程と、既存パレットへ寄せる工程を分けて考えると、作業の迷いが減ります。

Photoshopのインデックスカラー変換オプション

PhotoshopではImage>Mode>Indexed Colorへ進み、RGBからIndexedへ変換したうえで色数とパレット種別を指定します。
ここで先に数を決めておくと、後工程で「見た目は良いが色が多すぎる」状態を避けやすいです。
特に写真を16色に落とす作業では、単に削るのではなく、どの色を残せば肌や影のつながりが保てるかを見ながら詰めていくのが肝になります。

パレット種別は見え方の傾向を左右します。
Perceptualは人間の目が敏感な色を優先し、Selectiveは広い面積とWeb色を保持して整合性を出しやすく、Adaptiveは画像内の頻出色を採用します。
実作業ではAdaptiveとPerceptualを切り替え、肌の階調が残る方を採用すると判断が速いです。
下の比較を見ながら選ぶと整理しやすくなります。

さらに色を入れ替えた後は、Remap Paletteで全ピクセルへ反映します。
ここを通さないと、パレット表だけ更新されて画像本体が追従しない状態が残るからです。
Indexed化したあとに手動で色を調整するなら、再割り当てまでを1セットとして扱いましょう。

ブラウザツール(Lospec Palette Quantizer)で既存パレットに合わせる

既存の決め打ちパレットに合わせたいなら、Lospec Palette Quantizerが扱いやすいです。
ブラウザ上で画像を任意のパレットへ量子化でき、配布用パレットに素材を強制的に寄せる用途で強みがあります。
New Palette from Spriteで生成する色数を数値指定できるため、まず必要な色の上限を切ってから、狙った配色へ寄せる流れが作れます。
無料で済ませたいときにも使いやすい選択肢です。

配布パレットを前提にした作業では、Photoshopで細かく詰めるより、Lospecへドラッグして大枠を合わせる方が速い場面があります。
色の総数を先に固定し、見た目の破綻が少ないパレットへ落としてから、必要なら元画像側を調整する発想です。
New Palette from Spriteで生成した後に色を入れ替え、Remap Paletteで反映する流れまで見通せると、素材の移植がかなり楽になります。

ツールごとの使い分け基準

使い分けの基準は、何を優先するかで決めると迷いません。
元画像の見え方を保ちながら減色したいならPhotoshop、既存パレットへの厳密な追従が必要ならLospec Palette Quantizer、という切り分けが自然です。
256色上限の注意もここで効きます。
Indexedモードに切り替えると最大256色に自動で丸められるため、Photoshop側では「どこまで自動圧縮に任せるか」を意識し、Lospec側では「どのパレットに合わせるか」を先に決めると作業がぶれません。

実際、写真を16色へ落とす場面ではAdaptiveとPerceptualを切り替え、肌の階調が残る方を選ぶだけでも仕上がりは変わります。
配布パレットに合わせるなら、LospecのQuantizerにドラッグしてすぐ確認し、必要なら再度Photoshopへ戻す。
この往復があると、減色そのものを目的にせず、ドット絵で使える素材へ整える作業として整理できます。
おすすめです。

減色で崩れた絵を補修する｜バンディングと色潰れ対策

減色で崩れた絵の補修は、まず症状を見分けるところから始まります。
バンディングはグラデーションに縞として出やすく、色潰れは主役が背景に埋もれて輪郭まで鈍るため、同じ「劣化」でも直し方は分けて考える必要があります。
そこを外さなければ、減色後の絵はかなり見やすく立て直せます。

バンディングが起きる理由と見つけ方

バンディング(偽輪郭)は、減色で滑らかな階調がいくつかの色段階に切り分けられた結果として現れる縞です。
空や肌、光が回る金属のように、ほんの少しずつ色が変わる面ほど段差が目立ちます。
まず見るべきなのは「どこが悪いか」ではなく、「どの面が本来なだらかだったか」でしょう。
そこを見つける目があれば、補修の範囲を狭められます。

実際に空のグラデを16色に落としたときは、青の帯が数段で止まり、水平の筋がはっきり出ました。
その帯にだけ誤差拡散ディザを当て、境目の段差を細かく散らすと、面全体を塗り直さなくても見え方が落ち着きます。
手順は単純です。
縞が出た帯を選び、周辺色を混ぜながら粒を置き、隣接する階調の差を目で追えない程度まで崩す。
グラデーションの連続性を守る意識が要です。

ディザリングで中間色を補う(順序 vs 誤差拡散)

ディザリングは、減色で失われた中間色を見かけ上つくるための補修です。
誤差拡散(Floyd–Steinberg)は量子化誤差を隣接ピクセルへ押し出して色情報の保持に優れ、順序ディザ(Bayer行列)は固定パターンで色のムラを抑えます。
つまり、階調の滑らかさを優先するなら誤差拡散、面の均質さを優先するなら順序ディザが向いています。
どちらも万能ではなく、狙いで使い分けるのが実務的です。

ただし、ディザを広い面にかけすぎると、ドット絵ではザラつきが前に出ます。
そこで、グラデ部分だけに当て、ベタ面は手描きで整える折衷が効きます。
色数を絞ったあとに、全部をディザで救おうとすると絵が粉っぽくなるため、劣化が出た場所だけに範囲を限定するのが現実的です。
順序ディザで面のムラを抑え、必要な場面だけ誤差拡散で段差を散らす。
この切り替えが、仕上がりの清潔感を保ちます。

主役の色潰れを手作業で立て直す

色数を絞ると、主役の色が背景に埋もれやすくなります。
とくに明度差と色の役割分担を外すと、主役・背景・アクセントの境目が崩れ、輪郭まで鈍ります。
減色後にキャラの輪郭が背景へ溶けたなら、色相だけで戻すより、主役の明度を1〜2段引き上げて分離させるほうが効きます。
見える・見えないの差は、その数段で決まることが多いです。

この手直しは、全体の色味を保ったまま存在感だけを戻したいときに有効でした。
背景に近い中間色で塗られたキャラが、明度を少し上げただけで急に前へ出てきた経験があります。
アクセント色を足す前に、まず主役の明度を立て直す。
輪郭線を濃くするより先に、面としての差を作るほうが自然です。
役割分担が明確になると、減色後でも読み取りやすい絵になります。

目的別の目標色数とレトロ機の制約

用途別の目標色数を先に決めると、減色の迷いが一気に減ります。
立体感を残したいキャラなら16〜32色、記号性を強めたいアイコンやロゴなら4〜8色を目安にすると、表現の方向がぶれません。
色数は「多いほど良い」ではなく、見せたい質感に合わせて絞るものです。

イラスト風は16〜32色、アイコン・ロゴは4〜8色

イラスト風のドット絵は、輪郭だけでなく面のうねりや光の回り込みも見せたいので、16〜32色あると立体感を保ちやすくなります。
逆にアイコンやロゴは、細かな陰影よりも一目で判別できる形が先に来るため、4〜8色まで削ったほうが記号として強くなります。
色数を先に決めると、輪郭線を太くするか、ハイライトを残すかまで判断しやすくなるでしょう。
ファミコン風のドット絵を作ろうとして色を使いすぎたときも、約25色という同時発色の目安を意識し直しただけで、画面が急に「それっぽく」まとまりました。
制約は不自由さではなく、迷いを減らすための基準だと考えると扱いやすいです。

レトロ機準拠(ファミコン/スーファミ/ゲームボーイ)の色数

レトロ機準拠で作るなら、実機の制約をそのまま減色の物差しにするとです。
ファミコンの同時発色は約25色に制限され、スーファミはスプライト1枚16色、パレットスロット8枠で合計256色を扱います。
ゲームボーイは4階調、つまり実質4色で表現するため、そもそもグラデーションで見せる発想より、明暗の差で形を立てる感覚が必要になります。
この違いを押さえると、作品ごとに「どこまで削るか」が明確になります。
ファミコン風なら面積の大きい色を優先し、スーファミ風ならキャラ単位の色設計を詰め、ゲームボーイ風なら陰影を最小限にしてシルエットを強くする。
単なる再現ではなく、ハードの見え方を設計に翻訳する作業だと捉えるとよいでしょう。

スプライト単位でパレットを割り当てる考え方

スーファミのようにスプライト単位でパレットが割り当てられる前提では、「1枚全体をどう減らすか」ではなく「どのパーツに何色を持たせるか」で考える必要があります。
髪、肌、服、装飾をひとつの塊として扱うと16色の枠を圧迫しやすいですが、頭部と胴体で分けて見るだけで、必要な色の優先順位がはっきりします。
キャラごとに16色を割り振る設計思考は、この分割の発想から生まれます。
スーファミ風のキャラを作る際、パーツごとにパレットを切ったら破綻なく収まりました。
色数を抑えるというより、使う場所を限定したわけです。
目標色数を先に決めれば、4色なら手作業の比率を上げ、32色なら高品質アルゴリズムと部分ディザを組み合わせる、といったツール選びまで自然に絞れます。
し、迷ったら一度この順で考えてみてください。