【実践課題】英会話教室のSNSバナー制作（Instagram /Twitter）｜情報設計&デザイン

＊目次＊

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

１．制作物

２．制作概要

３．情報設計

４．工夫したところ

５．制作を通して学んだこと

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

１．制作物

▽Instagramバナー（1040px × 1040px）

 ▽Twitterバナー（1280px × 720px）

２．制作概要

▽制 作 範 囲

・情報設計（ペルソナとユーザーストーリー設計、優先順位づけ）

・ワイヤーフレーム（レイアウト）設計

・写真選定

・ビジュアルデザイン

▽制 作 時 間

約42時間
（要素の配置：1時間▷情報設計：11時間▷ワイヤーフレーム設計：8時間▷ビジュアルデザイン：20時間▷ブラッシュアップ：2時間）

▽制 作 期 間

14日（平日約3時間、土日約6時間）

▽使用ツール

Photoshop /Illustrator

３．情報設計

クライアント提示の要件からペルソナ/ユーザーストーリー/ムードボードを検討した。

・ペルソナ/ユーザーストーリー/ムードボードを踏まえて、以下の配色やあしらいを決定した。
配色はポップなイメージを表現するために、主な配色の他、あしらいの配色を増やしている。

・イラストのあしらいは、Illustratorで作成した。

４．工夫したところ

▽目的を踏まえたバナー作成

・目的は、LPへの誘導。Twitterは画像タップ、Instagramは下のボタンクリックが期待されるアクション。バナーで訴求しなくても、ユーザーは次のアクションがわかるため、「ここをクリック」の要素は入れなかった。

・パッとみて「かわいい！」と思っていただき、思わずタップしてしまうバナーを目指した。

▽情報の優先順位

・ユーザーストーリーを踏まえて、①5,000円プレゼント＞②夏のお友達紹介キャンペーン＞③英会話スクール＞④期間の優先順位とした。Z型で要素を配置した。

・①の5,000が一番目立つようにフォントの大きさやあしらいを検討した。また、斜めにして、動きをつけることでより目に留まりやすくした。お得な情報であることが伝わるように、Illustratorで作成したプレゼントアイコンをつけた。

・②のお友達紹介キャンペーンはリボンのあしらいをつけた。夏の文字は夏らしい配色や強調をつけた。

・③の英会話スクールは、Illustratorで作成した初心者マークを使用して初心者向けであることがパッと見てわかるようにした。また、英会話スクールであることを伝えるために文字ツールで作成したアルファベットをつけた。ブラシツールで、雲のイメージや（スクールらしく）ペンを使用したようなあしらいを背景に置いた。

・④の期間は、重要な数字（8/20〜9/30）の文字を大きくして、当期間限定であることが伝わりやすくした。

▽背景

・夏らしい雲や波などのイメージでシェイプを作成した。

・様々なポップな作品を参考に図形を使ったカラフルでポップな背景イラストを検討した。

・図形はIllustratorで作成した。丸みのあるイメージを出したくて、三角形や四角形の角を丸くした。

▽写真

・趣味で英会話＝海外旅行というイメージを考えて、気軽に英語で会話するイメージがある、ハワイの画像を背景に置いた。ハワイの画像を置くことで夏らしさも出せた。ハワイの写真選びに苦労し、よい配置の写真がなくて、２つの写真を組み合わせて、つなぎ目をPhotoshopの修復ブラシツールで目立たなくした。

・”あなたとお友達”を表現するための人物の写真については、様々なバナーを見た結果、写真の人物は正面を向いている方が目に付きやすいと考え、正面を向いていて、かつ、ハッピーなキャンペーンであることが伝わるような写真を使用した。Photoshopで人物の切り抜きを実施した。

▽配色

・夏らしさや女性らしさがあるバナーから色を抽出して使用してみた。最初は柔らかい、彩度の低い色を使ってみたが、文字が見にくく、印象が弱かった。彩度があり、色がはっきりしている方が文字が伝わりやすく、目に留まりやすかったため、彩度のある程度ある色を使用した。

▽フォント

⚪︎日本語は、視認性のよいゴシック体を使用した。

・「あなたにも！お友達にも！」「初心者」「OK」「夏」「期間限定」：FOT-筑紫A丸ゴシック Std

・「円」「！（OKの横）」「一緒にお得！」：DNP 秀英丸ゴシック Std

⚪︎数値や英語は、視認性のよいサンセリフ体を使用した。

・「5,000」：DIN 2014

・「2020」「8/20」「9/30」：DIN Alternate

・「Let'sEnjoyEnglish!!」：Helvetica

⚪︎ポップな印象のフォントをところどころ使用した。

・「プレゼント」：モッチーポップ

・「英会話スクール」「のお友達紹介キャンペーン」：モッチーポップP

・「ABC」のアルファベットのあしらいの文字：PeachyKeenJF

５．制作を通して学んだこと

・ペルソナ設計やイメージボード作成、ユーザーストーリーを設定し、当情報に沿ってバナーを作成することで、ブレが少なくなり、想定したイメージに近い作品を作ることができた。情報設計の大切さを学ぶことができた。

・イメージに合った他バナーの調査や情報収集を実施し、配色、フォント、あしらい、構造などデザインの引き出しを広げることができた。

・欲しいアイコンやデザインを思った通りに実現するために、PhotoshopやIllustratorの機能をいろいろ調査して、一つ一つ学びながら実現していくことができた。ツールの操作を覚えるのは楽しいので、引き続き、学びながら作品を作りたい。