背景・コンセプト
| 概要 | 昔ながらの和菓子が人気の老舗から、若者層の呼び込みのために新たに開発されたアイス抹茶ラテ。本格的な抹茶を気軽に楽しんでもらいたい。 |
| 店名 | 茶寮上符 |
| ターゲット | カフェめぐりが好きで、住んでいる街や通勤路にあるカフェをチェックしている。カフェでは読書などでゆっくり過ごしたい。和菓子も好き。 |
| キャッチコピー | 老舗茶寮が贈る 抹茶ラテ 600 円 |
| 印象 | 和風、落ち着いた、おしゃれ |
出典: https://www.webcreatorbox.com/blog/banner-design-10#hbe243b35c1
目的・課題
概要
お題の内容を踏まえて、全体的に「和モダン」のテイストを重視し「若年層の客の呼び込み」のためのとっつきやすさと和風の落ち着いた雰囲気を両立させることを意識して制作いたしました。
背景の中で商品写真周辺は明るさをだし、商品自体の色味もくすみを取りはっきりさせて過度な「敷居の高さ」を抑えることでバナー内容とターゲット層の年齢やバナーの目的との整合性を取りました。
デザインの工夫
| 色味 | バナー中心部である商品の周辺のみ明るく調整し、「敷居の高すぎる」印象を抑えつつ商品写真に焦点が当たりやすいよう工夫。 商品写真を配置した中心部以外は明度を落としコントラストを強調。さらに本文の文字色に白を用いることで商品を際立たせつつ、本文の視認性を向上。 商品写真の色味の緑色と白を明度や彩度、カラーバランスなどをそれぞれ調整し、「おいしそう」な印象を意識。 また、商品名の「抹茶」のテキストのみに明るめの黄緑を選定することでバナー全体にアクセントを加え「抹茶らしさ」を演出した。 |
| フォント | 明朝体系統の中でも繊細なかな文字のフォントを使用し、和風でおしゃれな雰囲気を演出。 価格の数字部分にはセリフ体系統のフォントを用いて本文のフォントやバナー全体との調和を図った。 |
| 画像配置 | 商品写真はお題サイト指定のものを使用。背景はバナーの「和モダン」な方向性に合わせ、おしゃれで商品が映えるものを選定。バナー中心部を明るくし、自然と商品写真に視線が集まるよう調整。これにより、商品への「とっつきやすさ」を演出し、若年層の興味を引くバナーの目的とも整合性を取る。 |
| レイアウト | 縦書きの視線の流れを活かし、バナー右上に商品名、中央に商品写真、左上に店舗のロゴを配置。商品名を縦書きにすることで「和風」の雰囲気を強調し、バナー全体に統一感を与えた。 |
使用ツール
Photoshopを用いて制作いたしました。
制作のプロセス
1. 初期の案
- 全体の方向性: ターゲット層は若年層だが、過剰にポップで親しみやすい印象を押し出す必要はないと判断。「和モダン」をテーマに、落ち着いた印象とおしゃれさを両立。
- 写真選定: お題で指定された商品写真を元に、バナーの方向性とマッチしつつ商品が引き立つ背景を選定。
- 文字・フォント: 全体的に暗めの背景であるのを踏まえ、白抜き文字を用いて視認性を確保。明朝体系統のフォントを使用し、和風で落ち着いた雰囲気を演出。
2. 試行錯誤
- 背景写真の調整: 背景の白い花瓶を別レイヤーで暗く調整し、文字の視認性を損ねないようにしつつ花瓶の存在感を抑制。全体の背景が暗く敷居の高い印象なので、商品の周辺を明るく調整しそれを解消しつつモダンでおしゃれな印象を演出。
- ロゴの追加: お題でのロゴ指定は無いものの、バナーにリアルさを加えるためロゴを自作し追加。バナー左上と商品のカップ中央部分に配置し商品のアイデンティティを印象付けた。
- 商品写真の調整: 抹茶の緑色と牛乳の白をそれぞれ調整し、「美味しそう」に見える質感と色味を意識。カップのロゴ部分にもドロップシャドウを加え立体感を演出。
- 抹茶の緑色の追加: 商品写真のみでは抹茶ラテの特徴が伝わりにくいので、抹茶の粉を商品画像の脇に配置しバナー全体に緑色のアクセントを加えた。抹茶の粉の形や色味を微調整し、背景や商品との調和も意識。
3. 自己添削
※本件は当初デザイナーのフィードバックを受ける予定でしたが、期限の関係で自己添削を行いました。過去のフィードバックや自身の経験をもとに、配色やレイアウト、視認性の改善に注力いたしました。
- 「抹茶の緑」が足りない: 緑色が商品画像のみで「抹茶の商品」であるのが伝わりづらい印象。タイトルの「抹茶」部分を明るい黄緑に変更し、商品のすぐ隣にも抹茶の粉を置き商品の雰囲気を演出。
- タイトルのレイアウト: どことなく単調な印象で、背後に白の花瓶があることで視認性も落ちている。
- 影が不自然: 特に右下の抹茶の粉の山の影が無く、背景から浮いている印象。元の素材の写真を参考に影を足すべき。
4. 添削前後の比較
左: 添削前 右: 添削後
- タイトル調整: 「抹茶」の文字を明るめの黄緑にすることで単調さを解消しつつ、バナー全体に「抹茶の緑」を足し雰囲気を演出。また、背景の花瓶を左に少し移動させ、タイトルと被らないようにすることで視認性を向上させた。
- フォント変更: 明朝体系統の中でもかな文字が繊細な印象のものに変更し落ち着いた雰囲気はそのままにおしゃれな印象を演出。
- 背景の陰影の調整: 抹茶の粉の山や商品の背後に影色を足し、背景と調和するよう意識。
- 色味の調整: 全体的に緑色がくすんでいる印象だったので少し明度やカラーバランスなどを調整し、抹茶部分が美味しそうに見えるよう工夫。
外部リンク
以下のサイトのお題を参考に制作いたしました。
https://www.webcreatorbox.com/blog/banner-design-10#hbe243b35c1
画像はこちらのサイトのものを使用しております。