英会話教室SNSバナー制作（Instagram・Twitter）

目次

1.制作したバナー

2.課題要件書

3.工夫したPOINT

4.制作を通して学んだこと

----------------------------------------

■制作したバナー

　　　　　　　　　　　　　　Instagram用のバナー

　　　　　　　　　　　　　　　　Twitter用のバナー

■課題要件書

【クライアント】

English Giels（架空）：20代女性がメイン顧客の初心者向け英会話スクール

【クライアントからの要件】

目的▶キャンペーン利用での入会者を増やす

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

入れる文言▶①一緒にお得！②夏のお友達紹介キャンペーン③あなたにもお友達にも5,000円プレゼント④期間：2020年8月20日〜9月30日

■工夫したPOINT（5か所）

1.　目的達成のための、ユーザーストーリーを考えた情報設計

ターゲットである20代女性に訴求するために効果的な情報を、入れる文言の中から整理し、優先順位をつけました。

情報に優先順位をつけることで、バナー内での情報の見せ方が明確になり、・ジャンプ率を上げる、・明度のコントラストを大きくするなど、優先順位が高いものほど視認性があがるように工夫をしました。また、「5000円プレゼント」でまずはユーザーの興味を引き、その後、左上から右下へとZ型での視線誘導をさせ、最後に「詳細ボタン」を配置する事で自然な流れでLPサイトへと飛べるよう設計しました。

2. 夏を連想させる配色

夏限定のキャンペーン企画なので、夏をイメージさせるスカイブルーをベースカラーに、イエローをアクセントカラーに使用。メインカラーには白を使う事で、透明感や爽やかさを演出しました。

3.用途に合わせたフォント選び

基本は「FOT-筑紫A丸ゴシック」を使用。ゴシック体で視認性を高く保ちながらも、丸みのあるフォントで女性らしい温かさを表現しました。数字表記は「Signo」で、少し手書き感のある風合いで、固すぎない抜け感を表現しました。アルファベットは「Comodo Free」を使用し、丸みのあるフォントで女性らしさを表現、かつLPに飛ぶための行動を起こしてもらうための視認性を高く保つことを意識しました。

４.立体感を意識したあしらい

固い・真面目過ぎる印象にならないように、画像を斜め楕円にトリミングすることで画面に動きを生み出し、アクティブ・気取らなさを表現しました。また、あしらい使用した水玉は手前に配置したものほど大きくすることで、遠近感を表現し、バナー全体の立体感を演出しました。その際、「詳細ボタン」の近くに水玉を配置する事で「詳細ボタン」へ自然と目が流れる様に工夫をしました。

５.見ているユーザー目線に立った写真選び

手前の女性の顔が映っていないものにすることで、奥の女性が自分に話しかけてきている様な、親近感を感じてもらえる写真を選びました。また、写真全体を加工し、ふんわりと優しい印象に仕上げました。

■制作を通して学んだこと

１.目的を達成するためのユーザーストーリーを考え、情報設計をすることの大切さを学びました。デザインに入る前に「誰に向けてのデザインなのか」を明確にすることで、その後のデザインも軸がぶれない一貫したものが作成できると感じました。当初は情報設計が甘く、何を伝えたいのかが曖昧なバナーになっていました。課題を通して６回のフィードバックをもらい、修正をくわえる中で情報を整理する癖がつきました。

2.常に見る側の気持ちに立ったデザインをする大切さを学びました。作成したバナーをスマホから確認する等、見る側の気持ちに立つことで、十分なジャンプ率をつけたつもりでも、スマートフォンの画面から確認すると小さく見えづらいなど、課題が多く見えてきました。制作をしていると、つい自分主体になりがちですが、「情報を伝えたいユーザー」の視点に常に立ち、デザインをしていきたいと思います。