PR|3日で初案件

イラレ書き出し解像度は3種類|Web・印刷・納品を正しく設定

◆ ◆ ◆

Home › フリーランスの仕事術 › イラレ書き出し解像度は3種類...

FREELANCE CAREER GUIDE
フリーランスの仕事術
イラレ書き出し解像度は3種類|Web・印刷・納品を正しく設定
フリ転。

Illustratorの書き出し解像度は、Web用72ppi・印刷用300ppiが基本です。用途を間違えるとぼやけや粗さが発生します。この記事では形式別の設定手順からぼやける原因の切り分け、納品前チェックまで解説します。

▼ 2問・30秒の診断で、あなたに合う働き方をチェック

目次

この記事でわかること

この記事を読むと、3つのことが分かります。Web・印刷・SNSの用途別に72・150・300ppiを正しく選べるようになること。ぼやける原因を「配置画像の実効解像度」「ラスタライズ効果設定」「引き伸ばし」の3パターンで切り分けられること。納品前5分のチェックで差し戻しをゼロにする手順を身につけられること。

30秒診断全2問・あなたに合う働き方のタイプが分かります

Q1. 今のデザインの仕事で、一番近い悩みは?

この記事の結論

Illustratorの書き出し解像度は「用途」と「形式」の2軸で決まります。Web・SNS用はピクセル寸法を優先して72〜150ppiを選び、印刷用は300ppiを基本としつつ印刷会社の入稿仕様を必ず最優先にしてください。書き出し設定だけを変えても配置画像の元の品質は変わりません。ぼやけが発生したときは解像度の数値だけでなく、素材自体の品質を確認することが最初の一手です。

今日やるべき1つ

次の書き出し時に「ファイル→書き出し→書き出し形式」を開き、Web用は72〜150ppi・印刷用は300ppiを選択して書き出してください(5分)。

状況別ショートカット

状況読むべきセクション所要時間
基本の設定手順を確認したいイラレ書き出しは3ステップで完了3分
72・150・300ppiの違いを知りたい解像度は用途で72・150・300ppiを選ぶ3分
ぼやける・粗くなる原因を調べたいぼやけは3原因で切り分ける5分
自分の状況に合う設定を診断したい書き出し設定は4分岐で診断3分
JPEG・PNG・PDFの使い分けを知りたい形式は用途で3種類を使い分ける3分
納品トラブルを防ぎたい納品前は5項目で品質チェック5分
解像度管理を効率化したい書き出し解像度管理は5つの仕組みで解決5分

イラレ書き出しは3ステップで完了

イラレ書き出しは3ステップで完了書き出し操作はメニューの階層が深く、初めて使う方には入口が分かりにくい箇所です。手順を把握しておくと、次回から迷わず設定に進めます。基本操作は3ステップで完了します。

書き出しの入口は「書き出し形式」を選ぶ

「ファイル」メニューから「書き出し」を選ぶと、「書き出し形式」と「スクリーン用に書き出し」の2つが表示されます。解像度を自分で指定したい場合は「書き出し形式」を選んでください。「スクリーン用に書き出し」はピクセル等倍やスケール倍率で指定する方式のため、ppi数値を直接入力する「書き出し形式」が基本操作として広く使われています。

フォーマットをJPEGまたはPNGなど目的に応じて選択すると、次のステップで詳細なオプション画面が開きます。「書き出し」ボタンをクリックした後、解像度やカラーモードを設定するダイアログが表示されるので、ここで数値を入力してください。

JPEGオプションの設定箇所は4か所

JPEGの書き出しオプション画面では、カラーモード・圧縮方式・品質・解像度の4か所を確認します。Web向けであればカラーモードはRGB、解像度はスクリーン(72ppi)を選択してください。品質スライダーは1〜10の範囲で設定でき、数値が高いほど画質が上がりファイルサイズも増加します。印刷向けであればカラーモードをCMYK、解像度を300ppi(またはカスタム入力)に変更します(IllustratorからJPEGを書き出す設定例)。

カラーモードと解像度を用途に合わせて同時に変更することが、書き出し品質の最初の分岐点です。この2か所を見落とすと、Web用のデータが意図せずCMYKカラーになったり、印刷用データが72ppiのまま納品されるミスが発生します。

PNGオプションは解像度とカラーとアンチエイリアスを確認

PNGの書き出しオプションでは、解像度・カラー設定・アンチエイリアス・透明背景の4つを確認します。透明背景を維持するには「背景色」を「透明」に設定してください。アンチエイリアスは「アートとデザイン向け最適化(アンチエイリアス)」を選ぶと、テキストやパスのエッジが滑らかに書き出されます。ロゴや線画など背景透過が必要な素材はPNGが適切な形式です(Web用JPEG・PNGの画質と圧縮設定)。

透明背景が必要な場面でJPEGを選んでしまうと、白背景が自動的に合成されて書き出されます。形式の選択ミスはアンドゥでやり直せますが、納品直前に気づくと時間をロスします。書き出し前に形式と透明設定を確認する習慣をつけておいてください。

画像圧縮で画質落とさない方法はIllustratorだけでなくPhotoshopや専用ツールでも活用できるため、納品前の最終工程として参照しておくと重複作業を減らせます。

CHECK

▶ 今すぐやること: 「ファイル→書き出し→書き出し形式」を開き、形式(JPEG/PNG)・カラーモード・解像度の3か所を確認してください(3分)

Q: 「書き出し」と「別名で保存」は何が違いますか?

A: 「別名で保存」はAI・EPS・PDFなどIllustrator系形式への保存に使います。JPEG・PNG・SVGなどラスター・Web形式への変換は「書き出し→書き出し形式」から行ってください。

Q: アートボード全体を書き出すにはどう設定しますか?

A: 書き出しオプションで「アートボードを使用」にチェックを入れると、アートボード範囲のみが書き出されます。チェックがないとアートワーク全体のバウンディングボックスが範囲になる場合があるため、余白が含まれてしまうときはこの設定を確認してください。

解像度は用途で72・150・300ppiを選ぶ

解像度は用途で72・150・300ppiを選ぶ「Webは72ppi、印刷は300ppi」という数字は知っていても、実際の判断基準が分からず迷う場面があります。数値の意味と使い分けの理由を整理しておくと、設定の迷いが減ります。

72ppiはWeb向けの基本設定だが最終寸法で判断する

72ppiはスクリーン表示を想定した従来の基準値で、Illustratorの「スクリーン(72ppi)」オプションがこれに対応しています。ただし、Web用途では解像度の数値そのものより「最終的に何ピクセルで表示されるか」を優先して考えることが実務上の正しい判断です。バナー画像を幅1,200pxで書き出したい場合、アートボードの実寸サイズと書き出し後のピクセル数が合っているかを確認する方が、72ppiという数値にこだわるよりも確実です。

SNS向け画像の場合は、各プラットフォームが推奨するピクセルサイズ(Instagramの正方形投稿は1,080×1,080px推奨)に合わせて書き出すことが優先されます。72ppiで書き出して推奨ピクセル数に届いているなら問題なく、足りなければ解像度を上げるかアートボードサイズを大きくして対処してください。

150ppiはWeb大判とSNSを同時に対応できる中間値

150ppiはWeb用の72ppiと印刷用の300ppiの中間に位置する設定値で、ポスターのオンライン掲載用やECサイトの商品画像など、大きめのサイズで表示されるWeb画像に向いています(書き出し後の画質低下の原因と解像度目安)。72ppiでは粗く見えるが300ppiにするとファイルサイズが重くなりすぎる、というケースの妥協点として選ばれることが実務では多い設定です。

150ppiを選ぶ場合もピクセル寸法の確認が前提です。書き出し後に実際のピクセル数をPhotoshopや画像ビューアで確認する手順を踏んでください。

300ppiは印刷・入稿の基準だが印刷会社の指定が最優先

印刷向けの解像度は300ppiが広く使われている基準値です。ただし、印刷会社や入稿先ごとに指定値が異なる場合があり、「350ppi指定」や「モノクロの細線・線画部分は1,200ppi」という要件を設ける会社も存在します。300ppiは「印刷会社から特に指定がない場合の基本値」として扱い、入稿前に必ず発注先の入稿ガイドを確認することを最優先にしてください。

300ppiで書き出したデータを印刷に出したところ、発注先から「弊社は350ppi以上をお願いしています」と差し戻しを受けたケースがあります。数値を1つ覚えるより、入稿先を決めた時点でその会社のガイドラインを手元に置く習慣が確実です。画像トリミング無料サイトなどを活用してサイズ調整する際も、同じく解像度の確認を忘れないようにしてください。

CHECK

▶ 今すぐやること: 次の印刷入稿前に発注先の入稿ガイドをダウンロードし、解像度・カラーモード・裁ち落としの指定値を確認してください(5分)

Q: ppiとdpiは同じですか?

A: 意味は近いですが厳密には異なります。ppi(pixels per inch)はモニター表示でのピクセル密度、dpi(dots per inch)はプリンターの印刷解像度を示します。IllustratorやPhotoshopの書き出し設定では「ppi」が使われますが、印刷の入稿仕様書では「dpi」と表記される場合もあります。実務上は同じ数値として扱われることが多いため、「300dpi指定」と書いてあれば「300ppiで書き出す」と判断して問題ありません。

Q: 解像度を高くするとファイルサイズはどのくらい増えますか?

A: 解像度を2倍にするとピクセル数は縦横それぞれ2倍になり、ファイルサイズは約4倍になります。72ppiから300ppiへ変更すると、単純計算でファイルサイズは約17倍になります。Web用には必要以上に高い解像度を避け、用途に合わせた数値を選んでください。

ぼやけは3原因で切り分ける

ぼやけは3原因で切り分ける「300ppiで書き出したのに文字や画像がぼやけている」という状況に直面すると、何を修正すべきか分からず手が止まります。ぼやけの原因は1つではなく、3つのパターンに分けて確認することで、素早く対処できます。

配置画像の実効解像度が不足している場合は解像度を上げても改善しない

Illustratorに配置した画像(JPEGやPNGなど)は、アートボード上での表示サイズと元画像のピクセル数から「実効解像度」が決まります。元画像のピクセル情報量は書き出し設定を変更しても増加せず、書き出しオプションで300ppiを選んでも配置画像の実質的な品質は変わりません(配置画像とラスタライズ効果の解像度の関係)。

実効解像度を確認するには、Illustrator上でリンクパネルまたは「ドキュメント情報」を参照します。元画像の実効解像度が300ppiを下回っている場合、書き出し解像度を上げても内部的な情報量は増えないため、ぼやけは解消しません。解決策は、より高解像度の元素材を再入手するか、アートボード上での配置サイズを小さくして実効解像度を上げることです。「解像度の数値を上げれば品質が上がる」という誤解は実務上最もよく見られます。まずここを疑うことが正しい切り分けの順序です。

ラスタライズ効果の解像度は書き出し設定とは別に管理する

ぼかし、ドロップシャドウ、光彩、グロー効果などのラスタライズ効果は、書き出し時の解像度とは別に「効果」メニュー内の「ドキュメントのラスタライズ効果設定」でレンダリング解像度が管理されています。この設定が72ppiのまま書き出し解像度だけを300ppiにしても、効果部分は72ppiの粗さで描画されます。

印刷用データでドロップシャドウなどを使う場合は、ドキュメントのラスタライズ効果設定を300ppi(または高品質)に変更してから書き出してください。変更後にIllustratorが効果を再レンダリングするため、作業中の表示が一時的に遅くなる場合があります。「書き出しは300ppiなのに効果だけ粗い」という症状は、この設定の見落としが原因です。

アートボードより大きく引き伸ばして書き出すと解像度が実質的に下がる

アートボードのサイズよりも大きいピクセル数で書き出す場合、Illustratorは内部でアップスケール処理を行います。A4サイズ(210×297mm)のアートボードを72ppiで設定し、出力サイズを大幅に高い解像度に指定して書き出すと、ベクターオブジェクトは問題なく拡大されますが、配置画像やラスタライズ効果は引き伸ばされてぼやけます。

書き出し解像度をアートボードの物理サイズと目標ピクセル寸法から逆算して設定してください。目標ピクセル幅÷アートボード幅(インチ換算)=必要解像度で計算できます。A4幅(8.27インチ)で3,000px幅の書き出しが必要なら、3,000÷8.27≒363ppiが必要な設定値です。この計算を事前に行うことで、「書き出し後に足りなかった」という再書き出しを防げます。

CHECK

▶ 今すぐやること: 問題のあるファイルを開き、効果メニュー→ドキュメントのラスタライズ効果設定を確認し、数値が72ppiになっていないかチェックしてください(3分)

Q: 書き出し後にPhotoshopで確認すると解像度が違う数値になっているのはなぜですか?

A: IllustratorとPhotoshopでは解像度の扱い方が異なる場合があります。書き出したJPEG・PNGをPhotoshopで開いたとき、解像度の数値が書き出し設定と異なって表示されることがありますが、ピクセル数(幅×高さのpx数)が目標通りであれば実用上問題ありません。最終的に確認すべきはppiの数値よりも総ピクセル数です。

Q: 解像度の設定をしても書き出しファイルのサイズ(幅・高さのpx)が変わらないことがあります。なぜですか?

A: アートボードのサイズを基準にピクセル数が計算されるため、アートボードが小さいと300ppiに設定しても出力ピクセル数が想定より少なくなる場合があります。アートボードのサイズ(mm・cmなどの実寸)と解像度の数値を掛け合わせてピクセル数を事前に計算してから書き出してください。

書き出し設定は4分岐で診断

書き出し設定は4分岐で診断自分のプロジェクトにどの設定が適切か判断するために、以下の質問に答えてください。適切な設定の組み合わせを3分で特定できます。

Q1: 書き出したデータの最終用途はどれですか?

Webサイト・アプリの場合はQ2へ進んでください。印刷・入稿の場合はQ3へ進んでください。SNS・デジタルプレゼンの場合はResult Cです。クライアントへのデータ納品(用途が混在)の場合はResult Dです。

Q2: Web用データとして、透明背景が必要ですか?

必要(ロゴ・アイコン・切り抜き素材)の場合はResult Aです。不要(バナー・背景あり画像)の場合はResult Bです。

Result A: Web用・透明背景あり → PNG + RGB + 72〜150ppi

書き出し形式はPNGを選択し、カラーモードはRGB、解像度は表示するサイズのピクセル寸法に応じて72〜150ppiを設定してください。透明背景を活かすため、PNGオプションで「背景色:透明」を確認してください。

Result B: Web用・背景あり → JPEG + RGB + 72〜150ppi

JPEGで書き出し、カラーモードをRGB、解像度を72〜150ppiに設定します。品質スライダーは8〜10程度が実務での目安です。品質を10にしても視覚的な差よりファイルサイズの増加が大きくなります。

Result C: SNS・デジタルプレゼン → PNG or JPEG + RGB + プラットフォーム推奨pxに合わせる

解像度の数値よりも各プラットフォームの推奨ピクセルサイズへの適合を優先してください。書き出し後にプラットフォームが自動圧縮することが多いため、推奨サイズより大幅に大きな解像度で書き出すと圧縮劣化が目立つ場合があります。

Result D: 用途混在のクライアント納品 → 用途別に複数ファイルで納品

AI(元データ)・高解像度PNG or JPEG(Web用)・印刷用PDF(印刷用)の3種類に分けて納品してください。1ファイルですべての用途を満たそうとすると、どの用途でも最適でない設定になりがちです。納品データを3種類に分けてクライアント対応を効率化する方法についての考え方は、解像度管理と合わせて習得しておくと実務のスピードが上がります。

Q3: 印刷用途として、入稿先の仕様書を確認しましたか?

確認済みの場合は、その仕様書の指定値を最優先にして書き出してください。未確認の場合は、入稿先に問い合わせて仕様書を入手してから書き出してください(300ppiは暫定値です)。

CHECK

▶ 今すぐやること: 今抱えているプロジェクトのResult(A〜D)を特定し、対応する形式・カラーモード・解像度の組み合わせをメモしてください(3分)

Q: クライアントから「高解像度で書き出してください」と言われましたが、何ppiにすればよいですか?

A: 「高解像度」は明確な定義がないため、クライアントに「印刷用ですか、Web用ですか」「最終的な出力サイズは何cmまたは何pxですか」「印刷の場合は入稿先はどちらですか」の3点を確認してください。その回答によって適切なppiが決まります。確認せずに300ppiで書き出すと、Web用途では不必要に重いデータになります。

Q: 「アートボードを使用」のチェックを入れると複数アートボードを個別に書き出せますか?

A: はい。複数アートボードがある場合、「アートボードを使用」にチェックを入れると各アートボードが個別ファイルとして書き出されます。特定のアートボードだけを書き出す場合は、範囲指定のオプションで番号を入力してください。

デザインツールを仕事で使えるようになりたい方へ

Photoshopの全工程の解説動画をLINEで受け取る

LINEで無料で届くもの

  • 全工程Photoshopの解説動画
  • 20本Webデザインの無料レッスン
  • 4本限定のPDF・動画
3日で初案件

登録1分・情報収集だけでもOK・セミナー参加は自由

タップするとLINEの友だち追加画面が開きます

LINE登録のよくある質問
お金はかかりますか?
LINEの登録と、届くレッスン・動画・PDFは無料です。
どんな連絡が来ますか?
レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
やめたいときは?
LINEでブロックすれば、それ以上は届きません。

PR提供: 日本デザインスクール(デザスク)

形式は用途で3種類を使い分ける

形式は用途で3種類を使い分けるJPEGとPNGの使い分けに迷う場面は、デザインを始めた頃に誰もが経験することです。形式の選択は解像度の設定と同じくらい仕上がりに影響します。

JPEGは写真・グラデーション向けで圧縮率を調整できる

JPEGは写真やグラデーションを多く含むデザインに向いており、品質スライダーで圧縮率を調整できる点が特徴です。透明背景を持てないため、背景が必要なバナーや写真系のWeb画像に適しています。品質8〜10の設定では視覚的な劣化は最小限に抑えられますが、品質7以下では圧縮アーティファクト(ブロック状の劣化)が目立ち始めます。

JPEGを選んではいけないケースとして、ロゴの透明背景が必要な場面・文字が多くエッジのシャープさが重要な場面・同一ファイルを何度も再保存する場面の3つがあります。JPEGは保存のたびに劣化が蓄積するため、マスターデータは常にAIファイルで保管し、JPEGは「最終出力専用」として扱ってください。

PNGはロゴ・アイコン・透明背景が必要な場面に使う

PNGは可逆圧縮のため、保存と開封を繰り返しても画質が劣化しません。透明背景を扱えるため、複数の背景に重ねて使うロゴやアイコン、UIパーツに最も適した形式です(透過PNGの書き出しと解像度の目安)。

一方で、写真や多色グラデーションをPNGで書き出すとファイルサイズがJPEGより大幅に増加する場合があります。Webページへの埋め込みでは表示速度への影響が出るため、写真はJPEG・ロゴや線画はPNGと使い分けることが実務での基本的な判断基準です。「迷ったらPNG」という選び方は品質面では安全ですが、ファイルサイズの観点で非効率になるケースがあることも覚えておいてください。画像圧縮ツールでPNGを軽量化する方法も合わせて確認しておくと、Web向け納品の品質管理が安定します。

PDFは印刷・入稿向けでカラー・裁ち落とし・圧縮の3か所を確認

PDFはIllustratorの「別名で保存」または「書き出し→書き出し形式」から出力できます。印刷・入稿用途ではPDF/X-4やPDF/X-1aなど印刷向けプリセットを使うことが多く、カラーモード(CMYK)・画像圧縮設定・裁ち落とし(通常3mm)・トンボの有無を確認してから書き出してください(IllustratorのPDF印刷・Web設定の解説)。

PDFに埋め込まれる画像の解像度は、書き出しダイアログの「圧縮」パネルで変更できます。印刷用途では「画像のダウンサンプリング」をオフにするか、300ppi以上を維持する設定を選択してください。PDFを「確認用・閲覧用」として送る場合は、ダウンサンプリング設定を72〜150ppiに下げてファイルサイズを削減することで、メール添付やクラウド共有がしやすくなります。

CHECK

▶ 今すぐやること: 現在のプロジェクトで書き出す形式(JPEG・PNG・PDF)を1つ選択し、上記の用途基準と照合して形式が適切かを確認してください(2分)

Q: SVGはどのような場合に使いますか?

A: SVGはベクターデータをそのまま出力するため、解像度に依存しない形式です。Webサイト上でアイコンやロゴをあらゆる画面サイズで鮮明に表示したい場合に向いています。IllustratorからSVGで書き出す場合は「書き出し→書き出し形式」からSVGを選択してください。ラスタライズ効果や配置ラスター画像はSVG内にラスターとして埋め込まれるため、それらを多用したデータには向きません。

Q: PNG-8とPNG-24の違いは何ですか?

A: PNG-8は256色まで、PNG-24はフルカラー(約1,677万色)です。アイコンや2〜3色のシンプルなロゴはPNG-8でファイルサイズを抑えられますが、グラデーションや多色のイラストはPNG-24が適切です。Illustratorの「書き出し形式」ではPNG(PNG-24相当)が出力されます。

納品前は5項目で品質チェック

納品前は5項目で品質チェッククライアントへの納品後に「形式が違う」「解像度が足りない」と差し戻しを受けると、時間のロスが大きくなります。納品前5分のチェックで、こうしたトラブルの大半を防げます。

解像度とピクセル寸法を同時に確認する

書き出し後のファイルをFinderまたはエクスプローラーの「情報を見る」で確認し、ピクセル寸法(幅×高さのpx数)が指定通りであるかを最初に確認します。解像度の数値だけでなくピクセル寸法を確認することで、「300ppiで書き出したが実際のピクセル数が足りなかった」というミスを防げます。

Photoshopで確認する場合は「イメージ→画像解像度」で解像度とピクセル寸法の両方が表示されます。納品先からピクセル寸法の指定を受けている場合は、解像度よりもピクセル数を優先して確認してください。

カラーモードの確認はRGB/CMYKの混在を防ぐ

Web納品データがCMYKで書き出されていたり、印刷入稿データがRGBのままだったりするミスは、書き出しオプションでカラーモードを変更し忘れることで起きます。書き出し後のファイルをPhotoshopで開いて「イメージ→モード」を確認するか、Macであればプレビュー.appの「ツール→インスペクタを表示」でカラープロファイルを確認できます。

書き出し前に「ファイル→ドキュメントのカラーモード」でRGBまたはCMYKを確認する習慣をつけてください。用途と一致しているかを確認してから書き出すことで、カラーモードのミスを最小化できます。

入稿用PDFは裁ち落とし・トンボ・フォントの埋め込みを確認

印刷会社への入稿用PDFでは、裁ち落とし(通常3mm)が設定されているか、トンボが含まれているか、フォントが埋め込まれているかの3点を確認してください(IllustratorのPDF書き出し最適設定の解説)。フォントの埋め込みが欠けていると、印刷会社の環境でフォントが置き換わりレイアウトが崩れる場合があります。

PDF書き出し後にAcrobat Reader(無料)でPDFを開き、「ファイル→プロパティ→フォント」タブでフォントの埋め込み状況を確認する手順を納品フローに組み込んでおくと、入稿後の差し戻しを大幅に減らせます。「フォントのサブセット埋め込み」ではなく「埋め込み」となっていることを確認してください。フリーランスとして納品完了メールの送り方も合わせて整備しておくと、クライアントとのやり取りがスムーズになります。

CHECK

▶ 今すぐやること: 次の納品ファイルを書き出したあと、ピクセル寸法・カラーモード・(PDF時はフォント埋め込み)の3点をチェックリストに記録してください(5分)

Q: クライアントから「AIデータも一緒に納品してください」と言われた場合、解像度はどう設定すればよいですか?

A: AIデータ(Illustratorのネイティブ形式)は解像度の概念が直接適用されません。配置画像が含まれている場合は、「リンクを埋め込む」処理を済ませてから納品するか、リンク画像を一緒に添付してください。書き出し解像度の設定が必要なのはJPEG・PNG・PDFなどのラスター・変換形式のみです。

Q: 書き出したPNGをWindowsで確認したら色が違って見えました。なぜですか?

A: カラープロファイルの埋め込み有無や、OSのカラーマネジメントの違いが原因です。Illustratorの書き出しオプションで「ICCプロファイルの埋め込み」をオンにすると、プロファイルを理解する環境では意図した色で表示されやすくなります。色の確認はプロファイル対応の環境で行ってください。

書き出し解像度管理は5つの仕組みで解決

書き出し解像度管理は5つの仕組みで解決毎回の書き出しで設定を最初から考えていると、確認漏れやミスが積み重なります。以下のハックを導入することで、解像度設定の判断コストを下げ、再書き出しの頻度を減らせます。

ハック1: 書き出しプリセットを用途別に3種類作成して確認漏れをゼロにする

【対象】: 複数クライアントに異なる形式・解像度で納品するフリーランスデザイナー

【手順】: Illustratorの「ファイル→書き出し→書き出し形式」を開き、設定を「Web用PNG・RGB・150ppi」に合わせて書き出す操作を1回通しで実行します(5分)。同様に「印刷用JPEG・CMYK・300ppi」「PDF・印刷用プリセット」の設定も書き出し操作を実行し、各設定の手順をメモまたはスクリーンショットで記録します(10分)。記録した設定を「書き出しチェックシート」としてGoogleドキュメントやNotionに保存し、次回から書き出し前にそのシートを開いて照合します(5分)。

【コツと理由】: 設定を記憶に頼ると、急いでいるときにカラーモードや解像度の変更を忘れるリスクが常に発生します。シートを用いれば、設定の確認が「思い出す作業」から「照合作業」に変わり、判断コストが下がります。

【注意点】: IllustratorにはPhotoshopのような「アクション」による書き出し自動化は限定的なため、設定を自動保存しようとして時間をかける必要はありません。手書きのチェックシートの方が導入コストが低く、クライアントごとの例外設定にも柔軟に対応できます。

ハック2: 書き出し前のピクセル寸法を逆算して再書き出しを防ぐ

【対象】: Web・SNS向けに特定のピクセルサイズで書き出しが必要なデザイナー

【手順】: 納品先から指定されたピクセル寸法(例: 幅1,200px)を確認します(1分)。Illustratorのアートボード幅を「ウィンドウ→ドキュメント情報」またはアートボードパネルで確認し、インチ換算します(1インチ=25.4mm)(2分)。「目標px数÷アートボード幅(インチ)」で必要な解像度を計算し、書き出しオプションに入力して書き出します(3分)。

【コツと理由】: 実務では「最終的に何pxになるか」を逆算から設定した方がうまくいきます。固定のppi値に頼ると、アートボードサイズが異なるプロジェクトで毎回ピクセル数が変わり、確認と再書き出しが繰り返されます。逆算で設定すれば、1回の書き出しで目標ピクセル数に到達できます。

【注意点】: 計算式で出た解像度が整数でなくなる場合(例: 362.3ppi)は、切り上げ(363ppi)で設定しても問題ありません。わずかなピクセル数の過剰は実害なく、切り下げによる不足より安全です。

ハック3: ラスタライズ効果の解像度設定を書き出し前に確認して粗さを防ぐ

【対象】: ドロップシャドウ・ぼかし・光彩などの効果を使ったデータを印刷入稿するデザイナー

【手順】: 「効果」メニュー→「ドキュメントのラスタライズ効果設定」を開きます(1分)。解像度が「スクリーン(72ppi)」になっていれば「高品質(300ppi)」またはカスタムで300ppiに変更します(1分)。変更後に書き出しを実行し、効果部分の書き出し品質を確認用のJPEGまたは画面上で目視チェックします(3分)。

【コツと理由】: 書き出し解像度を300ppiに設定しても、ドキュメントのラスタライズ効果設定が72ppiのままでは、効果部分だけが粗く書き出されます。この2つの設定は連動していないため、両方を確認する習慣が必要です。

【注意点】: ラスタライズ効果設定を300ppiに変更すると、画面上の再レンダリングに時間がかかり、Illustratorの動作が一時的に重くなります。制作中はスクリーン(72ppi)のまま作業し、書き出し直前にのみ変更するワークフローが効率的です。最終書き出し後には設定を72ppiに戻しておくと、次の作業時に意図せず重い状態で動かす問題を防げます。

ハック4: 配置画像の実効解像度を確認して「高解像度設定でも改善しない」問題を事前に防ぐ

【対象】: 写真やラスター素材をIllustratorに配置してから書き出しを行うデザイナー

【手順】: Illustratorで「ウィンドウ→ドキュメント情報」を開き、配置画像の実効解像度を確認します(2分)。実効解像度が目標解像度(印刷用なら300ppi)を下回っている場合、配置画像の表示サイズを縮小するか、より高解像度の元素材に差し替えます(5〜10分)。差し替え後に再度実効解像度を確認してから書き出しを実行します(2分)。

【コツと理由】: 元画像の情報量を書き出し設定で増やすことはできません。実効解像度が300ppiを下回る場合、書き出し後にぼやけた画像をPhotoshopで拡大して確認すると、ピクセルが引き伸ばされた状態になっていることがわかります。「書き出し後に粗い」と気づくより、事前に実効解像度を確認する工程を挟む方が、再書き出しの時間を節約できます。

【注意点】: Illustrator上でのサムネイル表示は常に正確とは限らないため、「画面では問題ない」という判断は避けてください。実効解像度の数値をドキュメント情報で確認することが確実な方法です。

ハック5: 納品データを元データ・Web用・印刷用の3種類に分けてクライアント対応を効率化する

【対象】: 同一デザインを複数用途で納品するフリーランスデザイナー

【手順】: 書き出しを行う前に納品フォルダを「01_元データ(AI)」「02_Web用(PNG/JPEG)」「03_印刷用(PDF)」の3フォルダに分けて作成します(3分)。各フォルダに対応する書き出し設定(Web用はRGB・150ppi、印刷用はCMYK・300ppi・PDF)でファイルを書き出し、フォルダに格納します(10分)。納品時にクライアントへ「フォルダ構成とファイルの用途」を記載したテキストファイルを同封して送付します(5分)。

【コツと理由】: 用途ごとにフォルダを分けて複数のファイルを提供することで、クライアントからの問い合わせや再依頼が減ります。「Webに使いたいが印刷用PDFしかもらっていない」「解像度が足りない」という問い合わせは、最初から用途別に分けて納品することで対処できます。

【注意点】: 元データ・Web・印刷の3分類は最小構成であり、それ以上細かく分けると管理コストが上がります。クライアントが追加で別形式を必要とした場合のみ、そのときに追加対応する方が効率的です。大容量ファイルを送る無料ツールを活用すると、複数フォルダをまとめた状態でも効率よくクライアントへ渡せます。

CHECK

▶ 今すぐやること: 次のプロジェクト開始時に「01_元データ」「02_Web用」「03_印刷用」の3フォルダを作成し、書き出しチェックシートをGoogleドキュメントに1枚作成してください(10分)

Q: フリーランスとして設定を間違えた場合、クライアントへはどう対応すればよいですか?

A: 速やかに正しい設定で再書き出しを行い、修正版のファイルを送付してください。設定ミスの旨を簡潔に伝え、正しいファイルと差し替えを依頼することが最善の対応です。書き出しチェックシートを書き出しフローに組み込むことで、再発を防止できます。

イラレ書き出し解像度を正しく選ぶ:3分で判断できる設定まとめ

Illustratorの書き出し解像度は「Web用72〜150ppi・印刷用300ppi(入稿先指定優先)」の2軸で判断することが基本です。解像度の数値だけを変えても配置画像やラスタライズ効果の品質は変わらないため、ぼやけが発生したときはまず素材の実効解像度と効果の設定を確認してください。JPEG・PNG・PDFの形式は用途と透明背景の有無で使い分け、納品前にピクセル寸法・カラーモードの2点をチェックすることで、差し戻しの大半を防止できます。

設定に慣れると、同じデザインデータから複数の用途向けファイルを短時間で正確に書き出せるようになり、クライアント対応のスピードが上がります。チェックシートと3フォルダ構成の仕組みを作ることで、2回目以降は半分以下の時間で完了できます。

状況次の一歩所要時間
初めて書き出しを設定する「書き出し形式」を開き、形式・カラーモード・解像度の3か所を確認して書き出す5分
ぼやけの原因を調べたい効果メニューのラスタライズ設定とドキュメント情報の実効解像度を確認する5分
複数用途の納品を効率化したい3フォルダ構成と書き出しチェックシートを作成する15分
印刷入稿で失敗したくない入稿先の仕様書を入手し、解像度・カラーモード・裁ち落とし指定値を確認する10分

イラレ書き出し解像度に関するよくある質問

Q: 「スクリーン(72ppi)」「中解像度(150ppi)」「高解像度(300ppi)」の選択肢はどのメニューに表示されますか?

A: JPEG書き出しオプションのダイアログ内「解像度」のドロップダウンメニューに表示されます。「カスタム」を選ぶと任意の数値を入力できます。PNG書き出しでも同様の選択肢が表示されます。

Q: 解像度を600ppiや1,200ppiに設定するのはどのような場合ですか?

A: モノクロの細線・線画・バーコードなど、非常にシャープなエッジが必要な印刷物に使われます。カラー画像では300ppiで十分なケースがほとんどですが、印刷会社の入稿仕様で1,200ppiが指定されている場合は従ってください。通常のデザイン用途で600ppi以上に設定すると、ファイルサイズが大幅に増加するため実用上のメリットはほぼありません。

Q: Retinaディスプレイ対応のWeb画像は何ppiで書き出せばよいですか?

A: Retinaディスプレイ(2倍解像度の場合)に対応するためには、表示サイズの2倍のピクセル寸法で書き出すことが基本対応です。幅600pxで表示する画像であれば、幅1,200pxで書き出してHTMLやCSSで表示サイズを600pxに指定します。ppiの数値を上げるより、ピクセル数を2倍にして書き出す方が確実に対応できます。

【出典・参照元】

IllustratorからJPEGを書き出す設定例

Web用JPEG・PNGの画質と圧縮設定

配置画像とラスタライズ効果の解像度の関係

書き出し後の画質低下の原因と解像度目安

IllustratorのPDF印刷・Web設定の解説

透過PNGの書き出しと解像度の目安

IllustratorのPDF書き出し最適設定の解説

デザインツールを仕事で使えるようになりたい方へ

Photoshopの全工程の解説動画をLINEで受け取る

LINEで無料で届くもの

  • 全工程Photoshopの解説動画
  • 20本Webデザインの無料レッスン
  • 4本限定のPDF・動画
3日で初案件

登録1分・情報収集だけでもOK・セミナー参加は自由

タップするとLINEの友だち追加画面が開きます

LINE登録のよくある質問
お金はかかりますか?
LINEの登録と、届くレッスン・動画・PDFは無料です。
どんな連絡が来ますか?
レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
やめたいときは?
LINEでブロックすれば、それ以上は届きません。

PR提供: 日本デザインスクール(デザスク)

フリ転編集部 jpndesft
フリーランス専門メディア「フリ転。」編集部。独立・案件獲得・税務など、フリーランスが直面する課題をわかりやすく解説することを使命としています。

フリーランスデザイナーのためのキャリア・案件・税務情報をお届けしています

お問い合わせ →

人気キーワード

フリーランスの案件・単価を調べる

フリーランス求人を探す週1〜2日・リモートOKの案件を毎日自動収集職種別の単価相場を見る48職種の月額単価を実データから集計実務ツールを使う見積・請求書・税金計算など51種を無料で

カテゴリから記事を探す

フリーランスの独立術フリーランスの資金術フリーランス職種図鑑