バナー課題1をやってみて
WEBデザイナーのrirumaruです。
こばやすさん（@kobayas_s）のバナーお題 第一弾をやってみました。
課題内容
バナー設置場所：自社ECサイトのサイドメニュー
商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W300×H280px
---------------------------------
キャッチコピー：ちょっと一息。贅沢をお裾分け
割引期間：11月1日〜12月31日まで
割引価格：10～20％割引
課題内容から読み取れること
チョコレートを販売しているECサイト内に設置されることを想像しました。
商品概要から高級なチョコレートを販売しており、季節に合わせて商品展開をしている。若めの社会人をターゲット。
上記から情報を整理していきます。
雰囲気：
高級感、冬らしいあしらいをする。ECサイトなので、商品の魅力を引き出せるようなデザイン。
フォント：
高級感を出したいので、明朝体を選択。
カラー：
冬を連想させる寒色、社会人が好む大人しめの色、高級感あふれる色
何を伝えたいのか（一番大切なこと）：
高級なチョコが安く買えることを伝えることで購入につながると思ったので、割引価格を一番伝えるようにしました。
・優先順位
1.割引価格
2.商品画像
3キャッチコピー
4.日付
ECサイトなので、商品画像は１の次に優先しました。
参考探し
参考を探す時に、考えていたこと。
ECサイトに置くバナーってどんなもの？
冬っぽさや高級感が溢れるデザインとは？
商品系のバナーレイアウトの共通点は？
高級感ある色とは？
気になったデザインはピンタレストにまとめていきます。
ラフデザイン
使用ツールはイラレです。
素材探し
まずは使用する素材を揃えます。
フリー素材のO-DAN (オーダン）、イラストACを使用しました。
レイアウト
ざっくりとレイアウトを作っていきます。
今回は2案。
割引率を意識した配置や商品を目立たせるにはどうしたらいいのか考えます。配色についてもざっくりと決めていきます。
文字組み
レイアウトと同じタイミングで文字組みを組んでいきます。割引率を強調したり、優先度に合わせてフォントサイズを決めていきます。必要に応じて文章にアレンジを加えてみたり、減らします。日付や割引の部分は文字組みのバリエーションが多くて工夫できる場所です。ここは結構悩みました。
全体の調整
・細かいあしらいを調整
今回は冬っぽさを演出するためにフレアやシャドウを追加しました。
透明度とサイズ感を調整。また、全体背景に写真を使っているため、まとまりを出すために線フレームを追加。
・コントラストのチェック
白文字が見えやすいようにシャドウを加えたり、背景色の明度を下げてます。
・レイアウト調整
全体を揃えたり、文字感を調整してます。
写真のトリミングも商品が右に配置するようにしてます。
完成
振り返り
一息の部分などにとろけているようなタイポグラフィーにしようとしたのですが、技術が足りず断念。息の一部を伸ばしたりしたら面白かったかもしれません。シャドウももう少し足して、冬っぽさを演出できたなと思いました。シンプルにこだわりすぎた点も見られます。
修正点や変更点あれば、是非コメントしていただきたいです。
最後まで読んでいただきありがとうございます。