アンチエイリアスと位置｜ATQの「知っておこう」vol.7

2023年8月30日 18:08

細かすぎるやや退屈なデザインの知識担当(?)のクリモトです。

皆さんがバナーなどのデジタル上の画像素材を制作する時、｢オブジェクトの位置｣について気にかけていることはありますか？

ディスプレイ上のデザインを起こす時、pixelという単位で制作をしますが、この時にオブジェクトの位置を気にして制作しないと意図せぬ表現の崩れが生じてしまうことがあります。

今回はそんなオブジェクトの位置とデジタル表現の特性について触れていきたいと思います。

ATQの｢知っておこう｣マガジンでは、｢自分の作るデザインに確信がもてるようになる基礎知識｣や｢なんとなくで放置しがちなニッチな知識｣についておさらいできるような投稿をしていきたいと考えていますので、是非お付き合いいただけると嬉しいです！

デジタル表現の"解像度"

まず本題に触れる前に、デジタル表現の解像度がppiという単位で制御されているという点をおさらいします。

◼︎ppi

ppiは｢Pixels Per Inch (インチ当たりのピクセル数)｣の略称で、1インチの距離にどれだけのピクセルが含まれているかを示しています。

基本的に数値が高ければ高いほど、画像は細かく、鮮明に見えるというわけですが、無論、値が高すぎると人間の目で差を感じられない程になることに加え、データ量も増加し、処理速度や保存スペースに影響を与えることになります。

そのため、一般的な高解像度が300-400ppiなのに対して、実際にWEBサイト等に載せるコンテンツの解像度は72ppi程度が利用されているわけです。

低解像度におけるアンチエイリアス

先述の通り、現在のWEBコンテンツの解像度は比較的低解像度のものが利用されているわけですが、低解像度の画像では通常適用される｢アンチエイリアス｣という処理が予期せぬ結果を招く恐れがあります。

◼︎アンチエイリアス (anti-aliasing)

アンチエイリアスはデジタル表現において、エイリアス(ジャギー、階段状の線)を低減または除去する技術です。

例えば斜線をピクセルに当てはめた時と通常なら階段状のジャギーが生まれてしまいます。しかしアンチエイリアス処理が入ることで、エッジ周辺のピクセルの色を調整し、周辺との色の遷移をなめらかにする調整が入ります。

このことが視覚的な階段効果を減らし、より自然な曲線や線を作っているのです。

◼︎低解像度時の予期せぬアンチエイリアス

基本的にアンチエイリアスは我々にとって大きな助けになる処理なのですが、低解像度の場合はやや注意が必要です。

以下の画像はサイズの同じ四角形を並べたものですが、左側は境界線がはっきりしているのに対し、右側はアンチエイリアスが働いており、境界線がぼけてしまっています。

四角形では境界線がややぼける程度で済みますが、斜線や円などを含む複雑な造形ではこの望まないアンチエイリアスが形状の破綻を産んでしまう可能性もあります。

なぜこのような違いが生まれてしまうのでしょうか。