Illustratorから画像を書き出した際に、画像サイズが1pxずれて書き出されたことはないでしょうか？

画像サイズが1pxずれるだけで、ブラウザで表示した時に画像がぼやけてしまいます。

そこで今回は、「Illustratorで画像を書き出す際にサイズが1pxずれて書き出される理由と解決方法」について紹介していこうと思います。

なぜ1pxずれて書き出されるのか？

1pxずれて書き出される原因は、Illustratorの右側にあるプロパティのX、W、Y、Hの値が小数点になっているからです。

そして、Illustratorを選択した状態で上部のメニューバーの「ウィンドウ＞アードボード」を選択してアートボードバーを表示させます。

表示出来たら、右側にあるアイコンをクリックします。

アートボードの幅や高さなどの値も小数点になっていると、画像サイズが1pxずれて書き出される原因となります。

1pxずれて書き出されないようにするためには？

画像サイズが1pxずれないようにするには、上記で紹介した箇所の小数点を整数に変更し、それから書き出すと良いでしょう！

整数値にすることで、1pxずれることなく思い通りに書き出すことができます。

画像を書き出す際には、サイズの値がしっかり整数になっているのかしっかり確認する癖をつけるといいですね！

まとめ

以上が、「Illustratorで画像を書き出す際にサイズが1pxずれて書き出される理由と解決方法」でした。

Illustratorから画像を書き出すコーダーの方は、是非今回紹介した方法を理解しておきたいところですね！