INDEX
目次
前の章に戻る5章：データの出力と管理
この章では、様々な用途に応じたデータの保存・書き出し方法を学び、クライアントに納品できる形式でデータを準備する方法を習得します。
Illustratorで作成したデザインを活用するためには、適切な形式でデータを出力することが重要です。
Illustratorで作成したデザインを活用するためには、適切な形式でデータを出力することが重要です。
この章のゴール
- 適切な形式でのデータ保存と書き出しができるようになる。
- 印刷用とWeb用データの違いを理解し、目的に応じた最適な設定ができるようになる。
【5-1】データの保存形式
目安の学習時間：30分
Illustratorファイル（.ai）の保存
Illustratorでの作業の基本となるのが、.aiファイル形式での保存です。
.aiファイルはIllustratorのネイティブ形式で、編集可能な状態を保ちながらデータを保存できます。
.aiファイルはIllustratorのネイティブ形式で、編集可能な状態を保ちながらデータを保存できます。
.aiファイルの特徴
- Illustratorの全機能を保持した状態で保存できます。
- レイヤー構造やエフェクトなどの編集情報がそのまま保存されます。
- ファイルサイズが比較的大きくなります。
.aiファイルの保存手順
- メニューバーから「ファイル」>「保存」または「別名で保存」を選択してください。
- 保存先を指定し、ファイル名を入力してください。
- ファイル形式で「Adobe Illustrator (ai)」を選択してください。
- 「保存」ボタンをクリックすると、オプション画面が表示されます。
- オプションの内容に問題がなければ、「OK」をクリックします。
作業の途中経過を保存する際は、「保存」コマンド（ショートカットキー: Ctrl+S (Windows) または Command+S (Mac)）を定期的に使用することをお勧めします。
また、重要な変更の前には「別名で保存」を使用して、作業履歴を残すことも効果的です。
また、重要な変更の前には「別名で保存」を使用して、作業履歴を残すことも効果的です。
PDFの作成と設定
PDF（Portable Document Format）は、様々なデバイスや環境で同じ見え方を維持できる汎用性の高いフォーマットです。
クライアントへの提案資料や印刷用データとしてよく利用されます。
クライアントへの提案資料や印刷用データとしてよく利用されます。
PDFの特徴
- プラットフォームに依存せず、どのデバイスでも同じ表示が可能です。
- ファイルサイズを比較的小さく抑えられます。
- パスワードや印刷制限などのセキュリティ設定が可能です。
- 印刷用にも画面表示用にも最適化できます。
PDFの作成手順
- メニューバーから「ファイル」>「別名で保存」を選択してください。
- ファイル形式で「Adobe PDF (pdf)」を選択し、「保存」をクリックしてください。
- PDF保存オプション画面が表示されます。
- オプションの内容に問題がなければ、「PDF を保存」をクリックします。
PDFプリセットの主な種類
- Illustrator初期設定：
Illustratorでの再編集性を完全に保持したPDFを作成します。ファイルの用途が未定の場合や、編集可能なPDFとして共有したい場合に適しています。 - PDF/X-1a:2001：
印刷業界の標準規格に準拠したPDFです。印刷所によく使われる形式です。 - プレス品質：
商業印刷向けの高品質設定です。CMYK変換、高解像度、フォント埋め込みなどが自動設定されます。 - 最小ファイルサイズ：
Web用の軽量PDFです。画像が圧縮され、閲覧専用に最適化されています。 - 雑誌広告送稿用：
雑誌広告の入稿に特化した設定です。特定の印刷基準に準拠しています。 - 高品質印刷：
印刷用の高解像度PDFです。商業印刷ではないオフィスプリンターなどでの出力に適しています。
PDFの詳細設定（一部）
- 一般：PDFのバージョンや互換性
- Illustrator編集機能を保持: Illustratorでの再編集が可能なPDFです。
- レイヤーやグラフィック効果が保持されます。
- Illustrator編集機能を保持: Illustratorでの再編集が可能なPDFです。
- 圧縮：画像の圧縮率や解像度
- 高品質印刷では、JPEG最高画質 + 300ppi を選ぶと無難。
- Web用なら、JPEG中画質 + 72ppi で軽量化を図る。
- トンボと裁ち落とし：印刷用の設定
- トリムマークと裁ち落としは、印刷会社指定がある場合が多いので確認が必要。
- Web用途や画面表示用PDFでは不要。
- セキュリティ：パスワードや権限の設定
実際の用途に応じてプリセットを選択し、必要に応じて詳細設定を調整しましょう。
例えば、クライアントに提案用のPDFを送る場合は「最小ファイルサイズ」、印刷所に入稿する場合は「プレス品質」や「PDF/X-1a:2001」が適しています。
例えば、クライアントに提案用のPDFを送る場合は「最小ファイルサイズ」、印刷所に入稿する場合は「プレス品質」や「PDF/X-1a:2001」が適しています。
下位バージョン対応
クライアントや印刷所が古いバージョンのIllustratorを使用している場合、下位バージョンのIllustratorで開ける形式で保存する必要がある場合があります。
下位バージョンでの保存方法
- メニューバーから「ファイル」>「保存」（新規ファイルの場合）もしくは「別名で保存」（既存ファイルの場合）を選択してください。
- ファイル形式で「Adobe Illustrator (ai)」を選択してください。
- 「保存」ボタンをクリックすると表示されるオプション画面で、「バージョン」から対応したいバージョンを選択してください。
下位バージョンで保存する前に、元のデータを別名で保存しておくことをお勧めします。
また、重要なプロジェクトでは、下位バージョンで保存したデータを実際に開いてみて、問題がないか確認することが大切です。
また、重要なプロジェクトでは、下位バージョンで保存したデータを実際に開いてみて、問題がないか確認することが大切です。
確認問題とまとめ
次に、Web用データの書き出しについて学びましょう。
【5-2】Web用データの書き出し
目安の学習時間：30分
JPEGとPNGの違い
Web用のデータを書き出す際、主に使用されるのがJPEG形式とPNG形式です。
それぞれに特徴があり、用途に応じて適切な形式を選択することが重要です。
それぞれに特徴があり、用途に応じて適切な形式を選択することが重要です。
JPEG（Joint Photographic Experts Group）の特徴
- 写真などの自然画像に適している。
- 色数が多い画像を効率的に圧縮できる。
- 非可逆圧縮のため、圧縮率を高くすると画質が低下する。
- 透明部分を持つことができない。
- グラデーションの表現に適している。
PNG（Portable Network Graphics）の特徴
- イラストやロゴなどのシンプルな画像に適している。
- 可逆圧縮のため、画質を落とさずに圧縮できる。
- 透明部分（アルファチャンネル）を持つことができる。
- 圧縮効率はJPEGに劣り、特に写真のような複雑な画像ではファイルサイズが大きくなりがち。
- 細かい線やテキストの表現に適している。
|
特徴
|
JPEG
|
PNG
|
|---|---|---|
|
圧縮形式
|
非可逆圧縮
|
可逆圧縮
|
|
透明部分の有無
|
×（対応不可）
|
〇（アルファチャンネル対応）
|
|
適した画像タイプ
|
写真、グラデーション
|
イラスト、ロゴ、アイコン、透過が必要な画像
|
|
ファイルサイズ
|
圧縮率が高いが、画質低下の可能性あり
|
画質維持ができるが、ファイルサイズが大きめ
|
実際のデザイン現場では、クライアントから指定がある場合もありますので、要件をしっかり確認することも大切です。
書き出し形式の選択
Illustratorから画像を書き出す方法はいくつかありますが、ここでは「書き出し」機能を使った方法を紹介します。
「Web用に保存 (従来)」は、ファイルにアートボードが1枚の場合におすすめの方法です。
ファイルに複数のアートボードが配置されている場合は、「Web用に保存 (従来)」でも書き出しを行うことは可能ですが、「スクリーン用に書き出し」が操作はしやすいです。
「Web用に保存 (従来)」は、ファイルにアートボードが1枚の場合におすすめの方法です。
ファイルに複数のアートボードが配置されている場合は、「Web用に保存 (従来)」でも書き出しを行うことは可能ですが、「スクリーン用に書き出し」が操作はしやすいです。
書き出し機能「Web用に保存 (従来)」の使い方
（ファイル内にアートボードが1枚の場合推奨）
- メニューバーから「ファイル」>「書き出し」>「Web用に保存 (従来)」を選択してください。
- 「Web用に保存」ダイアログが表示されます。
- 保存先を指定し、ファイル名を入力してください。
主な設定項目
- 形式: JPEG、PNG、GIF、SVGなど
- 解像度: 72ppi（Web標準）など
- 圧縮率/品質（JPEG）
- 数値が高いほど画質が良くなりますが、ファイルサイズも大きくなります。
- Web用では「中」または「高」が一般的です。
- 透明部分の処理方法（PNG）
- PNG-8: は色数が最大256色に制限されるため軽量ですが、透明部分の表現はやや粗くなります。
- PNG-24: はフルカラーに対応し、滑らかな半透明も表現できますが、ファイルサイズは大きくなります。
- サイズ: 実寸またはパーセント指定。
書き出し機能「スクリーン用に書き出し」の使い方
（ファイル内にアートボードが複数の場合推奨）
- メニューバーから「ファイル」>「書き出し」>「スクリーン用に書き出し」を選択してください。
- スクリーン用に書き出しダイアログが表示されます。
- 「アートボード」の項目ではファイル内のアートボードが表示されます。書き出したいアートボードにチェックを入れます。
- 「選択」の項目では、すべて・範囲・ドキュメント全体を選択できます。
- 「書き出し先」で、保存先を選択します。
- 「フォーマット」で、拡大縮小・サフィックス・形式（拡張子）を選択します。
- 設定が完了したら、「アートボードを書き出し」をクリックします。
- 保存先として設定した場所に、「1x」というフォルダが作成され、その中に画像が書き出しされていることが確認できます。
アセットの書き出し
- Webデザインやアプリデザインで、複数の画像や素材（アセット）を一度に書き出したいときに便利なのが、Illustratorの「アセットの書き出し」機能です。
- アセットとは、デザインに使う画像、アイコン、ロゴなどを指し、複数形式やサイズでまとめて書き出す際に活用します。
- アセット書き出し機能で書き出されたデータは、JPGやPNGのような画像データとして保存されるため、再編集は出来ません。
アセットの書き出し手順
- 書き出したいオブジェクトを選択してください。
- オブジェクトは、あらかじめグループ化しておきましょう。
- オブジェクトを右クリックして、「書き出し用に選択」 > 「単一のアセットとして」を選択。
もしくは、「アセットの書き出し」パネルを表示したのち、ドラッグ&ドロップを行い追加することもできます。 - 「アセットの書き出し」パネルが表示されます。
- パネルで書き出すオブジェクトを複数選択します。
- パネル下部の書き出しをクリックします。
- 拡大・縮小のサイズと同じ名前のフォルダが生成され、画像が書き出されています。
- 「スケールを追加」をクリックし、書き出し設定で拡大縮小・サフィックス・形式（拡張子）を設定します。
- 拡大縮小：1xは等倍、2xは2倍のように書き出す大きさを指定できます。
- サフィックス：スケールの追加ボタンを押すと、同じ画像に対して異なる大きさの設定で書き出すことができます。ファイル名に区別をつける時にサフィックスを設定します。区別をつける必要がない場合は削除しても大丈夫です。
- 形式：jpgやpng、svg、pdfなどを設定
- パネル下部の書き出しをクリックします。
- 保存先を決めて保存します。（拡大・縮小のサイズに沿ったフォルダが生成されます。）
アセット書き出しの主な機能
- 複数のフォーマットを同時に設定可能（PNG、JPG、SVGなど）です。
- 各フォーマットごとに異なるサイズを指定可能です。
- 1x（等倍）、2x（2倍）、3x（3倍）などデバイスごとの解像度対応も簡単です。
- 複数のアセットを一括で書き出し可能です。
アセットの書き出し機能を活用することで、手作業でサイズ変更して保存する手間を大幅に削減できます。
特にWebデザインやアプリデザインの現場では非常に重宝する機能です。
特にWebデザインやアプリデザインの現場では非常に重宝する機能です。
確認問題とまとめ
次に、印刷用データの作成方法を学びましょう。
【5-3】印刷用データの作成
目安の学習時間：30分
印刷用カラー設定
印刷物のデザインでは、画面上の色と印刷結果の色が一致するよう、適切なカラー設定が重要です。
印刷物を前提としたデザインでは、最初からCMYKモードで作業するのが理想的です。
印刷物を前提としたデザインでは、最初からCMYKモードで作業するのが理想的です。
新規ドキュメントでのCMYK設定
- 「ファイル」>「新規」を選択、もしくは「新規ファイル」を選択してください。
- カラーモードで「CMYKカラー」を選択してください。（印刷の中からサイズを選択すると最初からCMYKカラーに設定されます。）
既存ドキュメントのカラーモード変換
- 「ファイル」>「ドキュメントのカラーモード」>「CMYKカラー」を選択してください。
カラープロファイル設定
印刷方法や用紙によって適切なカラープロファイルが異なります。
一般的な印刷用プロファイルとしては以下があります。
一般的な印刷用プロファイルとしては以下があります。
- Japan Color 2001 Coated: コート紙向け
- Japan Color 2001 Uncoated: 上質紙向け
- Japan Standard v2: 一般的な商業印刷向け
プロファイルの設定は「編集」>「カラー設定」から行えます。
印刷所からプロファイルの指定があればそれに従ってください。
印刷所からプロファイルの指定があればそれに従ってください。
特色と配合色
- 特色：特定のインク色を使うため、色の再現性が高く、金・銀・蛍光色など特殊色に適しています。
- 代表例：DICカラー
- プロセスカラー（配合色）：CMYKの4色のインクを掛け合わせて色を表現する、一般的なフルカラー印刷です。
- コストを抑えやすく、写真印刷などに適しています。
特色を使用する場合は、スウォッチパネルから「特色」を選択して追加してください。
ただし、特色印刷は通常のCMYK印刷より費用がかかることを覚えておきましょう。
ただし、特色印刷は通常のCMYK印刷より費用がかかることを覚えておきましょう。
トンボと裁ち落とし
印刷物では、裁断の基準となるトンボや、裁断誤差を考慮した裁ち落としの設定が必要です。
裁ち落としの設定
- 新規ドキュメントを作成します。
- 「裁ち落とし」の値を入力してください。（一般的に3mm程度）
既存のドキュメントでは「ファイル」>「ドキュメント設定」から調整できます。
トンボの設定
- 四角形ツールで仕上がりサイズの四角形を作成
- サイズを正確に指定（例：A4なら210mm×297mm）
- 四角形の「線」「塗り」はなしにする
- 配置するレイヤーを決める
- 選択ツールで四角形を選択
- 塗りがないので、四角の縁をクリックする
- アートボードと重ねる（整列パネルを使うと簡単です）
- 「効果」＞「トリムマーク」をクリック
- 四角形にトンボ（トリムマーク）が生成される
- トンボはオブジェクト扱いなので、後から移動や削除が可能
印刷用PDF作成時の設定
「ファイル」>「別名で保存」でPDF保存時、以下の設定を確認してください。
- トンボ: 「トンボ」にチェック
- 裁ち落とし: 上下左右の値を確認（通常3mm）
- 出力 > カラー > カラー変換: CMYKに変換するよう設定（「編集」>「カラー設定」からCMYKへの変換を推奨します）
実際のデザイン作業でのポイント
- デザイン要素は「アートボード」（仕上がりサイズ）いっぱいまで配置してください。
- 背景や端まで伸びる要素は「塗り足し線」領域まで伸ばしてください。
- 重要なテキストや要素は、裁断時にずれて一緒に裁断されることを防ぐため、「アートボード」の端（仕上がり線）から5mm以上内側に配置してください（セーフティマージン）。
これらの設定を正しく行うことで、印刷後の裁断でデザインが途切れたり、白いエッジが出たりするのを防ぐことができます。
特色の設定
特定の色を正確に再現したい場合や、金・銀などの特殊な色を使用したい場合には、特色を使用します。
特色の追加方法
- 「ウィンドウ」→「スウォッチ」 を選択し、スウォッチパネルを表示します。
- スウォッチパネル右上のメニューをクリックします。
- 「スウォッチライブラリを開く」→「カラーブック」を選択します。
- 「DICカラーガイド」を選択します。
- 使いたい色を選択します。
- 色をクリックすると、自動的にスウォッチパネルに追加されます。
オーバープリントの設定
特色を使用する際に重要なのが「オーバープリント」の設定です。
- オーバープリント: 下の色の上に重ねて印刷する設定です。
- 黒文字や線で使うと、下地の色が透けて重なるためにじみが少ない。
- ノックアウト（デフォルト）: 下の色を抜いて印刷する設定です。
- 重なった部分は穴が開くイメージで、色が混ざらない。
- 「ウィンドウ」 > 「属性」を選択して、属性パネルを表示します。
- オブジェクトを選択します。
- 属性パネルで「塗りをオーバープリント」または「線をオーバープリント」をチェックします。
確認問題とまとめ
最後に、これまでの知識を実践的に使って演習を行います。
【5-4】5章 -演習課題- データの出力と管理
目安の学習時間：30分
Web用バナーの書き出し
実際のバナー制作を想定して、Web用のデータ書き出しを実践してみましょう。
課題内容
ECサイト用のプロモーションバナーを3種類のサイズで書き出します。
- メインビジュアル: 1200×400px
- サイドバナー: 300×250px
- スマホ用バナー: 640×100px
手順：
- 既存のバナーデザインを開くか、シンプルなバナーを作成してください。
- アートボードを3つ用意し、それぞれのサイズに設定してください。
- 各アートボードにデザインを配置（サイズに合わせて調整）してください。
- スクリーン用に書き出しから一括書き出しを行ってください。
アートボード作成方法
既存のバナーデザインからの書き出し方法
実際の書き出しを行い、ファイルサイズと画質のバランスを確認してみましょう。
ファイルサイズが大きすぎる場合は、圧縮率を調整します。
ファイルサイズが大きすぎる場合は、圧縮率を調整します。
印刷用チラシデータの作成
印刷用のチラシデータを作成し、印刷所に入稿できる形式で保存します。
課題内容
A4サイズのプロモーションチラシを作成し、印刷入稿用のPDFに書き出します。
手順
- 新規ドキュメントを作成してください。（A4サイズ、CMYKモード）
- 裁ち落としを3mmに設定し、ドキュメント作成後、トリムマーク（トンボ）を設定してください
- シンプルなチラシデザインを作成してください。
- 背景色や画像は裁ち落とし領域まで伸ばしてください。
- 重要なテキストや要素はセーフティマージン（端から5mm以上）内に配置してください。
- 印刷用PDFとして保存してください。
保存したPDFを開き、トンボ、裁ち落とし、カラー設定（CMYKであること）を確認してください。
データ管理の実践
制作したデータを効率的に管理する方法を実践します。
課題内容
制作したバナーとチラシのデータを、適切なフォルダ構造で整理します。
フォルダ構造の例
Project_Name/
├── Source_Files/
│ ├── Banner.ai
│ └── Flyer.ai
├── Output/
│ ├── Web/
│ │ ├── main_banner.png
│ │ ├── side_banner.png
│ │ └── sp_banner.png
│ └── Print/
│ └── flyer_print.pdf
└── Assets/
├── Images/
└── Color_Palettes/フォルダ構造
実践手順
- プロジェクト名のフォルダを作成してください。
- 上記のフォルダ構造を作成してください。
- 作成したバナーとチラシの元データを「Source_Files」フォルダに保存してください。
- 書き出したバナー画像を「Output/Web」フォルダに保存してください。
- 印刷用PDFを「Output/Print」フォルダに保存してください。
ファイル命名のベストプラクティス
- わかりやすい名前を付けましょう（例：product_campaign_banner_1200x400.png）
- スペースの代わりにアンダースコア(
_)を使用してください。 - 日付を入れる場合は、並び替えしやすいよう「YYYYMMDD」形式を使用してください。
- バージョン管理が必要な場合は、「v1」「v2」などの接尾辞を追加してください。
ファイル管理のポイント
- プロジェクトごとにフォルダを分ける
- ソースファイルと出力ファイルを明確に分ける
- 重要なバージョンはバックアップを残す
- 作業中はこまめに保存する（「別名で保存」を活用する）
- クライアントとのやり取りや指示書も一緒に保存する
効率的なファイル管理は、制作フローの改善だけでなく、クライアントからの急な修正依頼にも素早く対応できるようになります。
また、過去のプロジェクトを参考にすることで、新しいプロジェクトの効率も上がります。
これで「データの出力と管理」の解説を終わります。
次の章に進みましょう。
また、過去のプロジェクトを参考にすることで、新しいプロジェクトの効率も上がります。
これで「データの出力と管理」の解説を終わります。
次の章に進みましょう。