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

イラストレーター 書き出しで画質が悪い時の対処法

2019-07-02

本記事にはプロモーションが含まれています。

イラストレーター 書き出しで画質が悪い時の対処法

Adobe Illustratorでpngやjpg画像を書き出しをした時に画質が悪くなったり、なぜかジャギジャギした粗い画像になったりしたことはありませんか?

この記事ではIllustratorの書き出しで画像が粗くなってしまう問題の解決方法について解説します。

同じくIllustratorの書き出しで画像サイズが大きくなったり、1pxずれる問題の対処法はこちらの記事が参考になります。

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

昔からあったのですが、Illustratorで、画像を書き出す時に書き出した画像が作ったサイズより1px大きかったりずれる問題です。 例えば、300px × 250pxのバナー画像を作りたいのにWid ...

続きを見る

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の書き出し種類と特徴

PNG・JPGに書き出しすると画質が悪い、ジャギーができる問題の対処法

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

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

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

書き出し画像の画質を改善する方法(アセットの書き出し)

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

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

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

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

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

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

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

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

Web用に保存では「アートに最適」を選ぶ

古いバージョンだとアセットの書き出しではなく、「Web用に保存」しかない場合があります。その場合は画像サイズの下のプルダウンで「アートに最適」を選ぶことができます。

まとめ

以上、Illustratorで画像の書き出しをする際に画質が悪くなってしまう問題についてまとめました。

書き出した画像の画質が悪いときは、書き出しオプションで「アートに最適」を選択する

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

同じようにIllustratorで書き出しすると、画像が1px大きくなる問題はこちらで詳しく解説しています。

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

昔からあったのですが、Illustratorで、画像を書き出す時に書き出した画像が作ったサイズより1px大きかったりずれる問題です。 例えば、300px × 250pxのバナー画像を作りたいのにWid ...

続きを見る

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

  • エックスサーバー
    利用料最大30%キャッシュバッグ月額693円&ドメイン永久無料 - 2024年5月1日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年4月19日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

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