WEBデザイン
バナー制作100本道場【導入編】
INDEX
目次
次の章に進む

0. はじめに

学習を始める前に、受講対象と学習目標について確認しておきましょう。
受講対象
  • Photoshop・Illustrator・Canva・Figma等のWebデザインに利用可能なツールを学び終えた方
学習目標
『バナー制作100本道場【実践編】』での学習の進め方を理解する
※ 実際にバナーを制作するのは、『バナー制作100本道場【実践編】』になりますが、アウトプットの質や学習効果を最大化するために必ず本教材を学習してから次に進みましょう！

1. バナー制作の心得

【1-1】バナー100個制作でデザインの引き出しを増やそう！

ポートフォリオを制作する際、バナーの制作実績も掲載することでポートフォリオ内の制作実績のボリュームも増えるというメリットがあります。

また、バナーを100個制作することで、デザインの引き出しが増えるという更なるメリットがありますのでぜひデザインの引き出しを増やしましょう！

バナーは限られたサイズの中で、リンク先のページへとクリック誘導する事が目的になります。

構成を考えたうえで、制作していくことも必要となります。

デザインの引き出しを増やしポートフォリオにも沢山のバナーを掲載できるよう、課題を実践していきましょう。

【1-2】オリジナル制作物の重要性

バナーはWebサイト上で特定のページに移動してもらうために、クリックを誘導させる役割を持ちます。

そのため、誘導先のページについての説明はもちろん目立たせるという事も必要となります。

バナーは掲載場所によって用途も様々ですが誘導先のページに合わせたバナー制作をしなければいけません。

せっかく誘導先のページに遷移してもらっても『バナーと違う内容のページに行かされた』と思われ、ページ離脱を起こしてしまう可能性もあります。

バナーを目立たせるといっても目立つ色を使用するだけではなく、ターゲット層や訴求ポイントを考えクリックを誘導させるバナー制作をしていく必要があります。

そこで、この教材に取り組むことでバナーデザインの引き出しを増やすことができますし、仕事に繋げるために必要なポートフォリオの制作実績にも掲載が出来ます！

どんどんオリジナル制作物を増やしていきましょう。

【1-3】作る過程で意識するポイント

バナー制作において意識して頂きたいポイントは、3つあります。
  • 訴求ポイントが分かりやすいバナーができているか
  • クリックされやすいバナーが出来ているか
  • 誘導先のページと内容が合っているバナーが出来ているか
結論からお伝えすると、上記の意識すべき内容はすべて、『ユーザー目線でバナーをつくる』ことで、改善する内容です。

バナー制作を作る過程では出来ない事も多いのですが、作る過程で『ユーザー目線でバナーをつくる』ことが出来ていれば手直しも少なくなります。
ただ、最初からここを考え過ぎて制作が出来なくなってしまわないよう、まずはバナー制作をしてみて、最終の仕上げで『ユーザー目線でバナーを見て』修正しましょう！

2. バナー100個制作の課題内容

【2-1】1つのカテゴリーに対してバナーを10個ずつ制作しよう！

進め方の具体例（ご自身でカスタマイズしても構いません。）

  1. 「ファッション・アパレル系バナー」のカテゴリー
    • バナー要件定義をもとに【1～10】まで順番にバナーを制作していきましょう！
      • 上記で10個バナーが完成したら…
  2. 「飲料・食品系バナー」のカテゴリー
    • バナー要件定義をもとに【1～10】まで順番にバナーを制作していきましょう。
      • 上記で10個バナーが完成したら…
  3. 次のカテゴリーで10個のバナーを作成…

上記のように、各カテゴリーを10個ずつ順番に、合計100個のバナー制作をすることで、デザインの引き出しが格段に増えていくことが実感できます。

教材内で作成できる10個のカテゴリー

  1. ファッション・アパレル系バナー
  2. 飲料・食品系バナー　
  3. 旅行・観光系バナー　
  4. 美容・コスメ系バナー　
  5. インテリア・雑貨系バナー
  6. 映画・音楽系バナー
  7. 電化製品系バナー
  8. 車・乗り物系バナー
  9. アウトドア・スポーツ系バナー
  10. 教育・学習・セミナー系バナー
※ 100個作るのは大変という方は、コーチと相談して目標の制作個数を決定しましょう！

【2-2】バナーサイズ

今回のバナーは以下のサイズで作成を進めていきましょう。
サイズ
  • 1080×1080ピクセル(ベースサイズ)　
  • 1200×628 ピクセル
  • 1080×1920 ピクセル　

【2-3】要件定義を踏まえてバナーを作成しよう

要件定義は全部で10項目あります。

しっかりと要件定義の内容を確認し、バナー作成を進めてください。

要件定義

【3-1】
指定素材のイメージを優先型
【3-2】
金額を安く打ち出す　価格お得型
【3-3】
ジャンルで絞り込む カテゴリー特化型
【3-4】
キャッチコピーでクリック誘導型
【3-5】
企業内のサービス・商品の中の豊富な種類から選ぶことが出来るお得型
【3-6】
その商品のみのカラー展開やバリエーションの情報型
【3-7】
企業ロゴ・企業名からクリック誘導型
【3-8】
機能面・使用感・体感・商品サービス掲載型
【3-9】
物語（将来像）でクリック誘導型
【3-10】
画像のインパクトでクリック誘導型

3. 見本を確認しよう！

進め方

  1. バナー制作課題の例として、【1.ファッション・アパレル系バナー】【10.教育・学習・セミナー系バナー】上記2つのカテゴリーで制作した見本がありますので、まずは見本を確認しましょう。
  2. その後『バナー制作100本道場【実践編】』より制作を実践してください。
    • この例と同じバナー制作をする必要はありませんので、ご自身の構成力と制作力を存分に引き出し、オリジナルのバナーを制作していってください。
「10.教育・学習・セミナー系バナー」には要件定義書は添付しておりませんが、1～10の要件定義書で制作している内容です。

商材の特徴を書き出す

同じような内容が重複していても構わないので、バナー制作時に有効活用できるように、なるべくたくさん書き出していきましょう。

すぐにバナー制作に取り掛からず、まずは商材の特徴を画像でじっくりと確認しましょう。

商材の画像を確認をしながら、特徴をテキストにして書き出していくことも大切です。

バナー制作ではテキストを使用することも頻繁に出てきますので、写真素材で商材確認が完了したらすぐに特徴を書き出しましょう。
参考例
  • 春の新作コレクション
  • 豊富なカラーバリエーション
  • グリッターで華やかに春を彩る
  • 華やかなスタイリングで気分も上がる
  • 豊富なカラーリング
  • 体型に合わせたサイズ展開
  • 今年の春は緑が気分
  • ふわっとスカートで春を纏う
  • 1枚で決まる華やかワンピ
  • サテンシャツで高見えコーデ
  • 大ぶりピアスで小顔見え
  • オールシーズンOK
  • 春に着たい色物コーデ
  • …etc

【3-1】ファッション・アパレル系バナー「指定素材のイメージを優先型」

指定素材

(13440)

要件定義書①

タイトル 内容
制作物を通じて達成したい目的 素材を活かしながら、伝えたいコピーをしっかり伝えるデザイン力をつける。
バナーの飛び先を意識しながら作成する力をつける。
ターゲット 素材のイメージから、まずはご自身で考え、迷った場合はコーチに確認しましょう。
例:20代のトレンドに敏感でキレイめコーディネートが好みのOL女子
ターゲット (詳細) 新アイテムはいち早くチェックしたいクリエイティブでおしゃれ度の高いマーケットの中心的な層向け
キャッチコピー・文言とその優先順位 ①NEW ARRIVAL②新商品③新サービス
など新しいサービス内容の紹介をするキャッチコピー

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

クリック誘導用の情報を追記してもよい。バナー全体のイメージによっては無くても良い
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーや自社サイトのイベントページへリンクする為、自社サイトのトップページに使用
色味 素材の色味に合う配色で作成。
目立たせるために補色を使用したり、調和させるために同系色でまとめるなど工夫する。
与えたい印象 素材と少しのテキストを見てクリックをしたくなる印象にしたい
使用する素材の要件 指定素材を必ず使用し、素材内に複数のアイテムがある場合は選定をして制作を実施
その他意図して欲しいこと コピーの優先順位と目立たせ方(目立たせるためにどうするのか。帯を敷くのか色を変えるのか、太くするのかを考える)
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
要件定義書をみて考えること
  • 指定素材のイメージを優先し、リンク先を考えて制作するタイプのバナーとなっています。まずはリンク先をイメージし、制作に取り掛かりましょう。
  • 詳細はクリックした後のサイトをみてくださいという内容であるため、写真素材とテキストの配分を確認しましょう。
参考バナーの制作ポイント
  • 指定素材のイメージを優先し、制作を実施します。
  • 素材とのバランスを見て文字の配置、目立たせ方を考えて作成しましょう！
  • フォント選びでバナーの印象はガラッと変わるので、フォントからこだわって選ぶと◎
  • 色は2色から3色でまとめるのがいいです(素材内で使用しているカラーを持ってくるとまとまりやすいです）
  • 文字の間隔、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！

参考バナー

(13448)

【3-2】ファッション・アパレル系バナー 「金額を安く打ち出す　価格お得型」

使用素材

(13451)

要件定義書②

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

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

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

安さを際立たせるように目立つ位置に配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーや自社サイトのSALE販売ページへリンクさせるため、自社サイトのトップページに使用
色味 安さを際立たせるような赤色・黄色など目立たせる色味を使用
与えたい印象 一目見てSALE・安くなるということが解る印象にしたい
使用する素材の要件 指定素材を必ず使用し、SALEや通常より安価であることが解りやすければどのようなものでも使用して良い
その他意図して欲しいこと テキストも写真もSALEや安くなるということに注目してもらえれば良い
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
要件定義書をみて考えること
  • 季節のSALEバナーやお値打ち価格・期間限定の低価格でお得感を表現しましょう。
    「安さが売り！」ということが解るようなバナー制作を意識してください。
  • 写真とテキストを使用し、【とにかく価格が安い！】ということでクリックを誘導するバナーですので、SALEの価格や割引率なども自分で考えて制作しましょう。
参考バナーの制作ポイント
  • 今回は価格の設定をせず、70%OFFのSALEバナーで制作しています。
  • アパレルのバナーなのでSALE用バナーでもチープさではなく洗練された印象を意識して作成しましょう。
  • SALEや70%を目立たせたいので全体的な色味は絞りつつ、背景に暗めのマスクを使用するなどしてよりコピーが目立つようにしています。
  • フォント選びでバナーの印象はガラッと変わるので、フォントからこだわって選ぶと◎
  • 文字の間隔、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！

参考バナー

(13457)

【3-3】ファッション・アパレル系バナー 「ジャンルで絞り込む カテゴリー特化型」

使用素材

(13471)

要件定義書③

タイトル 内容
制作物を通じて達成したい目的 カテゴリに合わせて打ち出したバナーを制作することが出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。
迷ったり、迷えない場合はコーデに確認しましょう

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) ジャンルに縛られず、良いと思ったものを購入する人。
この冬着るアウターに困っているので気に入ったものを見つけたいと思っている。
購買意欲は高め。
キャッチコピー・文言とその優先順位 OUTER COLLECTION

OUTER COLLECTIONをそのまま載せると場所を広く取ってしまうので、あえてモデルの背景に切れさせられているような見せ方で雑誌のようなビジュアルを意識。
マイクロコピーとその配置 ①35,000円
②1万円以上の価格を設定
③詳細を確認 など

コピーの見せ方を工夫すると◎
#〇〇など、SNSと絡めた見せ方でターゲット層の心を掴む工夫
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 カテゴリに特化したLPページに飛ばすためのバナーとしてサイト内で使用
色味 コピーを目立たしているので、映えるようなパキッとした色味。
大人に刺さるようなカラーを選択
与えたい印象 カテゴリに合わせてコーディネートをおしゃれに見せて、購買意欲を高めたい。
使用する素材の要件 指定素材を必ず使用し、コーディネートの素材のトーンを揃える写真加工を実施
その他意図して欲しいこと 安っぽくならないように、おしゃれ雑誌のような見るだけでワクワクするデザインを心がけましょう。
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
要件定義書をみて考えること
  • カテゴリに合わせて打ち出すバナーなので、そのアイテムを欲しいと思わせるようなデザインにする必要があります。
    3つのコーディネート素材を組み合わせる必要があるので、配置の仕方やバランス、文字の置き方などベストな見せ方を考えましょう。
  • 指定素材の明るさやコントラストなどにばらつきがあるので、どの写真に合わせて調整するかも重要ですし、背景に入れる色によって合うものに加工する必要があります。
参考バナーの制作ポイント
  • OUTER COLLECTIONは2行で幅も高さも割と使うので、あえてコーディネート素材の背景として使用し、雑誌のようなデザインに仕上げています。
  • 文字の選び方もおしゃれなバナーや大人向けのアパレルバナーはセリフ調のフォントを使っていただくと雰囲気が出やすいです。
  • 指定素材の色味にばらつきがあるので、加工して揃えています。
  • アウターの名前の記載の仕方もおしゃれな吹き出し素材を使用しています。
  • #を使うなどしてキャッチーに見せています。
  • 文字の間隔、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！

参考バナー

(13476)

【3-4】ファッション・アパレル系バナー 「キャッチコピーでクリック誘導型」

使用素材

(13498)

要件定義④

タイトル 内容
制作物を通じて達成したい目的 バナー制作時に必要なキャッチコピーを制作することが出来る
ターゲット 指定素材のイメージから、まずはご自身で考え設定してみましょう。
迷ったり、判断できない場合はコーチに確認しましょう

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) 指定素材の商品やサービスに興味がある、程度でまだ、検討段階には入っていない状態の人
キャッチコピー・文言とその優先順位 指定素材のイメージから
キャッチコピーを考えてください

キャッチコピーが目立つように配置
マイクロコピーとその配置 指定素材のイメージから
マイクロコピーも考えてください

キャッチコピーの配置のみでも構いません
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px
掲載・配信箇所 広告用バナーにメインで掲載されるが、秀逸なキャッチコピーであれば自社サイトにも使用
色味 キャッチコピーに合うような色味を使用する
与えたい印象 興味を持ってくれる人が増えるような、目を惹くキャッチコピーだという印象
使用する素材の要件 指定素材を使用しなくても良い・キャッチコピーだけの記載でも構いません
その他意図して欲しいこと キャッチコピーのアイデアが浮かばない時は、アイデアが浮かんだ時に随時テキストに書き留めると良い
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
要件定義書をみて考えること
  • 写真素材の商品をもとにキャッチコピーを自分で考えて制作するバナーです。
  • キャッチコピーをまず最初に考えていきましょう！
    • 素材を見て思いつくキャッチコピーを出した後、最も効果的に訴求できるコピーを採用しましょう
  • キャッチコピーが思い浮かばない場合、次の要件定義のバナーを制作しておいて、キャッチコピーが浮かんできてから着手しても構いません。
参考バナーの制作ポイント
  • 写真加工とアイテムの切り抜きの練習となる要素が高いバナーです。
  • モデル着用素材だけでなく、靴などの他アイテムの置き撮りを使用することで、アイテム数に幅を持たせた見せ方をしています。
  • 文字の間隔、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！
  • テキストに合わせたあしらいをプラスすることでバナーのクオリティを上げましょう。
  • 少し暗めのマスクをかけることで白文字が載せやすくなるように工夫しています。

参考バナー

(13499)

【3-5】ファッション・アパレル系バナー 「企業内のサービス・商品の中の豊富な種類から選ぶことが出来るお得型」

使用素材

(13500)

要件定義⑤

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

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) 商品検討段階だが、必要には迫られていない購買意欲が比較的低い人
キャッチコピー・文言とその優先順位 ①欲しいものが見つかる
②豊富な商品数！
③美味しそうな色！
④希望のコースが見つかる
⑤商品やサービスの数が多い事が分かる内容

豊富な商品をアピール出来るように写真とテキストのバランスに注意する
マイクロコピーとその配置 欲しい商品きっと見つかる。

などメインコピーをさらに補うコピーを配置。

メインコピーを補う位置に配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px (ストーリーズサイズ)
掲載・配信箇所 広告用バナーや自社サイト内の全商品掲載ページへリンクさせるために自社サイトのトップページに使用
色味 複数アイテムを配置しているので、合わせる色はアイテムと合う色を採用しましょう。
与えたい印象 沢山のコースや商品の中から選ぶことが出来るというワクワクとする印象
使用する素材の要件 指定素材以外でもショップのイメージを考え、画像を用意しバナーに使用していただいてもOKです
その他意図して欲しいこと １つのジャンルだけではなく、色々なカテゴリのアイテムがあることを1枚で表現したいので、モデル着用アイテムだけではなく、置き撮りのアイテムなども絡めて展開できると◎
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり６
要件定義書をみて考えること
  • 写真素材の役割をもと、そのカテゴリーの企業が写真素材の利用以外にどのような広報販売やサービスを展開させているかを考えましょう。
  • 写真加工力をアップするために、なるべく様々な素材の写真を加工して経験すると良いでしょう。
  • これまで提供された素材の中で、複数のアイテムが入っているものを使用してもOKです。
  • バナーを作る上でアイテムを切り抜く作業は多く発生するので、練習で切り抜けるように調整してみましょう！
  • 出来るだけ写真加工の演習としたバナー制作をすると良いでしょう。
参考バナーの分析ポイント
  • 写真加工とアイテムの切り抜きの練習となる要素が高いバナーです。
  • モデル着用素材だけでなく、物撮りアイテムの切り抜きを使用することで、アイテムごとの見せ方を調整できます。
  • 文字の種類、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！
  • テキストに合わせたあしらいをプラスすることでバナーのクオリティを上げましょう。

参考バナー

(13505)

【3-6】ファッション・アパレル系バナー 「その商品のみのカラー展開やバリエーションの情報型」

使用素材

(13503)

要件定義⑥

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

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) 商品・サービスを検討中で、複数企業を比較し自分に合うものを探している人
キャッチコピー・文言とその優先順位 ①選べる○○（商品展開を○○へ入れる）
②豊富な○○（商品展開を○○へ入れる）
③あなたは何を選ぶ？！
写真素材の商品バリエーションが解る内容

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

写真とテキストによってごちゃごちゃし過ぎないような配置を心がける
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px
掲載・配信箇所 広告バナーやSNSバナーに使用・自社サイトやオンラインショップ内の商品説明ページにも使用
色味 写真の素材やどのシーズンに展開するバナーなのかを考えて色味は決める。
例:秋のアイテムだと深みのあるグリーンやマスタード、茶、赤などを組み合わせるなど。
与えたい印象 豊富なカラーバリエーションがあることを発信しつつ、細部のディテールも複数写真で見せる工夫。
使用する素材の要件 指定素材以外でも企業のイメージを考え、画像を用意しバナーに使用頂いて構いません
その他意図して欲しいこと 商品やサービスのバリエーションが複数あるという事が分かると良い
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
制作実績を増やすこと
  • カテゴリーによって説明形式を変化させましょう。
    • ↳ 商品、項目のカラーバリエーションや60%のバリエーションを制作
    • ↳サービス、サービスの関わりやすい説明を考え、バナーに落とし込む
  • 【3-1】では様々な素材を写真加工し制作を行いましたが、今回は商品やサービスのカラー展開やサイズ展開、バリエーションを紹介しクリックを誘導するバナーを制作しましょう。
参考バナーの制作ポイント
  • カラーバリエーションを見たいので、選べるカラーを四角いカラーピッカーなどで見せましょう。
  • 見やすいバナーになっているか、情報設計が解りやすくなっているかを最終確認しましょう。
  • 現在の写真ではブラウンのみの展開ですが、5色展開のバナーを制作しました。
  • 実際の作業では、様々なカラーがある場合はそのカラーを使用したうえ、それぞれのカラーバリエーションの画像を加工すると3つのバナーで複数カラーを紹介できるのでオススメです。
  • 文字の種類、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！
  • 提供素材で複数のアイテムが用意されて、商品の魅力が伝わるように工夫していきます。

参考バナー

(13507)

【3-7】ファッション・アパレル系バナー 「企業ロゴ・企業名からクリック誘導型」

使用素材

なし（今回はロゴと企業名がメインなので、使用する素材はご自身で調達してみましょう！）

要件定義⑦

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

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

例）
①「Drive Your Dreams.」
（トヨタ自動車株式会社）
②「NO MUSIC, NO LIFE.」
（タワーレコード株式会社）
ブランドイメージに沿った表示にする
マイクロコピーとその配置 なし
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px
掲載・配信箇所 広告用バナーやSNSバナー・自社サイトのトップページに使用
色味 ブランドイメージを考え、そのイメージに沿った色味を使用
与えたい印象 ブランドイメージをそのままの印象を与える
使用する素材の要件 指定素材以外でもブランドのイメージを考え、画像を用意しバナーに使用していただいてもOKです
その他意図して欲しいこと ブランドイメージを意識した制作
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
💡 要件定義書を含めて考えること
  • 企業のブランドファンを対象にしたバナーとなります。
    • ブランドファンとは？
      • 既存のサービスや、商品が好きでそのブランドのバナーであれば、クリックするユーザーのこと
  • ロゴ制作時にターゲット層を決めて、そのターゲット層に向けたトーン＆マナーをロゴ・バナーに付けることが必要です。
  • その素材からイメージする企業をしっかり考えましょう。
  • 実務として、まずロゴを制作し、バナーの目立つ位置へロゴを入れてバナーを仕上げましょう。
👤 参考バナーの制作ポイント
  • 知名度が高いブランドはロゴだけで訴求が出来るという強みもあります。
  • 企業名やブランドでクリックをされることも多いのでロゴを目立たせるよう、最低限の飾り程度で掲載し、写真素材をメインで制作しましょう。
  • ロゴだけだとシンプルになりやすいので、書き振りの線の長さを調整し華やかに仕上げています。
🎨 ロゴ制作
  • 最初にターゲット層を決めてロゴを制作しましょう。
  • 今回は20代の企業に勤めている女性をターゲット層とし高級感を出した仕上がりで制作しました。
  • 文字の種類、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！

参考ロゴ

(13511)

参考バナー

(13509)

【3-8】ファッション・アパレル系バナー 「機能面・使用感・体感・商品サービス掲載型」

使用素材

(13513)

要件定義⑧

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

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) 商材の購入やサービスの利用がほぼ確定しており、最終決定出来る情報が欲しい人
キャッチコピー・文言とその優先順位 素材の最も目立たせたい特徴をテキスト化し、その内容を解りやすくバナーへ配置

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

最も特徴より小さく配置するが解りやすくオブジェクトなどを使用し配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px
掲載・配信箇所 広告用バナーとして、商品の購買ページや商品サービスのページへリンクする際に使用
色味 視認性をよくする為に暗すぎない色味を使用
与えたい印象 テキストと写真を使用し、機能や特徴、訴求ポイントが分かりやすい印象
使用する素材の要件 指定素材を使用してください。分かりやすくするために写真を加工してもOKです
その他意図して欲しいこと 購買の最終決定が出来るように分かりやすく素材を説明
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
💡 要件定義書を含めて考えること
  • 写真の題材内容を確認し、構成案・使用する種類や価格や割引サービスなどを考えて書き出しましょう。
  • クリックする際に有益な情報を簡単に見せるため、出来るだけ解りやすく読み込み飽きさせずに表現しましょう。
👤 参考バナーの制作ポイント
  • 最初に書き出した内容をもとに、商品の特徴をテキストでバナーに掲載しました。
  • モデル写真に文字を重ねるので、視認性を重視して作成しましょう。
  • 文字の種類、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！
  • モデル写真だけを組み合わせることでバナーに具体性を出しています。

参考バナー

(13516)

【3-9】ファッション・アパレル系バナー 「物語（将来像）でクリック誘導型」

使用素材

(13517)

要件定義⑨

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

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) 商材の購入やサービスの利用を検討中で情報収集中の中の人
キャッチコピー・文言とその優先順位 ①〇〇になれる！
②〇〇も夢じゃない！
③〇〇効果
〇〇に商品購入やサービス体験から得られる将来像を入れて制作
※プレゼントキャンペーンバナーでも良い

解りやすく目立つフォントや配置
視認性の良い配置
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px
掲載・配信箇所 SNSバナーとして、広告バナーにも使用
プレゼントキャンペーンバナーなど
色味 使用素材やシーズンに合わせた色を使用しましょう。
与えたい印象 そのアイテムを身につけることでどのような効果があるのかを分かりやすく記載する。
使用する素材の要件 指定素材を使用しなくても構いません
イラストのみで表現されても構いません
その他意図して欲しいこと 購入やサービス体験で得られるポジティブな将来像を視認性良くアピール
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
💡 要件定義書を含めて考えること
  • 写真素材の役割をもとに、この商品・サービスを購入するとこうなるという将来像を考えましょう。
  • 商品によっては、プレゼントキャンペーンバナーを制作しても良いです。
  • 備考として、どのような側面（訴求軸）にするかを考えましょう。
    • ↳ 問題に合わせて、写真素材を制作して用意してください。
    • ↳ バナーの構成が同じになるので、しっかりと考えて制作しましょう。
👤 参考バナーの制作ポイント
  • 訴求点を強調させましょう。キャッチコピーと画像を組み合わせて考えることが非常に重要です。
  • 今回は、ショートアウターの時期でもある、着痩せ効果を「スッキリ着痩せ見えが叶う」と使っていただくように制作しました。
  • プレゼントキャンペーンバナーを制作する際には、暖かい感じや華やかなメタリック感のバナーを制作すると良いでしょう。
  • 背景に写真を配置し、ブラウンのマスクをかけることで、動きをつけつつ、文字を読ませやすくしています。
  • 端のデッドスペースをテキストをうまく配置し、デザインの一部として使用しています。
  • 写真に文字を重ねる場合はシャドウをうまく使用しましょう。
  • 文字の種類、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！

参考バナー

(13519)

【3-10】ファッション・アパレル系バナー 「画像のインパクトでクリック誘導型」

指定素材

(13520)

要件定義⑩

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

例）
20代後半から30代前半のトレンドに敏感な女性
ターゲット (詳細) 商品の購入を考えていない人向けですが、気に入ったアイテムがあれば購入をしたいと思っている人
キャッチコピー・文言とその優先順位 ①まだ知らない！？
②〇〇で決まり！
画像にメインインパクトを持たせ、付随したキャッチコピーを入れる

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

キャッチコピーで説明が出来ている場合は、不要
制作物の縦横比 ①1080px × 1080px (ベースサイズ)
②1200px × 628px
③1080px × 1920px
掲載・配信箇所 SNSバナーとして、広告バナーにも使用
自社サイトのバナーとしては使用されないこともある
色味 画像メインでインパクトを出せるような色味を使用
与えたい印象 クリックを誘導するためのインパクトを与える
使用する素材の要件 指定素材を使用しなくても構いません。
その他意図して欲しいこと インパクトを与える画像ではあるが、クリックを誘導するという目的は忘れずに制作
制作メモの記載 ①制作にかかった時間
②制作のコンセプト・こだわり
💡 要件定義書を含めて考えること
  • 写真素材の題材をもとにしながら、その商品の詳細ページにリンクさせる「おもしろい・使い易い・楽しい」などを考えましょう。
  • インパクトのあるバナーにするため②テキストの配置を工夫しましょう。
    • 制作時間よりも考える過程やアイデアを出す方が時間が長くなる時もあるので、アイデアは制作日を指定し見ながら制作をするように心がけましょう！
👤 参考バナーの制作ポイント
  • トレンチコートを打ち出す時期が秋初めだということもあり、爽やかな配色にしています。
    • ↳ テキストの色とのコントラストを高く保ちデザインになっています。
  • 背景にテキストをうまく配置して、テキスト自体もデザインの一部にしています。
  • 文字の種類、行の間隔はバナー作成で最もクオリティを左右するものです。最後にカーニングを確認してあげるといいですね！

参考バナー

(13522)

■【見本例2】教育・学習・セミナー系バナー

  • ■ 見本の制作前にする事・・・商材の特徴を書き出す
    • ここでは、同じような内容が重複していても構いません。
    • バナー制作時に有効活用出来るように、なるべく沢山書き出していきましょう。
👤 受講対象
  • 小学生
  • 塾
  • 生徒募集
  • 体験教材
  • 夏期講習キャンペーン 冬期講習キャンペーン
  • オンライン指導も出来る
  • 兄弟での指導も可能
  • 学年に合わせた対応
  • 丁寧で安心
  • 学習も運動もどちらも対応
  • 学習カリキュラムを選べる
  • 解らないところが解るようになる
  • 自宅でも指導できる
  • 徹底指導
  • 学習の進み度合いに応じた対応
  • カリキュラムのカスタマイズ可能
  • ・・・

⚠️ このカテゴリーでは、これまでの10個の要件定義タイプを参考に、ご自身で要件を解釈して制作を進めてください。

ご自身で、制作実績を積むことで考えることやポイントは前段の見本バナーを是非見てから考えてみましょう！

【3-1】教育・学習・セミナー系 「指定素材のイメージを優先型」

指定素材

(13545)

参考バナー

(13547)

【3-2】教育・学習・セミナー系バナー 「金額を安く打ち出す　価格お得型」

指定素材

(13553)

参考バナー

(13554)

【3-3】教育・学習・セミナー系バナー 「金額を高く打ち出す　高品質高価格型」

指定素材

(13557)

参考バナー

(13559)

【3-4】教育・学習・セミナー系バナー 「キャッチコピーでクリック誘導型」

指定素材

(13561)

参考バナー

(13564)

【3-5】教育・学習・セミナー系バナー「企業内のサービス・商品の中の豊富な種類から選ぶことが出来るお得型」

指定素材

(13566)

参考バナー

(13569)

【3-6】教育・学習・セミナー系バナー 「その商品のみのカラー展開やバリエーションの情報型」

指定素材

(13572)

参考バナー

(13574)

【3-7】教育・学習・セミナー系バナー 「企業ロゴ・企業名からクリック誘導型」

指定ロゴ

(13579)

参考バナー

(13580)

【3-8】教育・学習・セミナー系バナー 「機能面・使用感・体感・商品サービス掲載型」

指定素材

(13584)

参考バナー

(13586)

【3-9】教育・学習・セミナー系バナー 「物語（将来像）でクリック誘導型」

指定素材

(13589)

参考バナー

(13591)

【3-10】教育・学習・セミナー系バナー 「画像のインパクトでクリック誘導型」

指定素材

(13595)

参考バナー

(13596)

お疲れさまでした！

見本が確認出来ましたら、『バナー制作100本道場【実践編】』で実際に制作していきましょう！

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