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

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

この記事では、手打ちのチェッカーや疎密、Bayer系のオーダード、ランダム、Floyd–Steinbergの見た目の差を、1px単位の置き方まで落として整理します。
32x32の球体なら、影の境界3px帯に50%から25%へ密度を落としていくだけで、ディザリングなしでは硬く見える段差がぐっとなじみます。

あわせて、16x16の細いグラデーション帯を白黒2色だけで作り、25%・50%・75%の見え方を等倍と拡大で見比べる練習も入れました。
アンチエイリアスとの役割の違いと、併用したときに画面が濁るポイントまで押さえれば、ディザリングは「なんとなく敷く模様」ではなく、意図して使い分ける陰影表現になります。

ディザリングとは？ドット絵での意味を最初に整理

定義を明確化

ディザリング（Dithering）とは、限られた色数で、中間色やグラデーションを擬似的に見せるために、異なる色のピクセルを混ぜて配置する手法です。
ここで扱うのは音声ではなく、画像、とくにドット絵における意味です。
ポイントは「色を増やす」のではなく、「置き方で見え方を変える」ことにあります。

いちばん直感的なのは白と黒の例です。
#000000 と #ffffff しか使えなくても、1pxごとに交互に並べた50%の市松模様を作ると、離れて見たときには灰色にまとまって知覚されます。
感覚としては #808080 前後の中間色に見える、という理解で問題ありません。
拡大すると白黒の粒ですが、少し引いて見ると目が平均化して受け取るわけです。

この「平均化して見える」という性質をつかむと、ディザリングはただの模様ではなくなります。
たとえば4x4ブロックの中に白8個・黒8個を入れれば50%密度、白12個・黒4個なら白が優勢な25%密度、白4個・黒12個なら黒が優勢な75%密度として扱えます。
ここでいう密度は、ある色がブロック内にどれだけ占めているかという考え方です。
色そのものは2色しかなくても、25%・50%・75%という段階を配置で作れるので、ドット絵ではこれがそのまま擬似的な階調になります。

私は説明のとき、白黒だけの8x8タイルを2枚並べることが多いです。
片方は左4列を白、右4列を黒にしたベタ2分割、もう片方は全面を1px市松にします。
等倍で見ると前者は「白と黒の境界」、後者は「白黒の粒」です。
ところが400%では差がはっきり見えるのに、表示を引いた瞬間、後者は灰色の面として落ち着いて見えてきます。
この観察だけで、ディザリングが“色を増やす技術”ではなく“視覚を利用する技術”だと腹落ちします。

ドット絵との関係

ドット絵でディザリングが育った背景には、はっきりした制約があります。
24bitカラーなら表現できる色は16,777,216色ありますが、GIFは最大256色、16bitカラー（5:6:5）は65,536色です。
さらに実際のドット絵制作では、16色前後の少色パレットに絞る場面も珍しくありません。
色数が減るほど、明るさの中間や色相のつなぎが消え、ベタ塗りだけでは段差が目立ちます。

低解像度も事情を強めます。
16x16や32x32の小さな絵では、グラデーションを作ろうとしても使えるピクセル数が少ないので、1段明るい色、1段暗い色を素直に並べるだけでは急に切り替わって見えます。
そこでディザリングを入れると、実在しない中間のトーンを擬似的に補えます。
つまり、少ない色数と少ない面積の不足を、配置の工夫で埋めるのがドット絵におけるディザリングの役目です。

4x4ブロックの発想は、ここでもそのまま使えます。
白8:黒8の50%は中間調、白12:黒4の25%は明るい側に寄った中間、白4:黒12の75%は暗い側に寄った中間として読めます。
実際の制作では、これを白黒ではなく、たとえば「肌色Aと肌色B」「青緑の明部色と影色」の組み合わせに置き換えます。
2色の間に別の色がなくても、密度を変えるだけでつながりが生まれます。

ここで見落としたくないのは、ドット絵のディザリングは単なるランダムノイズではないという点です。
規則的なチェッカー、市松を崩した疎密、意図的な列の挿入など、どこに何px置くかを制御して初めて絵の情報になるからです。
自動処理の世界ではFloyd–Steinbergのような誤差拡散や、Bayer行列を使うオーダードディザリングも代表的ですが、手打ちのドット絵では「この面をどう見せたいか」が先にあり、その意図に合わせてパターンを選びます。
だから同じ2色でも、規則的に敷くか、不規則に散らすかで、材質感や時代感まで変わってきます。

Before/After言語化

ディザリングの効果は、同じ2色の境界を文章で比べると見え方の違いがつかみやすくなります。
たとえば明るい青と暗い青が横に接しているとして、ディザリングなしでベタ塗りすると、境界は一本の線として立ちます。
段が切り替わる場所がくっきり見えるので、丸い面を描いたつもりでも、帯が何枚も重なったような硬さが出ます。
これがバンディングを強く感じる状態です。

そこにチェッカーを1列だけ挿入すると印象が変わります。
明るい青と暗い青の境目に、1px交互の混合列を置くだけで、目は「境界線」を読む代わりに「少し混ざった移行帯」として受け取ります。
色そのものは増えていないのに、境界の角が丸まり、段差がひと呼吸ぶんやわらぎます。
ベタ塗りでは色Aから色Bへ急に落ちていたものが、チェッカー1列を挟むことでA→A/B混合→Bという3段階に見えるからです。

この差は、球体や布の影でとくに効きます。
ベタ塗りだけの影は「色が切り替わった」印象が先に立ちますが、チェッカーを挟むと「面が奥へ回り込んだ」印象に変わります。
逆に金属や硬いエッジでは、あえてベタ境界を残したほうが材質に合うこともあります。
ディザリングは常に入れる模様ではなく、段差を見せたいのか、つなぎたいのかを決めるための言語だと考えると扱いやすくなります。

実際に白黒の8x8で比べると、この変化はもっとはっきりします。
左半分を白、右半分を黒に割ったベタ2分割は、等倍でも境界線が最初に目に入ります。
400%ではもちろん白黒の面積差がそのまま確認できます。
一方、境界に1列だけ市松を差し込むと、400%では「たった1列の混合」に見えるのに、等倍では境界が少しぼけ、白と黒の間にワンクッション入ったように感じます。
ドット絵のディザリングは、このワンクッションを何列入れるか、どの密度で入れるかを設計する作業です。

なぜディザリングで色数が増えたように見えるのか

ディザリングで色数が増えたように見える理由は、画面上で本当に新しい色が生成されているからではなく、人間の目が近接したピクセルをひとまとまりの面として統合してしまうからです。
1px単位で近い2色を交互に置くと、拡大表示では「暗い青と明るい青が並んだ模様」に見えますが、表示倍率を下げたり、少し離れて見たりすると、1つ1つの粒を分けて認識できなくなります。
その結果、脳内では2色の平均に近いトーンとして受け取られ、中間色が増えたように感じます。

白と黒の市松が灰色っぽく見えるのと同じで、ドット絵ではこの視覚の統合を利用して、存在しない中間色を擬似的に作ります。
暗い青と明るい青しかパレットにない場面でも、1pxごとに交互配置した50%のチェッカーを入れると、その帯は離れて見たときに「青の中間調」に見えます。
色を追加していないのに段階が1つ増えたように見えるのは、この混色的な知覚が働くためです。

この現象は、ピクセルの細かさと観察条件がそろったときに強く出ます。
人の眼が個々の画素を識別できる限界の目安は 450±50ppi とされていて、ここに近い密度、あるいは縮小表示の状態では、1px単位の模様は「点の集まり」より「面」として読まれます。
逆に、等倍で大きく表示したり、400%のように拡大すると、統合は崩れてパターンが前面に出ます。
私は16x16の小さな実験画像で、青系2色の境界に50%チェッカーと25%の疎密帯を敷いて確認することが多いのですが、等倍では境界がやわらいだ面に見えるのに、400%では意図した並べ方がそのままパターンとして立ち上がります。
この「面にも見えるし、拡大すると模様でもある」という二重性が、ディザリングの本質です。

減色でバンディングが出る理由も、ここから理解できます。
グラデーションを少ない色に落とすと、本来は連続していた明るさの変化が、数段階のベタ塗りに置き換わります。
すると円柱や球体の陰影に、同心円や帯状の段差が見えます。
これは色が足りないというより、明度の切り替わりが広い面積で一斉に起きることが問題です。
境界帯にディザリングを入れると、その切り替わりを細かい粒に分解できるので、目には「急な段差」ではなく「少しずつ混ざっていく移行」として届きます。
言い換えると、ディザリングは帯を消すのではなく、帯の境目を細切れにして目立たなくしています。

暗い青と明るい青の境界を例にすると、この考え方がつかみやすくなります。
2色がベタで接していると、境界は1本の硬い線として見えます。
そこへ3pxの移行帯を作り、中央の1列を50%チェッカー、両側の1列を25%の疎密にすると、明るい青の面から暗い青の面へ入る途中に、明るい青優勢の帯、半々の帯、暗い青優勢の面という順序が生まれます。
目はこの3列を独立した模様ではなく、明るさがなだらかに落ちる帯として受け取るので、バンディングの角が取れます。

16x16で試すなら、左半分を明るい青、右半分を暗い青で埋め、中央3列をディザリング帯にします。
手順は単純です。
まず明るい青の面を左側、暗い青の面を右側に置きます。
次に中央の3列のうち、真ん中の1列を1px交互の50%チェッカーで埋めます。
その左右にある1列ずつには25%密度のパターンを入れます。
左側の25%列では明るい青を多めに残しながら暗い青を点在させ、右側の25%列では暗い青を多めにしながら明るい青を点在させます。
こうすると、見た目の流れは「明るい青のベタ面 → 明るい青優勢の混合 → 半々の混合 → 暗い青優勢の混合 → 暗い青のベタ面」になります。
画面を引いて見ると、この3列が中間色の層として働き、境界がなめらかに見えます。

ここで効いているのは、数学的な平均色そのものより、境界が一気に切り替わらないという視覚的な印象です。
だからディザリングは「色を水彩のように混ぜる技法」ではなく、「ピクセルの並びで脳に中間色だと思わせる技法」と捉えると腑に落ちます。
等倍では面、拡大ではパターン。
この見え方の切り替わりを理解すると、どの場面で50%を置き、どこで25%に薄めるべきかの判断がぐっと明快になります。

まず覚えたい手打ちディザリングの基本パターン

ここでは、まず手で打てるパターンを3つだけ覚えるのが近道です。
手打ちディザリングは種類を増やすより、50%の基本形、25%と75%の疎密、境界から密度を落とす並べ方を体に入れたほうが、実制作でそのまま使えます。
どれも1px単位で置き場所を決められるので、初心者でも再現できます。

50%チェッカーパターン

最初に覚えたいのは、2色を1px単位で交互に置くチェッカーパターンです。
これは「密度50%」の基本形で、明色と暗色を半分ずつ混ぜた帯として扱います。
置き方は単純で、1行目を「明・暗・明・暗…」、2行目を「暗・明・暗・明…」と1pxずつずらして繰り返します。
座標で書くなら、暗色を置く位置を「偶数行は x が偶数、奇数行は x が奇数」にそろえる形です。
8x8なら、1行目は 0,2,4,6 列、2行目は 1,3,5,7 列に暗色を置けば、全面が50%チェッカーになります。

このパターンは、境界に1列だけ差し込むだけでも効きます。
明るい面と暗い面のあいだに、幅1pxの50%チェッカー列を置くと、ベタ同士が直接ぶつかるよりも段差が見えにくくなります。
手打ちでは「とりあえず半々でつなぐ帯」として出番が多く、迷ったらここから始めると崩れません。

25%と75%の疎密

次に覚えるのが25%と75%です。
考え方は4x4ブロックにすると整理しやすく、16マスのうち4マスを暗色にすれば25%、12マスを暗色にすれば75%です。
25%の具体例としては、4x4の中で暗色を (0,0)(2,1)(1,2)(3,3) に置きます。
残りは明色です。
75%はその反転で、今挙げた4点だけを明色にして、それ以外12マスを暗色で埋めます。

この4点配置は、点が均等に散りやすく、初心者でも「固まり」になりにくいのが利点です。
さらに、同じ4x4を縦に並べると規則が見えやすくなるので、1列ごと、あるいは1ブロックごとに1pxだけオフセットすると、模様の硬さが和らぎます。
たとえば次の4x4列では、暗色の位置を右へ1pxずらして循環させると、機械的な市松感が少し抜けます。
手で打つときは、同じ形をそのままコピペするのでなく、列単位で軽く位相をずらすと覚えておくと実戦向きです。

私は32x32の球体で陰影を作るとき、この疎密を先に設計メモにしています。
球の極点付近は面の切り替わりが緩いので25%主体、輪郭へ近づく帯は明暗差が立つので50%主体、というふうに配置の癖を先に決めておくと、後から迷いません。
毎回ゼロから考えるより、「上は25%、縁は50%」という型を持っていたほうが、手打ちの速度も見た目の統一感も安定します。

1px飛ばしで密度を落とす

疎化の感覚をつかむには、1px飛ばし配置がいちばん実践的です。
50%は1pxおきに置く状態ですが、そこからさらに間隔を広げると、33%や25%の帯が作れます。
たとえば縦1列の中に暗色を入れるなら、50%は「1個置いて1個空ける」、33%は「3pxに1個」、25%は「4pxに1個」のリズムです。
8pxの高さなら、33%は 0,3,6 行、25%は 0,4 行のように置くと形になります。

この考え方は、境界から離れるほど点を減らす“フェザー”でそのまま使えます。
境界の1列目は50%でしっかり混ぜ、2列目は33%で少し疎にし、3列目は25%でさらに点を減らす。
置く場所を決めるときは、各列で点が縦に並びすぎないように少しずらすのがコツです。
たとえば1列目の暗色を 0,2,4,6 行、2列目を 1,4,7 行、3列目を 2,6 行に置くと、縦筋が出にくく、帯として読まれます。

境界から徐々に疎にする帯

実際の影では、この密度差を境界3px幅で考えると扱いやすくなります。
やり方はシンプルで、境界線上を50%、外側1pxを33%、さらに外側を25%にします。
ここでいう境界線上は、明部と暗部が接するいちばん内側の列です。
そこには1px交互のチェッカーを置き、その外側の列では3pxに1個、そのさらに外側では4pxに1個だけ暗色を散らします。
こうすると、ベタ面の切り替わりとディザ帯のあいだに、密度の段階が生まれます。

この3列は、それぞれ単独で見るとただの模様です。
ただ、横並びにすると「いきなり暗くなる線」ではなく、「少しずつ暗くなる帯」として目に入ります。
段差を消しているというより、段差を細かく刻んで帯に変えている感覚です。
手打ちディザリングで境界がなじむ理由は、ここにあります。

8x8で作るグラデーション帯の練習

練習課題として扱いやすいのは、8x8の中に5段の並びを作る方法です。
横方向に帯を分けて、左端2列を明色100%、次の2列を50%チェッカー、次の2列を25%疎、次の1列を暗色寄りのつなぎ、右端1列を暗色100%にします。
中央を暗色100%の芯にしたいなら、並びは「明色100% → 50%チェッカー → 25%疎 → 暗色100% → 暗色100%」として読んでも構いません。
要は、明るいベタ面から混合帯を経て暗いベタ面へ渡る流れを、8x8の中で手で作ることです。

具体的には、0〜1列を明色で埋めます。
2〜3列は50%チェッカーにして、暗色を 2列目の 0,2,4,6 行、3列目の 1,3,5,7 行に置きます。
4〜5列は25%疎として、暗色を 4列目の 0,4 行、5列目の 2,6 行に置きます。
6〜7列は暗色で埋めます。
こうすると、左から右へ向かって「明るい面、半々の混合、疎な混合、暗い面」と段階が見えます。
中央の暗色面をもっと強く見せたいなら、5列目を75%に寄せて、25%の反転配置に切り替えると、5段の差がよりはっきり出ます。

この8x8練習の狙いは、模様を覚えることより、どこに何px置くと帯として読まれるかを手で覚えることです。
チェッカーは交互、25%は4x4の散点、境界では50%から33%、25%へ落とす。
この3つが入るだけで、手打ちディザリングの土台はほぼ揃います。

代表的なディザリング手法の違い

オーダード（配列）/Bayer

手打ちのディザリングが「どのピクセルを置くか」を作家の判断で決める方法だとすると、自動処理のディザリングは「どんな規則で置くか」をアルゴリズムに任せる方法です。
ここで見えてくる差は、単に手動か自動かではありません。
規則感が前に出るのか、ノイズ感が出るのか、階調の自然さを優先するのかで、絵の印象がはっきり変わります。

オーダードディザリング、特にBayer系は、しきい値を並べた小さな行列をタイル状に繰り返して、各ピクセルを塗るか塗らないか決めます。
代表例は2x2や4x4の行列で、同じルールが画面全体に規則的に反復されます。
結果として粒は均一に散り、面の質感がそろいます。
写真にかけると「処理された模様」が見えやすい一方、ピクセルアート文脈ではその規則性がむしろ武器になります。
ファミコン風、携帯機風のような整ったレトロ感が出るのはこのためです。

Adobe PhotoshopやGIMPにも配置型（オーダード）ディザのオプションがあります（例: Photoshop の Indexed Color や Save for Web のダイアログ、GIMP のインデックス化ダイアログ）。
ただし、表記名や項目の有無はバージョンやローカライズ、開くダイアログ（Image > Mode > Indexed Color / Save for Web 等）によって異なる場合があります。
使用中のソフトのダイアログで実際の項目名を確認してください。
オーダードは粒の位置が安定していて、画面全体のムラが少ないのがすぐ分かります。

私は比較用の課題を作るとき、同じ32x32の空グラデーションをBayer 4x4処理とFloyd–Steinberg処理にかけ、いったん縮小表示して見比べます。
縮小した段階では、Bayerのほうは面がそろって見え、意図的に作ったテクスチャとして読み取りやすいのが利点です。
一方でFloyd–Steinbergは模様の周期が前に出ず、空気の層がそのまま残ったように見えます。
この比較を一度やるだけで、規則感を取るのか、自然さを取るのかの基準が頭に入ります。

正規版Adobe Photoshop - 無料体験とオンライン写真&デザインアプリ

オンライン版や無料のPhotoshopモバイルアプリで、カスタムシーンの作成、複雑な編集、画像の合成をすばやくおこなう新しい方法をご紹介します。

www.adobe.com

誤差拡散（Floyd–Steinberg）

誤差拡散は、オーダードやランダムとは発想が違います。
あるピクセルを近い色に量子化したとき、そこで捨てられた明るさや色の差分を周囲へ配り、次の判定に持ち越します。
代表例がFloyd–Steinbergで、右へ 7/16、左下へ 3/16、下へ 5/16、右下へ 1/16 の重みで誤差を流します（詳細参照: 代表例がFloyd–Steinbergで、量子化誤差を周囲へ配る方式を取ります。
具体的には右へ 7/16、左下へ 3/16、下へ 5/16、右下へ 1/16 の重みで誤差を分配します（解説: ランダムディザと比べると、両者とも規則感は弱いのですが、質が異なります。
ランダムは単にばらまくのでザラつきが前面に出ます。
Floyd–Steinbergは誤差を周囲へ回すため、粒の分布に意味があり、階調のつながりが残ります。
Bayerと比べれば規則模様は抑えられ、ランダムと比べればノイズが「ただの荒れ」で終わりません。
自動処理の中では、もっとも自然画寄りの見え方を作りやすい方式です。

ピクセル配置例（4）

Bayerの動きを言葉でつかむには、2x2行列の最小単位から見ると分かりやすくなります。
たとえばしきい値行列を [[0,2],[3,1]]/4 とします。
目標濃度を50%にすると、4ピクセルのうち、しきい値が低い2か所だけが先に塗られます。
結果として2x2の中には「塗る・塗らない」が半分ずつ入り、斜めに散った配置になります。

これを4x4へ拡張してタイル状に繰り返すと、各2x2ブロックで同じ順序が反復されます。
見た目としては、ランダムに2ピクセルが選ばれるのではなく、毎回同じ位置関係で2ピクセルが現れるので、画面全体に一定のリズムが走ります。
32x32の空グラデーションで見ると、明るい帯から暗い帯へ移る途中に、粒の数そのものは増減しているのに、配置の骨格は崩れません。
この「骨格が崩れない」感じが、Bayer特有の均質さです。

4x4タイルとして眺めると差はさらに明快です。
50%付近では、あるタイルは斜め方向に点が並び、隣のタイルでも同じ並びが繰り返されます。
粒の出現位置が毎回再現されるので、面は落ち着きますが、同時に規則模様としても読めます。
ドット絵でこれを使うと、金属の梨地や古いディスプレイの疑似階調のような、整理されたテクスチャになります。
逆に雲や煙のような不定形の対象だと、模様の周期が先に見えてしまう場面が出ます。

ピクセル配置例（5）

Floyd–Steinbergは、配置結果だけを見るより、誤差がどう流れるかを追うと理解しやすくなります。
3x3近傍の中央に注目し、そのピクセルが本来は薄い灰色だったのに、量子化の結果として白に丸められたとします。
すると、そのピクセルが持っていた「少し暗くあるべきだったぶん」の誤差が残ります。
この誤差はその場で消えず、右、左下、下、右下の4方向へ分配されます。

言葉で図にすると、中央の白ピクセルの右隣がもっとも多く誤差を受け取り、次に真下、その次に左下、もっとも少ない量が右下へ渡ります。
つまり流れとしては、右へ強く、下方向へ広く、斜めへ少しです。
次のピクセルは、この受け取った誤差を加味した値で判定されるので、単独では白に見えるはずだった点が黒へ寄ったり、その逆が起きたりします。
その連鎖によって、局所的には白黒しかないのに、少し離れると滑らかな濃度変化に見えます。

この仕組みは、配置を人が設計するというより、誤差の収支でパターンが生まれる感覚に近いです。
Bayerのように4x4タイルの同じ位置へ点が戻ってくることはなく、周囲の値に応じて粒の出方が変わります。
だから空のグラデーションでは自然ですが、スプライトの頬の影や服の折り目では「そこにその粒が欲しい」という人間の意図とずれることがあります。
自動変換には強く、手直し前提の作画では一発で仕上がる類の方法ではありません。

使い分け指針

どの方式が優れているかではなく、何を守りたいかで選ぶのが実務的です。
写真やペイント画像を少ない色数へ落とすなら、誤差拡散が第一候補になります。
階調のつながりを保ちやすく、空や肌のような連続トーンが破綻しにくいからです。
Adobe PhotoshopでDiffusionを試すと、少ない切り替え回数でも絵柄の傾向を把握しやすく、素材変換の入口として扱いやすいのが利点です。

レトロ感や均一な粒状感を前に出したいなら、Bayer系のオーダードが合います。
規則的な配列がそのまま画面の味になるので、UI素材、背景テクスチャ、古いゲーム機風の加工と相性が良いです。
ドット絵では「自動処理なのに意図が見える」側の手法で、模様をデザインの一部として受け止められる場面では強いです。

ランダムディザリングは、規則模様を避けたいが、誤差拡散ほど階調保持を狙わないときに入る立ち位置です。
ノイズ感は出るので、粒立ちそのものを荒れた質感として使うなら合います。
砂、ざらついた紙、古い映像の粗さのように、整いすぎない面を作りたいときには機能します。
ただ、輪郭を見せたいスプライトや、面の整理を優先するUIでは散漫に見えやすく、主役には置きにくい設計です。

ドット絵制作で仕上がりを詰める段階では、手打ちがまだ一段上にいます。
自動処理は全体の傾向を一気に作れますが、顔の頬だけ柔らかくしたい、剣の腹だけ規則的な反射にしたい、といった局所判断は人の手のほうが速くて正確です。
私自身、素材変換の入口としてFloyd–SteinbergやBayerを当てることはありますが、スプライトの最終調整では結局1px単位で置き直します。
自動処理でベースを作り、見せたい部分だけ手打ちで整える。
この順番にすると、規則性と自然さ、作業速度と制御性のバランスが取りやすくなります。

アンチエイリアスとの違い

ディザリングとアンチエイリアスは、どちらも「中間を作る」ように見えるので混同されがちですが、役割は別です。
アンチエイリアス（Anti-aliasing）は輪郭のギザギザを中間色でならして、線やシルエットを滑らかに見せる技術です。
一方のディザリングは、面の中に複数色を配置して、存在しない階調や中間色を擬似的に見せる技術です。
言い換えると、アンチエイリアスは輪郭の処理、ディザリングは面内の階調表現に効きます。

この違いを意識すると、どこに何を置くかが整理できます。
たとえば黒い物体を白背景に置いたとき、階段状になった45°の輪郭に #808080 を角ごとに1px差し込むのはアンチエイリアスです。
黒と白のあいだに中間色を挟み、段差の角を視覚的に丸めているからです。
その内側にある影帯で、明るい灰色と暗い灰色のあいだへ50%チェッカーを1列だけ入れて明暗差を弱めるのはディザリングです。
こちらは輪郭ではなく、面の中のトーン差を擬似混色でつないでいます。

実制作では両方を同時に使う場面がよくあります。
45°のエッジなら、外周の段差には中間色を1px置いて輪郭を整えつつ、面の陰側では2色のあいだに50%チェッカーを差し込み、影の切り替わりをやわらげる、という組み合わせです。
輪郭の見え方はアンチエイリアスで管理し、面の厚みや陰影の段階はディザリングで補う、と分担させると濁りません。

私は小さなUIアイコンでこの切り分けをよく確認します。
16x16の記号やツールアイコンでは、外周の縁取りだけをアンチエイリアスで処理し、内部の影帯はあえて無ディザリングのまま残した比較プランを作ることがあります。
こうすると、輪郭の読み取りやすさは保ちながら、内部が粒で騒がしくならないかを見極められます。
とくに文字に近い記号や細い矢印では、内部までディザリングを入れると情報量が増えすぎて、等倍で読んだ瞬間に形が崩れて見えます。
小さいUIでは「滑らかさ」より「一目で読めるか」の比重が高いので、アンチエイリアスだけで止める判断が効きます。

ピクセル配置の見分け方

言葉で図にすると、黒の輪郭が白背景に対して階段状に上がっていく場面を想像すると分かりやすいのが利点です。
各段の外側の角へ #808080 を1pxずつ差し込みます。
配置は、黒の段差が右へ1px、上へ1pxと進むたび、その折れ角の白側に灰色を置く形です。
これで輪郭の階段が目立ちにくくなります。
その直後、輪郭の内側にある1列ぶんの影帯には、黒と濃い灰色を交互にした50%チェッカーを1列だけ挟みます。
外側の #808080 は輪郭の角をならすための点、内側のチェッカー列は面の暗部に中間段階を作るための帯です。
同じ「中間を置く」でも、働き方が違うことがここではっきり見えます。

ぼやけとノイズの境目

気をつけたいのは、アンチエイリアスを入れすぎると輪郭がぼやけ、ディザリングを敷きすぎると面がざらつくことです。
アンチエイリアスは本来、段差の角だけを補う処理なのに、長い辺まで中間色で囲い始めると、線の芯が弱くなります。
逆にディザリングは、階調を補いたい帯だけに置けば効くのに、広い面へ漫然と広げるとノイズとして前に出ます。
とくに等倍表示の文字やUIでは、この二つの副作用がすぐ読みにくさへつながります。
輪郭を読ませたいのか、面のトーン差をつなぎたいのかを先に決め、その目的に関係ない場所では抑えるほうが画面が締まります。

ドット絵で迷ったときは、「今見えている問題は輪郭の段差か、面の色差か」を切り分けると判断が速くなります。
輪郭のギザギザならアンチエイリアス、階調の飛びや中間色不足ならディザリングです。
両方の問題が同時にある場面では、輪郭に1pxの中間色、面に1列のチェッカーというように、役割を分離して置くと破綻しません。
これを意識するだけで、同じ中間色でも「ぼかしただけの絵」と「意図して整理された絵」の差がはっきり出ます。

ドット絵でディザリングを使う手順

手を動かして覚えるなら、最初は16x16か32x32の小さなキャンバスに絞るのがいちばんです。
サイズが小さいと、どの1pxが効いていて、どの1pxがノイズになっているかを追いやすくなります。
パレットも欲張らず、まずは明色と暗色の2色だけにします。
色数を増やすと判断が「配色」の話に逃げやすいので、ディザリングそのものの効果をつかむ段階では2色固定のほうが手応えが明確です。

準備の段階で決めておきたいのは、どこから光が当たるかです。
たとえば左上を光源にするなら、明るい面は左上、影は右下に寄ります。
このとき、明部と暗部の境目を一本の線としてではなく、あとでディザリングを置くための“帯”として見ると作業が安定します。
私は球や丸ボタンを練習台にするとき、この帯の幅を最初に頭の中で確保してから塗り始めます。
境界を線で考えると詰め込みすぎますが、帯で考えると50%と25%をどこへ置くかが自然に決まります。

基本の手順

1. まず、明るい側を明色、影側を暗色でベタ塗りします。16x16でも32x32でも構いませんが、最初は円や球のように明暗が読み取りやすい形が向いています。そのうえで、明部と暗部の境界を1px幅でいったん確定させます。ここではまだディザリングを入れません。ベタ面だけで形が読める状態を先に作るほうが、後から崩れません。

1. 次に、その境界に沿って50%のチェッカーパターンを1列入れます。やり方は単純で、奇数行と偶数行で明暗を交互にずらします。1行目が「明・暗・明・暗」なら、2行目は「暗・明・暗・明」です。境界の真上にまっすぐ敷くというより、明部と暗部の間へ1列だけ差し込む感覚です。ここで一気に広げず、まず1列で止めると、滑らかさと粒感の境目を見失いません。

1. そのあと、影側へ1pxだけ広げて25%の疎な配置を追加します。4pxに1個くらいの密度で、対角に点が流れるように置くと、50%列の隣で急にパターンが切れず、暗部へ落ちていく流れが作れます。さらに段差がまだ硬く見えるなら、必要な場所に限って33%程度の列を1列だけ足します。3pxに1個の感覚で入れると、50%と25%の中間として働きます。ただし、この列は入れすぎると帯が厚くなり、面が濁ります。基本は50%から25%へ落とすだけで十分で、33%は補助と考えるとまとまりやすいのが利点です。

1. ここまで置いたら、100%表示と400%表示を往復して見え方を確認します。等倍では境界がなだらかにつながって見えるか、拡大ではパターンが騒がしくなっていないか、この二つを同時に見ます。私はこの確認を必ずセットで行います。400%では気持ちよく並んで見えても、等倍に戻した瞬間にザラつきだけが残ることがあるからです。そういうときは、25%列より先に50%列を少し間引くと落ち着くことが多いです。密度を足して直すより、まず引いて整えるほうが結果がきれいにまとまります。

練習題材として分かりやすい例

32x32の球体は、手順の確認にちょうどいい題材です。
左上から光が当たる設定にして、右下象限へ影を落とします。
球の右下で明部と暗部が切り替わる境界2列に、内側から50%→25%の順で回していくと、ベタ塗りだけでは硬く見える面の切り替わりが自然につながります。
反対に、ハイライト側にはあえてディザリングを入れず、明色のベタを残すと、つるっとした光沢と影側の柔らかい階調の差が出ます。
全面に同じ密度を敷くより、このコントラストを残したほうが球らしさが立ちます。

練習の精度を上げるなら、同じサイズ・同じパレットでディザリングありとなしの2枚を並べると差がはっきり見えます。
私はA/Bで比べるとき、片方は明暗をベタだけで分け、もう片方には境界帯へ50%と25%を入れます。
拡大表示では差が「模様の有無」に見えても、少し縮小したときには帯のなめらかさに変わります。
この比較を一度やると、どこまで打てば効いていて、どこから先がノイズになるのかが体感でつかめます。

自動処理を併用するなら

Adobe PhotoshopならImage > Mode > Indexed Colorでディザリングを試せます（詳しくは公式ドキュメント: でもインデックス変換時に誤差拡散や配置型を選べますが、表記やオプションはバージョンにより異なるため、使用中のソフトのダイアログで確認してください。

よくある失敗と対策

ディザリングは、足せば足すほど滑らかになる技法ではありません。
むしろ失敗の多くは「効く場所だけに置く」という絞り込みができず、模様そのものが前に出てしまうところから始まります。
私も64x64の石壁テクスチャで練習するとき、最初は面全体にチェッカーを回していました。
拡大表示では仕事をしているように見えるのですが、等倍に戻すと壁の材質ではなく砂嵐に見えます。
そこから境界帯と、石の継ぎ目の奥にできる陰影ポケットだけへ削っていくと、急に画面が静かになります。
この「一度やりすぎてから減らす」工程を意識すると、失敗の収束が早くなります。

全面に敷いてザラつく

いちばんありがちな失敗は、面全体をチェッカーで覆ってしまうことです。
平たい床、壁、空、服の広い面にまで同じ密度のパターンを広げると、階調表現ではなくノイズに変わります。
石壁のような素材感が欲しい場面でも、全面ディザは質感ではなく「常に画面がざわついている状態」になりやすく、明暗の読み取りを邪魔します。

対策は単純で、ディザリングを置く範囲を境界帯だけ、または素材の質感を出したい箇所だけに限定することです。
影の切り替わり、へこみの周囲、穴の奥、接地影の近くなど、面が切り替わる場所にだけ使うと、粒が意味を持ちます。
64x64の石壁なら、各石の中央をざらつかせるのではなく、石と石の境目の暗部、欠けた角の近く、窪みの下だけに残すほうが、石らしい硬さも保てます。

均一すぎて市松模様が目立つ

もうひとつ多いのが、配置が均一すぎて市松模様そのものが見えてしまうケースです。
1px交互の50%チェッカーは基本形として優秀ですが、長い距離をまっすぐ続けると、直線的な格子が人工的に浮きます。
とくに広い斜面や壁面では、陰影より「規則正しく敷かれた模様」として認識されがちです。

ここでは密度を一種類で固定しないのが効きます。
25%・33%・50%を混在させ、2x1や1x2の短いラインを差し込んだり、列ごとに位相をずらしたりすると、規則感が崩れます。
たとえば50%チェッカーを2列続けたあと、次の列では同じ並びをそのまま延長せず、1pxずらして始点を変えるだけでも見え方が変わります。
短いラインを混ぜるのも有効で、点だけで埋めるより、2pxだけ横につないだ暗色を少数入れたほうが「材質の流れ」として読まれます。
規則を少し崩すだけで、オーダードな並びの硬さが抜けます。

輪郭まで汚してしまう

ディザリングに慣れ始めた段階で起こりやすいのが、輪郭線の周辺にも粒を混ぜてしまう失敗です。
キャラの外周や物体のシルエットに対して、アンチエイリアスすべき縁へディザを持ち込むと、輪郭がぼやけるのに、なめらかには見えません。
面の階調と輪郭の制御を同じ手法で済ませようとすると、どちらも中途半端になります。

ここは役割分担を崩さないことが肝心です。
輪郭はAAでくっきり整え、面の明暗はディザでつなぐ。
この線引きを守ると、シルエットの読みやすさが残ります。
たとえば顔の頬から影へ落ちる帯にはディザリングを使っても、頬の外周線に沿って粒を散らさない、という整理です。
輪郭が曖昧になると、陰影が増えたのではなく輪郭が汚れたように見えるので、まず外周を確定させ、その内側だけで階調を処理したほうがまとまります。

3色以上を同時に混ぜて濁る

パレットに余裕があると、明色・中間色・暗色をいっぺんに同じ帯へ入れたくなります。
しかし隣接3色を同時に混ぜると、視線は階調として統合できず、汚れた粒の集合に見えます。
特に補色寄りの色相差がある組み合わせでは、濁りが出て陰影ではなくノイズとして残ります。

ディザリングは常に隣り合う2色間だけで考えると破綻しません。
明色と中間色のあいだ、中間色と暗色のあいだを別の帯として処理し、1つの場所で3色を同時に踊らせないことです。
実制作では「この列はAとBだけ」「次の列はBとCだけ」と区切る感覚です。
2色間の平均化に限定すると、見た目の目的がはっきりし、粒が濁りに変わりません。
ディザリングは基本的に隣り合う2色間だけで考えると破綻しにくい設計です。

バンディングとの違いを取り違える

対策は、帯を細く刻みながら切り替えることです。
ベタ面からいきなり厚い50%帯へ入るのではなく、50%の帯を中心に置き、その外側を25%で受ける2段フェザーにすると、段差の幅が分散します。
ディザを入れてもまだ帯が太いなら、模様を増やす前に境界の構造を見直したほうが早く整います。
段差が残る原因を「粒の不足」ではなく「帯の設計ミス」と捉えると判断がぶれません。

影帯の広げすぎをどう直すか

典型例として、影帯を4列以上に広げてしまい、全体がざらつく失敗があります。
明部から暗部へ入る途中に、50%や25%を何列も並べると、滑らかさより粒感のほうが勝ちます。
修正するときは、中央2列だけを50%に絞り、外側は25%を1列で止める構成にすると収まりやすくなります。
見え方としては、明部のベタ面から25%、中央の50%、反対側の25%を経て暗部のベタ面へ入る形です。
これなら影の厚みは残しつつ、帯が必要以上に広がりません。

こうした失敗は、技法を知らないから起こるというより、効いた瞬間が気持ちよくて使いどころを広げすぎることで起こります。
だからこそ、64x64の石壁のような小さめの題材で、全面チェッカーから始めて、境界帯と陰影ポケットだけに削り込む練習が役に立ちます。
減らしても成立する場所だけに残すと、ディザリングは模様ではなく階調として働き始めます。

ディザリングが向いている場面・向かない場面

向いている

ディザリングが活きるのは、まずレトロ感を画面の文法として立てたい場面です。
規則的な粒や疎密の帯は、色数制限の厳しかった時代の表示を連想させるので、意図して入れるだけで空気が変わります。
いまは 24bit カラーで 16,777,216 色を扱える環境が普通ですが、そこでなおディザリングを選ぶ理由は「足りない色を補う」だけではありません。
あえて粒を残すことで、現代の高色数環境では失われやすいピクセル感や、画面の手触りを前面に出せます。
必須の技法というより、美学として選ぶ技法になった、という位置づけです。

質感表現では、金属、石、土、霧、影の中間表現と相性がいいです。
金属はつるつるした鏡面だけでなく、微細なザラつきや反射の揺れを含んで見えるので、ミッドトーン帯に薄いディザを入れると急に説得力が出ます。
私が32x32の金属球を組むときは、ハイライトの周辺にはあえてディザを置かず、光が抜ける面をベタで残します。
その代わり、中間調へ入る帯だけを25%の疎い配置でつなぎ、シャドウに落ちる肩にだけ短く50%を置きます。
こうすると、明部は金属らしく鋭く、暗部の入り口だけに硬い反射の名残が出ます。
全面を均一にざらつかせるより、反射の切り替わる場所だけに粒を集めたほうが、材質がはっきり立ちます。

石や土でも同じ発想が使えます。
平滑なグラデーションより、わずかに粒立った面のほうが、硬さや崩れた表面の情報を持たせやすいからです。
霧や影のように輪郭が曖昧なものにも向いていて、ベタ塗り同士をそのまま接触させると段差に見える場面でも、25%や50%を短い距離だけ挟むと「中間の空気」が生まれます。
ここでは模様を見せるのではなく、境界の切り替わりを視覚的に遅らせることが目的です。

ただし、ディザリングは局所的なピクセル多様性（エントロピー）を増すため、LZW（GIF）やDEFLATE（PNG‑8）などの可逆圧縮ではファイルサイズが増えるケースがあります。
増減は画像の内容、パレット構成、圧縮設定に大きく依存するため、Web 用の最終出力では複数パターンで書き出して実際のファイルサイズを比較テストすることを推奨します。

向かない

一方で、ディザリングを入れるほど損をする要素もはっきりあります。
代表例はUI、文字、アイコンのような可読性優先のパーツです。
ここで必要なのは中間調の演出より、輪郭と形の即読性です。
1pxの粒を内部や縁に混ぜると、面積の小さい図形ほど「形の情報」が削られます。
ボタン記号やステータスアイコンが読みにくくなるのは、色数不足の問題ではなく、輪郭の純度を自分で落としている状態です。

小さい顔パーツにも向きません。
16x16や32x32のキャラでは、目・口・鼻の情報量がもともと少なく、1pxの意味が重いです。
目の下や頬にディザを混ぜた途端、陰影ではなくノイズに見えることが多いです。
とくに白目、まぶた、ハイライトのような細部は、1ドット単位で印象が変わるので、ここを粒でつなぐより、色を分けるかAAだけで処理したほうが顔が崩れません。

くっきりしたアニメ塗りとも相性は薄いです。
セル塗り系の絵は、平らな明部と平らな影を明確に分けることで成立しています。
その面の切り替えにディザを入れると、狙っていたシャープさが抜けて、塗りのルール自体がぼやけます。
アニメ塗りで欲しいのは「中間」より「面の切断面」なので、ディザリングが担う役割がそもそも少ないわけです。
滑らかな中間調を足すより、影の形とエッジを整理したほうが仕上がりは締まります。

現代の高ppi環境では、ディザリングが昔ほど必須ではないという点も判断材料になります。
高色数かつ高解像の表示では、色をそのまま増やせるなら、無理に粒で中間を作る必要はありません。
そのうえで使うなら、用途は「不足の補填」ではなく「質感の演出」です。
だから、どこにでも敷くのではなく、レトロ感を出したい、材質に粒を持たせたい、減色出力で階調を守りたい、といった明確な目的があるときに限ったほうが画面は締まります。

ピクセル配置例（9）

16x16の“文字G”を考えると、向き不向きがよく見えます。
文字は読めることが先なので、基本は内部をベタで保ち、必要なら輪郭のAAだけに留めるのが筋です。
外周の角や曲線のきつい部分に1段だけ中間色を置けば、輪郭のギザつきは和らぎますが、字面の黒白関係は崩れません。
この状態のGは、等倍でも「記号」として一瞬で読めます。
処理の主役が輪郭に限定されているからです。

対して、Gの内部ストロークやカウンター周辺を50%ディザで埋める版は、拡大して見ると階調を足したように見えても、等倍では読みにくくなります。
文字の中に灰色の粒面が増えると、外周と内側の区別が弱まり、線幅が曖昧になります。
GはCに横線を差し込んだような構造で認識されますが、その肝心の切れ目や折り返しに粒が入ると、脳は形を一発で拾えません。
文字にとっての中間調は、多くの場合「情報の追加」ではなく「輪郭の混濁」です。

この比較は、UIアイコンにもそのまま当てはまります。
内部ディザを削って輪郭AAだけ残した版は、縮小しても記号性が保たれます。
内部を50%で埋めた版は、拡大時には雰囲気が出ても、縮小時に潰れて別の記号に見えやすくなります。
ディザリングが向くのは面の材質や陰影であって、文字のように輪郭そのものが意味を持つ対象ではありません。
Gの例を見ると、読ませたいものほど粒を減らし、見せたい質感ほど粒を使うという線引きが掴めます。

まとめ・次のステップ

ディザリングは、色を増やす技法ではなく、2色の混在密度で中間調を見せる配置の技術です。
手で打てば境界を狙って整えられ、Bayer 系は規則感、Floyd–Steinberg は自然なつながりが出ます。
まずは 2 色だけで 8x8 か 16x16 のグラデーション帯を作り、50% と 25% の差を見てから、同じモチーフでディザありとなしを並べると判断基準が固まります。

現時点で当サイト内に関連記事はまだありません。
サイト上に関連コンテンツが追加され次第、本記事内に 2 本以上の内部リンクを設置して、読者が次の学習へ遷移しやすい導線を作ってください。