【Adobe Illustrator】書き出した画像に白い余白が入る場合の対策方法

イラストレーターでクリッピングマスクを設定した画像を書き出す際、pngなどで透過の場合は分かりづらいですが、jpg／png形式で上下左右のどこか、または全体に1px程度の小さな白い余白が入ってしまうことがあります。
書き出した後にフォトショップでトリミングもできますが、画像が多いと面倒な作業になります。
そんな時にイラストレーターで設定を変更しておけば、このような余白が入ってしまうことを回避することができるので、紹介していきます。

イラストレーターで書き出した画像に白い余白が入る場合の対策方法

イラストレーターでアセットの書き出しを行うと、下記画像のように白い余白が入ることがあります。

実際、余白が入ってしまった画像のサイズを見てみても、予測していたサイズが「420×640px」でも、これの影響で「421×621px」になってしまうこともよくあります。
Webエンジニアの方はよく直面すると思います。Webサイトを構築するときも、余白が入った画像を背景色が白以外のサイトで使ってしまうと、意外と目立ってしまいます。

この時に余白が入らないように変更するイラストレーターの設定が「ピクセルグリッドに整合」というものになります。

ピクセルグリッドに整合する手順

ピクセルグリッドに整合する際は下記手順で設定を変更します。※illustratorCCでの説明となります。

ちなみに、③④のボタンは下図のようなアイコンです。

これで、余白が表示されずに書き出しができると思います。