画像パーツ出力を検証する

画面デザインの指定を開発者に渡す際、ここ数年は Sketch(＋α)を用いることが多くありました。Adobe XDは登場してしばらくの間、プロトタイピングやデモンストレーションで活用する場面が大半でしたが、去年の後半ぐらいから、Sketchに取って代わりつつある印象です。
少し前にこんな ニッチな比較記事 を書いていたので、それをアップデートする形でAdobe XD / Photoshop / Illustrator、そしてSketchを比較してみたいと思います。

比較に用いたアプリケーションは、それぞれ以下の通りです。
携わっている案件の制約上、Sketchのみ古いバージョンになっていますが、そうそう手が加えられる要素ではないので、最新バージョンでも変わっていないと思います。

• Windows版 Adobe XD (v 33.1.12)
• Windows版 Adobe Photoshop (v 24.3)
• Windows版 Adobe Illustrator (v 24.3)
• Sketch (Version 56.3)

● 不透明度

対象の不透明度を下げた際に、各アプリで違いが出るか確認してみます。
RGB 0,0,0で塗った矩形を、不透明度10％刻みで出力します。
出力したものを白背景 (RGB 255,255,255) の上に置くと、不透明度100%でRGB 0,0,0、不透明度0%でRGB 255,255,255 となります。
0%、10%、20%・・・と11段階作成した場合、RGB値で１段階毎に256÷10＝25.6ずつ上昇していく計算です。

結論として、IllustratorとXDのグループ、PhotoshopとSketchのグループに分かれました。小数点以下の丸め込み方がアプリによって異なるためだと思いますが、同じAdobe製品間でも差が生じるのが面白いところです。
このように微妙な違いは出ましたが、実務上問題となることは無さそうです。

● グラデーション表現

RGB 0,0,0 ～ 255,255,255 のグラデーションを作成した場合の違いを確認してみます。
均等に変化するなら0～255の256段階になるはずなので、高さ256pxの矩形を用意して、上記のグラデーションを設定しました。

結論として、どれ１つとして「完全に均等」に変化するものが無いという結果になりました。ただ、XD・Illustrator・Sketchは「ほぼ均等」です。

XD
最も明るい部分は254,254,254で始まり、最も暗い部分は0,0,0で終わる。
基本的に値が1ずつ動くが、255,255,255が無いため、同じ値が2px続く箇所が発生する。(今回の検証ではほぼ中央の127,127,127の部分)

Illustrator
最も明るい部分は255,255,255で始まり、最も暗い部分は1,1,1で終わる。
基本的に値が1ずつ変化していくが、0,0,0が無いため、やはり同じ値が2px続く箇所が発生する。(今回の検証では64,64,64の部分)

Sketch
最も明るい部分は255,255,255で始まり、最も暗い部分は0,0,0で終わる。
全体としてはほぼ均等に推移しているが、所々で同じ値が2px続いたり、逆に2変化したりとやや変則的。また同じ行でも値が1ズレる箇所があり、もしかするとGIF等のディザリングに近い処理を行っているのかもしれない。

Photoshop
前回と同様、やはり一番クセが強い。
上端・下端付近は2px置きにRGB値が1動くといった状態が続き、逆に中央付近では1pxにつき2動く。更に、RGBそれぞれの値が均等になっておらず、どれかひとつだけ前後にズレていたりする。
これはグラデーションツールで描画した場合で、レイヤースタイルの「グラデ―ションオーバーレイ」で描画するとまた違ったグラデーションになる。若干注意が必要。

こちらも実務上の影響は大きくなさそうですが、先の不透明度よりはアプリ間での違いが顕著です。特にPhotoshopメインで作業している人が他アプリに環境を移す場合等は、気にしておいた方が良いかもしれません。