初めまして、デザイナーのUです。日頃は主にWebデザイン業務に携わっています。
エンタメ系のデザインで扱う事の多い素材といえば、イラストになります。
イラストは可愛いものからカッコイイもの多岐に渡り、どうすればより良く見えるか、ブックウォーカーのデザイナー達も日々切磋琢磨しております。
そこで気になって来るのが、細い線画イラストのジャギー問題です。
ジャギーって？
PhotoshopやIllusratorを覚えたての頃、聞いたり学ぶ事があると思いますが、ジャギーとは一般的に下記のような現象の事を呼びます。
ジャギーとは、画像などの線や輪郭に見られるノイズの一種で、階段状のギザギザのことです。
あまりにも頻繁に起こるので、最近では「このイラスト、ジャギる…！」と見た瞬間に分かるようになってしまいました。
明確な発生条件がある訳ではなく、素材ごとの変更したい角度によって異なる、という厄介なものとなっております。
今回は使用率の高いPhotoshopで、そんなジャギーが起こり難い素材の扱いを検証してみました。
ジャギー検証
検証で使用するイラストになります。
（素材：Shtterstock）
- イラスト
サイズ：1929 x 2700px
解像度：72dpi - 検証条件
角度：20°
縮小：58%
※あくまで今回の検証イラストがジャギーを起こしやすい条件ですので、実際は素材によってまちまちです。
検証画像は100%表示で手と目辺りを見ていただくと、分かり易いかと思います！
【1】素材そのまま角度変更後、縮小
そのまま縮小する事で、ぼやけがアンチエイリアスの役割を担い、一見キレイに見えます。
【2】スマートオブジェクト化し、角度変更、縮小
よく使う手法ですが、これが一番ジャギーが目立ちますね。
手の辺りなど、斜めのラインを見ると分かり易いです。
【3】素材そのまま角度変更後、スマートオブジェクト化し縮小
個人的にはこれが一番素材のイメージに近く、キレイに見えるかと思います。
元素材の角度を変更する事で、アンチエイリアス処理のような滑らかな状態になり、スマートオブジェクト化後に縮小する事で、画像の劣化を防いでいる状態です。
【4】素材そのまま縮小後、スマートオブジェクト化し角度変更
一見キレイなのですが、4つの中で一番ぼやけて見えます。
縮小した状態で画像を加工しているので、ぼやけが他よりも出ている状態です。
ジャギー検証：番外編
【番外編1】Illustrator上で角度変更、縮小（書き出し時「アートに最適」設定）
劣化はしないものの、個人の感覚ですと、ぼやけ度は【1】と【4】の間のような感じでした。
【番外編2】素材そのまま変更し、アンシャープマスクで調整
【1】でぼやけた分、シャープをかけると【3】に近いものができます。
ただ、実際の案件では元素材が加工NGの場合もあるので、これは出来れば避けた方が良い手段になりそうです。
まとめ
今回はブログに載せられる画像が大きくない事もあり、ここまで来るともはや素材を扱うデザイナーにしか分からない領域かもしれません。
（途中、強めの瞬きしておりました。）
私の場合はスマートオブジェクトで配置を確定し、そこでジャギーが気になるようなら後から【3】で調整をかける事が多いです。
細かい部分の積み重ねが、見てくださる方が安心して楽しめるデザインに繋がると考えておりますので、今後も研究を続けて参ります！
ブックウォーカーでは、そんなこだわりを持ったデザイナー・エンジニアを募集しております。
採用サイトからご応募お待ちしております！
