バナー制作｜Instagram ,Twitter

💻　制作物

１　バナー（Instagram：1040px × 1040px）

２　バナー（Twitter：1280px × 720px）

🗒　制作手順

STEP１　要件整理

STEP２　情報設計

STEP３　ビジュアルデザイン（Instagram・Twitter）

🕛　制作時間（STEP１～３）：20時間

制作物１｜バナー（Instagram：1040px × 1040px）

制作物２｜バナー（Twitter：1280px × 720px）

制作手順

STEP１　要件整理

クライアントからの要件

●　クライアント情報

クライアント名：EnglishGirls

20代の女性をメイン顧客とする英会話教室。全く英語が話せない苦手意識のある方でも通いやすい初心者歓迎のスクール。ビジネスの場で活用するというより、趣味で学んだり外国人の方との交流を図ってみたい人向けのライトなスクール。

●　目的
SNSで配信するためのバナー制作。キャンペーン利用での入会者を増やす（2週間の実施期間で50名獲得目標）

●　ターゲット
20代女性。英語初心者。趣味で英語を学びたいと考えている方。

●　入れたい要素
【文言】

夏のお友達紹介キャンペーン
あなたにもお友達にも5,000円プレゼント
期間：2020年8月20日～9月30日
一緒にお得！

【画像など】

”あなたとお友達”を表現するための人物の写真
英会話スクールであることがわかる要素や写真
English Girlsのロゴ

STEP２　情報設計　

STEP３　ビジュアルデザイン

１　配色

雲の浮かぶ夏空をイメージした鮮やかなブルー×濁りのない白に、アクセントカラーのフレッシュなイエローで夏らしさを演出しました。文字部分は黒ではなくネイビーにすることでブルーと馴染ませ、暑苦しくならないようにしました。配色のメリハリを保つため、人物は白黒にして全体の色数を抑えました。

２　フォント

”20代女性がライトに楽しめる英会話スクール”というイメージに合うよう、ポップさがありつつスタイリッシュな「コーポレート・ロゴ ver2」をメインに使用。今回最も伝えたい情報である「5,000円プレゼント」の部分は、視認性が高く存在感のある「DIN」で金額を強調しました。

　▼ コーポレート・ロゴ ver2

　▼ DIN Alternate

３　あしらい

フリー素材の人物写真はそのまま使用するのではなく、パーツだけをトリミングしカラーハーフトーンで強めに加工することで、初心者感が出ないようにしました。

文字のシャドウや異なる色の正方形を重ねた背景で、目に飛び込んでくるような立体的なデザインを目指しました。

工夫したこと

１　配置や字間の微調整

要素の配置やカーニングを妥協せず、ガイドラインや図形を用いて1px単位で微調整しました。

２　目的達成のためのデザイン

今回のバナー制作の目的である「キャンペーン利用による入会者増」の実現には「5,000円プレゼント」という情報を前面に打ち出すことが有効だと考え、一番目立つようにフォントや色を工夫しました。また、驚いている表情の女の子や「お得」のポーズをしているように見える外国人の写真を選ぶなど、細部にまでこだわりました。

３　媒体ごとの特性を考慮したリンク設定

InstagramとTwitterの特性を踏まえ、LPサイトへのリンクはデザインに入れないという判断をしました（Instagramでは広告画像の下部に「詳しくはこちら」といったCTAボタンを設置できる・Twitterでは投稿画像自体にURLを入れてもタップしてリンク先に飛べない）。

学んだこと

１　デザイン制作の流れ

クライアントから提示された要件を理解する→ユーザーストーリーを考えて情報の優先順位づけを行う→ビジュアルデザインに落とし込むというデザイン制作の一連の流れを、実践を通して学ぶことができました。制作中に迷いが生じた際は、「クライアントからの要件を満たしているか」「ユーザーを意識できているか」といった原点に立ち返って方向性を整理したいと思います。

２　参考デザインの探し方

限られた制作時間では、配色・フォント・レイアウトなど、ポイントを絞って効率的に参考デザインを探す必要があることを学びました。複数の参考サイトを日々チェックしてストックを増やし、オリジナルデザインのヒントとして有効活用していきたいと思います。競合のデザインを研究し、他社とは方向性の異なるデザインを検討していくという手法も今後取り入れていきたいです。