背景・コンセプト
| 記載内容 | 特集名: 今こそ見つめ直す、紅茶特集 コピー: あなたの一日を豊かにする紅茶体験 商品: 店主おすすめのティーバック6種類を3パックずつお届けします。 今だけ特別価格！1,430円。 オンラインストアでご購入いただいた方の中から抽選で5名に、当店オリジナルカップ&ソーサーをプレゼント |
| 商品内容 | 1. エメラルドモーニング： シリアルのような爽やかな香りと、明るくクリーンな味わいが特徴の朝の紅茶。 2. ミスティックムーンライト： ラベンダーやバニラのノートが漂う、夜の静かな時間にぴったりのリラックスできる紅茶。 3. グリーンヴィーナス： ジャスミンやハイビスカスがブレンドされ、華やかでフルーティーな香りと爽やかな味わいが楽しめる紅茶。 4. ゴールデンサンライズ： マンゴーとパッションフルーツの風味が広がり、明るい朝の太陽のようなエネルギーを与えてくれる紅茶。 5. ワイルドフォレスト： ブルーベリーやイチゴ、ブラックベリーなどの森の実をイメージしたフルーティーで自然な香りと味わいが特徴の紅茶。 6. シルクエンシャント： バラやラベンダーの花びらが華やかなアクセントを加え、なめらかで繊細な口当たりの紅茶。 |
| 要望 | CTAボタンやテキストを用いてユーザーを直接LPに誘導したい 紅茶の背景や茶葉、ティーカップを使った魅力的なイメージを取り入れる 紅茶初心者向けに「紅茶の奥深さ」を知ってもらうための企画 青色(#1A4472)をメインカラーに指定 |
出典: https://note.com/mifu_sensei/n/n27eddcb87dd8
目的・課題
概要
「初心者向けの紅茶セット」という商品内容を踏まえ、全体的には「紅茶らしい」落ち着いた雰囲気にしつつも明るめの写真とゴシック体フォントを選定することで「とっつきやすい」印象との両立を意識しました。
バナー全体としては、風景写真とタイトルのあしらいを目立たせ「らしさ」を視覚に訴える方針で制作いたしました。
デザインの工夫
| 色味 | お題で指定された深い青色を基調に、タイトルやCTAにはゴールドやその同系統のマスタード色を使用し、「紅茶らしい」クラシカルな印象を演出。 文字色はCTAと価格部分には白を、タイトルや右上の商品内容、キャンペーン情報には指定の青色をそれぞれ用いて、背景色とのコントラストを際立たせ視認性を確保。 |
| フォント | 商品が「初心者向け紅茶」であるのを踏まえ、本文にはゴシック体を使用。これにより、メインカラーのクラシカルな印象に対して過度な高級感を抑え、「とっつきやすさ」を演出。太めのものを選定することで視認性も確保。 また、数字部分にはサンセリフ体の太め斜体のものを用いて本文との調和を意識しつつ、視認性も確保。 タイトル部分には明朝体を使用し、紅茶のクラシカルな雰囲気との調和を意識。 |
| 画像配置 | メインカラーが暗めであるため、カップとティーポットが紅茶の「らしさ」を感じさせる風景の写真のなかでも、全体的に明るい印象のものを選定し、重すぎる印象を回避。 |
| レイアウト | バナー上部2/3は写真を占め、下部には左側にタイトルとキャンペーン情報、右側には価格とCTAを配置。 商品内容は写真の左上の余白に配置し、バナー全体のレイアウトのバランスを取るとともに、視認性を高めて目に入りやすいよう工夫。 |
使用ツール
Photoshopを用いて作成しました。
制作プロセス
1. 初期の案
- 「雰囲気重視」の方向性: 紅茶ポットとティーカップの写真をバナーの大部分に配置し、「紅茶らしい」雰囲気を直観的に伝える方向性。
- レイアウト: 視線の流れを意識し、左上にタイトル、右下に価格とCTAを設置。キャンペーン情報と商品説明は右上か左下のバランスが取れる位置を探りながら配置。
2. 試行錯誤
- 写真選定: 指定の青色との組み合わせで、初めに選定した写真では重たすぎる印象に。より全体が明るいトーンの写真を用いて背景色とのバランスを取り、初心者向けの商品内容との整合性を取る。
- 背景模様の導入: 無地の背景では味気ない印象のため、青のアーガイル柄を背景全体にうっすらと取り入れ、商品に合ったクラシカルな雰囲気を演出。結果的にカラーコードは指定の青色とは異なるものの、Webバナーとしての完成度を優先。
- タイトルの視認性の課題: 背景に文字色が溶け込みタイトルが見えづらい状態だったので、アンティーク調の白地の四角い枠に指定の青色の文字を収め、雰囲気を醸しながら視認性も向上させた。さらに、枠の下部にリボン枠を加えサブタイトルを配置することで、動きと安定感を両立。
- レイアウト調整: バナーサイズ(1080×1080)を踏まえると情報量が不十分と考え、ブレンド内容の説明も加えることに。写真をCTAやタイトル枠と同系統のマスタード色の縁のかまぼこ型の枠に収め、窓から風景がのぞくような構図に。さらにタイトルを枠に繋げるように配置することで、窓辺にプランターが置かれているような情緒的な演出を施しながら視線を自然と誘導。
- 商品内容の調整: 右上に明るい水色のリボン枠を設け、商品内容量を表記。単調にならずに自然と目に入るよう工夫を加えた。
- ブレンド内容の文字調整: 文字の太さに悩み、太字では閉塞感が強く、細字では単調すぎる上に視認性も低い。最終的にブレンド名のみを太字にし、その説明は細字のまま斜体にすることで情報にメリハリをつけつつ視覚的にも読みやすさを向上させた。また、箇条書きのマークを窓枠と同じ色のダイヤにすることで全体の雰囲気との統一感を取りつつも単調さを払拭。
3. デザイナーからのフィードバック
- 文字が小さすぎる: 実際にバナーとして掲載する際には1080×1080よりも小さいサイズで掲載することが殆どなので、文字を減らしもっと簡潔なものにする必要がある。
4. 添削前後の比較
左: 添削前 右: 添削後
- ブレンド内容文撤去: SNSやWebのバナーは「パッと見」で判断されることが多いので、詳細なブレンド内容は不要と判断。その分のスペースを写真に充て、「紅茶の雰囲気」を全面に押し出すような初期の方針に戻す。
- 写真を大きく配置: バナー上部2/3ほどを紅茶の風景写真に割き、開放的な印象を演出。写真の下側はグラデーションでぼかし、バナー下部の背景と自然に馴染むように工夫。
- タイトル下部の調整: 明るいベージュのリボンに白抜き文字では視認性が不十分だったため修正。リボンを深い青色にするとタイトル全体に対して重たい印象だったので、最終的には元のベージュの彩度と明度を調整し文字色を深い青色にすることで視認性と全体のバランスの両立を図った。
- 文字サイズ・太さの調整: ブレンド内容文を撤去したことで情報量が減少。その分全体の文字サイズを少し拡大し、フォントを一回り太めに調整することで視認性が向上し、目に留まりやすいものに。
- 商品内容量の調整: バナー右上のリボン枠を撤去し、閉塞感を軽減。代わりに文字サイズを拡大し、陰影と光彩を設けて立体感を演出。これにより背景とテキストの区別がつきやすくなり、目に留まりやすい表記に。
外部リンク
以下のサイトのお題を参考に制作いたしました。