メニュー
Illustratorアセットの書き出しで1px大きくなってしまう原因と解決策を紹介します。
  • 中野貴登:Webクリエイター

Illustratorアセットの書き出しで1px大きくなってしまう原因と解決策を紹介します。

こんにちは、イデアックスの「中野」です。

Illustratorでweb制作を行う際、ピクセルプレビューで制作すると思います。ピクセルプレビューで制作している人がよく経験する内容が、素材を書き出した際に1px大きくなっているという現象です。

デザインの要素を画像化するためにjpegやpng形式に書き出すのですが、書き出した画像をよく見ると画像サイズが1px大きくズレているのです。

1pxズレてしまう原因と解決策を皆さんに説明します。

素材のサイズに小数点が含まれている

1つ目の原因は書き出す素材のサイズに小数点が含まれていることです。

要素を拡大縮小しているとサイズが細かく変更されます。その際にサイズに小数点が表示されるのです。

画像サイズに小数点が含まれると書き出す際に数値が繰り上げされてしまいます。そのため希望サイズより1px大きくなってしまうのです。

書き出す際はサイズを整数にしましょう。

右クリックして「ピクセルグリッドに最適化」をクリックすると、選択している素材サイズの小数点が消えます。

サイズを整数にすることができるので、書き出す前にピクセルグリッドの最適化を行ってください。

素材のX・Y座標が小数点になっている

2つ目の原因は、素材の座標が小数点になっていることです。

Illustratorの「プロパティ」の「変形」にx,yの数値があります。これが座標となります。

この数値が小数点になっていると、書き出した素材のサイズがずれてしまいます。素材を書き出す際はこの座標もずれていないか確認してください。

座標の数値の上にカカーソルを合わせ、マウスホイールを1回下に動かすだけで小数点が消えます。

最後に

以上がIllustratorのアセットの書き出しで1pxずれてしまう原因です。1pxのズレは一見小さく見えるかもしれません。

しかし実際にwebサイトで見てみると、1pxのズレがよく見えます。特に背景に違う色がある場合は1pxの部分が白い線のように見えます。

このような状態はとてもカッコ悪いので、画像を書き出す際はサイズをしっかりと確認してくださいね。