Fullme webデザイン初級Lesson10
Fullme webデザイン初級Lesson10
・より理解を深めるため
・学習記録を残すため
書いていくよ！
バナー広告とは？
ポータルサイト、ニュースサイト、アプリなどの
Web上で表示される画像や動画で作られた広告のこと。
目を引くキャッチコピーやデザインで興味を持ってもらい、バナー広告をクリックさせて、広告主の自社サイトに誘導することが目的。
♦︎ 広告媒体
バナー広告は
・イメージ広告
・レスポンシブディスプレイ広告
２種類の広告タイプにわかれ、表示される方法も異なる。
♦︎ 広告媒体
配信先の広告枠に合わせ、サイズやレイアウトなどを自動調整しながら表示してくれる広告。
・見出し
・説明文
・画像（動画）
・ロゴ
これらを設定するだけで広告が自動で最適化される。
【メリット】
広告の制作コストの削減が、レスポンシブ広告の最大のメリット
【デメリット】
デザインの自由度がなく、視覚的なインパクトを表現することが難しい
♦︎ バナー広告のサイズ
・ 「レクタングル」 ・・・300×250の長方形サイズ
・ 「スクエア」 ・・・・・250×250の正方形サイズ
・ 「その他」 ・・・・・・横長、縦長のサイズなどがある
Google広告・・・『GDN』
Yahoo広告 ・・・『YDA』
Google広告、Yahoo広告では多数のバナーサイズが展開されている。
それぞれのサイズに名前があり、配信先によって正確なサイズも異なる。
(サイズはクライアントから指定で依頼されることが多い)
[ 主要なバナーサイズ ]
最近はPCよりもスマホしか見ていないユーザーが多いため
スマホ専用のバナーもとても広告効果が高い！
バナー制作の流れ
① ターゲットを決める
② サイズを決める
③ バナーに載せる要素を洗い出す
④ 手描きでレイアウトを考える
⑤ 画像編集ツールでデザインする
♦︎ ターゲットを決める
まずは、ターゲットを決める。
「男性」「女性」という曖昧なものではなく
制作するバナーが子ども向けのサービスや商品であれば・・・
「30代女性 子育て中のママ」
というように詳しく絞って決める必要がある！
♦︎ サイズを決める
次に、バナーのサイズを決める。
① Google広告やYahoo広告など配信先によって変わるので
状況に応じてサイズを決める。
or
② クライアント側で決められていることも多いので
しっかり制作サイズを確認しておく。
バナーのサイズや形によって
・見せ方
・レイアウト
どうしていくかと考えていく。
♦︎ バナーに載せる要素を洗い出す
・キャッチコピー
・サブキャッチコピー
・写真
・イラスト など
バナーに載せる要素を全てリストアップ！
クライアントの要望を確認した上で要素をリストアップして
・必要、不要な要素
・優先順位
しっかり整理してからレイアウトを考えよう。
♦︎ 手描きでレイアウトを考える
「 まずは手描きでラフを考えるのがよき！ 」
はじめからパソコンに向かって長々とレイアウトを考えるより
落ち着いたレイアウトにしようか？
賑やかで楽しげな雰囲気か？
手描きは、頭の中を整理しやすく修正もしやすいのが◎！
レイアウトは最初から絞り込まず、いくつかパターンを出しておこう。
♦︎ 画像編集ツールでデザインする
レイアウトパターンが定まったら、ツールで実際にデザイン制作を開始。
(当講座：FullmeWEBデザイン初級コースでは「Figma」を使用)
LESSON10のまとめ
① バナー広告とは
「イメージ広告」
「レスポンシブディスプレイ広告」
２種類のタイプがある。
② バナーサイズ
サイズの指定はクライアントからされることが多いが
主要なバナーの名前とサイズを覚えておこう。
③ バナー制作の流れ
1.ターゲットを決める
2.サイズを決める
3.バナーに載せる要素を洗い出す
4.手描きでレイアウトを考える
5.画像編集ツールでデザインする
実際にデザインしていく前に
しっかり基本を覚えてクライアントにとって
効果的なバナーを作れるようにしよう！
課題
♦︎ バナー実践に入る前に
【 クライアント設定 】
クライアント案件として、以下の用途からバナーサイズまでを設定
■ 用途：キッズアパレルブランドのセール広告のバナー
■ ターゲット層：子供らしくカジュアルな服装が好みの子育て世代
■ 内容：セール期間中全品30%OFF
■ クライアント要望：一目で注目を集め、子供らしくポップなテイスト
■ バナーサイズ：336×280
【 レイアウト構図 】
初級コースでは
・２分割
・３分割
・日の丸構図
・対角線
これらのレイアウトでデザイン実践！
今回は「２分割」レイアウトを覚えていこう！
縦にど真ん中で割った「２分割」でデザイン制作
■ 手描きラフ
■ 完成バナー
【 デザインのポイント 】
・ひと目で子供服だと分かるPOPなデザイン
・「全品」にあしらいを施し、わかりやすく！
・赤と青で目立つ配色！
・遊び心のあるフォントでにぎやかに！
次回から実際にこのデザインを制作！！
(ドキドキ・・・)
最後に
コーディングから解放されシャバの空気
いよいよバナー広告制作一歩手前に！！
しかし
「こんなにレイアウトってあるのか」
「サイズも結構ある」
「手書きラフから作る」
へぇ〜！なるほど〜！
ってメモばっかな内容だった。
具体的な制作の動きも知ってイメージできるのもいいし、実際に次は「いただいた要件定義」をもとに制作できる・・・
う〜〜〜ん、楽しみ！
Figma操作が久々なんで「大丈夫かしら？」となりつつも不安は少なめ。
(コーディングとの差よ・・・)
さぁ！どんどん手を動かしていこう！