INDEX
目次
前の章に戻る実践課題2：Webバナーセット制作
目安の学習時間：180分
この章で到達できるゴール
- 複数サイズのバナーを効率的に制作できる
- Web用の最適化されたデータを作成できる
ここまでIllustratorの基本操作や機能を学んできたあなたは、いよいよ実際の制作案件に取り組む準備ができています。この実践課題では、複数サイズのWebバナーセットの制作に挑戦します。この章を通して、1セット15,000円〜20,000円の案件を獲得できるスキルを身につけましょう。
【7-1】バナーデザインの基礎
目安の学習時間：60分
サイズと仕様の確認
Webバナー制作の第一歩は、正確なサイズと仕様の確認です。
今回はECサイト向けの「春の新作セール」プロモーションバナーセットを制作します。
今回はECサイト向けの「春の新作セール」プロモーションバナーセットを制作します。
今回制作するバナーサイズ
- レクタングル（300×250px）：メインビジュアルで使用
- リーダーボード（728×90px）：ヘッダーバナー
- スカイスクレイパー（160×600px）：サイドバナー
これらは最もよく使われるバナーサイズです。
その他のWebバナー規格サイズには以下のようなものがあります
その他のWebバナー規格サイズには以下のようなものがあります
- ビッグバナー：468×60px
- モバイルバナー：320×50px
バナー制作の基本仕様
- カラーモード：RGB（Web表示用）
- 解像度：72ppi
-
ファイル形式：JPEGまたはPNG
- JPEG：写真やグラデーションが多いデザイン向け
- PNG：透過処理やロゴ・文字を鮮明に見せたい場合に最適
- ファイルサイズ：一般的に100KB以下が望ましい
今回は下記の素材を使用して制作を進めていきます。
Illustrator 7-1【使用素材】
春の新作アパレルアイテム写真 1
Illustrator 7-2【使用素材】
春の新作アパレルアイテム写真 2
Illustrator 7-3【使用素材】
ブランドロゴ
Illustrator 7-4【使用素材】
装飾用の桜のグラフィック素材
Illustrator 7-5【使用素材】
30%OFFを示すバッジデザイン
デザインコンセプトの設定
効果的なバナーを制作するためには、明確なデザインコンセプトが必要です。
今回のバナーのデザインコンセプト
- 制作物の概要：
ECサイト向け「春の新作セール」プロモーションバナー制作 - テーマ：
「Blooming Spring」（咲き誇る春） - ターゲット：
20〜30代の女性 - 訴求内容：
春の新作コレクション発売、全品30%OFFセール（期間限定） - ビジュアルテイスト：
明るく爽やかな春のイメージ、桜のモチーフを活用 - カラースキーム：
#FFDBEA（淡いピンク）、#FFFFFF（白）、#78C2AD（ミントグリーン）、#212121（濃いグレー、テキスト用） - キャッチコピー：
「Spring Collection」「新作30%OFF」「期間限定セール」
バナーの目的（ゴール）
- ユーザーの関心を引き、新作コレクションページへ誘導すること
- 30%OFFセールの「期間限定感」を打ち出し、クリック率（CTR）を高める
- 20〜30代女性にとって「自分ごと」に感じられるデザインと訴求
ターゲット（ペルソナ例）
- 25歳・都内在住・ECサイトでファッションを購入するOL
- SNSや広告バナーで見かけたアイテムに興味を持ち、気軽にサイトを訪れるタイプ
- 「春らしいアイテムが欲しい」「お得な時期に買いたい」という購買心理
伝えたいメッセージ
- 新作と春のファッションを楽しもう！
- 今なら 30%OFF で買える！
- 期間限定だからお早めに！
デザイン要素のガイド
|
項目
|
内容
|
|---|---|
|
テーマ
|
Blooming Spring（咲き誇る春）
|
|
テイスト
|
明るく爽やか、やさしい、心が軽くなるような雰囲気
|
|
ビジュアル
|
桜の花びら、春の風、小物・服などファッションを想起させるイメージ
|
|
カラー
|
#FFDBEA（淡いピンク）／#78C2AD（ミントグリーン）／#FFFFFF（白）／#212121（文字）
|
|
フォント
|
英字：Montserrat（見出し用）／日本語：Noto Sans JP（本文用）
|
|
キャッチコピー
|
Spring Collection／新作30%OFF／期間限定セール
|
|
マイクロコピー
|
「今すぐチェック」「詳細を見る」（ボタン型／目立つ色で配置）
|
デザイン制作を始める前に、簡単なラフスケッチを描いておくと効率的です。
各サイズのバナーでどのように情報を配置するか、事前に計画を立てましょう。
各サイズのバナーでどのように情報を配置するか、事前に計画を立てましょう。
素材の準備
効率的なバナー制作のために、必要な素材を事前に準備しましょう。
素材は指定素材以外の使用や自分で作成してもOKです。
素材は指定素材以外の使用や自分で作成してもOKです。
作業手順
- 素材ファイルの確認と整理
- メインビジュアルとして使用する写真
- spring_fashion01.jpg：ピンクのパーカーを着用した女性
- spring_fashion02.jpg：スニーカーの画像（透過処理されていません）
- brand_logo.ai：バナー下部に配置するブランドロゴ
- sakura_elements.ai：装飾用の桜のグラフィック素材
- sale_badge.ai：セールを示すバッジデザイン
- メインビジュアルとして使用する写真
- 仕様素材の準備
- spring_fashion01.jpg、spring_fashion02.jpgをPhotoshopで開き、必要に応じてトリミングや色調補正などの調整を行います。Photoshopで写真の編集が完了したらPhotoshop形式で別名保存しましょう
- spring_fashion01.jpgは色調補正で色味の調整を行います
- spring_fashion01.jpg、spring_fashion02.jpgをPhotoshopで開き、必要に応じてトリミングや色調補正などの調整を行います。Photoshopで写真の編集が完了したらPhotoshop形式で別名保存しましょう
- spring_fashion02.jpgは背景の白い部分が必要ないのでPhotoshop のレイヤーマスクの機能を使用して背景を切り抜きを行います。（Figmaのプラグイン「Remove BG」などを使用しても構いません）
- ロゴと装飾素材の準備
- Illustratorでロゴ brand_logo.ai や装飾素材 sakura_elements.ai sale_badge.ai をバナー制作フォルダへ格納しておきましょう。
- 下記の例では、バナー制作フォルダの中に素材を入れるための名前付きフォルダを作成し、バナーで使用する素材を入れています。
- フォントの確認
- 英字：Montserrat（見出し用）
- 日本語：Noto Sans JP（本文用）
- フォントがインストールされていない場合は、Adobe Fontsなどからダウンロードしてインストールしておきます。
素材準備のポイント
- プロジェクトフォルダを作成し、すべての素材を整理しておくと作業がスムーズに進みます。
- また、素材の元ファイルとバナー用に調整したファイルは分けて保存しておくと安心です。
このセクションでは、Webバナー制作の基礎として、サイズと仕様の確認、デザインコンセプトの設定、必要な素材の準備について学びました。
次のセクションでは、これらの準備をもとに実際のバナー制作に取り組みます。
次のセクションでは、これらの準備をもとに実際のバナー制作に取り組みます。
【7-2】バナー制作
目安の学習時間：60分
メインビジュアルの作成
まずはメインビジュアル（300×250px）を制作しましょう。
このバナーが他のサイズへの展開のベースとなります。
このバナーが他のサイズへの展開のベースとなります。
作業手順
1.新規ドキュメントの作成
- Illustratorで ファイル > 新規 を選択し、Webプリセットから幅300px、高さ250px、カラーモードRGB、解像度72ppiで作成します。
2.背景、写真、装飾、バッジの配置と調整
-
スウォッチパネル（ウィンドウ > スウォッチ）を出して指定カラーを登録する
- 指定カラー： #FFDBEA（淡いピンク）／#78C2AD（ミントグリーン）／#FFFFFF（白）／#212121（文字）
- 長方形ツール (M) で背景を作成し、背景色（#FFDBEA）を設定します。
- spring_fashion01.jpg （もしくは spring_fashion01.psd）を配置し、サイズ調整して右側に配置します。
- 写真を特定の図形の形に切り抜きたい（トリミングしたい）場合は、「クリッピングマスク」という機能を使用します。
- パーカーを着用している女性の画像を「クリッピングマスク」する方法を紹介します。
- spring_fashion01.jpg （もしくは spring_fashion01.psd）を配置（ファイル > 配置）をする
- 大きさを調整する（shift を押しながらドラッグする）
- クリッピングをするためには、画像をくり抜くための図形を準備しておく。
- レイヤーパネルで画像が背面、図形が前面になるように配置する
- 画像と図形両方を同時に選択をする
- オブジェクト > クリッピング > 作成 を選択すると図形からはみ出している画像が隠れる
- 画像の表示位置を調整したい場合は画像をダブルクリックすると調整可能です。（クリッピングマスクの設定を解除も可能です）
- sakura_elements.ai から桜のモチーフを配置し、透明度を調整します。
- シンボルスプレーで配置する方法を紹介します。
- sakura_elements.ai を埋め込み配置する
- 桜の図形をシンボルパネルにドラッグ＆ドロップして登録します。（リンク配置された画像はシンボルに登録できないため注意してください）
- ツールパネルのシンボルスプレーを選択（スプレーの設定はダブルクリックする）
- スプレー設定：直径50px / 強さ 5 / シンボルセットの密度 2
- 画面上に桜をスプレーする
- 下記の関連ツールで調整をする
- シンボルシフトツールで位置の調整
- シンボルスピンツールで回転
- シンボルスクリーンツールで透明度の調整
- シンボルスプレーで配置する方法を紹介します。
- sale_badge.ai を配置し、必要に応じて回転させます。
2.テキスト要素とCTAボタンの追加
- 指定のフォント、サイズ、カラーでSpring Collection、新作30%OFF、期間限定セールのテキストを配置します。
- 角丸長方形ツール でCTAボタン（#78C2AD）を作成し、詳しく見るテキスト（Noto Sans JP Bold, 16pt, #FFFFFF）を配置します。
3.ブランドロゴの配置
- brand_logo.aiを配置します。
メインビジュアル制作のコツ
- 視線の流れを意識してレイアウトしましょう。
- 一般的に左上から右下への流れで情報を配置すると自然に読み進められます。
- また、情報の優先順位を明確にし、最も伝えたいメッセージ（今回は「新作30%OFF」）が最も目立つようにデザインしましょう。
テキストレイアウト
各サイズのバナーで効果的にメッセージを伝えるためのテキストレイアウトを考えましょう。
各バナーサイズのテキストレイアウト
- メインビジュアル（300×250px）： （上記で作成済み）
-
ヘッダーバナー（728×90px）： 横長フォーマットに最適化したレイアウト
- Spring Collection（左側）
- 新作30%OFF 期間限定セール（中央）
- 詳しく見る ボタン（右側）
-
サイドバナー（160×600px）： 縦長フォーマットに最適化したレイアウト
- Spring Collection（上部）
- 新作30%OFF（中央）
- 期間限定セール（中段）
- 詳しく見る ボタン（下部）
テキストスタイルの保存
効率化のため、使用頻度の高いテキスト設定は文字スタイルとして保存しておきましょう。
- テキストを選択し、書式 > 文字 パネルで設定を調整します。
- ウィンドウ> 書式 > 文字スタイル パネルメニューから 新規文字スタイル を選択し、スタイル名を入力して保存します。
テキストレイアウトのポイント
- 各バナーサイズの特性を活かしたテキストレイアウトを心がけましょう。
- 横長のヘッダーバナーでは横の流れを意識し、縦長のサイドバナーでは縦の流れを意識します。
- また、文字サイズはバナーサイズに合わせて調整し、視認性を確保しましょう。
サイズ展開
メインビジュアルができたら、他のサイズのバナーを制作します。
Illustratorの複数アートボード機能を活用して効率的に制作しましょう。
Illustratorの複数アートボード機能を活用して効率的に制作しましょう。
作業手順
1. 追加アートボードの作成
- アートボードツール（Shift+O）を選択し、ヘッダーバナー用（728×90px）とサイドバナー用（160×600px）の2つのアートボードをメインビジュアルのアートボードの横に追加します。
2.ヘッダーバナー（728×90px）の制作
- メインビジュアルから要素をコピー＆ペースト（またはAlt/Optionドラッグで複製）し、ヘッダーバナーのレイアウトに合わせてサイズと配置を調整します。
3.サイドバナー（160×600px）の制作
同様にメインビジュアルから要素を複製し、サイドバナーのレイアウトに合わせてサイズと配置を調整します。
サイズ展開のコツ
- 各バナーサイズで一貫したデザインを保ちながらも、それぞれのサイズの特性を活かしたレイアウトを心がけましょう。
- また、コピー＆ペーストで要素を再利用する際は、Altキー (Windows) または Optionキー (Mac) を押しながらドラッグすることで、アートボード間で簡単に要素を複製できます。
このセクションでは、メインビジュアルの作成、テキストレイアウト、サイズ展開について学びました。
次のセクションでは、完成したバナーの書き出しと納品方法について学んでいきます。
次のセクションでは、完成したバナーの書き出しと納品方法について学んでいきます。
【7-3】書き出しと納品
目安の学習時間：60分
最適化設定
Webバナーを書き出す際には、表示品質とファイルサイズのバランスが重要です。
最適な設定で書き出せるよう準備しましょう。
最適な設定で書き出せるよう準備しましょう。
準備手順
1.ファイルの最終確認：下記を最終確認します。
- 誤字脱字がないか
- 要素の配置にズレがないか
- カラーモードが (RGB) になっているか
Web用は「RGBモード」が必須。印刷用の「CMYK」では色味がズレる場合があります。
2.テキストのアウトライン化
- 使用フォントが相手環境にないと正しく表示されないことがあります。
- アウトライン化することで 文字の見た目を図形（パス）として保持 できます。
- 別名で保存しておきます。（アウトライン化後は別名保存でファイル名の先頭に ol- と付ける）
- 操作手順
- ファイル > 別名で保存 ファイル名の先頭に ol- をつけて保存（アウトライン用のファイルを作成）
- テキストを選択（まとめて選択する場合は、レイヤーのすべてを解除し、選択ツールで全体を囲む）
- 書式 > アウトラインを作成 (Shift+Ctrl+O / Shift+Command+O) を実行します。
3.レイヤーの整理
- 不要なレイヤーを削除。
- 使用レイヤーにわかりやすい名前を付ける。（例：「背景」「写真」「テキスト」など）
- グループ化されすぎている場合は見直す。
最適化のコツ
- Webバナーは表示速度も重要な要素です。
- 過度に複雑なエフェクトや大きな画像ファイルの使用は避け、シンプルな表現で効果的に訴求できるデザインを心がけましょう。
一括書き出し
複数のバナーサイズを効率的に書き出すために、Illustratorのアセット書き出し機能を活用しましょう。
※注意：アセット書き出しでは、オブジェクトがアートボードからはみ出していても、そのまま全体が書き出されます。
※注意：アセット書き出しでは、オブジェクトがアートボードからはみ出していても、そのまま全体が書き出されます。
一括で書き出しするための準備
- それぞれのアートボードを複製する。
- それぞれのアートボードに配置している要素をグループ化しておく。
- 要素がはみ出している場合は、クリッピングマスクではみ出しを切り抜く。
※クリッピングやグループ化するとレイヤー分けが無視されて1つのレイヤーにまとめられてしまうのでレイヤー分けされているデータを残し作業しましょう。
作業手順
- アートボードを複製する。
- アートボードの要素を全て選択してグループ化する。
- アセット用のレイヤーを作成しグループ化した要素を移動させる。
- 複製したアートボードと同じ大きさの四角を作成する
- その上にアートボードと同じ大きさの四角を重ねる
- 全てを選択した状態で オブジェクト > クリッピング > 作成 を選択し切り抜く
一括書き出しの手順
はみ出しの調整と、グループ化が完了するとまとめて書き出しを行うことができます。
- アセット書き出しパネルの準備：
ウィンドウ > アセット書き出し でパネルを表示します。 - アセットの追加：
書き出したいアートボード（3つ全て）をパネルにドラッグ＆ドロップするか、パネルから追加します。 - ファイル名の設定：
ファイル名を編集します。(bnr01 / bnr02 / bnr03 と命名)
- 要素の選択：
書き出したいパネルの要素をShiftを押しながらクリックし、複数選択する。 - 書き出し設定：
各アートボードに対し、形式：JPEG、品質：80、倍率：1x に設定します。 - 一括書き出しの実行：アセット書き出しパネルの「書き出し」ボタンをクリックします。
書き出しの効率化
- ファイル > 書き出し > Web用に保存（従来）... も便利です。
- 品質とファイルサイズのバランスをプレビューしながら調整できます。
品質チェック
書き出したバナーの最終チェックを行いましょう。
チェック手順
1.ビジュアル確認
各バナーをWebブラウザで開いて表示（鮮明さ、テキストの可読性、色彩）を確認します。
各バナーをWebブラウザで開いて表示（鮮明さ、テキストの可読性、色彩）を確認します。
2.ファイルサイズの確認
各ファイルのサイズが目標（例：100KB以下）に収まっているか確認します。
目標に収まっていない場合は、画像圧縮ツールなどを使ったり、デザインの見直しをするとよいです。
各ファイルのサイズが目標（例：100KB以下）に収まっているか確認します。
目標に収まっていない場合は、画像圧縮ツールなどを使ったり、デザインの見直しをするとよいです。
3.異なる背景での表示確認
バナーが異なる背景色の上でも視認できるか確認します。
バナーが異なる背景色の上でも視認できるか確認します。
4.モバイルデバイスでの表示確認（可能であれば）
スマートフォンなどで表示し、見え方を確認します。
スマートフォンなどで表示し、見え方を確認します。
納品ファイルセットの整理
クライアントに納品する際は、書き出した画像ファイル（JPEGなど）、編集用のIllustratorファイル（.ai）、簡単な説明書などを一つのフォルダにまとめ、ZIP形式で圧縮すると丁寧です。
プロの品質チェックのコツ
- 最終確認では「一般ユーザーの目線」で見ることを意識しましょう。
- バナーを見た瞬間に何を伝えたいかが伝わるか、クリックしたくなるかという点を重視して確認します。
このセクションでは、Webバナーの最適化設定、一括書き出し方法、品質チェックのポイントについて学びました。
これらの知識とスキルを活用して、クライアントの要望に応えるWebバナーセットを効率的に制作・納品できるようになりましょう。
これらの知識とスキルを活用して、クライアントの要望に応えるWebバナーセットを効率的に制作・納品できるようになりましょう。
実践課題2のまとめ
「Webバナーセット制作」の実践課題では、ECサイトやWeb広告用の複数サイズバナーセットを効率的に制作する方法を学びました。
習得したスキル
- バナーデザインの基礎知識（サイズ、仕様、デザインコンセプト）
- 効率的なバナー制作のワークフロー（素材準備、メインビジュアル作成、テキストレイアウト）
- Illustratorの複数アートボードを活用したサイズ展開方法
- Web用データの最適化設定とアセット書き出し機能を使った効率的な書き出し方法
- 書き出し後の品質チェックのポイントと納品ファイルの準備
これらのスキルを身につけることで、「Webバナーセット制作」の案件（1セット15,000円〜20,000円、想定工数2-3時間/セット）に対応できるようになりました。
今後は実案件を通じて経験を積み、さらに効率的で質の高いバナー制作ができるよう研鑽を続けましょう。
今後は実案件を通じて経験を積み、さらに効率的で質の高いバナー制作ができるよう研鑽を続けましょう。
次のステップとして、アニメーションバナー（GIFアニメなど）の制作や、より複雑なキャンペーンに対応した多様なバナーセットの制作にも挑戦してみることをおすすめします。
また、A/Bテストのためのバリエーション制作など、マーケティング視点でのバナー制作スキルも磨いていくと、より高単価の案件獲得につながります。
また、A/Bテストのためのバリエーション制作など、マーケティング視点でのバナー制作スキルも磨いていくと、より高単価の案件獲得につながります。
これで「実践課題2：Webバナーセット制作」の解説を終わります。
お疲れ様でした！
お疲れ様でした！