English version →

ディザリングとグラデーション表現 — 少ない色で滑らかさを出す

ドット絵づくりには、いつも同じジレンマがついて回ります。色数を減らせば減らすほど打ち込みは楽になり、絵としても引き締まって見える。 ところが減らしすぎると、なめらかだったはずの夕焼け空や頬の陰影が、板チョコを割ったような太い縞模様になってしまう。 「色を増やすか、縞を我慢するか」——この二択に見える問題を、第三の方法で解いてきたのがドット絵の歴史です。その主役がディザリングです。

このページでは、ディザリングとは何なのかという原理から、代表的なパターン、使ってよい場面と使ってはいけない場面、実際に手で打ち込む手順、 そして縞(バンディング)が出てしまったときの立て直し方までを順に説明します。 ここで扱うのは特定のツールの操作ではなく、どんな環境でも通用するドット絵の一般技法です。そのうえで、 みんなのデザインスタジオの変換設定や編集機能とどう組み合わせるかにも触れていきます。

1. なぜ縞(バンディング)が出るのか

元になる写真やイラストは、たいてい1チャンネルあたり256段階の明るさを持っています。空のグラデーションであれば、 上から下へ何十段階もの青がじわじわと変化しているわけです。ところがドット絵に変換すると、使える色は十数色から数十色に絞られます。 256段階が10段階になれば、隣り合う階調の差は単純計算で25倍に広がります。これが縞の物理的な原因です。

やっかいなのは、人間の目がこの段差を実際よりずっと強く感じてしまうことです。 視覚には、明るさの違う面が接している境界を強調して知覚する性質があります(マッハバンドと呼ばれる現象です)。 そのため、数値上はごくわずかな段差でも、境界線が白く光ったり黒く沈んだりして見え、あたかも輪郭線が引かれているかのように認識されます。 平坦な面が広ければ広いほどこの効果は目立ちます。空や壁や水面でバンディングが気になりやすいのは、このためです。

つまりバンディングは「色が足りない」だけの問題ではなく、「色が足りないことを目が増幅している」問題でもあります。 だからこそ、色を増やす以外の対処——目のほうを騙す方法——が効きます。

2. ディザリングの原理 — 目が勝手に混ぜてくれる

ディザリングとは、2つの色を細かく交互に配置することで、その中間の色があるように見せる技法です。 濃い青と薄い青を市松模様に並べれば、離れて見たときには「中くらいの青」に見えます。実際にはそんな色は1マスも使われていないのに、です。

なぜそう見えるのかというと、人間の目には空間的な分解能の限界があるからです。 網膜が識別できる細かさより小さいものが並んでいると、脳はそれらを個別の点として分離できず、その領域全体の平均的な色として処理します。 これは特別な錯覚ではなく、日常的に使われている原理です。カラー印刷は、シアン・マゼンタ・イエロー・ブラックの小さな網点の密度だけで あらゆる中間色を作っていますし、ディスプレイも赤・緑・青の副画素が並んでいるだけで、白い画面には白い発光体など存在しません。 ディザリングは、この「密度で濃さを表す」やり方をドット絵のマス目でやっているだけ、と考えると理解しやすくなります。

ディザは実質的な色数を何倍にもする

ここが重要なポイントです。隣り合う2色AとBがあるとき、ディザの密度を変えることで、その間に見かけ上の階調を増やせます。 もっとも扱いやすいのは、A100% → Aが75% → 50%(市松) → 25% → B100% の5段階です。

A100%    A75%     A50%     A25%     B100%
■■■■■   ■■■□■   ■□■□■   □■□□□   □□□□□
■■■■■   ■□■■■   □■□■□   □□□■□   □□□□□
■■■■■   ■■■□■   ■□■□■   □■□□□   □□□□□
■■■■■   ■□■■■   □■□■□   □□□■□   □□□□□

2色しか使っていないのに、目には5段階の明るさとして届きます。もし青系のパレットが5色あって、隣り合うすべての組み合わせに この3段階を挟めば、5色が実質17段階のグラデーションとして機能します。 「色数は増やせないが階調は欲しい」という状況で、ディザリングが効くのはこの計算のためです。

覚えておきたい前提: ディザが混色として成立するのは「1マスが十分小さく見えるとき」だけです。 ドットが大きく表示される環境や、画面に顔を近づけて見る状況では、混ざらずに市松模様そのものとして見えてしまいます。 作品を作りながら、ときどきブラウザを縮小したり、スマホを腕いっぱいに離したりして、 実際に鑑賞される距離での見え方を確認する癖をつけてください。

3. 代表的なディザパターン

市松(チェッカー / 50%)

もっとも基本的で、もっとも使われるパターンです。2色をきっちり1マスおきに交互配置します。 密度は正確に50%なので、2色のちょうど中間の色に見えます。周期が2マスと短いため、狭い場所にも入れやすいのが利点です。

■□■□■□■□
□■□■□■□■
■□■□■□■□
□■□■□■□■

25% / 75%(疎なディザ)

片方の色を4マスに1マスだけ置くパターンです。市松ほど強く混ざらず、「ほんの少しだけ隣の色に寄せたい」ときに使います。 グラデーションの端、つまり単色の面からディザ帯へ移行する部分に置くと、境目がなだらかになります。 75%はこの白黒を入れ替えたものです。

25%              75%
■□□□■□□□     ■■■□■■■□
□□■□□□■□     ■□■■■□■■
■□□□■□□□     ■■■□■■■□
□□■□□□■□     ■□■■■□■■

ベイヤー型(順序ディザ)

上の3つを体系化したものがベイヤー型、いわゆる順序ディザです。あらかじめ決まった数値の並んだ小さな行列(閾値マトリクス)を用意し、 各マスの明るさがその位置の閾値を超えるかどうかで色を決めます。4×4のベイヤー行列は次のような並びです。

 0   8   2  10
12   4  14   6
 3  11   1   9
15   7  13   5

この行列をタイル状に敷き詰め、「明るさが閾値より大きければ明色、小さければ暗色」と判定していくと、 明るさに応じて自動的に0/16から16/16まで17段階の密度パターンが生成されます。25%も50%も75%も、この仕組みが吐き出す密度のひとつに過ぎません。 規則的な網目模様になるのが特徴で、周期が決まっているため手で打ち込んでも再現できるのが大きな利点です。 レトロゲームの空や地面に見られる、あの独特の網掛け感はほぼこれです。

誤差拡散(Floyd–Steinberg など)

考え方がまったく違うのが誤差拡散です。1マスずつ順に色を決めていき、「本当はこの明るさにしたかったのに、パレットの都合でこの色になった」 というズレ(誤差)を、まだ決めていない右・右下・下・左下のマスに分配して足し込みます。 結果として、ズレが局所的に打ち消し合い、全体としては元画像に非常に近い平均輝度が保たれます。

写真の減色では圧倒的に高品質ですが、ドット絵の素材としては扱いにくい面があります。 出てくるパターンが不規則で、規則性がないぶん手で打ち直すことがほぼ不可能だからです。 またドットの並びが「意図された模様」ではなく「砂を撒いたようなざらつき」に見えるため、 1マスずつ人が打ち込むタイプの作品では、きれいというより粗く見えてしまうことがあります。

方式見た目手打ち再現向いている用途
市松(50%)整然とした格子非常に簡単2色の境目、面の中間調
25% / 75%まばらな点簡単単色面とディザ帯のつなぎ
ベイヤー型規則的な網目可能(周期を覚える)空・水面・広い背景の連続階調
誤差拡散不規則な砂目ほぼ不可能写真の減色、印刷用途

4. 使うべき場面と、使ってはいけない場面

ディザリングは万能ではありません。むしろ使いどころを外すと、絵の質を確実に下げる技法です。判断の軸は「面積」と「表示サイズ」の2つです。

効果が出る場面

避けたほうがよい場面

いちばんよくある失敗: 「なんとなく上手く見えるから」と全面にディザをかけてしまうことです。 ディザは目立たせない技術であって、目立たせる技術ではありません。 絵のどこか一部を見せ場にしたいなら、そこはむしろディザを使わない単色の面にして、 周囲にだけディザを置くほうが効果的です。

5. 手打ちでディザを入れる手順

みんなのデザインスタジオの変換処理は、ノイズ除去と減色によって色をすっきりさせる方向に働きます。 ディザリングはそこに自分の手で足していくものだと考えてください。デザイン編集モードのペンを使えば、1マス単位で自由に打ち込めます。 以下は実際の作業順です。

  1. ディザで結ぶ2色を決める
    グラデーションさせたい面の中から、隣り合う階調の2色を選びます。明るさが近いほど混色として成立しやすく、離れているほど格子に見えます。 パレット上で「1段階違い」の関係にある2色が理想です。
  2. 先に境界線の形を決める
    ディザは境界をぼかす技術なので、ぼかす前の境界がどこにあるかを自分が把握していないと、絵全体の形が崩れます。 まず2色をベタ塗りで塗り分け、シルエットとして成立しているか確認します。
  3. 境界に沿って帯を作る
    境界線をまたぐように、幅4〜8マス程度の帯を想定します。この帯の中だけでディザを打ちます。
  4. 帯の中を3段階に分ける
    帯の中央に50%の市松を置き、明るい側に25%、暗い側に75%を置きます。 こうすると単色 → 25% → 50% → 75% → 単色という5段階になり、境界が一気に目立たなくなります。
  5. 曲面は等高線に沿わせる
    球や円柱の陰影では、ディザ帯を直線ではなく、面の丸みに沿った曲線として這わせます。 帯が形をなぞっていないと、立体ではなく「模様を貼った平面」に見えます。
  6. 離れて確認する
    打ち終えたら必ず縮小表示で見ます。粒が見えるならディザが強すぎるので密度を下げるか、帯を狭くします。 逆に段差がまだ見えるなら帯を広げます。

打ち込み作業では、色ごとのハイライト表示が役に立ちます。ディザに使っている2色のうち片方だけを表示させれば、 市松の格子がきれいに並んでいるか、周期がずれていないかを一目で確認できます。 またブロック作業モードは10×10マスのブロック単位で進むため、周期2マスの市松や周期4マスのベイヤー型とは相性がよく、 ブロックの切れ目でパターンがずれるのを防ぎやすくなります。

6. バンディングが出たときの対処

変換直後に縞が出ているとき、いきなりペンで描き直す必要はありません。設定側でできることから順に試すのが効率的です。

  1. 減色のステップ2を弱める
    縞の原因が「似た色を統合しすぎたこと」である場合がよくあります。似た色同士の統合を緩めると中間色が戻り、段差が細かくなります。 色数は増えますが、15〜25色の範囲に収まるなら実作業への影響は小さいはずです。
  2. ノイズ除去を弱める
    ノイズ除去を「強」にすると、階調のゆらぎまでならされて、段差の境界がかえって直線的にくっきり出ることがあります。 縞が気になるときは「弱」や「中」に戻して比べてみてください。
  3. 変換方式を見直す
    方式2(イラスト・シンプル)や方式3(高コントラスト)はコントラストを持ち上げるため、階調の段差も一緒に強調されます。 なめらかさを優先したいときは方式1(標準)に戻すと落ち着くことが多いです。
  4. 逆に振り切る
    すべての縞を消そうとするより、いっそ統合を強めて階調を3〜4段階まで減らし、アニメのセル画のような明確な塗り分けにしてしまう手もあります。 中途半端な段差が「失敗」に見えるのであって、はっきり分かれた面は「様式」に見えます。
  5. 最後にペンでディザを足す
    それでも残る、目立つ1本の段差だけを、手打ちのディザで崩します。全面ではなく、気になる境界1本だけで十分な場合がほとんどです。

もうひとつ有効なのが、段差の線の形を変えるという発想です。バンディングが不快なのは、階調の境目が まっすぐで幾何学的な線になっているからです。この線を、雲の輪郭、葉のかたまり、岩肌の凹凸といった 「意味のある形」に描き直してしまえば、それはもう縞ではなく描写になります。空なら雲、地面なら草の生え際に境界を重ねるのが定番の手です。

7. 「ざらつき」とディザの見分け方

変換結果を見て、点々としたものが散らばっているとき、それがディザなのか単なるノイズなのかを見分けられると、対処を間違えません。 この2つは見た目が似ていますが、正しい対応は正反対です。ノイズは消すべきもの、ディザは残すべきものだからです。

観点ディザ変換由来のノイズ
並び方規則的。周期がある不規則。周期がない
使われる色ほぼ2色だけ3色以上が混在しがち
出る場所階調の境目に帯状絵柄と無関係に散在
市松や網目の形をとる孤立した1〜2マスの点
正しい対処残す(消すと縞が戻る)ノイズ除去や減色で消す

判断に迷ったら、色ごとのハイライト表示で1色だけを浮かび上がらせてみてください。 そのマスたちが格子状にきれいに並んでいればディザ、てんでばらばらに散っていればノイズです。

なお、アップロードした画像を変換する処理は、色を割り当ててノイズを整理する方向の処理です。 そのため変換直後にざらついて見えるものは、意図的なディザではなく、元画像の色の揺らぎに由来するノイズだと考えて差し支えありません。 それは遠慮なくノイズ除去と減色で整理し、そのうえで階調が欲しい場所にだけ、自分でディザを打ち足す——これが、 少ない色数できれいなグラデーションを得るいちばん確実な順番です。

もし元画像そのものにディザがかかっている場合(レトロゲームのスクリーンショットや、他のソフトで減色済みの画像など)は事情が違います。 そのディザ模様は変換処理から見ると細かい色の切り替わりでしかないため、ノイズとして扱われて崩れることがあります。 そういう素材を使うときは、ノイズ除去を「なし」または「弱」にとどめ、精度(ドット数)を元画像のドット数に近づけると、模様が保たれやすくなります。

まとめ: ディザリングは「色を増やす代わりに、目に混ぜてもらう」技法です。 広い面には効き、小さい絵では逆効果。近い2色どうしで使い、離れた色には使わない。 そして全面にかけるのではなく、階調が欲しい境界だけに帯として置く。 この4点を押さえておけば、15〜25色というドット絵向きの色数のまま、驚くほどなめらかな絵が作れます。