
イラレで書き出すと画像が荒い気がする・・
Adobe Illustrator(イラレ)で画像を書き出したときに「なんかぼやけてる…」「画質が悪くなる」と感じたことはありませんか?
この記事では、高解像な画像をきれいに書き出す方法を、初心者にもわかりやすく解説します。
イラレで書き出すと画質が悪くなる原因3選
なぜイラレで書き出すと画質が悪くなるのか?
- 解像度が72ppiのまま書き出している
- スケール(倍率)が低いまま書き出している
- アートボードが大きすぎて、実サイズより拡大されて表示されている
多くの方がデフォルト設定のまま書き出しており、「高解像度=データが重い」→「画質が悪くなる」と誤解してしまっています。
実は、設定さえ正しければ、Illustratorからでも超くっきり&高精細な画像をWEB用に書き出せます。
イラレでWeb用に高解像画像を書き出す手順【PNG/JPEG対応】
バナーやサムネイル用にweb上で使うpng、jpg画像を高解像で書き出す手順を解説します。
ステップ①:ファイル → 書き出し形式 を選ぶ
上部メニュー「ファイル」→「書き出し」→「書き出し形式」


次に、保存場所と名前を入力し、「PNG」または「JPEG」を選択


ステップ②:書き出しオプションを最適化
jpgの場合


pngの場合


項目 | 推奨設定 | 補足 |
---|---|---|
解像度 | 300 ppi | Webでも高精細表示される |
アンチエイリアス | 「アートに最適」 | 文字や図形のにじみを軽減 |
背景(pngの場合) | 透過 or 白 | 使用用途に応じて調整 |
- ピクセルサイズそのまま+ppiを上げると、物理サイズが小さくなって密度=画質が向上します。
- ブログなどでは横幅600px〜1200px程度がちょうど良いので、アートボードもそれに合わせて設計するのがベスト。
補足テク:Photoshopでppiだけ変更する方法



実際にこの方法でやってます
アートボードを実寸で作っている場合、イラレで300ppiで書き出すとサイズが大きくなってしまうのが問題でした。
かといって72ppiだとサイズは実寸のままですが、やはり画質は粗くなってしまいます。
そのため300ppi高解像度で書き出したあと、Photoshopでサイズを戻すというやり方をしています。
やり方
- Photoshopで画像を開く
- 「イメージ」→「画像解像度」
- ✅「再サンプル」のチェックを外す
- 解像度を72ppiに変更 → ピクセル数は維持され、見た目サイズだけ変わります
メリット | 説明 |
---|---|
✅ 画質はそのまま | ピクセル数(px)は変えないので、画像の細かさは損なわれない |
✅ ファイル用途に合わせてppiだけ調整できる | Webなら72ppi、印刷なら300ppiなど、後から調整が柔軟にできる |
✅ アートボードやデザインをいじらなくていい | Illustrator側の設計や構成を一切変えずに済む |
印刷用に高解像度で画像を書き出すには?
「イラレで印刷用の画像を書き出したら、画質が悪くてぼやけた…」
そんな悩みを防ぐには、以下の3つのポイントを意識しましょう。
✅ ① 解像度は必ず「300ppi以上」に
印刷物は72ppiでは確実に荒れます。
最低でも300ppi、こだわるなら350〜600ppiでの書き出しをおすすめします。
✅ ② ファイル形式は用途で使い分け
形式 | 用途 |
---|---|
チラシ/名刺/ポスターなど印刷所入稿用に最適 | |
TIFF | フチなし印刷・CMYKカラー・非圧縮が必要な場合 |
JPEG | 写真印刷や軽量データ送付用(高画質設定必須) |
✅ ③ 書き出し手順(PDFの場合)
- 「ファイル」→「別名で保存」→形式:Adobe PDF(.pdf)
- 「Adobe PDFプリセット」で「高品質印刷」を選択
- 【重要】「圧縮」タブで以下を確認:
- 「画像のダウンサンプル」→オフ or「300ppi以上」
- カラーモードは「CMYK」(印刷所指定があればそれに従う)
✅ その他の印刷用Tips
- 「効果メニュー → ドキュメントのラスタライズ設定」も300ppi以上に変更しておくと安心
- 「トンボと裁ち落とし」を設定してから書き出すと、印刷ずれのリスクが減ります
印刷物でもイラレ書き出しで画質を落とさないコツ
チェック項目 | 理由 |
---|---|
アートボードのサイズはmm単位で確認 | 実寸と印刷精度が一致しているか確認するため |
解像度は300ppi以上に設定 | 印刷に適した細密表現ができるため |
CMYKカラーモードで作成する | RGBだと色味がズレる可能性がある |
フォントはアウトライン化する | 印刷所で文字化けを防ぐため |
WEBと印刷、両対応したいときは?
「一つの画像でWebでも印刷でも使いたい」という場合は、
- アートボードを小さめに設計(実寸)
- 300ppiで書き出し
- 必要に応じてPhotoshopでppiだけ下げてWeb用に変換
このように使い分けると、画質を落とさず両方に対応できます。
【まとめ】印刷もWebも、画質で損しないイラレの書き出し術
「イラレ 書き出し 画質悪い」と感じたら、解像度・スケール・形式の見直しを!
正しい設定さえすれば、プロ仕様の高画質画像が誰でも書き出せます。
よくある質問(FAQ)
- ブログで使う画像に300ppiは必要ですか?
-
画質を優先したいなら必要です。 ただし、72ppiに変更してもピクセルサイズが十分大きければ見た目は問題ありません。
- スマホで見ると画像がにじむのはなぜ?
-
Retinaディスプレイは高密度表示なので、低解像度画像は荒く見えがちです。300ppiでの書き出しが推奨されます。
【まとめ】イラレで画質が悪くなるときの対策
「イラレで書き出すと画質悪い・・・」と感じたら、解像度・スケール・形式の見直しを!
正しい設定さえすれば、プロ仕様の高画質画像が誰でも書き出せます。
問題 | 解決策 |
---|---|
書き出した画像がぼやけてる | 解像度を300ppi、スケールを100%以上に設定 |
サイズを変えたくない | Photoshopでppiだけ調整(再サンプルOFF) |
画質を保ちつつファイルサイズを抑えたい | 小さめアートボード+高解像度書き出し |
コメント