Illustratorの書き出しサイズズレ解消法|1pxズレの原因と対策

Webデザイン

「Illustratorで画像を書き出すと、指定したサイズよりも1px大きくなってしまう…」
そんな経験はありませんか?
特にIllustrator初心者の方は、この問題に直面して戸惑うことが多いかもしれません。
私も、Photoshopでのデザインに慣れていたため、Illustratorで制作依頼を受けた際に同じ悩みにぶつかりました。

この記事では、1pxズレの原因とその解決方法を初心者にも分かりやすく解説します。
ぜひ参考にしてみてください!

1pxズレが起きる原因とは?

Illustratorで書き出した画像のサイズが1px大きくなる主な原因は、アートボードのX座標やY座標が小数点になっていることです。

Illustratorはピクセル単位で画像を正確に出力しますが、アートボードの位置が小数点で設定されていると、内部的に自動補正が行われてしまい、結果としてサイズが1px大きくなることがあります。

アートボードのX, Y座標を確認する方法

この問題を解決するには、まずアートボードのX座標とY座標を確認しましょう。
以下の手順で簡単に確認できます。

1.アートボードパネルを表示

メニューから「ウィンドウ」>「アートボード」を選択し、アートボードパネルを表示します。

2.アートボードオプションを表示

アートボードパネル(赤枠部分)をクリックし、アートボードオプションを表示します。

3.アートボードのX座標とY座標を確認

アートボードのX座標、Y座標(赤枠部分)を確認し小数点が含まれている場合、それがズレの原因です。

サイズ通りに書き出す方法

アートボードのX座標とY座標を整数に修正すれば、1pxズレる問題は解消します。

1.、X座標とY座標を整数に修正

アートボードオプションで、X座標とY座標の小数点以下を削除し整数に修正します。
(例:X=123.5 → X=123、Y=456.8 → Y=456)

2.再度書き出し

整数に修正したアートボードで再度画像を書き出します。
これで指定サイズ通りに出力されます!

まとめ

今回は、Illustratorで書き出し時にサイズが1px大きくなる原因とその解決方法について解説しました。

ポイントを振り返ると:

・原因はアートボードのX, Y座標が小数点になっていること
・解決策は、X, Y座標を整数に修正するだけ!

この問題は、知らないと焦る場面も多いですが、手順さえ覚えれば簡単に解消できます。
ぜひ今回の方法を試して、指定サイズ通りのデザインを書き出してください!

タイトルとURLをコピーしました