ドット絵づくりには、いつも同じジレンマがついて回ります。色数を減らせば減らすほど打ち込みは楽になり、絵としても引き締まって見える。 ところが減らしすぎると、なめらかだったはずの夕焼け空や頬の陰影が、板チョコを割ったような太い縞模様になってしまう。 「色を増やすか、縞を我慢するか」——この二択に見える問題を、第三の方法で解いてきたのがドット絵の歴史です。その主役がディザリングです。
このページでは、ディザリングとは何なのかという原理から、代表的なパターン、使ってよい場面と使ってはいけない場面、実際に手で打ち込む手順、 そして縞(バンディング)が出てしまったときの立て直し方までを順に説明します。 ここで扱うのは特定のツールの操作ではなく、どんな環境でも通用するドット絵の一般技法です。そのうえで、 みんなのデザインスタジオの変換設定や編集機能とどう組み合わせるかにも触れていきます。
元になる写真やイラストは、たいてい1チャンネルあたり256段階の明るさを持っています。空のグラデーションであれば、 上から下へ何十段階もの青がじわじわと変化しているわけです。ところがドット絵に変換すると、使える色は十数色から数十色に絞られます。 256段階が10段階になれば、隣り合う階調の差は単純計算で25倍に広がります。これが縞の物理的な原因です。
やっかいなのは、人間の目がこの段差を実際よりずっと強く感じてしまうことです。 視覚には、明るさの違う面が接している境界を強調して知覚する性質があります(マッハバンドと呼ばれる現象です)。 そのため、数値上はごくわずかな段差でも、境界線が白く光ったり黒く沈んだりして見え、あたかも輪郭線が引かれているかのように認識されます。 平坦な面が広ければ広いほどこの効果は目立ちます。空や壁や水面でバンディングが気になりやすいのは、このためです。
つまりバンディングは「色が足りない」だけの問題ではなく、「色が足りないことを目が増幅している」問題でもあります。 だからこそ、色を増やす以外の対処——目のほうを騙す方法——が効きます。
ディザリングとは、2つの色を細かく交互に配置することで、その中間の色があるように見せる技法です。 濃い青と薄い青を市松模様に並べれば、離れて見たときには「中くらいの青」に見えます。実際にはそんな色は1マスも使われていないのに、です。
なぜそう見えるのかというと、人間の目には空間的な分解能の限界があるからです。 網膜が識別できる細かさより小さいものが並んでいると、脳はそれらを個別の点として分離できず、その領域全体の平均的な色として処理します。 これは特別な錯覚ではなく、日常的に使われている原理です。カラー印刷は、シアン・マゼンタ・イエロー・ブラックの小さな網点の密度だけで あらゆる中間色を作っていますし、ディスプレイも赤・緑・青の副画素が並んでいるだけで、白い画面には白い発光体など存在しません。 ディザリングは、この「密度で濃さを表す」やり方をドット絵のマス目でやっているだけ、と考えると理解しやすくなります。
ここが重要なポイントです。隣り合う2色AとBがあるとき、ディザの密度を変えることで、その間に見かけ上の階調を増やせます。 もっとも扱いやすいのは、A100% → Aが75% → 50%(市松) → 25% → B100% の5段階です。
A100% A75% A50% A25% B100% ■■■■■ ■■■□■ ■□■□■ □■□□□ □□□□□ ■■■■■ ■□■■■ □■□■□ □□□■□ □□□□□ ■■■■■ ■■■□■ ■□■□■ □■□□□ □□□□□ ■■■■■ ■□■■■ □■□■□ □□□■□ □□□□□
2色しか使っていないのに、目には5段階の明るさとして届きます。もし青系のパレットが5色あって、隣り合うすべての組み合わせに この3段階を挟めば、5色が実質17段階のグラデーションとして機能します。 「色数は増やせないが階調は欲しい」という状況で、ディザリングが効くのはこの計算のためです。
覚えておきたい前提: ディザが混色として成立するのは「1マスが十分小さく見えるとき」だけです。 ドットが大きく表示される環境や、画面に顔を近づけて見る状況では、混ざらずに市松模様そのものとして見えてしまいます。 作品を作りながら、ときどきブラウザを縮小したり、スマホを腕いっぱいに離したりして、 実際に鑑賞される距離での見え方を確認する癖をつけてください。
もっとも基本的で、もっとも使われるパターンです。2色をきっちり1マスおきに交互配置します。 密度は正確に50%なので、2色のちょうど中間の色に見えます。周期が2マスと短いため、狭い場所にも入れやすいのが利点です。
■□■□■□■□ □■□■□■□■ ■□■□■□■□ □■□■□■□■
片方の色を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%も、この仕組みが吐き出す密度のひとつに過ぎません。 規則的な網目模様になるのが特徴で、周期が決まっているため手で打ち込んでも再現できるのが大きな利点です。 レトロゲームの空や地面に見られる、あの独特の網掛け感はほぼこれです。
考え方がまったく違うのが誤差拡散です。1マスずつ順に色を決めていき、「本当はこの明るさにしたかったのに、パレットの都合でこの色になった」 というズレ(誤差)を、まだ決めていない右・右下・下・左下のマスに分配して足し込みます。 結果として、ズレが局所的に打ち消し合い、全体としては元画像に非常に近い平均輝度が保たれます。
写真の減色では圧倒的に高品質ですが、ドット絵の素材としては扱いにくい面があります。 出てくるパターンが不規則で、規則性がないぶん手で打ち直すことがほぼ不可能だからです。 またドットの並びが「意図された模様」ではなく「砂を撒いたようなざらつき」に見えるため、 1マスずつ人が打ち込むタイプの作品では、きれいというより粗く見えてしまうことがあります。
| 方式 | 見た目 | 手打ち再現 | 向いている用途 |
|---|---|---|---|
| 市松(50%) | 整然とした格子 | 非常に簡単 | 2色の境目、面の中間調 |
| 25% / 75% | まばらな点 | 簡単 | 単色面とディザ帯のつなぎ |
| ベイヤー型 | 規則的な網目 | 可能(周期を覚える) | 空・水面・広い背景の連続階調 |
| 誤差拡散 | 不規則な砂目 | ほぼ不可能 | 写真の減色、印刷用途 |
ディザリングは万能ではありません。むしろ使いどころを外すと、絵の質を確実に下げる技法です。判断の軸は「面積」と「表示サイズ」の2つです。
いちばんよくある失敗: 「なんとなく上手く見えるから」と全面にディザをかけてしまうことです。 ディザは目立たせない技術であって、目立たせる技術ではありません。 絵のどこか一部を見せ場にしたいなら、そこはむしろディザを使わない単色の面にして、 周囲にだけディザを置くほうが効果的です。
みんなのデザインスタジオの変換処理は、ノイズ除去と減色によって色をすっきりさせる方向に働きます。 ディザリングはそこに自分の手で足していくものだと考えてください。デザイン編集モードのペンを使えば、1マス単位で自由に打ち込めます。 以下は実際の作業順です。
打ち込み作業では、色ごとのハイライト表示が役に立ちます。ディザに使っている2色のうち片方だけを表示させれば、 市松の格子がきれいに並んでいるか、周期がずれていないかを一目で確認できます。 またブロック作業モードは10×10マスのブロック単位で進むため、周期2マスの市松や周期4マスのベイヤー型とは相性がよく、 ブロックの切れ目でパターンがずれるのを防ぎやすくなります。
変換直後に縞が出ているとき、いきなりペンで描き直す必要はありません。設定側でできることから順に試すのが効率的です。
もうひとつ有効なのが、段差の線の形を変えるという発想です。バンディングが不快なのは、階調の境目が まっすぐで幾何学的な線になっているからです。この線を、雲の輪郭、葉のかたまり、岩肌の凹凸といった 「意味のある形」に描き直してしまえば、それはもう縞ではなく描写になります。空なら雲、地面なら草の生え際に境界を重ねるのが定番の手です。
変換結果を見て、点々としたものが散らばっているとき、それがディザなのか単なるノイズなのかを見分けられると、対処を間違えません。 この2つは見た目が似ていますが、正しい対応は正反対です。ノイズは消すべきもの、ディザは残すべきものだからです。
| 観点 | ディザ | 変換由来のノイズ |
|---|---|---|
| 並び方 | 規則的。周期がある | 不規則。周期がない |
| 使われる色 | ほぼ2色だけ | 3色以上が混在しがち |
| 出る場所 | 階調の境目に帯状 | 絵柄と無関係に散在 |
| 形 | 市松や網目の形をとる | 孤立した1〜2マスの点 |
| 正しい対処 | 残す(消すと縞が戻る) | ノイズ除去や減色で消す |
判断に迷ったら、色ごとのハイライト表示で1色だけを浮かび上がらせてみてください。 そのマスたちが格子状にきれいに並んでいればディザ、てんでばらばらに散っていればノイズです。
なお、アップロードした画像を変換する処理は、色を割り当ててノイズを整理する方向の処理です。 そのため変換直後にざらついて見えるものは、意図的なディザではなく、元画像の色の揺らぎに由来するノイズだと考えて差し支えありません。 それは遠慮なくノイズ除去と減色で整理し、そのうえで階調が欲しい場所にだけ、自分でディザを打ち足す——これが、 少ない色数できれいなグラデーションを得るいちばん確実な順番です。
もし元画像そのものにディザがかかっている場合(レトロゲームのスクリーンショットや、他のソフトで減色済みの画像など)は事情が違います。 そのディザ模様は変換処理から見ると細かい色の切り替わりでしかないため、ノイズとして扱われて崩れることがあります。 そういう素材を使うときは、ノイズ除去を「なし」または「弱」にとどめ、精度(ドット数)を元画像のドット数に近づけると、模様が保たれやすくなります。
まとめ: ディザリングは「色を増やす代わりに、目に混ぜてもらう」技法です。 広い面には効き、小さい絵では逆効果。近い2色どうしで使い、離れた色には使わない。 そして全面にかけるのではなく、階調が欲しい境界だけに帯として置く。 この4点を押さえておけば、15〜25色というドット絵向きの色数のまま、驚くほどなめらかな絵が作れます。