【バナー】架空の英会話スクールのバナー(実践課題)
オンラインスクールSHElikes MULTI CLEATOR COURSE Designerの課題として、バナー制作課題に取り組みました。Instagram・Twitter用の2種作成しました。 [制作期間:1週間/使用ツール:Photoshop]
①制作したバナー(Instagram)
②制作したバナー(Twitter)
③課題要件
<クライアント>English Girls
20代の女性をメイン顧客とする英会話教室。全く英語が話せない苦手意識のある方でも通いやすい初心者歓迎のスクール。ビジネスの場で活用するというより、趣味で学んだり外国人の方との交流を図ってみたい人向けのライトなスクール。
<制作目的> キャンペーン利用での入会者を増やす(2週間の実施期間で50名獲得目標)
<ターゲット> 20代女性。英語初心者。趣味で英語を学びたいと考えている方。
<掲載場所> ①Instagram(通常フィード) ②Twitter
<遷移先> キャンペーン用のLP
<納品形式(サイズ/ファイルの種類)>
①Instagram:1040px × 1040px ②Twitter:1280px × 720px
(いずれもPNGで書き出したものと、元のPSD or Ai データの納品。)
<入れたい文言>「一緒にお得!」「夏のお友達紹介キャンペーン」「あなたにもお友達にも5,000円プレゼント」「期間:2020年8月20日〜9月30日」
<入れたい画像>「”あなたとお友達 を表現するための人物の写真」「英会話スクールであることがわかる要素や写真」「English Girlsのロゴ」
<方向性> ビジネスで活用するというより趣味で学んだり外国人の方との交流を図ってみたい人向けのライトなスクールなので、ポップでたのしい雰囲気。
④考えたユーザーストーリー
具体的な顧客獲得目標がある中でSNSに投稿するバナーということで、まずは流れていくフィードの中にあってもユーザーの目を引くインパクトを与えることが最重要と考えた。まずはお得感を第一に伝え、順にバナーの情報を読んでもらうことで内容を理解して興味を持ってもらう流れにしようと考えた。
①まず5,000円プレゼントという言葉で目を引かせる。
②あなたにもお友達にも?何が一緒にお得なんだろうと内容に興味を持たせる。
③期間限定であることを伝えて今やる理由をさらにアピールする。
④楽しそうにしている写真に目がいき、スクール受講した先の姿を想像してもらう。
⑤最後にとって欲しい具体的な行動としてバナーをクリックして遷移してもらう。
⑤工夫した点
◼️情報設計
情報が複数ある中で視線誘導できるよう、まず中央の「5000円」に注目させ、その後Z型に視線が動くように配置しています。
◼️配色
配色や大きさのコントラストを意識して、パッとみた時に目にとまるよう意識しました。楽しそうな雰囲気やポップさを強めると、丸みや彩度の高いデザインになっていき、対象年齢が幼くなってしまいやすく、バランスが難しかったです。
◼️画像
全体のバランスを見て、使用写真にトーンカーブや色調補正をかけてバランスを取っています。英会話教室であることが雰囲気から分かるよう、背景にアルファベットの画像を置配置しました。
⑥制作を通して学んだこと
クライアントの目的達成に向けて、具体的なユーザーストーリーを考えて情報設計すること。多くのSNSの情報の中でターゲットの目を引く配色や視線の誘導を考えること。そのためにバナー全体のコントラストを意識したり躍動感や具体的な雰囲気を感じて想像できるデザインにすること。
まずはグレースケールで情報設計(文字の大きさや配置)をしっかり決めてから配色やあしらいを決めていくことで、コンセプトや伝えたいことがずれにくくなると分かりました。
クライアントからの要件定義をデザインに落とし込むだけでなく、より目標達成に近づくために制作側から提案する力も必要になるのだと分かりました。