背景・コンセプト
| 概要 | 人気メーカーから新発売のシャンプー。思わず手に取りたくなるかわいいデザインがポイント。 |
| 商品名 | WCB Shampoo |
| ターゲット | 一人暮らしであまりお金をかけられないが、可愛いものが大好き。成分よりも見た目や香り、価格を重視する。流行っているものが好き。 |
| キャッチコピー | Happy Hair, Happy You! |
| サブテキスト | かわいさ、手軽さ、楽しさ。全部このシャンプーで。 |
| 印象 | かわいい、安い、楽しい |
出典: https://www.webcreatorbox.com/blog/banner-design-10#hbe243b35c1
目的・課題
概要
ターゲットや商品設定を踏まえ、10〜20代の若い女性を想定しました。本商品は成分よりも見た目の雰囲気に重点を置いているため、バナー全体でも商品の気軽で可愛らしい雰囲気が伝わるように意識して制作しました。
デザインの工夫
| 色味 | 商品の雰囲気とターゲット層が好みそうなペール・ライト・ブライトトーンあたりのピンクや黄色などを基調に選定 彩度の濃淡の調整で視認性や配色のバランスを確保 背景は商品画像よりも彩度が低めにし、サブテキストに高彩度のピンク色を用いて目を引きやすくした |
| フォント | サブテキストは可愛らしい雰囲気を表現するため、丸文字フォントを用いた 左下の商品ロゴと背景のキャッチコピーには、商品画像のロゴと同じ系統のフォントを用いて統一感を出した |
| 画像配置 | 商品画像の色味が淡いためボトルのピンクの彩度を少し上げ、ボトルとポンプの光を強調した また、視線誘導も考えバナーの右半分に商品画像を大きくし斜めに配置 外側光彩をつけて背景と馴染みすぎないようにした |
| レイアウト | 背景に浴室の窓際を彷彿とさせる窓や壁などを設置し、日常のワンシーンを想起させるデザインに バナー全体に透明な泡を散らし、商品画像の光と影を目立たせることで「しずる感」を演出した バナー全体の右半分に商品画像、左側にサブテキストとロゴを配置した 背景の性質上サブテキストの文字サイズを大きくするのは難しいため、差し色として彩度の高いピンク色にすることで目を引く工夫をした |
使用ツール
Photoshopを用いて制作いたしました。
制作のプロセス
1. 初期の案
- 写真を主役に: 商品の色味が淡いため、バナーの中心に大きく配置して存在感を出す。
- ターゲット層に合わせた配色: 「可愛くて安い、手に取りやすい」特徴からターゲット層は若年層と推定し、パステルピンクを基調に設定
- 雰囲気重視の方向性: 背景を風呂場の窓際風に設定することで商品の性質と雰囲気を視覚的に表現した
2. 試行錯誤
視認性やバナー全体のバランスを考慮しながら、より効果的なレイアウトを模索。
- 視認性の向上: 商品画像が淡色のため、彩度の濃淡や文字サイズ・太さでコントラストをつけた
- 画像と背景の調整: 縦長のボトル画像の配置に試行錯誤し、バナー中央に窓とボトルを配置して安定感を出した
3. デザイナーからのフィードバック
より印象に残るバナーにするための改善点を指摘。
- 英字キャッチコピーの優先度を下げる: 単独では商品の内容が伝わりにくいため、サブテキストをより目立たせるべき
- 「しずる感」の表現: 水滴やニュアンスのある影などを追加して、より魅力的に見せる工夫が必要
- 配色のメリハリ: 同系統のピンクだけでは締まりがないため、差し色を加えると良い
4. 添削前後の比較
フィードバックを活かし、デザインをブラッシュアップ。
左: 添削前 右: 添削後
- レイアウトの調整: 窓と商品画像を右側に移動し、商品画像を斜めに配置
- 「しずる感」の追加: 泡の透明度を上げ、ドロップシャドウを追加。商品画像の光の部分も強調して透明感を演出
- 背景のバージョンアップ: 風呂場の壁に薄い黄色のドット模様をつけて単調さを回避
- サブテキストを強調: 高彩度のピンクを文字色に設定し、スペースが限られた中でも視認性とインパクトを向上
- 商品画像の色味を調整: ボトルのピンク色の彩度とカラーバランスを調整し商品が背景に埋もれないように調整
外部リンク
こちらのサイトのお題を参考に制作いたしました。
商品画像もこちらのサイトのものを使用させていただきました。
https://www.webcreatorbox.com/blog/banner-design-10#hbe243b35c1