【Illustrator】サイズ違いのバナー広告を効率的に作る方法を徹底解説【GDN・YDA完全対応】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator（イラストレーター）でサイズ違いのバナーを効率的に作る方法をイラレ初心者の方に分かりやすく完全解説します。

1つのAIファイル内にアートボードを複数作成し、ゼロからデザインを作成。
そして複数のバナーデザインを指定の画像形式で一括書き出しといった一連の流れを詳しく解説します。

イラストレーターを使ったバナー制作でよく使う基本操作が網羅的に学習できるのでイラレ初心者の方にオススメのコンテンツ！
ノンデザイナーの方でもゼロからオリジナルバナーが作れるスキルを学ぶ事ができます。

この記事の目次

今回作成するバナーの仕様

サンプルではGDN（Googleディスプレイネットワーク）の規格に沿ったバナーを2種類作成します。
1つのAIに2つのアートボードを作成しています。

横幅300px 高さ250px
横幅336px 高さ280px

上記サイズは表示回数が多く似た大きさなので、少ない労力でサイズ違いを作る事ができます。

Illustratorを使ったバナーの作り方

Illustratorを使ってバナーをゼロから作る方法を解説します。
バナーの構成を考え、イラレでデータ作成・書き出しまで一連の流れをノンデザイナーの方でも分かるよう詳しく解説いたします！

バナーの構成を考える

まず、どんなバナーを作りたいかラフイメージを作成します。
不慣れな状態でいきなりイラレ作業に入らず、まずは手描きラフを準備しましょう。

汚い字でも粗くても構いません。
掲載したい要素と大まかなレイアウトを紙とペンを使って描きましょう。
手を使って描く事で情報が整理されます。

アートボードの設定

それでは実際にイラストレーターを使った作業に入ります。
まずはアートボードの設定を行いましょう。

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

新規ドキュメントを作成

[ Ctrl + N ] (Mac：⌘ + N) で新規ドキュメントを作成します。
今回はWeb用バナーなので [ Web ] のタブをクリック。

幅：300px
高さ：250px

に設定し、[ 作成 ] をクリックしましょう。

STEP.2

アートボードツールを選択

ツールバーから [ アートボードツール ] を選択します。

※アートボードツールが見つからない場合は [ ツールバーを編集 ] を参考にしてください。

STEP.3

アートボードツールオプションを設定

画面上部の [ オプション ] を確認してみましょう。
[ + ] の [ 新規アートボード ] をクリックすると既存のアートボードが複製されます。

FINISH

サイズ変更を行ったら完成

複製されたアートボードのサイズを変更します。
オプションの右端にサイズ変更蘭があります。

W：300px → 336px
H：250px → 280px

アートボードの設定が完了しました。
1つのAIファイル内に2つ以上のアートボードが作成できます。

アートボードツールの使い方を完全解説

【Illustrator】アートボードツールの使い方を徹底解説forイラレ初心者

アートボードツールの詳しい方法はコチラの記事で徹底解説しています。
併せてチェックされてみませんか？

バナーのデザイン制作

ラフイメージを元にデザイン制作をしていきましょう。
文字ツールとペンツールが使えると様々な表現が可能になりますよ。

ところでIllustratorは導入されていますか？
まだの方はIllustrator公式サイトから入手しておきましょう。

STEP.1

写真素材を準備してイラレに配置

素材となる写真を準備します。
サンプルはコチラの素材を使っています。

写真素材をドラッグ&ドロップでイラレに配置します。

[ 選択ツール(V) ] を使って位置調整を行いましょう。
バウンディングボックスを有効化しておくと簡単に変形できるのでオススメです。

画像を埋め込む

イラストレーターに配置した画像は念の為に [ 埋め込み ] をしておきましょう。
もしリンクファイルにしておく場合は必ずAIと同じフォルダに画像を保存しておきましょう。

STEP.2

クリッピングマスクで写真の不要箇所を非表示に

アートボードから画像がはみ出していますね。
[ クリッピングマスク ] を使ってマスクを行いましょう。

[ 長方形ツール(M) ] → [ 画面をクリック ] → [ 長方形のダイアログ画面 ]
幅300px x 高さ250pxの長方形を作成、画像と長方形を選択し、[ 右クリック ] → [ クリッピングマスクを作成 ]

クリッピングマスクの使い方はコチラで徹底解説しています。

左右反転の方法

【Illustrator】リフレクトツールを使った反転と反転コピーの方法【脱イラレ初心者】

対象画像を選択し、ツールバーの [ リフレクトツール ] をダブルクリックします。
[ 垂直 ] にチェックを入れて [ OK ] をクリックすれば完成！

STEP.3

文字をベタ入力する

[ 文字ツール ] で文字を入力します。
※文字ツールのショートカットは [ T ]

まずは編集せずにベタ打ちで要素の文字を全て入力。
今回は単語ごとに文字オブジェクトを分けて作成しています。

※文字ツールの詳しい使い方はコチラ。

レイヤーを分けておきましょう

背景、文字オブジェクトなどの要素でレイヤーは分けておきましょう。
レイヤーの詳しい使い方はコチラ。

STEP.4

文字の設定を行う

フォントや文字サイズ等を調整します。

フォントや文字サイズは [ 文字属性 ] を設定して行います。
キーワードとなる文字を大きくしたり太くしたり、強弱を付けてみましょう。

最後にバウンディングボックスで文字オブジェクトを少し回転させました。

STEP.5

文字の下地を作成

[ ペンツール ] で文字の下地を作成します。
※ペンツールのショートカットは [ P ]

直線オブジェクトなのでクリックで簡単に作れます。
※ペンツールの操作方法はコチラで徹底解説しています。

オブジェクトが作れたら塗りの色を変えましょう。

不透明度を調整

よく見ると重なり合っているオブジェクトの色が少し透けていますよね。
不透明度を100%から80%に設定しています。

設定パネルは [ ウィンドウ ] → [ 透明 ] で表示できます。

FINISH

完成

最後に文字の色を変更したら完成です。

イラレ操作に慣れたら30分もあれば作れるようになりますよ。
まだ導入されていない方はAdobe公式サイトから入手できます。

商用利用できる高品質なバナーテンプレート

【商用可】高品質なバナーテンプレート50選！秒速でバナーデザインを実現【Photoshop・Illustrator】

商用利用可能なハイクオリティバナーテンプレート50選です。
圧倒的短時間でプロ品質を出せるテンプレートばかり！

コピーして他サイズを量産

作成したバナーを複製して別サイズの量産をする方法です。
またゼロから作る必要はありませんよ！

STEP.1

作成したバナーを選択

作成したバナーのオブジェクトを [ 選択ツール ] で全て選択。
選択ツールのショートカットは [ V ]

※レイヤーのロックを解除しておきましょう。

STEP.2

Altドラッグでコピー

[ Alt ] (Mac：Option) を押しながらコピーしたいアートボードにドラッグしてコピーします。

STEP.3

拡大する

あとは [ Shift ] を押しながら丸ごと拡大します。

[ スマートガイド ] を有効にしておくとキッチリサイズの個所でガイドが表示されるので便利ですよ。

[ 表示 ] → [ スマートガイド ] または [ Ctrl + U ] (Mac：⌘ + U)でスマートガイドの表示・非表示ができます。

FINISH

完成

はい、完成！
コピペなので作業時間は1分未満です。

イラレで使える便利なコピペ方法

【Illustrator】作業効率UP！イラレのコピペ方法を色々解説【脱初心者】

Illustratorで使える色々なコピペ方法です。
知っておくと作業効率が更に高まりますよ。

スライスツールで書き出し設定

完成まであと少しです！
スライスツールで書き出し設定を行いましょう。

STEP.1

スライスツールを選択

ツールバーから [ スライスツール ] を選択します。

ショートカットは [ Shift + K ] です。

STEP.2

ドラッグでスライスを作成

ドラッグしてスライスを作成します。
すると左上に小さくスライスのアイコンが表示されます。

FINISH

完成

全てのアートボードにスライスを作成したら完成です。
※レイヤー内にスライスが追加されます。

スライスツールを極めよう！

【Illustrator】スライスツールで画像の書き出しを超効率的に行う方法【イラレ初心者】

スライスツールの詳しい使い方を完全解説しています。より詳しい操作方法を知りたい方は是非ご覧ください。

バナーを書き出して完成

ようやく最後の工程です。
画像を書き出したら完成です。

STEP.1

書き出し形式をクリック

[ ファイル ] → [ 書き出し ] → [ 書き出し形式 ] をクリックします。

STEP.2

書き出し設定を行う

書き出しのダイアログ画面が開きます。
任意の保存場所を選択しましょう。
サンプルはデスクトップに [ banner_sampleフォルダ ] を作成しました。

ファイルの種類：JPEG(*.JPG)
[ アートボードごとに作成 ] と [ すべて ] にチェックを入れます。

最後に [ 書き出し ] をクリックします。

STEP.3

JPEGオプションを設定

JPEGオプションが開きます。

カラーモード：RGB
画質：任意（サンプルは10）
圧縮方式：任意（サンプルはベースライン標準）
解像度：スクリーン(7ppi)
アンチエイリアス：任意（サンプルはアートに最適）

最後に [ OK ] をクリックします。

FINISH

完成

JPEG形式でバナーが書き出されました。
書き出された画像の名前を変えたら完成です。

画像を圧縮して容量を削減したい場合は画質を下げたり画像圧縮サービスを活用しましょう。
コチラの記事でオススメの画像圧縮サービスを解説しています。

商用可能な高品質バナーテンプレート

商用利用ができる高品質なイラレ用のバナーテンプレートです。
デザイナーで無い方でも超短時間でプロ並みの品質が出せますよ。
効率的に高品質な作品を作成したい方に超オススメです。

#1 Web Banner Layout Set 2

汎用的なウェブバナー用のテンプレートです。
様々なサイズが収録されているので編集が超楽！

ダウンロード

#2 Summer Sale Banner Set with Lemon Illustrations

サマーセール用のウェブバナー広告用のテンプレート一式です。
黄色系に水色の差し色が爽やか、レモンのイラストがかわいい、非常にハイレベルな仕上がりです。

ダウンロード

#3 8 Abstract Design Banner Templates

汎用的に使える抽象的な模様のウェブバナー用テンプレートです。
特に分野を問わず使えるデザインですね。

ダウンロード

#4 Web Banner Layout Set 3

汎用的なウェブバナー用のテンプレートです。
透明部分に画像をはめるだけで簡単に広告が作れます。

ダウンロード

#5 Social Media Banners Kit with Colorful Layouts

色とりどりなカラーで構成されたソーシャルバナーデザインパターンです。
目を惹くグラフィックを短時間で作りたい方にオススメ！

ダウンロード

商用利用OK！高品質バナーテンプレート

【商用可】高品質なバナーテンプレート50選！秒速でバナーデザインを実現【Photoshop・Illustrator】

商用利用できる高品質なバナーテンプレート50選です。IllustratorとPhotoshopで作られた編集が容易なテンプレートばかり、秒速でバナー制作が完了しますよ！

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！

AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能！
様々なフライヤーのテンプレート50選

デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

ロゴ作成とIllustratorの相性は抜群！
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選

単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選

継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK！作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Illustrator（イラストレーター）で複数サイズのバナーを効率的に作る方法でした。

アートボードツールを使えば後からアートボードを追加・削除する事ができます。
スライスツールと併用すると指定の画像形式でアートボードごとに書き出しができます。

また文字ツールとペンツールを最初に学習しておくと様々なデザイン制作に応用できます。
両ツールはイラストレーター操作の基本なので是非マスターしてください。

ではまた！

InDesignは活用されていますか？

Illustratorだけでなく、InDesign（インデザイン）も活用されているでしょうか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート42選はコチラ！

Illustratorの操作方法

イラレ基本操作