バナーお題 第1弾 に挑戦してみました

こんにちは、こら（@korasampo）です。

先月、バナートレースを一旦区切り、
今月からは自分で何かを作ってみる、ということを目標としました。

そこで、こばやす(@kobayas_s ) さんのバナーお題
に挑戦してみることにしました。

まず、第1弾に取り組んでみたまとめを記録します。

バナーお題とは？

こばやす(@kobayas_s ) さんがTwitterで始めた「お題に沿ってバナーを制作する」という企画です。
現在はそれぞれのお題がnoteにまとめられています。

こばやすさんのnoteーtwitter企画#バナーお題 過去問

お題に取り組む際のルールは

参加することで得られることは

ルールの詳細はこちらにまとめられています↓
こばやすさんのnoteーtwitter企画開始 #バナーお題

第一弾のお題内容

• バナー設置場所：自社ECサイトのサイドメニュー
• コンセプト：冬限定一口チョコ。普段高いが今だけ割引価格
• キャッチコピー：ちょっと一息。贅沢をお裾分け
• 期間：11/◯〜12/◯まで
• ターゲット：20〜40代の働く男女
• イメージカラー：白、水色
• バナーサイズ：W300×H280px

作成したバナー

作成手順

他のバナーを見る

まず、手を動かす前にどんなバナーにするかを考えます。
お題から、「冬っぽい、高級感のある、チョコのバナー」というコンセプトに当てはまる
たくさんのチョコレートに関するバナーをみました。
（使用したサイト：ピンタレスト）

メモをとる

見ながら、気がついた共通点や、今回のバナーで使用できそうなあしらい等をなんでもいいので、メモしていきます。

ラフを描く

ある程度メモができたら、
手書きでバナーのラフを描きます。

素材を探す

イメージにあう素材を探します。
今回は高級感のある、一口チョコレートということだったので、
「大きく写真が使えそうな」「高級そうな」「チョコレートの」写真を探しました。

デザインソフトで作成

PCでデザインソフトを開き（今回はIllustrator）指定サイズの新規ファイルを開き、
ラフに合わせて作成していきます。

完成

完成したら、校正をし、Twitterに投稿します。

こばやす( @kobayas_s
) さんのバナーお題第1弾をやってみました。
何かアドバイスがあれば頂けるととてもうれしいです！#バナーお題 #webデザイン勉強中 pic.twitter.com/yNsIHPUD0c

— こら🌱未経験からデザイン独学中 (@korasampo) August 9, 2020

今回作成したバナーのポイント

背景色

高級感＋チョコレート　のイメージに合わせ、背景色は茶色（焦げ茶っぽい濃い色）にし、
奥行きを持たせる為、ややグラデーションをいれました。

フォント

高級感や大人の癒しのイメージから、明朝体の中でも、「うつくし明朝体」を使用しました。
さらにドロップシャドウで背景とのメリハリをつけました。
「贅沢をお裾分け」のキャッチコピー部分を読ませたかったので、フォントを大きめに配置し、
文字の上下の位置をずらして動きをだしました。

文字色

ターゲットが「20代〜40代の働く男女」ということなので、
元気さよりも、ちょっと贅沢をして、仕事の疲れを癒す、というイメージなので、
あまりごちゃつきを感じさせないよう、文字色はできるだけ無彩色でまとめました。

あしらい

「冬限定」ということでしたが、
期間も大きめに入っているので、あえて「冬」というワードを用いず、
雪の結晶をさりげなくいれることで冬のイメージを表現しました。

また、「贅沢を〜」の背景にいれたあしらいは「メルティキッス」という商品のバナーを参照しました。

ワードチョイス

「割引」や「お得な」という言葉よりも、「特別価格」というワードを用いることで、
より「特別感」を連想させるようにしました。

まとめ

今までは、トレースをしてひたすら「こういうものだ」ということを叩きつけているだけだったので、
実際に作成してみる作業はとても楽しく進められました。

どんなワードをチョイスするべきかな、色はどうしたらターゲットを引きつけられるのかな、等考える作業も大変
楽しかったです。

また、自分が１から作成した作品をTwitterで公表するときは、大変緊張しましたが、たくさんのいいねをいただき、
本当に励みになりましたし、自分の実力を知るいい機会になりました。

これからも、機会があれば、こういった課題等に参加していきたいと思います。