Illustratorでバナーの作り方｜アートボード設定から書き出しまで5手順

Illustratorは、文字とベクター図形をきれいに扱えるので、バナー広告の制作に向いたソフトです。ただ、印刷物で使い慣れた人ほど、Web配信用のバナーで同じ設定のまま作ってつまずきます。

つまずくポイントは、はっきりしています。カラーモードがCMYKのままで色がくすむ、ピクセル単位でそろえずに線がにじむ、「Web用に保存」と「スクリーン用に書き出し」のどちらを使うか迷う——。この3つが、Illustrator製バナーが「なんだか甘い」と言われる主な原因です。

この記事では、Illustratorでのバナーの作り方を5つのステップに分け、Web配信に耐える設定と書き出しのコツを解説します。デザイナーでなくても、入稿して恥ずかしくない品質まで持っていくのが目標です。

この記事でわかること:

  • Illustratorでのバナーの作り方（5ステップの全体像）
  • Web用ドキュメントの設定（カラーモード・単位・解像度）
  • 文字や線がにじまないピクセルグリッドの使い方
  • 「スクリーン用に書き出し」でPNG・JPG・SVGを出す手順
  • Illustratorでの制作が限界になる境目
※ この記事で解説する設定とサイズ展開を自動化したいなら、AIバナー作成の始め方も選択肢になります。TaskyならURLを入れるだけで、1枚約45円から数分でバナーを生成できます（7日間無料トライアル）。

Illustratorでのバナーの作り方｜5つのステップ

Illustratorでバナーを作る5つのステップ（サイズ決め・ドキュメント設定・レイアウト・書き出し・容量調整）を順に並べたフロー図

まず全体像を押さえます。Illustratorでのバナーの作り方は、次の順番で進めると手戻りが減ります。

  1. 掲載先のサイズと容量を決める — 媒体の入稿規定を先に確認する
  2. Web用ドキュメントとアートボードを設定する — RGB・ピクセル・72ppiにそろえる
  3. 崩れないレイアウトで作る — ピクセルグリッドと文字量のルールを守る
  4. Web用に正しく書き出す — スクリーン用に書き出しで形式と倍率を選ぶ
  5. 容量を規定内に収める — 形式変換と圧縮で調整する

ポイントは、作り始める前の1と2です。ここを飛ばして先にデザインを作ると、後から色や寸法を直すときに全体を組み直すことになります。順番に見ていきます。

TASKY GENERATED生成例の生成例
スキンケア美容液のバナー例パーソナルジムのバナー例新築住宅見学会のバナー例

URLを入れるだけで、この品質のバナーが3案。

7日間無料トライアル。月額9,800円から。

Taskyを見る →

ステップ1：掲載先のサイズと容量を先に決める

バナー広告の代表的な3サイズ（300x250・728x90・320x50）の縦横比を比較した図

最初にやるべきは、デザインではなく「どの媒体のどのサイズに出すか」を決めることです。バナーのサイズは媒体ごとに規定が異なり、寸法が合っていないと表示が崩れたり、入稿で弾かれたりします。

主要なディスプレイ広告（GDN・YDA）でまず使うのは、次の3サイズです。

サイズ（px）配信面
300×250記事中レクタングル
728×90PC向けリーダーボード
320×50スマホ画面下部

この3つでGDN・YDAの配信面の大半をカバーできます（Google広告ヘルプ）。SNS広告なら1080×1080（正方形）や1080×1350（縦長）が中心です（Meta広告ガイド）。媒体別の全サイズは「広告バナーサイズ一覧」に整理しています。

同時に、ファイル容量の上限も確認します。GDNは5,120KBと余裕がありますが、YDAは実質300KB以内に収める必要があります（Yahoo!広告ヘルプ）。容量の厳しい媒体に出すなら、作る段階から軽量化を意識しておきます。

ステップ2：Web用ドキュメントとアートボードを設定する

Illustratorの新規ドキュメントをWeb向けに設定する3項目（RGB・ピクセル・72ppi）を示したパネル図

ここがIllustrator特有のつまずきポイントです。印刷用の設定のままWebバナーを作ると、色と解像度がずれます。新規ドキュメントを作るときに、3つの設定をWeb向けにそろえます。

カラーモードはRGB、単位はピクセルにする

RGBとCMYKの発色の違いを左右で対比し、Webバナーはくすまないよう画面向けのRGBで作ることを示した図

新規作成の画面で「Web」プロファイルを選ぶと、Web向けの前提がまとめて整います。中でも大事なのがカラーモードです。印刷はCMYK、画面表示はRGBで色を再現します。バナーは画面で見る広告なので、RGBで作らないとブラウザ上で色がくすみます。AdobeもwebグラフィックはまずRGBで作ることを推奨しています（Illustrator公式ヘルプ）。

単位も、初期状態ではミリメートルになっていることがあります。環境設定で単位を「ピクセル」に変えておくと、座標やサイズの入力が媒体規定と同じ数字になり、ずれが減ります。

解像度（ラスタライズ効果の設定）は、Webなら72ppiが基準です。ドロップシャドウやぼかしなどの効果を使う場合は、「効果」メニューの「ドキュメントのラスタライズ効果設定」を確認しておきます。効果を多用するバナーでこの値が低いと、拡大して書き出したときに効果の部分だけ粗く見えることがあります。

複数サイズはアートボードを分けて1ファイルで管理する

1つのIllustratorファイルに複数サイズのアートボードを並べて全サイズを一括管理する様子を示した俯瞰図

Illustratorの強みは、1つのファイルに複数のアートボードを置けることです。300×250、728×90、320×50を別々のアートボードとして並べれば、1ファイルで全サイズを管理できます。

色やロゴを後から直すとき、ファイルが分かれていると全部を開いて直す手間がかかります。アートボードでまとめておけば、1か所の修正を見比べながら各サイズに反映できます。この「1ファイルに複数サイズ」の作り方が、次の書き出しの効率にも効いてきます。

ステップ3：崩れないレイアウトの作り方

ガイド線と揃った余白で見出しとCTAが整列した、崩れないバナーレイアウトのイラスト

ドキュメントが整ったら、レイアウトを組みます。バナーで崩れを防ぐコツは、Illustratorならではのピクセル管理と、要素を減らすことの2つです。

ピクセルグリッドに合わせて、線のにじみを防ぐ

ピクセルグリッドに整合した線はくっきり、ずれた線はにじむことを拡大して対比したイラスト

ベクターで作っていても、書き出すと最終的にはピクセルの画像になります。線や文字の位置が中途半端なピクセルにまたがると、エッジがにじんで甘く見えます。

Illustratorには「新規オブジェクトをピクセルグリッドに整合」という設定があり、Web用ドキュメントでは標準で有効になっています（Illustrator公式ヘルプ）。これをオンにしておくと、作ったオブジェクトがピクセルの格子にそろい、エッジがくっきりします。「表示」メニューの「ピクセルプレビュー」をオンにすると、書き出し後の見た目で確認しながら作業できます。細い罫線や小さい文字を置くときほど、この確認が効きます。

伝えることを1つに絞る

1メッセージとCTAだけに絞ったバナーと、情報を詰め込みすぎたバナーを対比したイラスト
  • 1枚で言うことは1メッセージ — 詰め込むほど弱くなります。核になる言葉とクリックしてほしい行動（CTA）だけ残します
  • 文字は大きく、少なく — 320×50のような小さい配信面では、長い説明文は読まれません
  • 余白をそろえる — ガイドを使って上下左右の余白を同じ幅にすると、素人っぽさが消えます
  • 明るすぎる画像は避ける — 白飛びするほど明るい画像は、Google広告の審査で弾かれる場合があります（Google広告ヘルプ）

デザインの優先順位や配色の考え方は「広告バナーデザインのコツ」で詳しく解説しています。企画から配信までの全体の流れは「バナー広告の作り方」も参考になります。

ステップ4：Web用に正しく書き出す（最大のつまずき）

Illustratorの書き出しで「スクリーン用に書き出し」と「Web用に保存（従来）」の2つの入り口を対比した概念図

Illustrator製バナーで迷いやすいのが、この書き出しです。書き出しの入り口が複数あり、どれを使うか分からなくなります。

「スクリーン用に書き出し」を使う

スクリーン用に書き出しで、1デザインから複数形式と複数倍率を一括出力する流れを示したフロー図

Webバナーの書き出しは、「ファイル」→「書き出し」→「スクリーン用に書き出し」が基本です（Illustrator公式ヘルプ）。この機能には、次の利点があります。

  • 複数形式を一度に出せる — PNG・JPEG・SVG・PDF・WebPなどから選べます
  • 倍率を選べる — 1x・2x・3xを同時に書き出せ、高解像度ディスプレイ用の2倍画像も一発で作れます
  • アートボードを一括で出せる — 複数サイズのアートボードを、まとめて個別のファイルに書き出せます
  • フォルダが自動で分かれる — 倍率ごとにサブフォルダが作られ、整理されます

特定のパーツだけ出したいときは、対象を選んで右クリックから「書き出し用に収集」を使い、アセットとして登録してから書き出します（Illustrator公式ヘルプ）。

なお、書き出しの入り口には「Web用に保存（従来）」もあります。これはGIF・JPEG・PNGを扱う旧来の機能で、Adobeは現在、Web向けのデータは「スクリーン用に書き出し」を案内しています。迷ったら新しい「スクリーン用に書き出し」を選びます。

形式の選び分けと、文字をくっきり出すコツ

PNG・JPEG・SVGの3形式を用途（文字と透過・写真・ロゴと図形）で使い分ける比較図

形式は次のように選びます。

  • PNG — 文字・ロゴ・透過背景を含むバナー向け。にじみが出にくい
  • JPEG — 写真が主体で色数が多いバナー向け。容量を抑えやすい
  • SVG — 拡大しても崩れないベクター形式。ロゴや図形中心の軽いバナー向け

文字中心のバナーをJPEGで書き出すと、文字の周りにノイズが出ることがあります。バナーは文字が主役になりやすいので、迷ったらPNGが安全です。

文字をさらにくっきり出したいときは、2xなど高い倍率で書き出してから縮小する方法が効きます。Illustratorで文字を「アウトライン化」（書式→アウトラインを作成）する手もありますが、Web配信用にPNGやJPGへ書き出すだけなら、画像になる時点でフォント情報は不要なので必須ではありません。アウトライン化すると後から文字を直せなくなるため、やるなら作業を終えた最後に、元データを別名で保存してから行います（Illustrator公式ヘルプ）。印刷も兼ねる場合や、.aiファイルを他社に渡す場合には、フォント化けを防ぐためアウトライン化しておくと安心です。

ここまでの設定を、媒体ごとに何サイズも繰り返すのは手間がかかります。1枚のデザインを全サイズに自動展開したいなら、Taskyのマジックリサイズが使えます。外注だとサイズ展開は1枚あたり追加2,000〜5,000円かかりますが、Taskyは追加クレジットのみで展開できます。詳しくはこちら

ステップ5：ファイル容量を規定内に収める

重い画像ファイルを形式変換と圧縮で媒体の容量規定内に収める流れを示したイラスト

最後に、書き出した画像を媒体の容量規定に収めます。特にYDAの300KB制限に引っかかるケースが多いので、超えた場合は次の順で対処します。

  1. 形式を見直す — 写真ベースのバナーなら、PNGよりJPGのほうが軽くなります
  2. JPGの品質を調整する — 品質80%程度まで下げても、バナーサイズでは劣化がほぼ分かりません
  3. 画像圧縮ツールを使う — TinyPNGやSquooshなどの無料ツールで、見た目を保ったまま50〜70%圧縮できます

容量を無理に削ると画質が落ちます。文字が主役のバナーは、PNGのまま圧縮ツールで削るほうが、画質を保ちやすいことが多いです。SVGで出せるシンプルなバナーなら、そもそも容量が小さく収まります。

Illustratorでの制作が限界になるとき

1枚の作り込みはIllustrator、量産とサイズ展開はAIツール、という役割分担を左右で対比した概念図

Illustratorは、1枚のバナーを作り込むのには十分すぎる性能があります。限界が出るのは、次の3つの場面です。

  • サイズ展開 — 1つの訴求を媒体ごとの複数サイズに作り分ける作業。全媒体に出すと1訴求で20サイズ前後になり、アートボードごとにレイアウトを組み直す必要があります
  • 量産とABテスト — 訴求を複数パターン試すたびに、全サイズを手作業で作り直すことになります
  • コスト — Illustrator単体プランは月額2,728円（税込）で、デザイナーに外注すればバナー1枚5,000〜30,000円が加わります（Adobe公式／外注相場）

外注でサイズ展開を頼むと、1枚あたり追加2,000〜5,000円が積み上がります。手作業と外注のどちらでも、検証回数を増やすほどコストと時間が膨らむ構造です。

ここを自動化するのが、AIバナー制作ツールの役割です。TaskyはURLを入れるだけで訴求設計からバナー生成まで行い、マジックリサイズで1枚を全サイズに自動展開します。日本の配信面（GDN・YDA・Meta・LINEなど）のサイズ規定にも対応しています。1枚を丁寧に作り込むのはIllustrator、量産とサイズ展開はAIツール、という分担が現実的です。同じ発想は「Photoshopでのバナーの作り方」でも整理しています。

よくある質問

Q1. Illustratorでバナーを作るときのドキュメント設定はどうすればいいですか？

新規作成で「Web」プロファイルを選び、カラーモードをRGB、単位をピクセルにします。印刷用のCMYKのままだと、画面表示で色がくすみます。解像度（ラスタライズ効果）はWebなら72ppiが基準です。この3つをそろえてから作り始めると、後から色や寸法を直す手戻りが減ります。

Q2. Illustratorで作ったバナーの文字や線がにじむのはなぜですか？

線や文字が中途半端なピクセル位置にあると、書き出し時にエッジがにじみます。「新規オブジェクトをピクセルグリッドに整合」をオンにし（Web用ドキュメントでは標準で有効）、「表示」→「ピクセルプレビュー」で書き出し後の見た目を確認しながら作業します。文字は2xで書き出して縮小するとさらにくっきりします。

Q3. 「スクリーン用に書き出し」と「Web用に保存」はどちらを使いますか？

Webバナーは「ファイル」→「書き出し」→「スクリーン用に書き出し」を使います。PNG・JPEG・SVGを複数の倍率で一度に出せ、アートボードの一括書き出しにも対応しています。「Web用に保存（従来）」は旧来の機能で、Adobeは現在スクリーン用に書き出しを案内しています。

Q4. バナーの文字はアウトライン化すべきですか？

Web配信用にPNGやJPGへ書き出すだけなら、画像になった時点でフォント情報は不要なので、アウトライン化は必須ではありません。アウトライン化すると後から文字を直せなくなります。.aiファイルを他社に渡す場合や、印刷も兼ねる場合は、フォント化けを防ぐために最後にアウトライン化し、元データを別名で残しておきます。

Q5. IllustratorとAIバナーツールはどちらでバナーを作るべきですか？

1枚を時間をかけて作り込むならIllustratorで十分です。複数サイズへの展開や、訴求を変えた量産・ABテストが必要になったら、AIツールのほうがコストと時間で有利になります。月に3〜4本以上の制作があるなら、AIツールの導入でROIが合いやすくなります。

Illustratorでのサイズ展開に限界を感じたら、Taskyの7日間無料トライアルで試せます。登録時に300ポイントが付与され、URLを入れるだけでバナーを生成できます。

まとめ — 設定と書き出しを押さえれば、イラレでも崩れない

Illustratorでバナーを作るときの要点を振り返ります。

  • サイズは先に決める — 媒体の入稿規定（サイズ・容量）を確認してから作り始める
  • ドキュメントはWeb向けに — カラーモードRGB・単位ピクセル・72ppiにそろえる
  • ピクセルグリッドに整合 — エッジのにじみを防ぎ、ピクセルプレビューで確認する
  • スクリーン用に書き出し — PNG・JPEG・SVGを倍率ごとに一括出力。文字中心はPNGが安全
  • 容量は圧縮で調整 — YDAの300KB制限は形式変換と圧縮ツールで対処

1枚を作り込む分にはIllustratorで戦えます。一方、サイズ展開や量産でコストが膨らんできたら、AIバナー作成の始め方も検討してみてください。設計からサイズ展開までを自動化すれば、検証に使える時間が増えます。