ピクセルアートのギザギザを修正するには、曲線がグリッド上で方向を変えるステップの角に、中間色のピクセルを1つか2つ手動で配置します。これらのトランジションピクセルは階段状の段差をつなぎ、遠くから見ると曲線が滑らかに見えるようにします。ただし、線をぼかしたり、ピクセルアートの特徴であるグリッドを消したりするほど多くのピクセルを追加しないことがポイントです。ルールは簡単で、離れて見て滑らかに見え、近くで個々のピクセルが数えられる状態なら完成です。
ピクセルアートでギザギザが発生する原因
すべてのピクセルアートのキャンバスは正方形のグリッドで構成されています。水平線や垂直線はグリッドに完全に沿いますが、角度を持つ線—曲線、斜め線、弧—は、正方形から次の正方形へと段差を踏む形で近似されます。その結果、階段状のパターンができ、各段差がギザギザとなります。
線の角度が鋭いほど、階段状の段差は目立ちます。緩やかな曲線なら3〜4ピクセルの段差があり、ほとんど気づかれません。30度の斜め線や小さな円は1〜2ピクセルの段差となり、粗くギザギザした輪郭が目を引きます。
この見た目を好むアーティストもいます。階段状の見た目はレトロなピクセル美学の一部であり、非常に小さなキャンバスでは意図的なスタイル選択となることもあります。しかし、キャラクターポートレートやロゴ、Pixoo-64 LEDパネルで表示する装飾作品など、より滑らかな曲線を求める場合は、破壊せずに滑らかにする技術が必要です。
Pixoo-64は64×64のWi-Fi対応ピクセルアートディスプレイで、実際のLEDパネル上でアンチエイリアス技術を試すのに最適なキャンバスです。上の動画で動作を確認できます。
ぼかさずにアンチエイリアスを加える方法
ピクセルアートの手動アンチエイリアスは、階段状の段差が方向を変える正確な角にトランジションピクセルを配置する作業です。手順は以下の通りです。
ステップ1 — 段差の角を特定する。 1×ズーム（画面の1ピクセルがキャンバスの1ピクセルに相当）で拡大し、曲線をなぞって、線が水平から垂直、またはその逆に動きを変えるすべての点を見つけます。これが段差の角で、階段の踏み面の外縁のように見える場所です。
ステップ2 — 中間色を選ぶ。 輪郭（またはエッジ）色と塗り（または背景）色の間に位置する色を選びます。例えば、輪郭が濃い青で隣が薄い青なら、トランジションピクセルは中間の青色にします。目標は両者を視覚的につなぐ単一の色合いです。
ステップ3 — 1つか2つのトランジションピクセルを配置する。 各段差の角に、中間色のピクセルを正確に1つか2つ置きます。2つの段差が合わさる接合点に配置し、辺全体に置くのではなく角だけにします。階段が曲がる隙間を埋めるイメージで、新しい輪郭を描くわけではありません。
ステップ4 — 離れて確認する。 50%にズームアウトするか、モニターから離れて見ます。曲線が明らかに滑らかに見えるはずです。まだギザギザが目立つ場合は、最も目立つ角にもう1つトランジションピクセルを追加して再確認します。エッジが柔らかくぼやけて見え始めたら、ピクセルを入れすぎています。
重要な原則は、視覚的な橋をかけることであり、ぼかしフィルターをかけることではありません。各トランジションピクセルは明確で意図的な配置であり、グラデーションのにじみの一部ではありません。正しく行えば、近くで個々のピクセルが見えても、目には曲線が滑らかに映ります。
やりすぎたアンチエイリアスの見た目
最もよくある間違いは、段差の角だけでなく辺全体にトランジションピクセルを置いてしまうことです。こうなると輪郭が3〜4色の中間色の帯になり、ピクセルアートがガウスぼかしをかけた低解像度写真のように見え始めます。
やりすぎの3つのサイン：
- エッジがグラデーションのように見える。 輪郭の終わりと塗りの始まりがはっきり区別できない場合、アンチエイリアスがぼかしになっています。
- 個々のピクセルが見えなくなる。 1×にズームインして、隣接するトランジションピクセルが溶け合って区別できなければ、中間色が多すぎます。
- 作品が拡大画像のように見える。 ピクセルアートの特徴は意図的なピクセル配置です。作品がピクセルアートか単なる小さな画像か判別できない場合、ピクセルの個性が失われています。
迷ったら、ピクセルを追加するよりも削除しましょう。ピクセルアートは抑制が美徳です。意図的なピクセル作業として読める少しギザギザの曲線は、誤りのように見える滑らかな曲線よりも優れています。
十分なアンチエイリアスができたか判断する方法
以下の3つの実用的なテストで、アンチエイリアスが適切か確認できます。
ズームアウトテスト。 キャンバス表示を50%に縮小するか、作品を腕の長さほど離して見ます。曲線が滑らかに見え、階段状の段差が目立たなければ合格です。まだ明らかなギザギザがあれば、最も目立つ角にもう1つトランジションピクセルを追加して再確認します。
ピクセル視認テスト。 1×にズームインします。追加したトランジションピクセルを含め、すべてのピクセルがはっきりと区別できる正方形であることが必要です。にじんだり柔らかく見える部分があれば、その場所に中間色ピクセルを入れすぎています。
グラデーションテスト。 通常の視距離で形のエッジを見ます。輪郭が鮮明な境界線で、わずかな滑らかさがあるなら適切です。ブラシストロークのような柔らかいぼかしに見えたら、トランジションピクセルを1層減らして再確認してください。
目安として、ほとんどの曲線は1つの中間色と、段差の角ごとに1〜2ピクセルで十分です。3色目や3ピクセル目を同じ角に置こうとしたら、まずズームアウトして確認しましょう。
Pixoo-64のような小さなキャンバスで抑制が必要な理由
64×64のグリッドでは、1ピクセルがキャンバス幅の約1.5%を占めます。つまり、1つのトランジションピクセルが256×256や512×512のキャンバスよりもはるかに大きな視覚的重みを持ちます。1つの適切な中間ピクセルで角を滑らかにできますが、3つ置くと辺全体が濁って見えます。
Pixoo-64は64×64の物理ピクセルでピクセルアートを表示するWi-Fi対応LEDディスプレイです。サブピクセルレンダリングや画面レベルのアンチエイリアスはなく、キャンバスに置いたものがそのままパネルに表示されます。したがって、抑制の原則がより重要で、追加するトランジションピクセルはすべて意図的で目に見える選択です。
小さなキャンバスでは、標準ルールのより厳しいバージョンに従いましょう：
- 中間色は1色だけ使い、2色は使わない。
- 段差の角ごとにトランジションピクセルは1つだけ置き、2つは置かない。
- エディターのズームアウトだけでなく、実際の表示サイズ（Pixoo-64を机の距離で持つなど）で作品を確認する。
同じ原則は、より大きなピクセルグリッドを持つTimes Gateにも当てはまります。専用のピクセルディスプレイでは、アンチエイリアスの選択はレンダリング後に永久的で、画面レベルのぼかしで過剰なアンチエイリアスを隠すことはできません。デバイスの設定や構成についてはDivoom製品マニュアルを参照してください。
きれいなピクセル配置のためのツールのコツ
ピクセルアートのアンチエイリアスは適切なツールから始まります。必ず鉛筆ツールや単一ピクセル配置ツールを使い、ブラシツールは使わないでください。ブラシツールはストロークごとに自動的にエッジをぼかし、意図しないトランジションピクセルを追加してしまいます。これがピクセルアートでぼかしが発生する最も一般的な原因です。
Asepriteではピクセルパーフェクトモードを有効にした鉛筆ツールを使います。Photoshopでは鉛筆ツールを選択し、選択ツールやシェイプツールのアンチエイリアスをオフにします。Procreateでは硬さ100%のモノラインブラシを使い、StreamLineをオフにしてください。
ピクセルを配置するときは1×ズームで作業し、ズームアウトは曲線の全体的な滑らかさを確認するためだけに使いましょう。この習慣により、個々のピクセルの判断に集中でき、エッジを誤ってぼかす広いストロークを描くことを防げます。
よくある質問
ピクセルアートにアンチエイリアスは有効ですか？
はい、手動で控えめに適用する場合は有効です。手動アンチエイリアスとは、段差の角に1つか2つの中間色ピクセルを配置することで、ピクセルアートの特徴である見えるグリッドを壊さずに曲線を滑らかにします。問題はアンチエイリアス自体ではなく、過剰な適用です。トランジションピクセルを入れすぎるとぼかしが生じ、意図的なピクセル作業ではなく縮小画像のように見えてしまいます。
直線の斜め線のギザギザを避けるには？
等間隔のステップルールに従いましょう。階段の各段は同じ幅と高さであるべきです。例えば2:1の線（右に2ピクセル、上に1ピクセル）は、そのパターンを全長にわたって繰り返します。2:1と3:1を交互にするなど不規則なステップは、規則的なギザギザよりも目立つ凸凹を作ります。
ピクセルアートには鉛筆ツールとブラシツールのどちらを使うべき？
必ず鉛筆ツール（または同等の単一ピクセルツール）を使いましょう。ブラシツールはストロークごとに自動的にエッジをぼかし、意図しないアンチエイリアスを加えて線をぼかしてしまいます。鉛筆ツールはクリックした場所に硬いエッジのピクセルを正確に配置でき、どのトランジションピクセルを加え、どれを省くかを完全にコントロールできます。
これで技術は身につきました—段差の角を特定し、中間ピクセルを1つか2つ置き、そこで止める。基準は—離れて見て滑らか、近くでピクセルが見える。そして抑制の原則—迷ったら追加より削除を。
次のステップは、滑らかにしたピクセルアートを活用することです。カスタムアートをDivoomディスプレイにアップロードし、配置したトランジションピクセルが意図通りに点灯する様子を実際のLEDピクセルで確認しましょう。コミュニティデザインから始めたい場合は、Divoomアプリのテンプレートライブラリを参照し、同じアンチエイリアス技術を適用して自分の作品に仕上げてください。
