INDEX
目次
前の章に戻る1. バナー制作を実践していこう！
この教材の学習時間: 約1160分
『バナー制作100本道場【実践編】』を確認し、制作工程のイメージができた方はバナー制作を実践していきましょう！
この教材では、1つのテーマを選び、そのテーマで10種類の訴求型のバナーを制作していきます。
同じ商材でも、訴求型が変われば伝えることも見せ方も変わります。
10種類の見せ方を作り分けていきましょう。
まずはこの10本をやり切ることが、この教材の課題です。
作り終えてさらに引き出しを増やしたい方は、別のテーマを選んで同じように10本ずつ制作していきましょう。
10のテーマすべてに取り組むと100本になります。
制作の流れは次のとおりです。
1. テーマと決める
2. 訴求型ごとに要件定義書を記入する
3. バナーを制作する
4. 掲載されるサイズで確認して、直す
同じ商材でも、訴求型が変われば伝えることも見せ方も変わります。
10種類の見せ方を作り分けていきましょう。
まずはこの10本をやり切ることが、この教材の課題です。
作り終えてさらに引き出しを増やしたい方は、別のテーマを選んで同じように10本ずつ制作していきましょう。
10のテーマすべてに取り組むと100本になります。
制作の流れは次のとおりです。
1. テーマと決める
2. 訴求型ごとに要件定義書を記入する
3. バナーを制作する
4. 掲載されるサイズで確認して、直す
Todoリスト
0. テーマを決めて、商材の特徴を書き出す
1. 指定素材のイメージを優先型
2. 金額を安く打ち出す 価格お得型
3. ジャンルで絞り込む カテゴリー特化型
4. キャッチコピーでクリック誘導型
5. 企業内のサービス・商品の中の豊富な種類から選ぶことが出来るお得型
6. その商品のみのカラー展開やバリエーションの情報型
7. 企業ロゴ・企業名からクリック誘導型
8. 機能面・使用感・体感・商品サービス掲載型
9. 物語（将来像）でクリック誘導型
10. 画像のインパクトでクリック誘導型
11.10本すべてを掲載サイズで確認して、直す
1. 指定素材のイメージを優先型
2. 金額を安く打ち出す 価格お得型
3. ジャンルで絞り込む カテゴリー特化型
4. キャッチコピーでクリック誘導型
5. 企業内のサービス・商品の中の豊富な種類から選ぶことが出来るお得型
6. その商品のみのカラー展開やバリエーションの情報型
7. 企業ロゴ・企業名からクリック誘導型
8. 機能面・使用感・体感・商品サービス掲載型
9. 物語（将来像）でクリック誘導型
10. 画像のインパクトでクリック誘導型
11.10本すべてを掲載サイズで確認して、直す
2. テーマを決めて、商材の特徴を書き出す
目安の学習時間: 60分
バナーを作り始める前に、どのテーマで制作するかを決めます。
【2-1】テーマを選ぶ
次の8つから1つ選んでください。
1. 飲料・食品系
2. 旅行・観光系
3. 美容・コスメ系
4. インテリア・雑貨系
5. 映画・音楽系
6. 電化製品系
7. 車・乗り物系
8. アウトドア・スポーツ系
ファッション・アパレル系と教育・学習・セミナー系は、導入編で見本が掲載されているので上記の8つのテーマから選択しましょう！
1. 飲料・食品系
2. 旅行・観光系
3. 美容・コスメ系
4. インテリア・雑貨系
5. 映画・音楽系
6. 電化製品系
7. 車・乗り物系
8. アウトドア・スポーツ系
ファッション・アパレル系と教育・学習・セミナー系は、導入編で見本が掲載されているので上記の8つのテーマから選択しましょう！
【2-2】指定素材をダウンロードする
選んだテーマの指定素材を、ダウンロードしましょう。
1, 飲料・食品系バナー
2, 旅行・観光系バナー
3, 美容・コスメ系バナー
4, インテリア・雑貨系バナー
5, 映画・音楽系バナー
6, 電化製品系バナー
7, 車・乗り物系バナー
8, アウトドア・スポーツ系バナー
ファッション・アパレル系バナー(参考)
教育・学習・セミナー系バナー(参考)
【2-3】商材の特徴を書き出す
まずは商材の特徴を書き出します。
指定素材の画像をじっくり見て、次のような内容をなるべくたくさん書き出してください。
同じような内容が重複していても構いません。
* 写っているものの特徴（色、形、質感、大きさ）
* どんな場面で使われるものか
* どんな人が使いそうか
* 同じジャンルの他の商品と比べて、どこが違いそうか
ここで書き出した言葉が、このあと10本すべての要件定義書とキャッチコピーのもとになります。
なぜ先に書き出すのか
訴求型が変わっても、商材そのものは変わりません。
先に特徴を書き出しておけば、10種類の訴求型それぞれで
「どの特徴を前に出すか」を選ぶだけで済みます。
指定素材の画像をじっくり見て、次のような内容をなるべくたくさん書き出してください。
同じような内容が重複していても構いません。
* 写っているものの特徴（色、形、質感、大きさ）
* どんな場面で使われるものか
* どんな人が使いそうか
* 同じジャンルの他の商品と比べて、どこが違いそうか
ここで書き出した言葉が、このあと10本すべての要件定義書とキャッチコピーのもとになります。
なぜ先に書き出すのか
訴求型が変わっても、商材そのものは変わりません。
先に特徴を書き出しておけば、10種類の訴求型それぞれで
「どの特徴を前に出すか」を選ぶだけで済みます。
3. 要件定義書を確認しましょう！
目安の学習時間: 240分
【3-1】指定素材のイメージを優先型
| タイトル | 内容 |
|---|---|
| 制作物を通じて達成したい目的 | 素材のイメージを変えず、リンク先を想起させ誘導を促せるバナーを作ることが出来る |
| ターゲット | 指定素材のイメージから、まずはご自身で考え設定してみましょう。 例） 20代～40代の仕事をしている女性 小学生くらいのお子様がいる |
| ターゲット (詳細) | 素材の商品を購入したり、サービスを使用したいとは思っているがまだ検討段階であり、購入するための後押しが欲しい人 |
| キャッチコピー・文言とその優先順位 | ①NEW ARRIVAL ②新商品 ③新サービス など新しいサービス内容の紹介をするキャッチコピー 写真を目立たせるように表示 |
| マイクロコピーとその配置 | ①Click ②詳細を見る ③詳細はこちら などクリックを誘導させるコピー クリック誘導用の情報を追記も可能。バナー全体のイメージによっては無くても良い |
| 制作物の縦横比 | ①1080px × 1080px (ベースサイズ) ②1200px × 628px ③1080px × 1920px (ストーリーズサイズ) |
| 掲載・配信箇所 | 広告用バナーや自社サイトのイベントページへリンクする為、自社サイトのトップページに使用 |
| 色味 | 素材の色味を重視し、大幅な変更はしない |
| 与えたい印象 | 素材と少しのテキストを見てクリックをしたくなる印象にしたい |
| 使用する素材の要件 | 指定素材を必ず使用し、素材内に複数のアイテムがある場合は選定をして制作を実施 |
| その他意図して欲しいこと | テキストは出来るだけ最小にする |
| 制作メモの記載 | ①制作にかかった時間 ②制作のコンセプト・こだわり ③確認して直した点 |
読み取りながら制作しましょう
6以降は、ご自身で要件定義書を作成していただきます。
1〜5で制作するときに、次の点を意識しておくと書きやすくなります。
* 「ターゲット (詳細)」には、どれくらい細かく書いてあるか
* 「キャッチコピー・文言とその優先順位」の順位は、何をもとに決められているか
* 「色味」「与えたい印象」は、制作中に迷ったときの判断材料になっているか
またサイズに関しては指定されている全てのサイズを作成してみましょう！
6以降は、ご自身で要件定義書を作成していただきます。
1〜5で制作するときに、次の点を意識しておくと書きやすくなります。
* 「ターゲット (詳細)」には、どれくらい細かく書いてあるか
* 「キャッチコピー・文言とその優先順位」の順位は、何をもとに決められているか
* 「色味」「与えたい印象」は、制作中に迷ったときの判断材料になっているか
またサイズに関しては指定されている全てのサイズを作成してみましょう！
【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】その商品のみのカラー展開やバリエーションの情報型
ここからは、ご自身で考える項目が増えます。
実際のお仕事でも、依頼者から提示される内容と、デザイナーが考えて提案する内容に分かれます。
空欄になっているところは、デザイナーとして考えて決めましょう。
・ターゲット (詳細)：普段どんな生活をしていて、何に困っていて、どうなりたい人かを書きます。
このバナーを見る直前に何をしていて、どんな気持ちかまで書けると、言葉と写真の選び方が決まります。
・キャッチコピー・文言とその優先順位：言葉と順位を決めたら、なぜその順位にしたかを1行添えてください。
制作中に迷ったときの判断材料になります。
・色味：使う色を決めたら、なぜその色にしたかも書いておきましょう。
・与えたい印象：「おしゃれに」だけでは判断できません。「安っぽく見せない」「文字は写真の邪魔をしない」
のように、迷ったときに立ち返れる言い方で書きましょう。
実際のお仕事でも、依頼者から提示される内容と、デザイナーが考えて提案する内容に分かれます。
空欄になっているところは、デザイナーとして考えて決めましょう。
・ターゲット (詳細)：普段どんな生活をしていて、何に困っていて、どうなりたい人かを書きます。
このバナーを見る直前に何をしていて、どんな気持ちかまで書けると、言葉と写真の選び方が決まります。
・キャッチコピー・文言とその優先順位：言葉と順位を決めたら、なぜその順位にしたかを1行添えてください。
制作中に迷ったときの判断材料になります。
・色味：使う色を決めたら、なぜその色にしたかも書いておきましょう。
・与えたい印象：「おしゃれに」だけでは判断できません。「安っぽく見せない」「文字は写真の邪魔をしない」
のように、迷ったときに立ち返れる言い方で書きましょう。
| タイトル | 内容 |
|---|---|
| 制作物を通じて達成したい目的 | カラーバリエーションやサイズバリエーション・サービスのバリエーションの見せ方を習得する |
| ターゲット | （ご自身で記入してください） |
| ターゲット (詳細) | （ご自身で記入してください） |
| キャッチコピー・文言とその優先順位 | （ご自身で記入してください） |
| マイクロコピーとその配置 | （ご自身で記入してください） |
| 制作物の縦横比 | ①1080px × 1080px (ベースサイズ) ②1200px × 628px ③1080px × 1920px (ストーリーズサイズ) |
| 掲載・配信箇所 | 広告バナーやSNSバナーに使用・自社サイトやオンラインショップ内の商品詳細ページに使用 |
| 色味 | （ご自身で記入してください） |
| 与えたい印象 | （ご自身で記入してください） |
| 使用する素材の要件 | 指定素材以外でも企業のイメージを考え、画像を用意しバナーに使用していただいてもOKです |
| その他意図して欲しいこと | 商品やサービスのバリエーションが複数あるという事が分かると良い |
| 制作メモの記載 | ①制作にかかった時間 ②制作のコンセプト・こだわり ③確認して直した点 |
【3-7】企業ロゴ・企業名からクリック誘導型
| タイトル | 内容 |
|---|---|
| 制作物を通じて達成したい目的 | ロゴや企業名などブランドイメージを考え、ロゴ制作に加え、ロゴや企業名をメインとするバナー制作ができる |
| ターゲット | （ご自身で記入してください） |
| ターゲット (詳細) | （ご自身で記入してください） |
| キャッチコピー・文言とその優先順位 | （ご自身で記入してください） ※キャッチコピーは入れなくても構いません。ロゴ制作時に企業キャッチコピーを制作出来たならばそちらを使用しましょう 例）①「Drive Your Dreams.」（トヨタ自動車株式会社）②「NO MUSIC, NO LIFE.」（タワーレコード株式会社） |
| マイクロコピーとその配置 | なし |
| 制作物の縦横比 | ①1080px × 1080px (ベースサイズ) ②1200px × 628px ③1080px × 1920px (ストーリーズサイズ) |
| 掲載・配信箇所 | 広告用バナーやSNSバナーに使用・自社サイトのトップページに使用 |
| 色味 | （ご自身で記入してください） |
| 与えたい印象 | （ご自身で記入してください） |
| 使用する素材の要件 | 指定素材以外でもブランドのイメージを考え、画像を用意しバナーに使用していただいてもOKです |
| その他意図して欲しいこと | ブランドイメージを意識した制作 |
| 制作メモの記載 | ①制作にかかった時間 ②制作のコンセプト・こだわり ③確認して直した点 |
【3-8】機能面・使用感・体感・商品サービス掲載型
| タイトル | 内容 |
|---|---|
| 制作物を通じて達成したい目的 | 素材の機能・使用感・体感・サービスなどのポイントを分かりやすく掲載するバナー制作が出来る |
| ターゲット | （ご自身で記入してください） |
| ターゲット (詳細) | （ご自身で記入してください） |
| キャッチコピー・文言とその優先順位 | （ご自身で記入してください） ※素材の最も目立たせたい特徴をテキスト化し、その内容を分かりやすくバナーへ記載しましょう 目立たせる特徴は分かりやすく、大きく記載 |
| マイクロコピーとその配置 | （ご自身で記入してください） ※素材のその他の特徴をテキスト化して配置しましょう 最も特徴より小さく配置するが分かりやすくオブジェクトなどを使用し配置 |
| 制作物の縦横比 | ①1080px × 1080px (ベースサイズ) ②1200px × 628px ③1080px × 1920px (ストーリーズサイズ) |
| 掲載・配信箇所 | 広告用バナーとして、商品の購買ページや商品サービスのページへリンクする際に使用 |
| 色味 | （ご自身で記入してください） |
| 与えたい印象 | （ご自身で記入してください） |
| 使用する素材の要件 | 指定素材を使用してください。分かりやすくするために写真を加工してもOKです |
| その他意図して欲しいこと | 購買の最終決定が出来るように分かりやすく素材を説明 |
| 制作メモの記載 | ①制作にかかった時間 ②制作のコンセプト・こだわり ③確認して直した点 |
【3-9】物語（将来像）でクリック誘導型
| タイトル | 内容 |
|---|---|
| 制作物を通じて達成したい目的 | 商品購入やサービス体験で得られる将来像を提案できるバナー制作が出来る |
| ターゲット | （ご自身で記入してください） |
| ターゲット (詳細) | （ご自身で記入してください） |
| キャッチコピー・文言とその優先順位 | （ご自身で記入してください） ※商品購入やサービス体験から得られる将来像を入れて制作しましょう 例）①〇〇になれる！②〇〇も夢じゃない！③〇〇効果 分かりやすく目立つフォントや配置、視認性の良い配置 |
| マイクロコピーとその配置 | （ご自身で記入してください） |
| 制作物の縦横比 | ①1080px × 1080px (ベースサイズ) ②1200px × 628px ③1080px × 1920px (ストーリーズサイズ) |
| 掲載・配信箇所 | SNSバナーとして、広告バナーにも使用。プレゼントキャンペーンバナーなど |
| 色味 | （ご自身で記入してください） |
| 与えたい印象 | （ご自身で記入してください） |
| 使用する素材の要件 | 指定素材を使用しなくても構いません。イラストのみで表現されても構いません |
| その他意図して欲しいこと | 購入やサービス体験で得られるポジティブな将来像を視認性良くアピール |
| 制作メモの記載 | ①制作にかかった時間 ②制作のコンセプト・こだわり ③確認して直した点 |
【3-10】画像のインパクトでクリック誘導型
| タイトル | 内容 |
|---|---|
| 制作物を通じて達成したい目的 | インパクトや心に残るメッセージを与えることが出来るバナー制作 |
| ターゲット | （ご自身で記入してください） |
| ターゲット (詳細) | （ご自身で記入してください） |
| キャッチコピー・文言とその優先順位 | （ご自身で記入してください） ※画像にメインインパクトを持たせ、付随したキャッチコピーを入れましょう 例）①まだ知らない！？②知っていると得をする！ 画像についての説明的なテキストでも可 |
| マイクロコピーとその配置 | （ご自身で記入してください） ※キャッチコピーで説明が出来ている場合は、不要です |
| 制作物の縦横比 | ①1080px × 1080px (ベースサイズ) ②1200px × 628px ③1080px × 1920px (ストーリーズサイズ) |
| 掲載・配信箇所 | SNSバナーとして、広告バナーにも使用。自社サイトのバナーとしては使用されないこともある |
| 色味 | （ご自身で記入してください） |
| 与えたい印象 | （ご自身で記入してください） |
| 使用する素材の要件 | 指定素材以外の画像を検索し、使用する。指定素材の商品・サービスへクリック誘導 |
| その他意図して欲しいこと | インパクトを与える画像ではあるが、クリックを誘導するという目的は忘れずに制作 |
| 制作メモの記載 | ①制作にかかった時間 ②制作のコンセプト・こだわり ③確認して直した点 |
4. 実践してみよう！
目安の学習時間: 制作は1本あたり約60分 ／ 確認と修正 約200分
要件定義書の記入が終わった訴求型から制作していきましょう。
1〜2は記入済みの要件定義書がありますので、そこから始めるとスムーズです。
3以降は、要件定義書を書いてから制作に入ってください。
制作するサイズ
1つの訴求型につき、要件定義書に記載されている次の3サイズすべてを制作しましょう。
1080px × 1080px（ベースサイズ）
1200px × 628px
1080px × 1920px（ストーリーズサイズ）
横長と縦長では入る情報量が変わりますので、同じ内容でも配置を変える必要が出てきます。
実際のお仕事でも、1つの案件で複数サイズの制作を依頼されることは多くあります。
バナー制作実践を実施される際に出来るだけ、制作時間・制作時にこだわったポイントなどをバナー制作と同時にメモにしておくと、ポートフォリオへの掲載の際にわかりやすくなりますので、ぜひメモしておきましょう！
1080px × 1080px（ベースサイズ）
1200px × 628px
1080px × 1920px（ストーリーズサイズ）
横長と縦長では入る情報量が変わりますので、同じ内容でも配置を変える必要が出てきます。
実際のお仕事でも、1つの案件で複数サイズの制作を依頼されることは多くあります。
バナー制作実践を実施される際に出来るだけ、制作時間・制作時にこだわったポイントなどをバナー制作と同時にメモにしておくと、ポートフォリオへの掲載の際にわかりやすくなりますので、ぜひメモしておきましょう！
作品例
✔️ バナー制作
- 構想｜10分
- 制作｜50分
💡こだわりポイント
- ロゴの緑色をバナーにも使用し、学習塾のバナーであることが一目で分かるように工夫しました。
完成したら、確認して直しましょう
『導入編』でお伝えしたとおり、バナーは最後にユーザー目線で見て修正することが大切です。
ここでは、その確認の手順をお伝えします。10本それぞれについて実施しましょう。
ここでは、その確認の手順をお伝えします。10本それぞれについて実施しましょう。
手順1. 掲載されるサイズで見る
制作画面では大きく表示されていますが、実際にユーザーが目にするサイズはもっと小さくなります。
* スマートフォンで表示されるくらいの大きさ（画面上で幅350pxほど）に縮小して見る
* サイトのサイドバーに置かれるくらいの大きさに縮小して見る
この状態で読めない文字や、つぶれてしまう装飾がないかを確認します。
* スマートフォンで表示されるくらいの大きさ（画面上で幅350pxほど）に縮小して見る
* サイトのサイドバーに置かれるくらいの大きさに縮小して見る
この状態で読めない文字や、つぶれてしまう装飾がないかを確認します。
手順2. 時間をおいて見る
作った直後は、どこに何が書いてあるかを自分が知っている状態です。
一晩おくか、少なくとも30分は別の作業をしてから見直しましょう。
見直すときは、要件定義書に書いた優先順位1位の言葉を思い出してください。
その言葉が、実際に最初に目に入るでしょうか。
別の要素に目がいくようであれば、次のどれかが原因です。
* 文字が小さい
* 背景と色が近くて沈んでいる
* まわりに余白がなく、他の要素に埋もれている
* 要素が多すぎて、どこを見ればよいか分からない
一晩おくか、少なくとも30分は別の作業をしてから見直しましょう。
見直すときは、要件定義書に書いた優先順位1位の言葉を思い出してください。
その言葉が、実際に最初に目に入るでしょうか。
別の要素に目がいくようであれば、次のどれかが原因です。
* 文字が小さい
* 背景と色が近くて沈んでいる
* まわりに余白がなく、他の要素に埋もれている
* 要素が多すぎて、どこを見ればよいか分からない
手順3. チェックリストで見直す
次の5つを確認します。すべて満たすまで直しましょう。
* 5秒見ただけで、何の広告か分かる
* 一番伝えたい言葉が、最初に目に入る
* クリックした先に何があるか想像できる
* 縮小した状態でも、文字が背景に埋もれていない
* リンク先の内容と、バナーで約束していることがずれていない
* 5秒見ただけで、何の広告か分かる
* 一番伝えたい言葉が、最初に目に入る
* クリックした先に何があるか想像できる
* 縮小した状態でも、文字が背景に埋もれていない
* リンク先の内容と、バナーで約束していることがずれていない
5. 学習を終えられた方へ
目安の学習時間: 60分
バナー制作お疲れ様でした！
1つの商材に対して10種類の訴求型でバナーを作ったことで、
同じ商品でも「誰に、何を、どう伝えるか」で見せ方が変わることを実感できたはずです。
最後に、10本を並べて見てみましょう。
* 同じ商材の広告として、10本を並べられる状態になっているか
* 訴求型ごとに、伝えていることが変わっているか
* 要件定義書に書いた内容が、バナーに反映されているか
10本と要件定義書、制作メモをまとめて、ポートフォリオに掲載しましょう。
制作物だけでなく、どういう意図で作ったかが伝わる状態にしておくと、お仕事の依頼を受けるときに見てもらえる材料になります。
もっと引き出しを増やしたい方は、別のテーマを選んで同じように10本ずつ制作していきましょう。
2章のテーマ一覧から次のテーマを選び、同じ手順で進めるだけです。
10のテーマすべてに取り組むと100本になります。
この教材で学んだことを生かして、ポートフォリオの制作やLPの制作など
さらなるスキルアップを目指していきましょう！
1つの商材に対して10種類の訴求型でバナーを作ったことで、
同じ商品でも「誰に、何を、どう伝えるか」で見せ方が変わることを実感できたはずです。
最後に、10本を並べて見てみましょう。
* 同じ商材の広告として、10本を並べられる状態になっているか
* 訴求型ごとに、伝えていることが変わっているか
* 要件定義書に書いた内容が、バナーに反映されているか
10本と要件定義書、制作メモをまとめて、ポートフォリオに掲載しましょう。
制作物だけでなく、どういう意図で作ったかが伝わる状態にしておくと、お仕事の依頼を受けるときに見てもらえる材料になります。
もっと引き出しを増やしたい方は、別のテーマを選んで同じように10本ずつ制作していきましょう。
2章のテーマ一覧から次のテーマを選び、同じ手順で進めるだけです。
10のテーマすべてに取り組むと100本になります。
この教材で学んだことを生かして、ポートフォリオの制作やLPの制作など
さらなるスキルアップを目指していきましょう！