#バナーお題　第一弾　

こんにちは！
今回は# バナーお題 に挑戦してみました。

▶︎バナーお題とは

デザイナーのこばやすさんが
バナーお題を出してくれているので
それに沿ってバナーを作成しました！
詳しくは以下の投稿です。

今回のお題は「普段高い一口チョコが割引価格で購入できる」ことを
アピールするためのバナー制作です。

バナー設置場所：自社ECサイトのサイドメニュー
商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W300×H280px
---------------------------------
キャッチコピー：ちょっと一息。贅沢をお裾分け
割引期間：11月1日〜12月31日まで
割引価格：10～20％割引

私はバナー作成をしたことないのですが
見様見真似で作成してみました！
その過程を記録に残しておきたいと思います。
まだまだ詰めが甘い部分がありますが
少しずつ改善していくためにも残しておきます！

01　参考となるバナー検索

普段何気ないところでバナーを見ているものですが
意識してみているわけではないので
どう工夫されているか、をよく見るためにバナー検索。
今回のお題で検索したり、企業のチョコレートバナーを見てみました。

02　手書きでラフ画作成

文字の配置、写真の置き方、使用する色のイメージを
手書きでメモしていきます。
白黒なのでイメージしづらいかもしれませんが
何にも考えずにパソコン触ってしまうと
完成形がないままダラダラしてしまうので
何となくでも手書きするようにします。

03　ラフ画を参考に文字配置

最初はカーニングとか文字サイズ気にせず
ラフ画通りに配置していきました。
何となく見づらい、文字小さい、色はこれじゃないかも、
など思ったところは修正していきます。

04　画像貼り付け、調整

フリー素材で良い画像ないか探して
良さげなものをピックアップ。
「これ良さそう！」と写真切り抜きして貼り付けても、
「やっぱりイマイチ…」と探し直ししました。
バナーだと写真の良し悪しが
ユーザーの興味を引くかにダイレクトに
影響していると思うので
写真選定上手くなりたいなと思いました。

05　微調整

文字色や背景のあしらいを追加していきます。
目線の誘導のためにモチーフを
文字と文字の隙間に置いて
視線を無理なく自然に繋げられるようにしてみました。

何とか完成！

そして、完成形がこちらです。

ポイントとしては
・明朝体、文字間広めにすることで高級感を表現
・チョコレート画像の色を文字色やラインの色に使用して
　　色からチョコレートを連想できるように
　　（文字色黒だと強すぎて浮いてしまう印象がありました）
・「冬限定」「水色、白」ということなので
　　雪をイメージした色だと想定。雪のモチーフや結晶を配置して表現
・「普段高級チョコがお得に買えること」が一番の情報だと思うので、
　　目に行くように1番上、文字サイズ大きめで配置し
　　みてくれたユーザーが「何がお得なの？」と思うので
　　チョコレートの情報を下に入れます。

まとめ

今回１つ作ってみた感想としては
バナー１つでも「思ったより時間がかかったこと」です。
何ページもの雑誌とかでもないですが
与えられた情報を見やすく、興味を引くように
と考えると結構配置や文字サイズに時間がかかってしまいました。
日頃からデザインされたものを見て
頭の中でこうするとこう見える！という
ストックがあるともう少し効率よく出来る、と思いました。

後は皆様のバナーを見ていて思ったことは
依頼主が見せたい部分を自分なりに考えて見せている、という部分です。
文字通りに入れるだけでなく、少し表現を変えてみたり
入れる情報を取捨選択したり、
何を1番に見せるべきか？を考えて配置していて
すごく見習いたい部分でした。
私は、そのまま言われたことを配置していけば良いだろう、と
思っていたので、与えられた情報から色々推測して
それを元に形にしてそれを言葉で表現していく、というところは
私にないもので、今後そうなれるようにしていきたい部分です。

長くなってしまいましたが、
今回の反省点を踏まえて次回もバナー作成したいと思います！

最後までご覧になってくださった方
ありがとうございました！