WEBデザイン
バナー制作100本道場【実践編】
INDEX
目次

1. バナー制作を実践していこう!

『バナー制作100本道場【実践編】』を確認し、制作工程のイメージができた方はバナー制作を実践していきましょう!


Todoリスト

  • 1. ファッション・アパレル系バナー
  • 2. 飲料・食品系バナー 
  • 3. 旅行・観光系バナー 
  • 4. 美容・コスメ系バナー 
  • 5. インテリア・雑貨系バナー
  • 6. 映画・音楽系バナー
  • 7. 電化製品系バナー
  • 8. 車・乗り物系バナー
  • 9. アウトドア・スポーツ系バナー
  • 10. 教育・学習・セミナー系バナー

2. 指定素材を確認しましょう!

1, ファッション・アパレル系バナー

指定素材①

AdobeStock_862200118_(2).jpeg (4.52 MB)

2, 飲料・食品系バナー  

指定素材②

AdobeStock_507696039.jpeg (5.09 MB)

3, 旅行・観光系バナー  

指定素材③

AdobeStock_140297304.jpeg (2.98 MB)

4, 美容・コスメ系バナー

指定素材④

AdobeStock_341824342_(1).jpeg (7.77 MB)

5, インテリア・雑貨系バナー

指定素材⑤

AdobeStock_404207111.jpeg (6.75 MB)

6, 映画・音楽系バナー

指定素材⑥

AdobeStock_144721891.jpeg (5.75 MB)

7, 電化製品系バナー 

指定素材⑦

AdobeStock_521760572.jpeg (4.56 MB)

8, 車・乗り物系バナー

指定素材⑧

AdobeStock_494069756_(1)_(1).jpeg (1.7 MB)

9, アウトドア・スポーツ系バナー

指定素材⑨

AdobeStock_267625692.jpeg (9.92 MB)

10, 教育・学習・セミナー系バナー 

指定素材⑩

siteisozai_10.jpg (1.14 MB)

3. 要件定義書を確認しましょう!

【3-1】指定素材のイメージを優先型 

タイトル 内容
制作物を通じて達成したい目的 素材のイメージを変えず、リンク先を想起させ誘導を促せるバナーを作ることが出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 素材の商品を購入したり、サービスを使用したいとは思っているがまだ検討段階であり、購入するための後押しが欲しい人
キャッチコピー・文言とその優先順位 ①NEW ARRIVAL②新商品③新サービス
など新しいサービス内容の紹介をするキャッチコピー

写真を目立たせるように表示
マイクロコピーとその配置 ①Click
②詳細を見る
③詳細はこちら
などクリックを誘導させるコピー

クリック誘導用の情報を追記も可能。バナー全体のイメージによっては無くても良い
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーや自社サイトのイベントページへリンクする為、自社サイトのトップページに使用
色味 素材の色味を重視し、大幅な変更はしない
与えたい印象 素材と少しのテキストを見てクリックをしたくなる印象にしたい
使用する素材の要件 指定素材を必ず使用し、素材内に複数のアイテムがある場合は選定をして制作を実施
その他意図して欲しいこと テキストは出来るだけ最小にする
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-2】金額を安く打ち出す 価格お得型

タイトル 内容
制作物を通じて達成したい目的 オンラインショップでの使用頻度が高いSALE用のバナーを作ることが出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 素材の商品やサービスでなくても良いのだが、価格が安い商品を早く購入したいと考えており、衝動買いや流行りや新しいサービスにも敏感な人
キャッチコピー・文言とその優先順位 ①SALE②CLEARANCE③FINAL SALE
価格を下げる際に使用するキャッチコピー

安さを際立たせるように目立つ位置に配置
マイクロコピーとその配置 ①MAX70%OFF
②50%OFF など

安さを際立たせるように目立つ位置に配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーや自社サイトのSALE販売ページへリンクさせるため、自社サイトのトップページに使用
色味 安さを際立たせるような赤色・黄色など目立たせる色味を使用
与えたい印象 一目見てSALE・安くなるということが分かる印象にしたい
使用する素材の要件 指定素材を必ず使用し、SALEや通常より安価であることが分かりやすければどのようなものでも使用して良い
その他意図して欲しいこと テキストも写真もSALEや安くなるということに注目してもらえれば良い
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-3】ジャンルで絞り込む カテゴリー特化型

タイトル 内容
制作物を通じて達成したい目的 カテゴリに合わせて打ち出したバナーを制作することが出来る
ターゲット 例:20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) ジャンルに縛られず、良いと思ったものを購入する人。

例)
この冬着るアウターに困っているので気に入ったものを見つけたいと思っている。
購買意欲は高め。
キャッチコピー・文言とその優先順位 ①ワンランク上の~
②贅沢な~など

高級感や高揚な印象を与える
文字組版を工夫する方が高級感を与えやすい
マイクロコピーとその配置 ①25,000円
②1万円以上の価格を設定
③詳細を確認
など
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 カテゴリに特化したLPページに飛ばすためのバナーとしてサイト内で使用
色味 コントラストを上げる事やトーンを揃える高級な品質をイメージさせる色味
与えたい印象 カテゴリに合わせておしゃれに見せて、購買意欲を高めたい。
使用する素材の要件 指定素材を必ず使用し、コントラストを上げ、トーンを揃える写真加工を実施
その他意図して欲しいこと 安っぽくならないように、おしゃれ雑誌のような見るだけでワクワクするデザインを心がけましょう。
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-4】キャッチコピーでクリック誘導型

タイトル 内容
制作物を通じて達成したい目的 バナー制作時に必要なキャッチコピーを制作することが出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。
ターゲット(詳細) 指定素材の商品やサービスに興味がある、程度でまだ、検討段階には入っていない状態の人
キャッチコピー・文言とその優先順位 指定素材のイメージからキャッチコピーを考えてください
キャッチコピーが目立つように配置
マイクロコピーとその配置 指定素材のイメージからマイクロコピーも考えてください
キャッチコピーの配置のみでも構いません
制作物の縦横比
①1080px×1080px(ベースサイズ)
②1200px×628px
③1080px×1920px(ストーリーズサイズ)
掲載・配信箇所 広告用バナーにメインで掲載されるが、秀逸なキャッチコピーであれば自社サイトにも使用
色味 キャッチコピーに合うような色味を使用する
与えたい印象 興味を持ってくれる人が増えるような、目を惹くキャッチコピーだという印象
使用する素材の要件 指定素材を使用しなくても良い・キャッチコピーだけの記載でも構いません
その他意識して欲しいこと キャッチコピーのアイデアが浮かばない時は、アイデアが浮かんだ時に随時テキストに書き留めると良いでしょう。
制作メモの記載
①制作にかかった時間
②制作のコンセプト・こだわり

【3-5】企業内のサービス・商品の中の豊富な種類から選ぶことが出来るお得型

タイトル 内容
制作物を通じて達成したい目的 商品やサービスをイメージした写真の加工を通じて、バナー制作の幅を広げることが出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 商品検討段階だが、必要には迫られていない購買意欲が比較的低い人
キャッチコピー・文言とその優先順位 ①欲しいものが見つかる
②豊富な商品数!
③美味しそうな色!
④希望のコースが見つかる
⑤商品やサービスの数が多い事が分かる内容

豊富な商品をアピール出来るように写真とテキストのバランスに注意する
マイクロコピーとその配置 ①詳細CLICK
②商品詳細はこちら
③サービスの詳細がクリックによって分かることをアピール

クリックへ誘導するように分かりやすく配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーや自社サイト内の全商品掲載ページへリンクさせるために自社サイトのトップページに使用
色味 明るく分かりやすい印象、暗い色味にならないように注意
与えたい印象 沢山のコースや商品の中から選ぶことが出来るというワクワクする印象
使用する素材の要件 指定素材以外でもショップのイメージを考え、画像を用意しバナーに使用していただいてもOKです
その他意図して欲しいこと 商品やサービスの多さが一目見て分かるようなバナーにするよう賑わいやワクワク感を出す
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-6】その商品のみのカラー展開やバリエーションの情報型

タイトル 内容
制作物を通じて達成したい目的 カラーバリエーションやサイズバリエーション・サービスのバリエーションの見せ方を習得する
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 商品・サービスを検討中で、複数企業を比較し自分に合うものを探している人
キャッチコピー・文言とその優先順位 ①選べる○○(商品展開を○○へ入れる)
②豊富な○○(商品展開を○○へ入れる)
③あなたは何を選ぶ?!
写真素材の商品バリエーションが分かる内容

テキストとイラストやオブジェクトを使用し写真と共に分かりやすく表示
マイクロコピーとその配置 ①〇色展開
②〇サイズ展開
③驚きのサービス〇点公開
バリエーションの詳細が分かる内容があると更に良い

写真とテキストによってごちゃごちゃし過ぎないような配置を心がける
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告バナーやSNSバナーに使用・自社サイトやオンラインショップ内の商品詳細ページに使用
色味 明るく分かりやすい印象、暗い色味にならないように注意
与えたい印象 指定素材を写真加工で変更しても構わないが、不自然に見えないように注意
使用する素材の要件 指定素材以外でも企業のイメージを考え、画像を用意しバナーに使用していただいてもOKです
その他意図して欲しいこと 商品やサービスのバリエーションが複数あるという事が分かると良い
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-7】企業ロゴ・企業名からクリック誘導型

タイトル 内容
制作物を通じて達成したい目的 ロゴや企業名などブランドイメージを考え、ロゴ制作に加え、ロゴや企業名をメインとするバナー制作ができる
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) ロゴや企業名を見ただけでクリックをしたくなる人
キャッチコピー・文言とその優先順位 キャッチコピーは入れなくても構いませんがロゴ制作時に企業キャッチコピーを制作出来たならばそちらを使用

例)
①「Drive Your Dreams.」
(トヨタ自動車株式会社)
②「NO MUSIC, NO LIFE.」
(タワーレコード株式会社)

ブランドイメージに沿った表示にする
マイクロコピーとその配置 なし
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーやSNSバナーに使用・自社サイトのトップページに使用
色味 ブランドイメージを考え、そのイメージに沿った色味を使用
与えたい印象 ブランドイメージをそのままの印象を与える
使用する素材の要件 指定素材以外でもブランドのイメージを考え、画像を用意しバナーに使用していただいてもOKです
その他意図して欲しいこと ブランドイメージを意識した制作
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-8】機能面・使用感・体感・商品サービス掲載型

タイトル 内容
制作物を通じて達成したい目的 素材の機能・使用感・体感・サービスなどのポイントを分かりやすく掲載するバナー制作が出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 商材の購入やサービスの利用がほぼ確定しており、最終決定出来る情報が欲しい人
キャッチコピー・文言とその優先順位 素材の最も目立たせたい特徴をテキスト化し、その内容を分かりやすくバナーへ記載

目立たせる特徴は分かりやすく、大きく記載
マイクロコピーとその配置 素材のその他の特徴をテキスト化し配置

最も特徴より小さく配置するが分かりやすくオブジェクトなどを使用し配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーとして、商品の購買ページや商品サービスのページへリンクする際に使用
色味 視認性をよくする為に暗すぎない色味を使用
与えたい印象 テキストと写真を使用し、機能や特徴、訴求ポイントが分かりやすい印象
使用する素材の要件 指定素材を使用してください。分かりやすくするために写真を加工してもOKです
その他意図して欲しいこと 購買の最終決定が出来るように分かりやすく素材を説明
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-9】物語(将来像)でクリック誘導型

タイトル 内容
制作物を通じて達成したい目的 商品購入やサービス体験で得られる将来像を提案できるバナー制作が出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 商材の購入やサービスの利用を検討中で情報収集中の人
キャッチコピー・文言とその優先順位 ①〇〇になれる!
②〇〇も夢じゃない!
③〇〇効果
〇〇に商品購入やサービス体験から得られる将来像を入れて制作
※プレゼントキャンペーンバナーでも良い

分かりやすく目立つフォントや配置
視認性の良い配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 SNSバナーとして、広告バナーにも使用
プレゼントキャンペーンバナーなど
色味 明るい将来像を連想させられるような色味
与えたい印象 ポジティブな将来の印象
使用する素材の要件 指定素材を使用しなくても構いません
イラストのみで表現されても構いません
その他意図して欲しいこと 購入やサービス体験で得られるポジティブな将来像を視認性良くアピール
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

【3-10】画像のインパクトでクリック誘導型

タイトル 内容
制作物を通じて達成したい目的 インパクトや心に残るメッセージを与えることが出来るバナー制作
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。

例)
20代~40代の仕事をしている女性
小学生くらいのお子様がいる
ターゲット (詳細) 商材やサービスの存在を知らず、まだ興味を示していない人
キャッチコピー・文言とその優先順位 ①まだ知らない!?
②知っていると得をする!
画像にメインインパクトを持たせ、付随したキャッチコピーを入れる

画像にメインインパクトを持たせるため、画像についての説明的なテキストでも可
マイクロコピーとその配置 画像にメインインパクトを持たせ、付随したキャッチコピーの説明が足りない場合に制作

キャッチコピーで説明が出来ている場合は、不要
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 SNSバナーとして、広告バナーにも使用
自社サイトのバナーとしては使用されないこともある
色味 画像メインでインパクトを出せるような色味を使用
与えたい印象 クリックを誘導するためのインパクトを与える
使用する素材の要件 指定素材以外の画像を検索し、使用する。指定素材の商品・サービスへクリック誘導
その他意図して欲しいこと インパクトを与える画像ではあるが、クリックを誘導するという目的は忘れずに制作
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり

4. 実践してみよう!

上記バナー制作は1~10の順番を守らず制作して頂いて構いません。
バナー制作実践を実施される際に出来るだけ、制作時間・制作時にこだわったポイントなどをバナー制作と同時にメモにしておくと、ポートフォリオへの掲載の際にわかりやすくなりますので、ぜひメモしておきましょう!
各カテゴリ(例:ファッション・アパレル系)の10個のバナー制作が完了したら、Todoリストの該当カテゴリにチェックを入れましょう。

作品例

✔️ ロゴ制作

  • 構想|20分 
  • 制作|30分 

💡こだわりポイント

  • 20代から40代のお子さんがいらっしゃる女性をターゲットに、新芽からすくすくと成長するというイメージで制作しました、〇から矢印で上に上げ、成績も上がるという雰囲気を出しました。
 (13432)


✔️ バナー制作

  • 構想|10分 
  • 制作|50分 

💡こだわりポイント

  • ロゴの緑色をバナーにも使用し、学習塾のバナーであることが一目で分かるように工夫しました。
 (13437)


5. 課題制作を終えられた方へ

課題制作お疲れさまでした! 素晴らしい成果物が完成した今、その喜びと学びを他の受講生と共有しましょう!

💡 制作物を共有するメリット

  1. 仲間からのインスピレーション
    • 他の受講生の作品から新しいアイデアが生まれます
    • 様々なアプローチや工夫を知ることで、自身の視野が広がります
  2. モチベーションアップ
    • 自分の成長の記録として残せます
    • 仲間の作品に触れることで、さらなる向上心が芽生えます
  3. ポートフォリオの第一歩
    • 実践的な制作経験として、自身のキャリアに活かせます
    • コミュニティでの作品共有は、実務での成果発表にもつながります

✔️ 提出方法

  1. コーチからの添削完了後、以下の【制作物提出フォーム】より作品をご提出ください
  2. ご提出いただいた作品は「24-制作物紹介タイムライン」にてランダムで紹介させていただきます
  3. 紹介される作品には、あなたの工夫したポイントやこだわりも併せて掲載できます!

6. 学習を終えられた方へ

バナー制作お疲れ様でした!

バナーをたくさん作成したことで、多くの制作物とデザインスキル、そして大きな自信が身についているはずです。

この教材で学んだことを生かしてポートフォリオの制作やLPの制作などさらなるスキルアップを目指していきましょう!


WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH