こんにちは、こら（@korasampo）です。
こばやす(@kobayas_s ) さんのバナーお題 第4弾に取り組んでみたので、
まとめを記録します。
今までのバナーお題の記録はこちらから。
バナーお題とは？
こばやす(@kobayas_s ) さんがTwitterで始めた「お題に沿ってバナーを制作する」という企画です。
現在はそれぞれのお題がnoteにまとめられています。
こばやすさんのnoteーtwitter企画#バナーお題 過去問
お題に取り組む際のルールは
- デザイン初学者でも、現役でも参加可能
- デザインしたバナー画像をtwitterに添付、#バナーお題 をつけて投稿する
- 使用する素材の著作権に注意する
- 自身のポートフォリオ やブログへの投稿OK
参加することで得られることは
- #バナーお題 と投稿されたデザインを見て勉強することができる
- 「アドバイスください」とコメントを入れておくことで、現役の方や同じ勉強中の方からアドバイスがもらえる
- 「いいね」をもらえることで、自分のデザインに自身がもてる
- 勉強中の仲間を見つけることができる
ルールの詳細はこちらにまとめられています↓
こばやすさんのnoteーtwitter企画開始 #バナーお題
第四弾のお題内容
#バナーお題 第四弾お題内容
クリスマス商戦を狙いkoba payアプリ利用促進！
【概要】
・今話題の決済アプリkoba payを売り出すバナー作成
・アプリをダウンロードするともれなく200円プレゼント！
更に加盟店利用額に応じて最大10%還元
・QRコードを付けてアプリストアへ移動
・キャッチは考えてみてね！
・バナーサイズ:H200×W350px（twitterに載せる場合ぼやけたりするので等倍でも可）
作成したバナー
今回作成したバナーのポイント
コンセプト
一般の人にスマホ決済のアプリをダウンロードしてもらうための
キャンペーンバナー
ということで、
- キャンペーン感
- 多くの人に目を向けてもらえるような見た目
- スマホ決済のアプリということ
- 親近感（まだスマホ決済を使っていない人にはハードルが高いかもしれないので）
を意識してバナーを作成しました。
画像の選定
スマホ決済に関するバナーなので、スマホを大きく配置することに決めました。
また、スマホ本体だけよりも人の手が入っている方がより親近感を感じるのかな、と思い、
人がスマホを持っている手が入っている素材にしました。
配色
他バナーを見ていて、キャンペーン系に圧倒的に「赤」系のバナーが多かったことと、
クリスマス時期の商戦ということで、赤をベースに選びました。
赤の色のイメージは、活発なイメージや気分を高揚させるイメージがあるので、
キャンペーン系の配色にはぴったりだと思います。
また、「ダウンロードはこちらから」部分は小さくも強調したい部分なので、
赤色の反対色の「緑色」を選んでいます。
フォント
「Koba pay」の部分はGill Sansを使用しました。
ロゴとなりうる部分なので、一番気をつけて選びました。
新しくて便利でスマートなサービスだけど親近感がある、
というイメージを出したかったので、
サンセリフの中でもやや手書きのイメージをもった温かみのあるGill Sansにしています。
このフォントはTommy Hillfigerのロゴの元にもなっているフォントだそうです。
その他のフォントは、できるだけベーシックで読みやすいフォントをえらびました。
キャッチフレーズ
「あなたも今すぐ得しよう」
キャンペーンを利用した人はどうなるのか、と考えた結果、
シンプルに「お得」だな、と感じました。
「お得」という言葉を嫌いな人はいないと思うので、そのままをわかりやすく表現することにしました。
また、「あなたも」をつけることで、バナーを見た人が一瞬で「自分ごと」として受け取ってもらえるように意識しました。
対象者が「男性」「○歳以下」など限られておらず、全員が対象となるキャンペーンなのですべての人に自分ごとにして欲しかったので、この「あなたも」という表現をつけることにしました。
作成手順
他のバナーを見る
手を動かす前にどんなバナーにするかを考えます。
「＃バナーお題」とTwitterで検索をして以前挑戦している方のバナーをチェックしたり、ピンタレストで類似のバナーを検索しました。
メモをとる
他のバナーを見ながら、気がついた共通点や、今回のバナーで使用できそうなあしらい等をなんでもいいので、メモしていきます。
今回はキャッチコピーの指定もないので、キャッチコピーになりそうな言語もメモしながら決めていきました。
ラフを描く
ある程度メモができたら、
手書きでバナーのラフを描きます。
素材を探す
イメージにあう素材を探します。
今回は、
スマホの画面の中にQRコードを入れ、見た人の注目を集中させたかったので、
できるだけスマホの画面が平らにしっかりと見えている素材を探しました。
また、スマホ本体だけよりも人の手が入っている方がより親近感を感じるのかな、と思い、人がスマホを持っているような素材にしました。
デザインソフトで作成
PCでデザインソフトを開き（今回もIllustrator）指定サイズの新規ファイルを開き、
ラフに合わせて作成していきます。
WEBバナーなので、
カラーモードはRGB
ラスタライズ効果は、スクリーン（72ppi)
を選択します。
完成
完成したら、校正をし、Twitterに投稿します。
こばやす( @kobayas_s ) さんのバナーお題第4弾目に挑戦しました。
ちょっと平たくなってしまったかなぁ…。
配色も難しいですね💦
何かアドバイスがあれば頂けるととてもうれしいです！ pic.twitter.com/SfokEjMrrF— こら🌱未経験からデザイン独学中 (@korasampo) August 28, 2020
まとめ
キャンペーン内容をシンプルにわかりやすく表示しようとしたところ、逆に目に入ってこないデザインになってしまったなぁ、と反省しています。
もし、アドバイスをしてくださる方がいればいつでもお待ちしております！
今回はまだまだブラッシュアップの必要がありそうなデザインなので、もう少し時間をとってブラッシュアップさせていきたいと思います。
