Illustratorで本番品質のWebバナーは7ステップで完成します。新規ドキュメントのWeb設定からRGBカラーモード選択、素材配置、文字組み、書き出しまでを体系的に解説します。フリーランス案件に対応できる納品フローも網羅しています。
この記事でわかること
Webバナー制作の設定ミス（カラーモード・単位）を事前に防ぐ3項目の確認方法を習得できます。素材配置から文字組みまで、初心者でもフリーランス納品品質を実現できる7ステップの制作フローを身につけられます。受注直後の7項目確認で、制作後の大幅な手戻りをゼロに近づける事前確認の習慣を取得できます。
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今のデザインの仕事で、一番近い悩みは？
この記事の結論
Illustratorでのバナー制作で最初に取り組むべきことは、ドキュメント設定とアートボードの確認です。カラーモードをRGBに、単位をピクセルに設定した時点で、制作上のミスの大半を事前に防ぐことができます。制作フローを7ステップに分けて進めれば、初心者でもフリーランス案件に対応できる納品データを作成できます。
今日やるべき1つ
Illustratorを開き、「新規ドキュメント」→「Web」タブを選択し、幅300px・高さ250px・RGB・72ppiで空のアートボードを作成してください（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 設定から始めたい | Illustratorバナーは設定3項目で土台が決まる | 5分 |
| 素材配置で迷っている | バナー素材配置は5要素を優先順位順に配置 | 10分 |
| 文字の扱いがわからない | バナー文字組みは3段階で可読性を高める | 8分 |
| 書き出し・納品を知りたい | バナー書き出しはJPGとPNGで用途を切り替える | 7分 |
| 案件受注を意識したい | フリーランスのバナー案件は7項目の事前確認で防ぐ | 10分 |
Illustratorバナーは設定3項目で土台が決まる
Illustratorの新規ドキュメント設定は、3項目を正しく入力するだけで後工程のトラブルを大幅に減らすことができます。バナーサイズやカラーモードの選択に迷う時間は、以下の手順で解消されます。
新規ドキュメントはWebタブを選ぶとピクセル単位に自動切り替わる
Illustratorを起動し、「新規ドキュメント」ダイアログを開くと、上部に「写真」「印刷」「アートとイラスト」「Web」などのタブが並んでいます。バナー制作では「Web」タブを選択してください。このタブを選ぶと、単位が自動でピクセルに切り替わり、ラスタライズ効果も画面解像度（72ppi）に設定されます。印刷タブのまま作業を始めると単位がmmになり、後でピクセルへ変換し直す手間が生じます。Webタブの選択ひとつが、単位の混乱を防ぐ最も確実な方法です。
カラーモードRGBは納品後の色変わりを防ぐ設定
ドキュメント設定画面で「カラーモード」を「RGB」に設定します（初期値がCMYKになっている場合は必ず変更してください）。WebバナーはモニターやスマートフォンのRGB光源で表示されるため、CMYKで制作すると書き出し時に色が変わって見える現象が起きます。たとえば鮮やかな青はCMYKに変換された瞬間にくすんだ印象になることがあります。カラーモードはドキュメント作成後にも変更できますが（「ファイル」→「ドキュメントのカラーモード」）、作成前に正しく設定しておくことで、素材の色変わりリスクを大幅に低減できます。
幅・高さは依頼書の数値をそのままピクセルで入力する
バナーサイズは媒体と掲載位置によって異なります。依頼書や入稿規定に記載されたピクセル数をそのまま「幅」「高さ」に入力してください。よく使われるサイズの例として、300×250px（ミディアムレクタングル）や728×90px（リーダーボード）があります。練習目的であれば300×250pxで始めると、各要素の配置バランスを確認しやすい大きさです。設定が完了したら「作成」ボタンを押してアートボードを生成します。バナー制作ではIllustratorとPhotoshopを用途で使い分けるのが実務の基本ですが、Webデザイナーはどちらのツールを選ぶべきかで詳しく比較しています。
CHECK
▶ 今すぐやること: Illustratorで「Web」タブを選び、依頼書のサイズ数値を入力して新規ドキュメントを作成する（5分）
Q: アートボードのサイズは後から変更できますか？
A： 変更できます。「オブジェクト」→「アートボード」→「アートボードを編集」から幅・高さを再入力できます。ただし配置済み素材の位置がずれる場合があるため、できるだけ制作前に確定させてください。
Q： 解像度72ppiで本当に問題ありませんか？
A： Webバナーの表示品質はピクセル数で決まるため、ppiの値自体は書き出し後の見た目に影響しません。高解像度ディスプレイ向けに2倍サイズで制作して縮小書き出しする場合は150ppiや144ppiに設定するケースもあります。
バナー制作は目的とラフで8割が決まる
色を付け始める前にラフを作っておくかどうかで、完成品のクオリティが大きく変わります。装飾やグラデーションを先に手がけても、情報の優先順位が整理されていなければ「伝わらないバナー」になってしまいます。
目的・ターゲット・CTAの3点を制作前に言語化する
バナーを作り始める前に、次の3点を書き出してください。まず「このバナーは何のために掲載するのか（目的）」、次に「誰に向けて表示されるのか（ターゲット）」、最後に「クリック後に何をしてほしいのか（CTA）」です。たとえば「夏セールのECサイトに訪問した30代女性に、今すぐ会員登録させる」と言語化できれば、文言・色・CTAボタンのデザインがおのずと絞られます。この3点を言語化せずに制作を始めると、修正のたびに方向性がぶれ、納品まで時間がかかります。
競合バナーを3件収集してレイアウト・配色・情報量を記録する
掲載予定の媒体で実際に配信されている競合バナーを3件以上収集し、次の観点でメモしてください。第一にレイアウト構成（画像が左か右か、テキストの量）、第二に使用色の数（2色か3色か）、第三に情報量（見出し・補足文・CTAのみか、細かい説明が入っているか）です。競合の共通点が見えると「業界標準の見せ方」が判明し、逸脱すべき点と守るべき点を判断しやすくなります。競合調査はゼロから発想する負荷を減らし、制作時間を短縮する現実的な手段です。バナーの配色選びは3色・70:25:5比率を軸にすると初心者でも垢抜けた仕上がりになります。
モノクロのラフで情報階層を先に固める
Illustratorで長方形ツールとテキストツールだけを使い、モノクロのラフを作成してください。ここで確認するのは「何を最初に読ませるか（見出し）」「次に何を見せるか（画像・補足文）」「最後にどこへ誘導するか（CTA・ロゴ）」の3段階の優先順位です。色を付けた後に情報階層を修正しようとすると、配色まで作り直しになります。モノクロで固めれば、色の作業に集中できます。
ラフから本番への移行は「要素を入れ替える」イメージで進める
モノクロラフで確定したレイアウトを維持したまま、グレーの長方形を実際の画像・ロゴに差し替え、黒テキストを実フォント・実文言に置き換えていきます。いきなり全要素を配置しようとすると収拾がつかなくなります。「長方形→実画像」「仮テキスト→実テキスト」と1要素ずつ入れ替えることで、ラフとの乖離を最小限に抑えることができます。ラフの段階でクライアントに確認を取ると、方向性のズレを早期に修正でき、制作後の大幅な手戻りを防ぐことができます。
CHECK
▶ 今すぐやること: 長方形とテキストだけを使い、幅300×高さ250pxのモノクロラフをIllustratorで1枚作成する（15分）
Q: ラフはどのツールで作るのがおすすめですか？
A： Illustratorの長方形ツールとテキストツールだけで十分です。紙と鉛筆でのスケッチも有効ですが、Illustrator上で作ると、そのまま本番制作への移行がスムーズになります。
Q： 競合バナーの収集はどこで行えますか？
A： GoogleディスプレイやYahoo!ディスプレイなど実際の掲載面を確認するほか、バナー広告を収集しているサイト（bannerbankやad.1jpなど）で業界別に参照できます。
バナー素材配置は5要素を優先順位順に配置
アートボードができたら、実際に素材を並べていきます。5つの要素と優先順位の順序を知るだけで、「何をどこに置けばよいか」という悩みは解消されます。
背景を最初に作り、すべての要素の土台を確定する
背景は長方形ツールでアートボード全面を覆う長方形を作成し、任意の色・グラデーション・パターンを適用します。背景を最初に完成させると、その後に配置する文字・画像・CTAのコントラストが確認しやすくなります。背景を後回しにすると、一度確定した配色をすべて見直す羽目になります。背景レイヤーは最下層に固定（レイヤーロック）しておくと、誤って動かすリスクを防げます。
メイン画像はクリッピングマスクで切り抜いてアートボード内に収める
写真やPSD素材をIllustratorに配置するには、「ファイル」→「配置」を選択します（Ctrl/Cmd+Shift+P）。配置した画像はリンク形式になるため、後でファイルを移動すると画像が表示されなくなります。納品前には「ウィンドウ」→「リンク」パネルから埋め込みに変換することを習慣にしてください。画像をアートボード外にはみ出させたくない場合は、アートボードと同サイズの長方形を作りクリッピングマスク（Ctrl/Cmd+7）をかけます。これにより画像はアートボード内だけに表示され、書き出しでもはみ出さずに仕上がります。イラレのクリッピングマスク完全ガイドで詳細な手順を確認できます。
見出し・補足文・CTAの3テキストを情報階層順に配置する
テキストの配置順は「見出し（最も大きく）→補足文（中サイズ）→CTA文言（ボタン上）」の順が基本です。見出しは読者が最初に目に入る文字で、バナーの主張を1行で伝える役割を持ちます。補足文は見出しの根拠や条件を2〜3語で補い、CTAは「今すぐ申し込む」「詳細を見る」など行動を直接促す動詞で書きます。3つの情報が同じサイズで並んでいると、読者はどこから読めばよいか判断できず、クリック率が下がります。
ロゴは右下または左下に小さく配置し視線の邪魔をしない
ロゴの役割はブランド認知であり、メッセージの主役ではありません。配置の基本は四隅のいずれか（右下が最多）で、見出しの1/4程度のサイズが目安です。ロゴを中央や上部に大きく置くと、読者の視線がメッセージより先にブランド名に引き付けられてしまい、伝えたい情報が届きにくくなります。
整列機能で全要素を揃え、視覚的な秩序を作る
「ウィンドウ」→「整列」パネルを使い、テキスト・画像・ロゴの左端または中央を揃えます。整列の基準は「アートボードに整列」または「キーオブジェクトに整列」のいずれかを選べます。要素がバラバラに置かれていると無意識に「雑に見える」印象を与えます。整列だけで、同じ素材でも格段にプロらしい仕上がりになります。デザイン4原則を意識することで、整列の効果がさらに高まります。
CHECK
▶ 今すぐやること: 背景→メイン画像→見出し→補足文→CTA→ロゴの順番で素材を1つずつ配置し、最後に整列パネルで左端を揃える（20分）
Q: 画像をIllustratorに配置するとき、埋め込みとリンクのどちらがよいですか？
A： 制作中はリンク形式のまま作業し、納品前に埋め込みに変換する流れが一般的です。リンクのままだと画像ファイルも一緒に渡す必要があり、ファイル管理が煩雑になります。
Q： Photoshopとの使い分けはどこで判断しますか？
A： ロゴ・テキスト・図形・装飾など輪郭が明確な要素はIllustratorで作成します。写真の色補正・合成・複雑なレタッチはPhotoshopで行い、完成した画像をIllustratorに配置するのが効率的な使い分けです。
Illustratorバナー制作は適切なデザインを3分で診断
バナーが「クリックされやすい状態」になっているかどうかを、以下の質問で確認してください。3問に答えるだけで仕上がりの課題が明確になります。
Q1: 見出しは1行以内に収まっていますか？
見出しが2行以上に折り返している場合、情報量が多すぎるか、フォントサイズが小さすぎます。見出しが1行以内に収まっているならQ2へ進んでください。2行以上になっているなら、まず文言を削り、核心だけを1行に圧縮してください。
Q2: 見出し・補足文・CTAは3種類のフォントサイズで差をつけていますか？
同じサイズが並んでいると読者は優先順位を判断できません。3種類以上のサイズ差があればQ3へ進んでください。サイズが同じ、または差が小さい場合は、見出しを最も大きく、CTAを2番目に大きくしてください。
Q3: 背景色と文字色のコントラストは確保できていますか？
薄い背景に白文字、または明るい背景に黄色文字は読めません。コントラストが確保できていればResult A、不十分であればResult Bを参照してください。
Result A: 仕上がり良好
バナーの基本要件を満たしています。次のステップとして、CTAボタンに枠線または色の塗りを加えてクリックを促す見た目を作り、書き出しに進んでください。
Result B: コントラスト要修正
文字色を白または黒に変更し、背景に半透明の濃いオーバーレイを重ねると視認性が改善します。修正後、再度Q3から確認してください。
CHECK
▶ 今すぐやること: 自分のバナーをQ1→Q3の順に確認し、1つでもNGがあれば該当箇所を修正する（3分）
Q: コントラスト比の数値目安はありますか？
A： Webアクセシビリティのガイドライン（WCAG 2.1）では、通常テキストのコントラスト比は4.5:1以上が推奨されています。Illustratorにはコントラスト比の計算機能はないため、ブラウザの開発者ツールや「Colour Contrast Analyser」などの無料ツールで確認できます。
デザインツールを仕事で使えるようになりたい方へ
Photoshopの全工程の解説動画をLINEで受け取る
LINEで無料で届くもの
- 全工程Photoshopの解説動画
- 20本Webデザインの無料レッスン
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
バナー文字組みは3段階で可読性を高める
文字を配置しただけでは「読まれる文字」にはなりません。バナーの文字組みで意識すべきことは、フォント選択・サイズ設定・行間調整の3段階です。この3段階を順番に進めれば、初心者でも読みやすいテキストを作れます。
フォントはゴシック体1種に絞ってウェイトで差をつける
Webバナーでは可読性の高いゴシック体（サンセリフ体）を基本に選んでください。初心者のうちは1種類のフォントファミリーを選び、見出しにBold・補足文にRegular・CTAにMediumなどウェイトで差をつける方法が、まとまりが出やすくておすすめです。複数のフォントを混在させると、統一感がなくなり素人らしい印象になります。Adobe Fontsで利用できるNoto Sans JPやBIZ UDPGothicは、細ウェイトから太ウェイトまで揃っており、バナー制作の最初の1本として適しています。ゴシック体おすすめ7選で用途別の選び方を確認しておくと選定がスムーズです。
フォントサイズは最小16px・見出しは補足文の2倍以上を目安にする
Webバナーでは最小でも16px以上のフォントサイズを使用してください。16px未満の文字はスマートフォンの実寸表示で判読しにくくなります。見出しのサイズは補足文の2倍以上（例：補足文14px→見出し28px以上）を目安にすることで、情報の優先順位が視覚的に伝わります。フォントサイズはIllustratorの「文字」パネル（Ctrl/Cmd+T）から数値入力で正確に設定できます。
行間は文字サイズの1.5〜1.8倍に設定して読み飛ばしを防ぐ
Illustratorの「文字」パネルで「行送り」の数値を変更します。フォントサイズが20pxであれば行間は30〜36px（1.5〜1.8倍）が読みやすい範囲です。行間が詰まりすぎると文字が塊に見え、広すぎると視線がつながらなくなります。また、単語間のカーニング（文字間隔）は、見出しテキストに対してオプティカルカーニングを適用すると均一な見た目に近づきます（「文字」パネルの「カーニング」プルダウンで「Optical」を選択）。これらの設定は、文字の「量」を増やさずに読みやすさを向上させる確実な方法です。
CHECK
▶ 今すぐやること: 自分のバナーの見出しフォントサイズを確認し、補足文の2倍未満になっていれば見出しを拡大する（5分）
Q: 日本語フォントとアルファベットのフォントを混在させてもよいですか？
A： 混在させること自体は問題ありません。ただし日本語フォントにアルファベットが含まれている場合、欧文部分だけ別のフォントに差し替える「合成フォント」機能を使うと、より自然な文字組みになります（「書式」→「合成フォント」）。
Q： バナーに使うフォントは何種類まで使ってよいですか？
A： 2種類以内が目安です。同一ファミリー内のウェイト違いはカウントしません。3種類以上になると視覚的なノイズが増え、統一感が失われます。
Illustratorバナー制作は5つの仕組みで効率化
ここでは、実務上の効率化と品質向上のポイントを5つ紹介します。フリーランスとして案件をこなすうえで、制作時間を短縮しながら品質を維持するための仕組みです。
ハック1: アートボード複製で複数サイズを30分で展開
【対象】: 1つの原稿から複数サイズのバナーを納品する必要があるフリーランス
【手順】: ベースとなるサイズのバナーを完成させ、全要素をグループ化します（5分）。「ウィンドウ」→「アートボード」パネルで該当アートボードを選択し、「+」ボタンで複製します（2分）。複製したアートボードを新サイズに変更し、グループを新アートボードにコピーして要素を再配置します（23分）。
【コツと理由】: 「サイズごとに別ファイルで作り直す」より「1ファイル内でアートボードを複製してサイズだけ変える」方が作業時間を削減できます。アートボード複製を使うと、フォント設定・配色・整列の基準が引き継がれるため、各サイズで一から整える必要がなくなります。ファイルが1つにまとまるので、クライアントへの共有も簡単になります。
【注意点】: サイズが変わるとテキストの折り返しやメイン画像の見切れが発生します。複製後は必ず全サイズを実寸表示で確認してください。「アートボードごとに書き出す」設定は後述の書き出し手順でまとめて行うことができ、個別書き出しは不要です。
ハック2: グリッドとガイドで整列作業を短縮
【対象】: 要素の配置に時間がかかり、微妙なズレが気になるフリーランス
【手順】: 「表示」→「定規」を表示し（Ctrl/Cmd+R）、定規からドラッグしてガイドを引きます（2分）。「ファイル」→「ドキュメント設定」→「グリッド」でグリッド間隔を設定して表示します（1分）。「表示」→「スマートガイド」をオンにして要素を動かすと、隣接要素との間隔が数値で表示されるため、ドラッグだけで等間隔配置が完了します（1分30秒）。
【コツと理由】: スマートガイドをオンにしておくだけで、ドラッグ中に要素同士の中心・端・間隔が自動でスナップするため、整列パネルをほとんど使わなくても正確な配置ができます。整列パネルは複数要素をまとめて揃える場面にのみ使い、単体の移動はスマートガイドに任せることでトータルの整列作業時間を短縮できます。
【注意点】: スマートガイドが邪魔に感じる場合はCtrl/Cmd+Uでオフにできます。グリッドを印刷・書き出しに含めないためには「表示」→「グリッドを非表示」にした状態で書き出してください。グリッドを表示したまま書き出してもグリッド線が画像に入ることはありませんが、念のため非表示にしてから書き出す習慣を持つと安全です。
ハック3: スウォッチ登録でバナー配色の揺れをゼロにする
【対象】: 複数サイズや修正対応時に、指定カラーがズレてしまうフリーランス
【手順】: クライアントから指定された16進数カラーコードを確認します（例：#E03B2D）（2分）。カラーピッカーでHex値を入力し、「スウォッチ」パネル（「ウィンドウ」→「スウォッチ」）の「+」ボタンでグローバルスウォッチとして登録します（3分）。以降はスウォッチをクリックするだけで同一カラーを適用でき、修正時もスウォッチの値を変更すると全要素に一括反映されます（即時）。
【コツと理由】: グローバルスウォッチとして登録した色を後で変更すると、そのスウォッチを使用しているすべてのオブジェクトの色が一括で更新されます。クライアントからブランドカラーの変更を求められた場合でも、1箇所の修正で全要素に反映され、色の修正ミスを防ぐことができます。
【注意点】: スウォッチはドキュメントに紐づいているため、新規ファイルに移動する場合は「スウォッチ」パネルメニューから「スウォッチライブラリを保存」→別ファイルで「ライブラリを読み込む」の手順が必要です。スウォッチの引き継ぎを忘れると別ファイルで色が揃わなくなるため、プロジェクトの最初にスウォッチを作るだけでなく、テンプレートファイルとして保存しておくことを強くおすすめします。
ハック4: 文字スタイル登録で修正ラウンドの時間を削減
【対象】: テキストの修正指示のたびに全要素を個別に変更しているフリーランス
【手順】: 見出し用テキストに任意のフォント・サイズ・ウェイトを設定します（3分）。「ウィンドウ」→「文字スタイル」でスタイルパネルを開き、設定済みテキストを選択した状態で「+」ボタンを押してスタイルを登録します（2分）。以降は同じスタイルを適用したいテキストを選択し、登録したスタイルをクリックするだけで設定が一括反映されます。修正時もスタイルの数値を変更すると全テキストに一括適用されます（1分）。
【コツと理由】: 文字スタイルを使って一括管理すると、修正ラウンドあたりの作業時間を削減できます。クライアントから「見出しのフォントサイズを36pxから40pxに変更してほしい」という指示が来た場合、文字スタイルの数値を1箇所変えるだけで全見出しに反映されます。個別変更は設定ミスが起きやすく、見出しごとにサイズが微妙にずれるリスクがあります。
【注意点】: 文字スタイルを適用したテキストに手動でスタイルを上書きすると「+」マークが付いて不整合が発生します。スタイルの一貫性を保つには手動上書きは避け、修正はスタイルパネルから行うことを徹底してください。個別のテキストだけ例外的にスタイルを外したい場合は「文字スタイルをクリア」で解除できます。
ハック5: 書き出し設定の事前保存で納品ミスをゼロにする
【対象】: 書き出し形式・解像度・カラープロファイルの設定を毎回迷うフリーランス
【手順】: 「ファイル」→「書き出し」→「スクリーン用に書き出し」を開きます（1分）。形式（JPGまたはPNG）・拡大率（1×=実寸、2×=Retinaサイズ）・フォルダパスを設定し、設定内容をプリセットとして保存します（5分）。次回以降はプリセットを選択するだけで同一設定で書き出せるため、設定の確認は不要です（30秒）。
【コツと理由】: 「スクリーン用に書き出し」はアートボード単位での書き出しやRetinaサイズへの対応が1操作で完了し、複数サイズのバナーを一括書き出しできます。設定をプリセット保存することで、形式や解像度の設定ミスによる納品エラーを防ぐことができます。
【注意点】: JPGは半透明（アルファチャンネル）に対応していません。透過が必要なバナー（ロゴ単体、透過背景）は必ずPNGで書き出してください。JPGとPNGを取り違えて納品すると、透過部分が白で埋まった状態で入稿されるため、媒体側でエラーになります。イラレの書き出し解像度の設定方法も合わせて確認しておくと安心です。
CHECK
▶ 今すぐやること: アートボードを複製して別サイズのバナーを1つ作成し、スクリーン用に書き出してファイルサイズを確認する（30分）
Q: 複数サイズを一度に書き出す方法を教えてください。
A: 「ファイル」→「書き出し」→「スクリーン用に書き出し」を開き、「アートボード」タブで書き出したいアートボードにチェックを入れると複数同時書き出しができます。形式・フォルダをまとめて設定できるため、個別書き出しより効率的です。
Q： 書き出したJPGのファイルサイズが大きすぎる場合はどうすれば？
A： 「スクリーン用に書き出し」のJPG品質を100から80程度に下げてください。画質の劣化はほとんど目立たず、ファイルサイズを削減できます。媒体の入稿規定でファイルサイズ上限が定められている場合は、その上限以下になるまで品質を下げて調整します。
バナー書き出しはJPGとPNGで用途を切り替える
バナーが完成したら、書き出しの手順に進みます。JPGとPNGの判断基準は明確です。用途に合わせて使い分けるだけで、納品後のトラブルをほぼゼロにできます。
JPGは写真系・色数が多いバナーに使い品質80で書き出す
背景に写真を使ったバナー、グラデーションが多いバナーはJPG形式で書き出します。JPGは色情報を圧縮して保存するため、写真ベースの画像をPNGより小さいファイルサイズで書き出せます。品質設定は80が実用上の目安で、掲載面での見た目と容量のバランスが取れています。JPGは保存のたびに圧縮劣化が蓄積するため、納品後に再書き出しが必要な場合に備え、Illustratorの元ファイル（.ai）は必ず保存してください。
PNGは透過・テキスト多めのバナーに使いファイルサイズを確認する
背景が透明な素材、テキストが小さく鮮明さが重要なバナーはPNG形式で書き出します。PNGは可逆圧縮であり、テキストのエッジがぼやけることなく保存されます。ただし写真ベースのバナーをPNGで書き出すとJPGと比較してファイルサイズが大きくなることがあります。媒体の入稿規定でファイルサイズ上限が設定されている場合は、書き出し後に必ずサイズを確認してください。PDF・JPG・PNGの3形式の使い分けルールも参考にしてください。
書き出し後は実寸表示と縮小表示の両方で品質を確認する
書き出したJPG・PNGファイルをブラウザやOSのプレビューで開き、100%表示（実寸）と50%表示（縮小）の両方で確認します。制作中はIllustratorのアートボード上で拡大して作業することが多いため、縮小表示で初めて気づくテキストの潰れや画質の粗さがあります。スマートフォン表示を想定したバナーは、横幅300〜400pxの実寸で確認することを習慣にしてください。
CHECK
▶ 今すぐやること: 完成したバナーをJPG品質80とPNG両方で書き出し、ファイルサイズと見た目をブラウザで並べて比較する（10分）
Q: Retinaディスプレイ向けに2倍サイズで書き出すべきですか？
A： 高解像度ディスプレイへの対応が入稿規定に含まれている場合は、2倍サイズ（例：300×250pxのバナーなら600×500pxで書き出し）が必要です。「スクリーン用に書き出し」で拡大率を2×に設定するだけで対応できます。入稿規定に記載がない場合は、クライアントに確認してから書き出してください。
Q： 書き出したPNGが想定より白っぽく見えます。原因は何ですか？
A： Illustratorで設定したカラープロファイルが書き出し時に埋め込まれ、ブラウザ側の色管理と合わない場合に発生します。「スクリーン用に書き出し」の設定でカラープロファイルを「なし」または「sRGB」に変更すると解決することが多いです。
フリーランスのバナー案件は7項目の事前確認で防ぐ
フリーランスとして実際にバナー案件を受注すると、制作後に「サイズが違った」「形式がJPGではなくGIFだった」「フォントが使用不可だった」という事態が発生することがあります。これらの大半は、受注直後に7項目を確認するだけで防ぐことができます。
受注直後に確認すべき7項目とその理由
確認すべき第一の項目はバナーサイズと複数サイズの有無です。1種類だと思っていたら3サイズ必要だったというケースは珍しくありません。次に確認するのは納品ファイル形式です。JPGかPNGか、aiファイルも必要かを明示的に確認します。第三はカラーモードで、Web案件でも印刷物と併用する場合はCMYKを求められることがあります。第四は使用素材の指定で、クライアントが用意するロゴ・画像のファイル形式と解像度を確認します。第五はフォントの使用制限で、クライアント指定のフォントがあるか、ライセンス的に使用できるかを確認します。第六はテキストのアウトライン化の要否で、ロゴや見出し文字をアウトライン化して納品する場合は元ファイルも必ず別保存してください。第七は入稿先の媒体規定で、Google広告やYahoo!広告など媒体ごとに最大ファイルサイズ・アニメーション可否・テキスト占有率などの制限があるため、公式の入稿規定を事前に確認します。
テキストのアウトライン化は元データ保存とセットで行う
納品前にテキストをアウトライン化する場合は、「ファイル」→「別名で保存」でアウトライン前の元ファイルを保存してから実行してください。アウトライン化後はテキストの編集ができなくなるため、元ファイルがなければ修正指示への対応が不可能になります。アウトライン化は「書式」→「アウトラインを作成」（Ctrl/Cmd+Shift+O）で実行し、全オブジェクト選択（Ctrl/Cmd+A）の状態で行うと一括処理できます。イラレのアウトライン化の手順を事前に確認しておくと本番でスムーズです。
素材のライセンス確認は制作前に完了させる
使用するフォント・写真・イラスト素材がバナー広告への商用利用を許可しているかを、制作開始前に確認してください。Adobe FontsのフォントはAdobe Creative Cloudの契約範囲内で多くの商用利用が可能ですが、個別のライセンス規約は最新の利用規約を確認してください。Adobe Stockの素材は利用規約に応じて用途が制限されることがあります。フリーランスとして第三者のコンテンツを扱う場合の責任は制作者に帰属するため、利用規約の最終確認は必ず自身で行ってください。
CHECK
▶ 今すぐやること: 受注中または検討中の案件について、上記7項目のリストをメモに書き出し、クライアントへの確認メールを送る（10分）
Q: クライアントから「とりあえずJPGで」と言われましたが、他の形式も確認すべきですか？
A： はい、確認してください。入稿先の媒体規定でJPG以外が必要な場合や、ロゴに透過が必要な場合はPNGが必要になります。「入稿先の媒体と入稿規定はいずれかご確認いただけますか？」と一言添えるだけで、後の修正リスクを大幅に減らすことができます。
Q： フリーランス初案件でポートフォリオがない場合、どうすれば受注できますか？
A： 自主制作バナー（架空のクライアント想定）を複数パターン作り、Behanceやnoteに掲載することが有効です。複数サイズのバリエーション展開や、制作意図の説明を加えると、スキルと思考プロセスをあわせてアピールできます。
Illustratorバナーは7ステップで完成させる：設定から納品まで
Illustratorでのバナー制作は、設定・ラフ・素材配置・文字組み・品質チェック・書き出し・納品確認の7ステップで完結します。最初の設定ミス（カラーモードCMYKのまま、単位mm）が後工程の大部分のトラブルを引き起こすため、Webタブ・RGB・ピクセルの3点を制作前に必ず確認することが最も大切です。ラフをモノクロで固めてから着色に進む順序を守ることで、修正の手戻りを最小限に抑えることができます。
フリーランス案件ではスキルと同じくらい「事前確認の習慣」が品質を左右します。7項目のチェックリストを受注時の定型業務として取り入れれば、制作後の大幅な修正を防ぎ、クライアントからの信頼も積み重なっていきます。
| 状況 | 次の一歩 | 所要時間 |
| Illustratorをまだ開いていない | Webタブ・RGB・ピクセルで新規ドキュメントを作成する | 5分 |
| 素材は揃っているが配置に迷う | 背景→画像→見出し→補足文→CTA→ロゴの順に配置する | 20分 |
| 完成したが書き出し方法がわからない | スクリーン用に書き出しでJPG品質80とPNGの両方を書き出す | 10分 |
| フリーランス案件を受注した | 7項目確認リストをメモに書いてクライアントへ確認メールを送る | 10分 |
Illustratorバナー作り方に関するよくある質問
Q: IllustratorはWebバナー制作に向いていますか？Photoshopとどちらがよいですか？
A： 両者の役割は異なります。Illustratorはロゴ・テキスト・図形・装飾など輪郭が明確な要素の制作に適しており、ピクセル数に依存しないベクターデータで制作できる点がバナーに向いています。写真の複雑な色補正や合成が必要な場合はPhotoshopで処理した画像をIllustratorに配置する組み合わせが実務では一般的です。
Q： バナーの標準的なサイズはありますか？
A： 媒体によって異なります。よく使われる例として、300×250px（ミディアムレクタングル）、728×90px（リーダーボード）、160×600px（ワイドスカイスクレイパー）があります。Google広告などの媒体では入稿可能なサイズの一覧が公式ページに掲載されていますが、仕様は更新される可能性があるため、制作前に公式の入稿規定を確認してください。
Q： バナーのカラーモードを途中でRGBからCMYKに変えると何が起きますか？
A： 鮮やかな蛍光色やビビッドな青・緑はCMYKの表現範囲外にあるため、変換時に色がくすんだ印象に変わります。配置済みの画像も影響を受ける場合があります。WebバナーはRGBのまま完成させ、印刷物が必要な場合は別ファイルでCMYKの制作を行うことをおすすめします。
【出典・参照元】
Adobe Illustrator公式：バナーデザインソフトウェア – Illustratorでのバナー制作機能、アートボード、書き出し形式の概要
Adobe公式：バナーデザインのコツと作り方 – 目的・ターゲット設定、IllustratorとPhotoshopの使い分け、テキストのアウトライン化
SkillHub：Illustratorでバナー掲載要素を配置 – 600×500px・RGB設定、モノクロラフ、情報優先順位の実例
SkillHub：IllustratorとPhotoshopでつくるバナー制作講座 – 競合調査、ラフ、文字組み、配色、書き出し、納品の全体フロー
できるネット：Webバナーを作ろう – Illustratorの整列機能を使ったWebバナー制作