Webのデザイン画、Web素材等をAIで作ると図形や文字が滲む問題について

私はグラフィックデザイン出身なので、Webのデザインをする時でもイラストレーターを使うことが多いです。


ただし注意点があり、設定をWeb用に変更しないと、見た目やデータ上で不具合が起こりやすいようです。
具体的に悩まされたのは、文字や図形、線が滲んでしまうということです。


なぜそんな現象が起きるのか。


イラストレーターでは通常、ベクターデータを扱います。
ベクターデータを書き出す時に、画像に変換するとこのような現象が起こるようです。


具体例として、

Web素材を作る時に、ここは複雑だから、デザイン性が高い表現にしたいなどの理由によって画像で作った時や、紙媒体のデザインをWebでも使いたいからWeb用に画像を書き出した時などです。



この現象を対処するにあたり、
知っておかなければならないことがあります。


解像度が72dpiの場合、72pixel / inch（ピクセル・パー・インチ）なので、
１インチあたり72ピクセルの集まりで構成された画像ということです。

つまり、1mmは「約2.8ピクセル」となります。
（１インチ＝2.54cm、72÷25.4mm=2.834…）



ピクセルが整数ではないという事が、
「滲む」という原因になっていそうですね。



対処方法は、あらかじめイラストレーター内の設定を下記にする。

・ピクセルビューにする（見え方を確認しながら作業ができる）
・ピクセルスナップにチェックを入れる。（1ピクセル毎にスナップするので、ちゃんと合わせれば端数がでない）
・アートボードをピクセルグリッドに整合（アートボードがピクセルにあっていないと滲む）



他、操作上の注意点として、図形は基本的に整数で作成します。
フォントはptなので、ピクセルグリッドと合わない場合が多く、曲線もあるので多少の滲みがでてきてしまいます。


文字はあらかじめ決められたルールで作られていることが多いので、
ptに合わせるのが無難でしょうか。


もう一つ、全然気づかなかった落とし穴があります。
それは、よく使う「整列機能」による滲みです。



図形や文字をグループ化して移動 or 他の要素を起点に整列させようとする場合です。

せっかくピクセルグリッドに合わせて作っても、ピクセルグリッドを無視するので、小数点以下が発生し、滲んでしまうのです。


これにはなかなか気づきませんでした。


そして、ここまで話しをしながら、そもそもフォトショップで作ればって事にもなりますね…



個人的に、イラストレーターはベクターデータなので原データ（オリジナルデータ）という認識があり、何かあった時（手戻り作業、このデザインをベースに違う案を作る時など）の場合に備えたいというところですね。


デザイン制作するものは基本的にはイラストレーターで作成し、画像を扱う場合や、加工や機能面でフォトショップが必要な場合はそちらを使うのが妥当なのかなと感じています。



職種や作る対象によって優先順位は変わりそうですが、
作り手側は、各々で最適だという考え方を持っておけば作業が楽にできるのではないでしょうか。



これで終わります。