Illustratorでpngやjpg画像を書き出しをした時に画像が粗く画質が悪くなったり、1px大きくなってサイズが変わってしまうことがあります。この記事ではIllustratorの書き出しで起きる問題の原因と解決方法について解説します。
Adobe CCのプランを比較するなら
Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき？
Adobe Creative Cloud プランの比較
こちらもおすすめ 2024年最新 Adobe CC コンプリートプランを安く更新できる！一番安い購入方法
Illustratorで画像を書き出す方法は3つ
Illustrator（CC）で書き出しには3つの方法があります。それぞれの特徴をまとめました。
| 書き出し方法 | 用途 | 特徴 |
|---|---|---|
| スクリーン用に書き出し | Web用 | JPG,PNG,SVG,PDF 複数のWeb用素材を、複数の形式、複数のサイズで一括で書き出すことができる アートボードごとの書き出しも可能 |
| 書き出し形式 | 印刷用、 Photoshop用 | PNG,BMP,CSS,PSD,SVG,TIFF,TXTなど CMYKやグレスケールで書き出し、psdファイルの書き出し可能 書き出せる画像形式が多い アードボードごとの書き出しも可能 |
| Web用に保存（従来） | Web用 | JPG,PNG,GIF 昔からあるWeb画像の書き出し方法 スライスの書き出しができる |
スクリーン用に書き出しで画質が悪い、ジャギーができる問題の対処法
Illustratorのスクリーン用に書き出し・アセットの書き出し機能は一度に複数のサイズの画像や形式を書き出すことができる機能です。スライスを使って一つ一つ書き出す画像を設定していた頃に比べると、ドラッグ＆ドロップで書き出す画像を選択でき、抜群に作業効率が上がりました。便利ですよね。
でもアセットの書き出しで書き出した画像が（特にjpg）なぜか粗い。ジャギー？ノイズのような、大きい画像を縮小した時のような感じで画質が悪くなるのです。
書き出し画像の画質を改善する方法（アセットの書き出し）
原因はIllustratorの書き出しの設定にありました。以下、書き出し画像の画質を改善する方法です。
アセットの書き出しパネルの場合、右上のメニューから「形式の設定...」を選択します。
またはファイル＞書き出し＞スクリーン用に書き出しから、フォーマットの右端にあるギアアイコンをクリックします。
形式の設定を選択できるウィンドウが開きます。左側のファイル形式ごとにオプションを設定することできます。
JPG80のオプションを見てみると、アンチエイリアスは「文字に最適（ヒント）」になっています。
「アンチエイリアス」を「アートに最適（スーパーサンプリング）」に変更します。
これで再度画像を書き出してみると・・・ジャギーがなくなり、画像が粗いのが改善されました。
Web用に保存での解決方法
古いバージョンだとアセットの書き出しではなく、「Web用に保存」しかない場合があります。その場合は画像サイズの下のプルダウンで「アートに最適」を選ぶことができます。
書き出した画像サイズが大きくなる、1pxずれる問題の対処法
こちらは昔からあった問題でアセットの書き出しだけでなく、Web用に保存でも起きる問題。
書き出した画像が作ったサイズより1px大きかったりずれる問題です。例えば、Width 250px / Height 100px の画像を作りたいのに Widht 251px / Height 101pxの画像になってたりする。。。とってもモヤモヤします。^^;
Illustratorには「ピクセルを最適化」という機能がありますがこれで最適化してもずれる場合があります。
2023年現在では「ピクセルグリッドに最適化」
※バージョンによって名称が違うようです。少し前は「ピクセルグリッドに整合」、illustrator2023では「ピクセルグリッドに最適化」という機能になっています。
サイズが大きくなる、1pxずれるモヤモヤを解決する方法
大したことじゃないのですが、アセット書き出ししたい画像のXY座標を整数に調整します。
アセットの書き出しをしたい画像を選択し、変形パネルで、X、Yの値が0コンマ以下が出ないように位置を調整します。（位置調整する前に「ピクセルを最適化」はやっておいたほうが良い）
変形パネルを開いてみると、X,Y座標の数値が小数点以下まで表示されています。
X座標、Y座標ともピクセル値を整数にしてからアセットの書き出しをすると、想定どおりの画像として書き出しされます。
ちょっと手間がかかるけどスッキリ書き出しするための対処法です。
最新バージョンでは初めからWeb用のアートボードを使っている場合、ずれる現象は少なくなったような印象があります。「ピクセルグリッドに最適化」を行わなくても大丈夫な感じです。
しかし印刷用のデータをWeb用に加工したりという場合はまだ起きる現象のようです。
書き出した画像の色が変わる問題の対処法
Illustrator上で見るのと、画像にした時に色が変わってしまう原因で考えられるのは2つ。
- CMYKデータをRGBで書き出している。またはその逆。
- カラープロファイルの問題
CMYKデータをRGBで書き出している。またはその逆。
基礎知識としてCMYK（シアン、マゼンタ、イエロー、ブラック）のドキュメントは印刷用、RGB（レッド、グリーン、ブルー）は印刷以外の用途で使われます。
カラーモードがRGBのデータをCMYKで書き出した場合、少しくすんだようになります。
「スクリーン用に書き出し」、「Web用に保存」で書き出しをした場合は全てRGBの画像となります。「書き出し形式」を使うとCMYKで書き出すことができます。（JPG,TIFF,PSDなど）
これも元々印刷データとして制作したものをWeb用に加工したりする時に起きやすいことです。ドキュメントのカラーモード、書き出しのカラーモードが一致しているか確認しましょう。
カラープロファイルの問題
二つ目はカラープロファイルの問題です。カラープロファイルは中々理解するのが難しいですがすごーく簡単にいうと色の再現性をまとめたデータ？でしょうか。
カラープロファイルによって違う環境でもカラーを再現することができるのだと思います。（私なりの解釈です）
RGBの場合「sRGB IEC61966-2.1」というのがプリンターやカメラなどでも採用されている標準的なプロファイルです。CMYKでは「Japan Color 2001 Coated」です。
色がおかしいなと感じた時はカラープロファイルを確認してみると解決するかもしれません。カラープロファイルの設定はIllustratorの編集＞プロファイル設定から行えます。
特に印刷屋さんへデータ入稿する場合、カラープロファイルの扱いは印刷屋さんによって違うので確認した方が良いです。カラープロファイルを埋め込まないでと言われることもあります。
まとめ
以上、Illustratorで画像の書き出しをする際に起きる問題についてまとめました。
- 書き出した画像の画質が悪いときは、書き出しオプションのアンチエイリアスの設定を変更する
- 書き出した画像サイズがずれたり、ぼやけたり大きくなったりする場合はピクセルグリッドの最適化、座標の調整をする
- 書き出した画像の色が変わってしまう場合、カラーモード、カラープロファイルの設定を確認する
というようなことで解決できると思います。参考になれば幸いです。
