「Illustratorで背景を白や黒に変えたいのに、どこで設定するか分からない」「アートボードの背景と実際の印刷物の背景はどう違うのか」「透明背景のまま書き出したいのに、白くなってしまう」——Illustratorで背景色を扱うとき、こうした疑問に直面する方は多いのではないでしょうか。
Illustratorには「アートボードの背景色」と「オブジェクトの背景色」という2つの考え方があり、この違いを理解することがトラブルなく作業を進めるための第一歩です。
本記事では、アートボードの背景色設定からオブジェクトを使った背景の作り方、デザインテクニック、よくある注意点まで、初心者の方でもすぐに実践できるよう体系的に解説します。
Illustratorの背景色とは
アートボードの背景色とオブジェクトの色の違い
Illustratorで「背景色」と言うとき、実は2つの異なる概念があります。
| 種類 | 特徴 | 印刷・書き出しへの影響 |
|---|---|---|
| アートボードの背景色 | 作業画面上の表示専用の色 | 影響しない（あくまで表示上のプレビュー） |
| オブジェクトの背景色 | 実際にデータとして存在する矩形などの塗り色 | 印刷・書き出しに反映される |
最も重要なのは、アートボードの背景色はあくまで作業中の表示を見やすくするための設定であり、実際の出力には影響しないという点です。印刷物やWebの背景として実際に機能させるには、背景色のオブジェクト（矩形など）を作成する必要があります。
背景色の役割と用途
デザイン全体の印象を決める
背景色はデザインの基調を決定する重要な要素です。白い背景ならクリーンでミニマルな印象、濃い色の背景なら高級感や力強さ、パステルカラーならやわらかく親しみやすい印象を与えます。背景色の選択がデザイン全体のトーンを左右します。
Web・印刷物での配色確認
デザイン制作中に実際の使用環境に近い背景色を設定しておくことで、テキストの読みやすさや他のオブジェクトとのコントラストを正確に確認できます。特にWebデザインでは、完成後のページで想定される背景色でプレビューしながら作業することが重要です。
透明背景との違い
背景なし（透明）の状態では、Illustratorの作業画面上は白またはチェッカーパターンで表示されます。PNG・SVGなどで透明背景として書き出すか、JPEGのように透明非対応の形式で書き出すと白背景になるかなど、書き出し形式によって扱いが変わります。透明背景が必要な用途（ロゴ・アイコンなど）と、背景色が必要な用途（ポスター・バナーなど）を意識して作業しましょう。
アートボードの背景色設定
ドキュメント設定での背景色変更方法
Illustratorのアートボード背景色は「ドキュメント設定」から変更できます。ただしこれはあくまで作業画面上の表示色であり、実際の出力には反映されません。
- 手順1：メニューバーの「ファイル」→「ドキュメント設定」を開く
- 手順2：「透明と色域」タブを選択する
- 手順3：「透明部分のシミュレート」のカラー設定を変更する
または、より直接的な方法としてアートボードの表示色を変更する方法があります。
- 手順1：「表示」メニュー→「ドキュメントの設定」を開く
- 手順2：「アートボード」セクションの設定を確認する
アートボードごとの背景色の設定
Illustratorでは複数のアートボードを持つドキュメントを作成できます。個別のアートボードの背景表示は以下の方法で管理します。
- 手順1：アートボードツール（Shift＋O）を選択する
- 手順2：設定を変更したいアートボードをクリックして選択する
- 手順3：コントロールパネルまたはアートボードパネルで設定を確認する
なお「表示」メニュー→「透明グリッドを表示」をオンにすることで、透明部分がチェッカーパターンで表示され、実際に透明な部分と背景色オブジェクトの有無を確認しやすくなります。
複数アートボードへの適用
複数のアートボードに統一した背景色を適用したい場合は、各アートボードと同じサイズの背景用矩形を作成して最下層レイヤーに配置する方法が実務では一般的です。アートボード設定の表示色変更はあくまでプレビュー用のため、実際に出力される背景色はオブジェクトで管理します。
デザインプレビューとの違い
「表示」メニューの「オーバープリントプレビュー」や「ピクセルプレビュー」を使うと、実際の印刷・書き出し結果に近い状態で確認できます。アートボードの表示背景色とは独立した確認方法として活用しましょう。
アートボードの背景色設定の詳しい操作については、iPentec「Illustratorのアートボード背景色を変更する方法」も参考になります。
オブジェクトの背景色設定
矩形やシェイプで背景を作る方法
実際に出力に反映される背景色は、塗りの色を設定したオブジェクトをアートボードいっぱいに配置することで実現します。最もシンプルな方法は矩形ツールを使った背景作成です。
- 手順1：矩形ツール（M）を選択する
- 手順2：アートボードと同じサイズの矩形を作成する（アートボードをクリックして幅・高さを数値で入力すると正確）
- 手順3：作成した矩形に背景色を設定する
- 手順4：レイヤーパネルで最下層に移動する
- 手順5：必要に応じてレイヤーをロックして誤操作を防ぐ
アートボードに合わせた矩形をすばやく作成するショートカットとして、矩形ツール選択中にアートボードをクリックしてダイアログに数値を入力する方法が便利です。または「オブジェクト」→「アートボード」→「アートボードに整列」を活用することもできます。
塗りや線の色設定
矩形などの背景オブジェクトの色設定は以下の方法で行います。
- ツールバーの塗りアイコン：左下の塗り（四角いアイコン）をダブルクリックしてカラーピッカーを開く
- カラーパネル：「ウィンドウ」→「カラー」で数値を直接入力する
- スウォッチパネル：「ウィンドウ」→「スウォッチ」から登録済みのカラーを適用する
背景オブジェクトの線（ストローク）は通常「なし」に設定します。線が残っていると印刷時に意図しない枠が出ることがあります。
透明やグラデーションの適用
背景に透明度を持たせる場合は、オブジェクトを選択した状態で「透明度パネル」（Shift＋Ctrl＋F10）の「不透明度」を調整します。グラデーション背景は「グラデーションパネル」（Ctrl＋F9）でタイプ・カラー・方向を設定して適用します。
グラデーション背景の設定手順：
- 矩形を選択する
- グラデーションパネルを開く
- グラデーションサムネイルをクリックして適用する
- カラーストップをダブルクリックして色を設定する
- 方向・角度を調整する
レイヤー順序の調整
背景オブジェクトは常に最下層に置く必要があります。レイヤー管理のベストプラクティスとして、背景専用のレイヤーを最下層に作成してロックしておく方法を推奨します。
- 手順1：レイヤーパネルで「新規レイヤー」を作成する
- 手順2：レイヤー名を「背景」などに変更する
- 手順3：レイヤーを最下層にドラッグする
- 手順4：背景オブジェクトをそのレイヤーに移動する
- 手順5：レイヤーのロックアイコンをクリックして誤操作を防ぐ
背景色を活用したデザインテクニック
Web用デザインでの背景確認
Webデザインを制作する場合、実際のWebページで使用される背景色をIllustratorの作業環境で正確に再現することが重要です。
ピクセルプレビューを有効にする（「表示」→「ピクセルプレビュー」）ことで、Web上での実際の表示に近い状態で確認できます。また、RGBカラーモードで作業していることを確認し（「ファイル」→「ドキュメントのカラーモード」）、Webで使用するカラーコード（#RRGGBBなどの16進数）はカラーパネルの「16進数」フィールドで正確に入力します。
印刷物での色校正・配色調整
印刷物のデザインでは、CMYKカラーモードでの作業が基本です。背景色をCMYKで設定する際は以下の点に注意します。
- モニターで見るRGBの色と印刷後のCMYKの色は異なって見える場合がある
- 「表示」→「色の校正」でCMYK印刷の仕上がりをプレビューできる
- 特色（スポットカラー）を使う場合はスウォッチパネルで正確に設定する
他のオブジェクトとのコントラスト強調
テキストや画像との組み合わせ
背景色に対して文字や重要な要素が読みやすいかどうかを確認することはデザインの基本です。一般的に背景色と文字色のコントラスト比が低いと可読性が下がります。Web Content Accessibility Guidelines（WCAG）では通常テキストで4.5:1以上のコントラスト比を推奨しています。
Illustratorでコントラストを確認するには、背景色と文字色を変えながら実際に目で確認するか、オンラインのコントラストチェックツールに色コードを入力して数値で確認する方法が有効です。
配色バランスのチェック
「ウィンドウ」→「カラーガイド」パネルを使うと、選択したカラーに対してハーモニールール（補色・類似色など）に基づいた配色の提案が表示されます。背景色を決定した後に他の要素の色を調整する際の参考として活用できます。
Illustratorの背景色設定の実践的なテクニックについては、0begin「Illustratorのアートボード背景色の設定と変更方法」とBelier「Illustratorで背景色を変更するデザインテクニック」も参考にしてください。
背景色の注意点
透明背景と印刷時の差異
アートボードに背景オブジェクトを置かずに作業した場合、PDF・EPS・AIなどの形式では透明背景として書き出されますが、JPEGで書き出すと透明部分が白で塗りつぶされます。
用途に応じた書き出し設定を意識しましょう。
- 透明背景が必要：PNG・SVG・PDFで書き出す（PNG・SVGは透明維持）
- 白背景で書き出し：JPEGを使用（透明部分は自動的に白になる）
- 印刷入稿：必ず背景オブジェクトを配置してから書き出す
RGBとCMYKでの色再現の違い
同じカラー値でもRGBとCMYKでは見え方が異なります。特に鮮やかな青・緑・赤などはCMYKに変換すると彩度が落ちることがあります。印刷物を制作する場合は最初からCMYKモードで作業し、Webと印刷の両方に対応する場合はそれぞれ別のドキュメントで管理することを推奨します。
デザイン全体との調和を意識
配色の見え方の確認
背景色を決定したら、必ずその上に配置する全要素（テキスト・画像・アイコン・ボタンなど）との組み合わせを実際に確認してください。部分的にはよく見えても、デザイン全体として見たときに背景色が主張しすぎてコンテンツが埋もれるケースがあります。
異なるモニター環境での色味
注意：モニターのキャリブレーション（色設定）によって同じデータでも色の見え方が異なります。特に鮮やかな色や微妙なニュアンスのカラーは、他の環境では意図した色に見えない場合があります。可能であれば複数の端末で確認する習慣をつけましょう。
DTPと印刷における背景色の考え方については、DTP Transit「Illustratorの背景色と透明の取り扱いについて」も参考にしてください。
Illustratorをはじめとするデジタルデザインの技法については、kakiro-web.comでも幅広く解説しています。
まとめ
Illustratorで背景色はアートボード設定とオブジェクト塗りの両方を使い分ける
Illustratorの背景色には「アートボードの表示背景色（出力に影響しない）」と「背景オブジェクトの塗り色（実際に出力される）」の2種類があります。この違いを理解したうえで、用途に応じて適切に使い分けることが正確なデータ管理の基本です。
デザインの目的に応じて透明やカラーを選択
ロゴやアイコンなど汎用的に使うデータは透明背景で作成し、ポスター・バナー・チラシなど用途が決まっているデザインは背景オブジェクトを作成して明示的に色を設定します。書き出し時の形式（JPEG・PNG・PDF）によっても透明背景の扱いが変わるため、最終出力を意識した作業が重要です。
配色の確認と調整で完成度の高いデザインを作る
背景色はデザインの基調を決める重要な要素です。他の要素との コントラスト・カラーモード（RGB/CMYK）・モニター環境による見え方の差など、複数の観点から配色を確認・調整することで、意図した印象を正確に伝えられる完成度の高いデザインが実現できます。
- アートボードの表示背景色は確認用であり出力には影響しない
- 実際に出力される背景色は矩形などのオブジェクトで作成する
- 背景オブジェクトは最下層レイヤーに配置してロックしておくと管理しやすい
- 透明背景が必要な用途はPNG・SVGで書き出す（JPEGでは白背景になる）
- 印刷物はCMYKモードで作業し、色校正プレビューで仕上がりを確認する
- Webデザインはピクセルプレビューとカラーコード（16進数）で正確に管理する
- 背景色と他要素のコントラストは可読性・視認性の観点からも必ず確認する
