Illustratorのweb用書き出しは「スクリーン用に書き出し」が現行の基本手順で、PNG・JPEG・SVGの3形式を用途別に使い分けることで、ぼやけ・白背景・容量オーバーを防げます。この記事ではRetina対応の倍率設定からフリーランス納品フォルダの構成まで5ステップで解説します。
この記事でわかること
Retina対応の2倍書き出し設定と3形式の使い分け基準がわかる。書き出し前のカラーモード確認でぼやけ・白背景・色ズレを防ぐ方法がわかる。フリーランス納品に使える4フォルダ構成と7項目チェックリストを取得できる。
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今のデザインの仕事で、一番近い悩みは？
この記事の結論
Illustratorのweb用書き出しで納品ミスをゼロにするには、「スクリーン用に書き出し」を使い、ロゴ・アイコンはSVG、写真・バナーはJPEG、透過素材はPNGと形式を切り替えることが最短ルートです。Retina対応には2倍書き出しを標準とし、カラーモードをRGBにする前処理を忘れると色味がズレて再納品が発生します。フリーランス案件では形式・サイズ・倍率をまとめた納品チェックリストを用意しておくと、クライアントとの認識ズレを防げます。
CHECK
▶ 今すぐやること: 現在作業中のIllustratorファイルを開き、「ファイル」→「ドキュメントのカラーモード」でRGBになっているか確認する（1分）
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 形式選びに迷っている | Illustratorで選ぶWeb用書き出し形式は5種類 | 3分 |
| 操作手順を確認したい | スクリーン用に書き出しは4ステップで完了 | 5分 |
| ぼやけ・白背景・色ズレが起きている | Web用書き出しトラブルは3パターンで解決 | 4分 |
| 複数素材を効率化したい | Illustratorのアセット書き出しは一括対応が実務標準 | 4分 |
| Retina対応で何倍か迷っている | Illustratorで選ぶWeb用書き出し形式は5種類 | 3分 |
| 納品ファイルの整理に悩んでいる | フリーランス納品フォルダは4種類で整理 | 4分 |
Illustratorで選ぶWeb用書き出し形式は5種類
形式選びを間違えると、納品後にクライアントから「アイコンが荒い」「背景が白くなっている」と差し戻しが届きます。5種類の形式を素材の用途と照らし合わせて選ぶことで、差し戻しの多くは防げます。
ロゴ・アイコンはSVGが第一選択
SVGはベクター形式のため、どんな画面サイズに拡大・縮小しても劣化しません。Retinaディスプレイや4Kモニターでも鮮明に表示されるため、ロゴやアイコンには最適です。書き出し時に倍率を気にしなくてよい点が、PNG書き出しと比べた最大のポイントです。ただし、SVGファイルにはテキストデータやパス構造が含まれるため、フォントをアウトライン化していない場合は閲覧環境によって文字が変化します。納品前に「テキスト」→「アウトライン作成」を必ず実行してください（Illustratorのアートワーク書き出し｜Adobe公式）。
イラレ アウトライン化は5ステップで完了|入稿前チェックリスト付きも参考に、アウトライン化の手順を確認しておくと作業がスムーズです。
写真・グラデーションはJPEGで容量を最適化
JPEGは非可逆圧縮形式で、画質と容量のバランスを数値で調整できます。Illustratorの書き出し設定では「品質」スライダーを60〜80に設定することで、視覚的な劣化を抑えながら容量を削減できます。ただし、JPEGは透過に対応していないため、透明な部分が白塗りで出力されます。写真や複雑なグラデーション以外の用途には不向きです。同じファイルを「品質100で保存→再保存→再保存」と繰り返すと画質が累積劣化するため、必ずオリジナルのAIデータから再書き出しする習慣をつけてください。
透明背景が必要ならPNGを選択
PNGは可逆圧縮で透明（アルファチャンネル）を保持できます。ロゴを既存の背景に重ねて使うケース、アイコンにシャドウがかかっているケース、切り抜き画像を使うケースでは、PNG一択です。PNG-8は256色制限の軽量版で、シンプルな2〜3色のアイコンに使えます。フルカラーの透過素材が必要な場合はPNG-24（Illustratorの設定では「PNG」が該当）を選択します。写真や複雑な背景画像をPNGで書き出すとページ表示速度が低下するため、ファイル容量には注意が必要です。書き出し後の画像圧縮で画質落とさない方法を活用すると、PNG素材の容量を効果的に削減できます。
バナー・画像はJPEGかPNGを用途で切り替え
バナーの場合、テキストと写真が混在しているならJPEG、透過や文字のシャープさが優先ならPNGが適しています。WebPはさらに小容量化できる新しい形式ですが、Illustratorから直接書き出せないため、PNG書き出し後にSquoosh（Googleのブラウザ変換ツール）などで変換する2段階作業が必要です。フリーランス案件では、クライアントが使用するCMSやWebサービスがWebPに対応しているか事前に確認してから変換してください。なお、PNG→JPG間の変換はPNG→JPG一括変換は3ステップで無料完了の手順も参考になります。
PDFはクライアント確認用と入稿に限定
PDFはWeb表示用の書き出し形式としては選ばないのが実務上のルールです。ファイル容量が大きく、ブラウザで直接表示されると意図しないレイアウトになる場合があります。PDFの用途は「クライアントへのデザイン確認用」と「印刷入稿用」の2つに絞り、Web掲載素材の書き出しにはPDF以外の形式を使ってください。
CHECK
▶ 今すぐやること: 現在の案件ファイルで「ロゴ=SVG、写真=JPEG、透過素材=PNG」に振り分けリストを作成する（5分）
Q: SVGとPNGのどちらで納品すればよいか迷ったときの判断基準は？
A： 「拡大縮小するか」が判断基準です。ロゴ・アイコンのようにさまざまなサイズで使う素材はSVG、決まったサイズで使う透過素材はPNGを選んでください。
Q： WebPはIllustratorから直接書き出せますか？
A： Illustratorの標準機能では直接書き出せません。PNG書き出し後にSquooshなどのブラウザツールで変換する方法が実務上の標準です。
スクリーン用に書き出しは4ステップで完了
現行のIllustratorでは「スクリーン用に書き出し」が標準機能であり、「Web用に保存（従来）」はAdobe公式でも「旧来の方法」として位置づけられています（アセットのWeb用書き出し｜Adobe公式）。「Web用に保存（従来）」を使い続けていた場合はメニュー名が変わっていることに気づいていないケースも報告されており、今後は「スクリーン用に書き出し」に切り替えてください。
ステップ1: 書き出し前にRGBとアートボードを確認
「ファイル」→「ドキュメントのカラーモード」でRGBになっているか確認します。CMYKのまま書き出すと、色が暗くくすんだ状態で出力されます。印刷用に作成したファイルをWeb用に転用する場合は、必ずこの手順を踏んでください。次に、アートボードのサイズを確認します。書き出し画像はアートボードの範囲が基準になるため、余白が入る場合は「オブジェクト」→「アートボード」→「アートボードに合わせる」で調整します。アートボード外に配置したオブジェクトは書き出しに含まれないので、意図せず素材が欠けていないか確認しておくことも外せません。
ステップ2: 「スクリーン用に書き出し」を開く
「ファイル」→「書き出し」→「スクリーン用に書き出し」を選択します。ショートカットはCommand+Option+E（Mac）またはCtrl+Alt+E（Windows）です。ダイアログが開いたら、「アートボード」タブと「アセット」タブが表示されます。アートボード全体を書き出す場合は「アートボード」タブ、特定のパーツだけを書き出す場合は「アセット」タブを使います（IllustratorからWeb用素材を一気に書き出す｜Adobe公式ブログ）。
ステップ3: 形式と倍率を設定
右側の「形式を追加」でPNG・JPEG・SVGなどを選択し、倍率を1倍・2倍・3倍から指定します。Retina対応の標準は2倍です。3倍は高解像度スマートフォン（iPhone 15 Proなど）向けで、必要な場合のみ追加します。1倍のみの書き出しはRetinaディスプレイでぼやける原因になるため、Web掲載素材は最低2倍を設定してください。SVGとPDFは倍率指定がベクターデータのため意味をなさない場合があります。複数形式を同時に設定しておくと、1回の操作でSVG・PNG・PNG@2xをまとめて書き出せます。
ステップ4: 書き出し先フォルダを指定して実行
「書き出し先を選択」で保存フォルダを指定します。フォルダは「01_AI」「02_SVG」「03_PNG」「04_JPEG」の4種類で整理しておくと、納品時に迷いません。「書き出し」ボタンを押すと、指定した全形式・全倍率のファイルが一括で書き出されます。書き出し後は必ずブラウザのデベロッパーツール（Chrome DevToolsなど）で実際の表示サイズと画質を確認してください。ファイル名ルール5選｜フリーランスが今日から使える命名規則を参考にファイル命名規則を整えると、納品フォルダの管理がさらに効率化できます。
CHECK
▶ 今すぐやること: Illustratorを開き「ファイル」→「書き出し」→「スクリーン用に書き出し」を開いて、現在の形式設定を確認する（3分）
Q: 「Web用に保存（従来）」は使えなくなりましたか？
A： 機能は残っていますが、Adobe公式では「スクリーン用に書き出し」が現行の推奨方法です。複数倍率の一括書き出しやアセット管理ができないため、今後は「スクリーン用に書き出し」への移行を推奨します。
Q： アートボードが複数ある場合、全部まとめて書き出せますか？
A： 「スクリーン用に書き出し」の「アートボード」タブで全アートボードにチェックを入れると、一括書き出しできます。アートボードごとにファイル名が自動付与されます。
Illustratorのアセット書き出しは一括対応が実務標準
「スクリーン用に書き出し」の「アセット」タブを使うと、パーツ単位での一括書き出しが可能になり、10個のアイコンを個別に書き出していた作業が1回の操作で完了します。
アセット書き出しパネルへの登録方法
「ウィンドウ」→「アセットの書き出し」でパネルを表示します。書き出したいオブジェクト（アイコン、ロゴ、パーツなど）を選択し、パネルにドラッグ＆ドロップするだけで登録完了です。登録後はパネル内でアセット名を変更でき、この名前が書き出しファイル名に使われます。事前にアセット名を「icon-home」「logo-main」「banner-top」のような命名規則で統一しておくと、書き出し後のファイル整理が大幅に楽になります。
複数アセットの倍率・形式を一括設定
アセットパネル内で全アセットを選択し、右クリック→「書き出し設定を編集」から形式と倍率をまとめて変更できます。たとえば「全アイコン=SVG+PNG@2x」「全バナー=JPEG品質70」のように、素材カテゴリごとに設定をまとめると一貫性を保てます。個別に設定を変えることも可能なので、ロゴのみSVG、写真はJPEGというケースにも対応できます。
アセット登録で不要な書き出しを削減
アセット登録をしない場合、アートボード全体が書き出し対象になります。大きなアートボードに複数のデザイン案を並べている場合、特定のパーツだけを取り出したいときにアセット登録が役立ちます。「書き出したくないオブジェクトがある」「アートボード内の一部だけを納品したい」というケースでは、アセット登録してからスクリーン用に書き出しを使うのが実務上の正解です。なお、アセットとして登録しなくても「スクリーン用に書き出し」→「アセットタブ」に自動でリストアップされる場合がありますが、意図しないオブジェクトが含まれることがあるため、登録内容は書き出し前に必ず確認してください。
CHECK
▶ 今すぐやること: アセットの書き出しパネルを開き、現在の案件で書き出す素材を3つ以上登録する（5分）
Q: アセット書き出しとアートボード書き出しはどちらを使えばよいですか？
A： ページ全体のスクリーンショットや背景画像はアートボード書き出し、ロゴ・アイコン・ボタンなどの部品はアセット書き出しが適しています。両方を使い分けることが実務上の標準です。
Q： アセット名に使えない文字はありますか？
A： スペースや日本語はファイル名として使用できますが、Webサーバーへのアップロード時にエラーが起きやすいため、半角英数字とハイフン（-）・アンダースコア（_）のみを使うことを推奨します。
Illustratorのweb用書き出しを3分で自己診断
この判断フローを使って、次の書き出し前に設定を見直してください。
Q1: カラーモードはRGBになっていますか？
「はい」→ Q2へ
「いいえ」→ 「ファイル」→「ドキュメントのカラーモード」→「RGBカラー」に変更してからQ2へ
Q2: 書き出し素材の用途はどれですか？
「ロゴ・アイコン（拡大縮小して使う）」→ Result A（SVG推奨）
「写真・グラデーション画像」→ Result B（JPEG推奨）
「透明背景が必要な素材」→ Result C（PNG推奨）
「バナー（テキスト+写真混在）」→ Result D（用途別分岐）
Q3（Result Dのみ）: バナーに透過素材が含まれますか？
「はい」→ PNG-24を選択
「いいえ」→ JPEG品質60〜80を選択
Result A: SVGで書き出す
フォントをアウトライン化してから「スクリーン用に書き出し」→SVG形式を選択します。書き出し後はブラウザで表示確認を行い、フォントの文字化けと表示崩れがないかチェックしてください。
Result B: JPEG品質60〜80で書き出す
「スクリーン用に書き出し」→JPEG→品質スライダーを70に設定します。書き出し後のファイル容量が200KBを超える場合は品質を60に下げて再書き出しを検討してください。
Result C: PNGで透過書き出しをする
「スクリーン用に書き出し」→PNG→背景色の設定が「なし（透明）」になっているか確認します。白背景で出力される場合はオブジェクトに白い塗りのレイヤーが重なっている可能性があります。
Result D: バナーは用途で形式を切り替える
透過不要のバナーはJPEG品質70、透過あり・文字のシャープさ重視のバナーはPNG-24を選択します。同じバナーでもJPEGとPNGで容量が異なる場合があるため、ブラウザ表示速度への影響を確認してください。
CHECK
▶ 今すぐやること: 上記の判断フローで次に書き出す素材の形式を確定させる（3分）
Q: 1つの素材をJPEGとPNGの両方で書き出すことはありますか？
A： あります。クライアントが将来的に背景を変更する可能性がある場合、JPEG（確認用）とPNG透過（本番用）を両方納品するケースがあります。
デザインツールを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
Web用書き出しトラブルは3パターンで解決
書き出した画像がぼやける・白背景になる・色が違うという3つのトラブルは、原因が明確で対処法も決まっています。毎回同じミスで再納品が発生しているとしたら、前処理のチェックを省いていることが原因です。
ぼやけトラブルは倍率設定で解決
書き出した画像がぼやける原因の多くは、1倍書き出しをRetinaディスプレイで表示していることです。Retinaディスプレイは1ピクセルを2×2の4ピクセルで描画するため、1倍書き出しの画像は拡大して表示されてぼやけます。「スクリーン用に書き出し」で2倍を設定すると、表示サイズ100×100pxのアイコンを200×200pxで書き出すことになり、Retina環境でも鮮明に表示されます。3倍書き出しは最新のiPhone向けで、すべての素材に必須ではありません。案件の対象デバイスを確認して2倍を標準、必要に応じて3倍を追加する運用が実務上の正解です（アートボード・アセットの書き出し｜Adobe公式）。
白背景トラブルはレイヤー確認で解決
透過PNGを書き出したつもりが白背景になるケースは、以下の3つのいずれかが原因です。第一に、オブジェクトの下に白い塗りの矩形が配置されているケース。第二に、書き出し形式がJPEGになっているケース（JPEGは透過非対応）。第三に、ドキュメント自体のカンバスカラーが白に設定されているケース。解決手順は、レイヤーパネルで白い塗りのオブジェクトを非表示にし、形式がPNGになっているかを確認してから再書き出しすることです。なお、Illustratorのキャンバス自体の白い背景は書き出しには含まれないため、透明オブジェクトが原因であることがほとんどです。イラレ背景透過は3手順で完了｜PNG書き出しから納品までの手順も参考にしてください。
色ズレトラブルはカラーモードとカラープロファイルで解決
書き出した画像の色が「くすんで見える」「彩度が落ちている」場合、CMYKで作業していた可能性があります。「ファイル」→「ドキュメントのカラーモード」でRGBに変更することが最初の対処です。さらに、カラープロファイルを「sRGB IEC61966-2.1」に設定することで、WindowsとMacの両方で近い色味で表示されます。印刷用CMYKデータをWebに流用する場合は、色の変換によって一部の彩やかな色（特に赤や青）が変化することを事前にクライアントに伝えておくと、差し戻しを防ぎやすくなります。
CHECK
▶ 今すぐやること: 過去の書き出しファイルを1つブラウザで確認し、ぼやけ・白背景・色ズレがないかチェックする（3分）
Q: Retinaディスプレイを持っていない場合でも2倍書き出しは必要ですか？
A： 納品先のWebサイトを閲覧するユーザーがスマートフォンやRetina MacBookを使う可能性が高いため、自分の環境に関係なく2倍書き出しを標準にすることを推奨します。
Q： 書き出した後に色が正しいかどうか確認する方法は？
A： Chrome DevToolsで「要素の確認」→「スタイル」でCSSの背景色やテキスト色と書き出し画像を並べて視覚比較するか、カラーピッカーツールで元データのRGB値と画像のRGB値を照合してください。
Illustratorのweb用書き出しは5つの仕組みで効率化
【対象】: 印刷・Web両用のIllustratorデータを扱うフリーランス
【手順】:
ステップ1（2分）: 「ファイル」→「ドキュメントのカラーモード」でRGBへ変更する。
ステップ2（2分）: 「編集」→「カラー設定」で「sRGB IEC61966-2.1」に設定されているか確認する。
ステップ3（1分）: 「ファイル」→「別名で保存」でRGB版AIファイルを別名保存し、CMYKオリジナルと区別する（命名例: design-web-RGB.ai）。
【ポイントと理由】: CMYKのままWeb用書き出しをするとブラウザ表示時の色変換でRed系の彩度が低下するケースがあり、クライアント確認後に「色が暗い」と差し戻しが届きます。RGBへの変換とsRGBプロファイル設定をセットで行うことで、Windows・Mac・スマートフォンで近い色味に揃えられます。各デバイスのディスプレイがsRGB規格を基準にキャリブレーションされているためです。事前に変換しておくことで差し戻し対応の時間を削減できます。
【注意点】: CMYK→RGB変換後に「CMYK版に戻す」作業は不要です。印刷入稿には必ずCMYKオリジナルを使い、RGB変換版はWeb書き出し専用と割り切ることで、管理が単純になります。
ハック2: 命名規則の標準化で書き出しファイルの迷子をゼロにする
【対象】: 1案件で10ファイル以上の素材を書き出すフリーランス
【手順】:
ステップ1（3分）: 命名ルールを「[用途]-[素材名]-[サイズpx]@[倍率].拡張子」に統一する（例: logo-main-200×60@2x.png）。
ステップ2（2分）: アセットパネルでアセット名をこのルールに従い変更する。
ステップ3（1分）: 書き出し先を「03_PNG」「04_JPEG」「02_SVG」のように形式別フォルダに指定して書き出す。
【ポイントと理由】: 「logo.png」「image2.png」という命名は、後からどの素材か判別できなくなるだけでなく、同名ファイルの上書きによってクライアントへの誤送信につながります。命名規則を標準化しておくと、後任者や本人が後から見返したときでも内容を即座に把握でき、ファイル確認の作業時間を短縮できます。アセット名がそのままファイル名に使われる「スクリーン用に書き出し」の仕組みを活かすことで、書き出し後のリネーム作業が不要になります。
【注意点】: ファイル名に日本語や全角文字を使うと、Webサーバーへのアップロード後にURLエンコードされてリンク切れが起きやすいため、使わないことを推奨します。
ハック3: SVGアウトライン化で表示崩れを納品後ゼロにする
【対象】: ロゴやアイコンをSVGで納品するフリーランス
【手順】:
ステップ1（2分）: すべてのテキストレイヤーを選択し、「テキスト」→「アウトライン作成」を実行する。
ステップ2（1分）: アウトライン化後のオブジェクトを確認し、文字の形が崩れていないかチェックする。
ステップ3（3分）: 「スクリーン用に書き出し」→SVG形式→「SVGオプション」でスタイルを「スタイル属性」、フォントを「SVG」ではなく「アウトライン」に設定して書き出す。
【ポイントと理由】: SVGにフォントを埋め込む（フォント設定=SVG）と、閲覧者の環境にそのフォントがインストールされていない場合にフォールバックフォントで表示されるリスクがあります。アウトライン化することでテキストをパスデータに変換し、どの環境でも同じ見た目を保証できます。ただし、アウトライン化後はテキストの編集ができなくなるため、AIデータは必ずアウトライン前の状態で別名保存しておく必要があります（SVG書き出し設定｜cg-method.com）。
【注意点】: SVG書き出し時に「小数点」の桁数を1〜3に設定することを推奨します。デフォルトの3桁はファイルサイズが不必要に大きくなる場合があります。「最小化」オプションはコードを最適化して容量を削減できますが、SVGをコード編集する予定がある場合は最小化をオフにして可読性を保ってください。
ハック4: Retina対応2倍書き出しをデフォルト設定に固定する
【対象】: スマートフォンやRetina MacBook向けに素材を書き出すWebデザイナー
【手順】:
ステップ1（2分）: 「スクリーン用に書き出し」を開き、「形式を追加」で1倍と2倍の2行を設定する（1倍=通常表示確認用、2倍=本番用）。
ステップ2（1分）: 2倍の行の接尾辞欄に「@2x」が自動入力されているか確認する（例: logo@2x.png）。
ステップ3（1分）: この設定をテンプレートとして保存するためのダイアログを確認し、次回以降同じ設定から書き出せるようにする（Illustratorのプリセット保存機能を活用）。
【ポイントと理由】: 1倍のみの書き出しは現代のWeb制作では「作業の手戻り」を生む確率が高く、Retina対応が必要と判明した時点で全素材を再書き出しすることになります。2倍書き出しをデフォルトにしておくと、1倍素材が不要になることはあっても2倍素材が不要になることはほぼないため、結果的に再書き出しの工数を削減できます。ファイル容量は1倍の約4倍になりますが、適切な圧縮（PNG→WebP変換など）と組み合わせれば表示速度への影響は軽微です。
【注意点】: 3倍書き出しはすべての案件に必須ではありません。クライアントから「iPhone 15 Pro対応必須」と明示された場合のみ3倍を追加してください。全素材に3倍を設定するとファイル容量が増加し、管理コストも上がります。
ハック5: 書き出しチェックリストで納品差し戻しゼロを実現
【対象】: 複数クライアントの案件を並行して管理するフリーランス
【手順】:
ステップ1（5分）: 「カラーモード確認→アートボードサイズ確認→フォントアウトライン化→形式・倍率設定確認→ブラウザ表示確認→フォルダ整理」の6項目をNotionやテキストファイルにチェックリストとして保存する。
ステップ2（3分）: 書き出し前にチェックリストを開き、全項目を確認してから書き出しを実行する。
ステップ3（2分）: 書き出し後にブラウザ（Chrome）でファイルを開き、拡大表示してぼやけがないか、背景が透明か、色が正しいかを目視確認してから納品フォルダに移動する。
【ポイントと理由】: 経験を積んでも「今回はカラーモードをRGBにするのを忘れた」という再発トラブルは起きます。チェックリストを使う本当の理由は「スキルの補完」ではなく「疲労やマルチタスクによる注意散漫の防止」にあります。航空業界でパイロットがルーティンの確認作業でも必ずチェックリストを使うのと同じ原理で、単純作業のミスほど習慣化した確認手順が効果を発揮します。
【注意点】: チェックリストを更新しないまま使い続けることは逆効果です。Illustratorのバージョンアップや新しい書き出し形式（WebPなど）が追加されたタイミングで、チェックリストの内容を見直してください。
CHECK
▶ 今すぐやること: 上記6項目のチェックリストをNotionまたはメモ帳にコピーし、次回の書き出し前に使える状態にする（5分）
Q: アセット名の変更は書き出し前後どちらでするのが正しいですか？
A： 書き出し前にアセットパネルで変更するのが正解です。書き出し後にファイル名を変更すると、次回の書き出し時に名前が元に戻ります。
フリーランス納品フォルダは4種類で整理
フォルダ構成と命名を標準化しておくと、クライアントに「SVGとPNGの違いは何ですか」と聞かれた際にもすぐに説明できるようになります。
4フォルダ構成の基本
納品フォルダの構成は以下を標準にすることを推奨します。「01_AI（編集用ソースデータ）」にはアウトライン化前のオリジナルAIファイルを保管します。「02_SVG（ベクター書き出し）」にはロゴ・アイコンのSVGファイルを保管します。「03_PNG（透過書き出し）」にはPNG透過素材とPNG@2xを保管します。「04_JPEG（写真・バナー）」にはJPEGファイルと圧縮後のファイルを保管します。この4フォルダ構成をテンプレートにして、毎回コピーして案件名を追記するだけで管理が標準化されます。大容量ファイル送る無料|8つの方法で即日解決も活用し、納品フォルダをまとめて送付する手段を整えておくと、納品作業がスムーズになります。
クライアントへの納品説明文を事前準備
フリーランス案件では、クライアントがデザイナーではない場合、「なぜSVGとPNGの両方があるのか」を説明する必要があります。事前に「SVGはロゴやアイコンのベクターデータで、どんなサイズでも鮮明に表示されます。PNGはWebサイトに直接使える画像ファイルです」という説明文を用意しておくと、納品後の質問への対応時間を削減できます。WebデザインにおけるIllustratorの活用例として、SVGの実務利用が業界標準になっていることを伝えると、クライアントの理解が得やすくなります（WebデザインにおけるIllustratorの活用例｜furi-ten.com）。
納品時にAIデータを渡すかどうかの判断
AIデータ（.aiファイル）をクライアントに渡すかどうかは、契約や案件によって異なります。AIデータは著作権・編集権の問題が生じやすいため、特に指定がない場合は渡さない運用を推奨します。納品物の範囲を事前に契約書や発注書で明確にしておくことで、後から「Illustratorデータも欲しい」という追加要求を防げます。著作権譲渡契約書テンプレート5選｜無償・デザイン対応の雛形を活用することで、著作権の取り扱いを契約段階で明確にできます。
Illustratorで長く「Web用に保存」を使っていたWebデザイナーも、メニュー名が「Web用に保存（従来）」に変わっていることに気づいて「スクリーン用に書き出し」に移行したユーザーの報告があります（IllustratorからWeb用に書き出した実例｜note）。現行の操作では「スクリーン用に書き出し」に移行することで、複数形式・複数倍率の一括書き出しが可能になります。
CHECK
▶ 今すぐやること: デスクトップに「01_AI」「02_SVG」「03_PNG」「04_JPEG」の4フォルダを作成し、納品フォルダのテンプレートとして保存する（3分）
Q: クライアントにSVGファイルを渡す場合、ブラウザで確認する方法はありますか？
A： ChromeにSVGファイルをドラッグ＆ドロップするだけで表示確認できます。表示崩れやフォント置換が起きていないかを納品前に必ず確認してください。
Q： 納品後にクライアントから「色が違う」と言われた場合の対処法は？
A： クライアントの画面がsRGB表示かどうかを確認します。モニターキャリブレーションが異なる場合は完全に同じ色にはならないことを説明し、sRGBプロファイルでの確認を依頼してください。
Web用書き出しは7項目でチェック完了
次の書き出し作業で即座に使える書き出し前・書き出し後チェックリストです。
書き出し前チェック
確認項目の第一は、カラーモードがRGBになっているかです。「ファイル」→「ドキュメントのカラーモード」で確認します。第二に、アートボードサイズが正しいかを「オブジェクト」→「アートボード」で確認します。第三に、テキストをSVG書き出しする場合はフォントがアウトライン化されているかを確認します。第四に、非表示レイヤーや不要オブジェクトが残っていないかをレイヤーパネルで確認します。
書き出し設定チェック
確認項目の第五は、形式が用途に合っているか（ロゴ=SVG、透過=PNG、写真=JPEG）です。第六に、倍率が1倍＋2倍の組み合わせになっているかを確認します。
書き出し後チェック
確認項目の第七は、ブラウザ（Chrome）でファイルを開き、ぼやけ・白背景・色ズレがないかを目視確認することです。
この7項目を毎回の書き出し前後に確認することで、差し戻しの原因となる設定ミスをほぼ防ぐことができます。
CHECK
▶ 今すぐやること: この7項目をNotionまたはメモ帳にコピーし、書き出し作業のブックマーク近くに保存する（2分）
Q: チェックリストのどれか1項目を省略してもよいですか？
A： 推奨しません。特に「カラーモード確認」と「ブラウザ表示確認」は、スキップした場合に差し戻しが発生する確率が高い項目です。
まとめ: Illustratorのweb用書き出しは形式と倍率で決まる
Illustratorのweb用書き出しで納品ミスをゼロにするには、「スクリーン用に書き出し」×「形式選定（SVG/JPEG/PNG）」×「2倍書き出しの標準化」の3要素を組み合わせることが最短ルートです。カラーモードをRGBにする前処理と、書き出し後のブラウザ確認を毎回の習慣にするだけで、差し戻しの原因となるぼやけ・白背景・色ズレの多くは防げます。フリーランス案件では4フォルダ構成の納品テンプレートを用意しておくと、クライアントとの認識ズレも大幅に減らせます。
今日から1つだけ実践するとすれば、現在作業中のファイルのカラーモードをRGBで確認し、「スクリーン用に書き出し」を開いて形式と倍率の設定を確認することです。この2ステップを10分以内に完了させることが、高品質な書き出し習慣の出発点になります。
| 状況 | 次の一歩 | 所要時間 |
| 形式選びに迷っている | 本記事の判断フローで素材の用途を確認し、形式を確定する | 3分 |
| 操作手順を初めて使う | 「スクリーン用に書き出し」を開き、PNG@2xで1素材を試し書き出しする | 5分 |
| ぼやけが起きている | 倍率を2倍に変更して再書き出しし、Chromeで表示確認する | 5分 |
| 一括書き出しを試したい | アセットパネルに3素材を登録し、SVG+PNG@2xの一括書き出しを実行する | 10分 |
| 納品フォルダを整備したい | 4フォルダテンプレートを作成し、次の案件から運用を開始する | 3分 |
Illustratorのweb用書き出しに関するよくある質問
Q: 「Web用に保存（従来）」と「スクリーン用に書き出し」はどう違いますか？
A： 「Web用に保存（従来）」はIllustratorの旧来の書き出し方法で、JPEG・PNG・GIFを1倍サイズで書き出す機能です。「スクリーン用に書き出し」は現行の機能で、複数形式・複数倍率（1倍・2倍・3倍）を1回の操作で一括書き出しできます。今後新しい案件では「スクリーン用に書き出し」を使うことを推奨します（アセットのWeb用書き出し｜Adobe公式）。
Q： Retinaディスプレイ向けに何倍で書き出せばよいですか？
A： 標準は2倍です。iPhone 15 Proなど最新の高解像度スマートフォン向けには3倍が必要な場合がありますが、全素材に3倍を設定する必要はありません。まず2倍書き出しを標準とし、クライアントから3倍の指定がある場合のみ追加してください。
Q： SVGで書き出したファイルがブラウザで崩れる場合の対処法は？
A： 原因はフォントのアウトライン化漏れであることがほとんどです。Illustratorで全テキストを選択し「テキスト」→「アウトライン作成」を実行してから再書き出しを試してください。それでも崩れる場合はSVGオプションでスタイル設定を「スタイル属性」に変更して書き出し直してください。
Q： PNG書き出しでファイル容量が大きすぎる場合はどうすればよいですか？
A： PNG-8を使うか、書き出し後にSquooshでWebPに変換することを推奨します。PNG-8は256色制限があるため、フルカラー素材には適しませんが、シンプルなアイコンや2〜3色のロゴには有効です。WebP変換によって、同品質でPNGより容量を削減できます。
Q： IllustratorからWebPを書き出す方法はありますか？
A： Illustratorの標準機能では直接WebPを書き出せません。PNG書き出し後にSquoosh（ブラウザ上で動作するGoogleのツール）でWebPに変換する2段階作業が実務上の標準です。変換後は必ずブラウザで表示確認を行ってください。
【出典・参照元】
Illustratorのアートワーク書き出し｜Adobe公式
IllustratorからWeb用素材を一気に書き出す｜Adobe公式ブログ