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

巷で話題になっているバナーお題、気になっていたので挑戦してみました。

まずは、今回制作したバナーです。

#バナーお題とは？

Webデザイナーのこばやすさん（@kobayas_s）の発案されたTwitter企画で、お題に沿ってバナーを自分で制作する、というものです。

▼#バナーお題についての詳細はこちら

バナー模写やトレースはしてみたものの、自分で一から作ったことはない、なんて方向きの企画ですね。
私もバナー模写はしてみたものの、なかなかアウトプットができていなかったので、ついに挑戦してみました！

今回挑戦したのは第一弾「冬限定一口チョコ」です。

デザインを始める前にやったこと

以前、バナー模写を30個やってみたときの失敗の一つとして、「“模写する”ことに慣れてしまい、自分で考えなくなってしまった」ということがあったので、反省を活かしてめちゃくちゃ考えました。

第一弾のお題はこちら。

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

これだけではふわっとしていてイメージが固まらなかったので、お題を一つずつ紐解いて自分なりにコンセプトを詰めました。

バナー設置場所：自社ECサイトのサイドメニュー

ECサイトのサイドメニューってどんな風だったかな？と思い、大手モール型ECサイトを調査。

ほとんどのサイトTOPに様々なセールのバナーがあるのですが、どれもゴシック体を使用したインパクト重視のもので、各バナーの個性はなし。
サイドメニューには特集バナーが多く、それはそれぞれの特集をイメージできるような雰囲気重視のものが多かったです。
ざっと見ていた中で、auPAYマーケットのサイドメニューがイメージに近かったので、ここに載せるつもりに設定。

引用：auPAYマーケット

以前、バナー模写でサイト内設置のバナーを選んだ時に、ショップ名や誘導ボタンはないんだな、と気づきがあったので、今回もそれらは載せないことに決めました。

参考にした、バナー模写当時の記録です。

期間：11/◯〜12/◯まで、ターゲット：20〜40代の働く男女

“20〜40代の働く男女”と“冬”。
一番に思い浮かんだイメージが、ボーナスでした。

なので、ターゲットとコンセプトをもう少し深堀りして、1年間お仕事を頑張ったご褒美に、ボーナスでちょっと贅沢しちゃおう！というものに設定。
ボーナスの支給日は大抵の会社では12月上旬とのことなので、セール期間の終わりはクリスマス、終了日から遡って1ヶ月をセール期間と設定しました。

あと忘れてはいけないのが、ECサイトは24時間お買い物できるところなので、店舗と違って閉店がありません。
なので、開始時間と終了時間も入れるようにしました。

イメージカラー：白、水色

食品＋水色（寒色系）って難しいなと思いました。
唯一、食品界の中でない色だと思っています。
なので、アクセントカラーにするのではなく冬空イメージのちょっとくすんだ背景色にすることで取り入れることにしました。
結果的にあまりくすんだ色になりませんでしたが…。

なお、参考にしたのは『配色デザイン インスピレーションブック』です。

こちらで高級感のあるイメージにはくすんだ色が多く使われていたので、くすみ色をチョイスしました。

あとはアクセントカラーにはゴールド。
高級感＝ゴールドはまだ拭えません。

写真選び

高級チョコって、一つ一つが綺麗にコーティングされていて、キッチリとしているイメージ。
そして一箱に数粒しか入っていないイメージ…。（個人の感想です）
なので、上記のイメージを踏まえて綺麗にコーティングされた数粒のチョコレートの写真を探しました。

写真を探していてびっくりしたのが、「チョコ」と「チョコレート」では検索で出てくる結果が全然違うんですね。
写真探しのスキルももっと上げねば、と思った次第です。

当初、ぱくたそさんでいい感じの写真を見つけたのですが、背景が赤でチョコレートにも赤が映り込んでしまっていて。
その赤を消し去る術がまだなかったので、こちらの写真の使用は断念しました。

クリスマスとかバレンタインとか、赤を使用できる状況であれば活用できそうなので、この写真を見つけられただけでもいい収穫です。

結果的には写真ACさんで見つけた写真を使用しましたが、思い描く写真を探すのって、めちゃくちゃ難しいですね。

コンセプトまとめ

上記の経緯から、お題＋下記のコンセプトを追加しました。

そして、出来上がったものがこちらです。

使用ツール：Photoshop illustrator
使用フォント：貂明朝 Regular（タイトル）、りょう Display PlusN、IvyPresto Text

こだわりポイント

素人なりにも、ちょっとこだわったポイントがあるのでご紹介します。

• 装飾には直線的なものを避けた
• 曜日は英語ではなく日本語
• 白は真っ白じゃない
• 視認性確認

装飾には直線的なものを避けた

チョコレートがキッチリした形なので、装飾にはできるだけ直線的なものを避けるようにしました。
裏の裏コンセプトに、“1年間お勤めお疲れさまでした。ちょっとリラックスしてくださいな”という気持ちを込めているので、高級感とともにちょっと安らげる雰囲気も出したかったのです。

余談ですが、写真素材の配置の加減で実はチョコレートの右端が一部欠けてしまっていました。
それを隠すために、キャッチコピーの後ろに白を入れて、冬に吐く白い息をちょっとイメージしています。

曜日は英語ではなく日本語

カジュアルやポップなイメージであれば、曜日は英語でもいいのかなと思ったのですが、今回は“高級感”を出すため日本語にしました。
個人的に、英語で書いてあると一瞬理解が追い付かなくなる時があります。

なので、スッと頭に入ってくるようにしました。

白は真っ白じゃない

全体的にやわらかい雰囲気にしたかったので、文字色や装飾の白は#FFFFFFではなくちょっとグレーがかった#EEEEEEにしました。

Webサイトやアプリでもどんどんダークモードが増えていき、真っ白って目に良くないんだなという、ちょっとしたお気持ちです。

視認性確認

全体的に淡い色が多かったので、コントラストが取れているか視認性も確認しました。
色がなくても明暗がはっきりしているか。

こちらの確認は、chot.designさんでやっていたことを、なるほど！と思って実践するようにしています。

まとめ

初めてのバナーお題、とても楽しく取り組めました！

一つのバナーを制作するにも、ものすごく色んな事を考えないといけないし、模写するだけではわからなかった配置や配色、コントラストの難しさなど、実際に一から自分で制作することで考えるべきポイントがわかってきたような気がします。

Twitterで「#バナーお題」で検索すると、色んな方の制作したバナーが見られます。

私もすでに実践された方の作品を見ながら、この写真はどこのだろう？どうしてこの色にしたんだろう？どういう考えでこのデザインになったんだろう？等々気になっていたので、このバナーを制作するまでの思考をできるだけ残そうと思い、まとめました。

とても勉強になるお題だったので、次の第二弾、第三弾…も実践できればと思います。