WEB Tips デザイン・コーディング

Illustrator 書き出しで画質が悪い・サイズが変わる・ずれる時の対処法

本ページにはプロモーションが含まれています

Illustrator 書き出しで画質が悪い・サイズが変わる・ずれる時の対処法

Illustratorでpngやjpg画像を書き出しをした時に画像が粗く画質が悪くなったり、1px大きくなってサイズが変わってしまうことがあります。この記事ではIllustratorの書き出しで起きる問題の原因と解決方法について解説します。

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?

Adobe Creative Cloud プランの比較

Illustratorで画像を書き出す方法は3つ

イラレ書き出しメニュー

Illustratorで書き出しには3つの方法があります。それぞれの特徴をまとめました。

書き出し方法用途特徴
スクリーン用に書き出しWeb用JPG,PNG,SVG,PDF
複数のWeb用素材を、複数の形式、複数のサイズで一括で書き出すことができる
アートボードごとの書き出しも可能
書き出し形式印刷用、
Photoshop用
PNG,BMP,CSS,PSD,SVG,TIFF,TXTなど
CMYKやグレスケールで書き出し、psdファイルの書き出し可能
書き出せる画像形式が多い
アードボードごとの書き出しも可能
Web用に保存(従来)Web用JPG,PNG,GIF
昔からあるWeb画像の書き出し方法
スライスの書き出しができる
Illustratorの書き出し種類と特徴

スクリーン用に書き出ししたら画質が悪い、ジャギーができる問題の対処法

Illustratorのスクリーン用に書き出し・アセットの書き出し機能は一度に複数のサイズの画像や形式を書き出すことができる機能です。スライスを使って一つ一つ書き出す画像を設定していた頃に比べると、ドラッグ&ドロップで書き出す画像を選択でき、抜群に作業効率が上がりました。便利ですよね。

でもアセットの書き出しで書き出した画像が(特にjpg)なぜか粗い。ジャギー?ノイズのような、大きい画像を縮小した時のような感じで画質が悪くなるのです。

illustratorで書き出した画像がジャギーのような感じになる
書き出した画像がジャギーのような感じになる

書き出し画像の画質を改善する方法

原因はIllustratorの書き出しの設定にありました。以下、書き出し画像の画質を改善する方法です。

アセットの書き出しパネルの場合、右上のメニューから「形式の設定...」を選択します。

またはファイル>書き出し>スクリーン用に書き出しから、フォーマットの右端にあるギアアイコンをクリックします。

形式の設定を選択できるウィンドウが開きます。左側のファイル形式ごとにオプションを設定することできます。

JPG80のオプションを見てみると、アンチエイリアスは「文字に最適(ヒント)」になっています。

「アンチエイリアス」を「アートに最適(スーパーサンプリング)」に変更します。

これで再度画像を書き出してみると・・・ジャギーがなくなり、画像が粗いのが改善されました。

書き出しで画質が悪かったのが改善されました

書き出した画像サイズが大きくなる、1pxずれる問題の対処法

こちらは昔からあった問題でアセットの書き出しだけでなく、Web用に保存でも起きる問題。

書き出した画像が作ったサイズより1px大きかったりずれる問題です。例えば、Width 250px / Height 100px の画像を作りたいのに Widht 251px / Height 101pxの画像になってたりする。。。とってもモヤモヤします。^^;

Illustratorには「ピクセルを最適化」という機能がありますがこれで最適化してもずれる場合があります。

2023年現在では「ピクセルグリッドに最適化」

※バージョンによって名称が違うようです。少し前は「ピクセルグリッドに整合」、現在(illustrator2023)では「ピクセルグリッドに最適化」という機能になっています。

サイズが大きくなる、1pxずれるのモヤモヤを解決する方法

大したことじゃないのですが、アセット書き出ししたい画像のXY座標を整数に調整します。

アセットの書き出しをしたい画像を選択し、変形パネルで、X、Yの値が0コンマ以下が出ないように位置を調整します。(位置調整する前に「ピクセルを最適化」はやっておいたほうが良い)

Illustrator変形パネル 座標変更前

変形パネルを開いてみると、X,Y座標の数値が小数点以下まで表示されています。

座標変更後

X座標、Y座標ともピクセル値を整数にしてからアセットの書き出しをすると、想定どおりの画像として書き出しされます。

ちょっと手間がかかるけどスッキリ書き出しするための対処法です。

最新バージョンでは初めからWeb用のアートボードを使っている場合、ずれる現象は少なくなったような印象があります。「ピクセルグリッドに最適化」を行わなくても大丈夫な感じです。

しかし印刷用のデータをWeb用に加工したりという場合はまだ起きる現象のようです。

書き出した画像の色が変わる問題の対処法

Illustrator上で見るのと、画像にした時に色が変わってしまう原因で考えられるのは2つ。

  • CMYKデータをRGBで書き出している。またはその逆。
  • カラープロファイルの問題

それぞれ見ていきます。

CMYKデータをRGBで書き出している。またはその逆。

基礎知識としてCMYK(シアン、マゼンタ、イエロー、ブラック)のドキュメントは印刷用、RGB(レッド、グリーン、ブルー)は印刷以外の用途で使われます。

カラーモードがRGBのデータをCMYKで書き出した場合、少しくすんだようになります。

「スクリーン用に書き出し」、「Web用に保存」で書き出しをした場合は全てRGBの画像となります。「書き出し形式」を使うとCMYKで書き出すことができます。(JPG,TIFF,PSDなど)

書き出し形式のJPGオプションは、カラーモードをCMYK、RGB、グレースケールから選ぶことができる

これも元々印刷データとして制作したものをWeb用に加工したりする時に起きやすいことです。ドキュメントのカラーモード、書き出しのカラーモードが一致しているか確認しましょう。

カラープロファイルの問題

二つ目はカラープロファイルの問題です。カラープロファイルは中々理解するのが難しいですがすごーく簡単にいうと色の再現性をまとめたデータ?でしょうか。

カラープロファイルによって違う環境でもカラーを再現することができるのだと思います。(私なりの解釈です)

RGBの場合「sRGB IEC61966-2.1」というのがプリンターやカメラなどでも採用されている標準的なプロファイルです。CMYKでは「Japan Color 2001 Coated」です。

色がおかしいなと感じた時はカラープロファイルを確認してみると解決するかもしれません。カラープロファイルの設定はIllustratorの編集>プロファイル設定から行えます。

RGBのカラープロファイル(参考)
CMYKのカラープロファイル(参考)

特に印刷屋さんへデータ入稿する場合、カラープロファイルの扱いは印刷屋さんによって違うので確認した方が良いです。カラープロファイルを埋め込まないでと言われることもあります。

以上、Illustratorで画像の書き出しをする際に起きる問題についてまとめました。

  • 書き出した画像の画質が悪いときは、書き出しオプションのアンチエイリアスの設定を変更する
  • 書き出した画像サイズがずれたり、ぼやけたり大きくなったりする場合はピクセルグリッドの最適化、座標の調整をする
  • 書き出した画像の色が変わってしまう場合、カラーモード、カラープロファイルの設定を確認する

というようなことで解決できると思います。参考になれば幸いです。

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?

Adobe Creative Cloud プランの比較

今月キャンペーン特典があるサービス

  • エックスサーバー
    半額キャッシュバックで月額費用が実質693円&ドメイン永久無料 - 2023年10月2日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF - 2023年10月3日(火)16:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-,