| 依頼内容 | バナー設置場所：公式サイト ターゲット：20代の女性 イメージ：水色・爽やか（子どもっぽい印象はNG） バナーサイズ：300×250 |
| テキスト | 友だち紹介キャンペーン あなたもお友だちも最大20,000円キャッシュバック 夏前に自信の肌へ！ まずは無料カウンセリングから 対象期間：3月1日〜3月31日 |
| 画像 | 女性（２人以上）の写真 |
出典: https://webdesign-mame.com/web-design/banner-theme/#link08
目的・課題
概要
お題で指定の色味やターゲット層、重視する雰囲気などを考慮し水色と黄色を基調にして爽やかで調和のとれた印象のバナーに仕上げました。
色味は全体的に明るく澄んでいるものを用いるので、フォントは丸文字系統のかわりにゴシック体系統を選定することで子供っぽい印象を極力回避しています。
本文はより違和感の無い形になるように、一部お題で指定のものから変更し制作いたしました。
デザインの工夫
| 色味 | お題で指定の水色とその補色の黄色を基調に選定し、爽やかな印象と視認性を両立。 とりわけ優先順位の高いテキストに補色のコントラスト配色を用いることで調和を保ちながら自然と目に入りやすいよう工夫。 CTAの地色のみ白を選定し、文字色とのコントラストを強めることで、他の部分と視覚的に区別し視線誘導できるよう工夫。 |
| フォント | ゴシック体の太めのフォントを用いて小さいバナーサイズの中で視認性を確保しつつ、配色とのバランスを取り子供っぽい印象を回避。 数字部分のフォントはサンセリフ体の太めのものを用いて本文全体との調和を図った。 |
| 画像配置 | ターゲット層と同年代の女性の写真の中から、顔が大きく映っていて視線や姿勢などがカメラ目線になっていないものを選定。 お題での指定とは逸れるが、1人の人物画を大きく配置することでよりバナーが目に入りやすいよう工夫。 明度を調整し背景に馴染ませることで、より透明感のある印象を演出。 |
| レイアウト | バナー最上部にキャッチコピー、その真下にタイトル、バナー中央下部にキャンペーン文、最下部の左端に申込期間、右側にCTAを配置。 本文の中で優先順位の高いタイトルとキャッチコピーの文字サイズを大きくしたうえでコントラストの強い配色で目に入りやすいよう工夫。 キャッチコピーと申込期間の枠をバナーの端まではみ出すことで単調な印象を払拭しつつ、視線の流れでも違和感の覚えないものに調整。 また、キャンペーン文の背後の水色の図形の透明度を上げることで、本文の視認性を極力損ねず人物画の下部も見えるようにし、窮屈な印象を払拭。 |
使用ツール
Photoshopを用いて作成しました。
制作プロセス
1. 初期の案
- 色味選定: お題で指定の水色を基調にし、彩度の濃淡でコントラストをつけて見やすくする。くすんだ水色をメインに使用することで安っぽい印象を回避。
- アクセントカラー: 水色の補色である黄色をアクセントで用いて、メリハリを効かせつつも全体の調和を意識。
- フォント選定: ターゲットの年代を意識し、丸文字系フォントを使用。太めのものを用いる事で見やすい印象に。
- レイアウト: バナー上部にタイトル、最下部を2分割し左右それぞれに申込期間とCTAを配置。中央下側にキャンペーン内容文を大きく設置。シンプルながらも視線の流れを意識したレイアウトにした。
2. 試行錯誤
- タイトルのあしらい: 太めの白の境界線と青の文字色でポップな印象を演出しつつ、目に留まりやすいよう工夫。
- バナー最下部の調整: 補色関係の水色と黄色を用いて、左側の申込期間及び右側のCTAの背景色と文字色の配色をそれぞれ逆転させて統一感を出した。CTAの右端には黄色い矢印を設置し、視線誘導する工夫を施した。
- 写真の色味の調整: バナー全体の水色の影響で写真の人物の顔色が青ざめて見えたので彩度やカラーバランスなどを調整し、自然な肌色に調整。
- キャンペーン文の強調: 中央の数字部分にエンボス加工を施し、色味を抑えつつも視認性を向上。
3. デザイナーからのフィードバック
- 袋文字は古い印象: この手法は一昔前に流行ったデザインであり、現在のトレンドでは避けるべき。文字の視認性を上げるならば、陰影や光彩、背景との色味のコントラストなどで調整するのが望ましい。
- 色味が弱い: 濁色はぼやけやすく、スタイリッシュな写真をメインとして際立たせるのでなければメインに使用するのは避けるのが無難。よりはっきりした色味を使用することで華やかで目を引くものに出来る。
- 「ニコパチ」人物画の回避: カメラ目線の人物写真はその人に目線が集中しやすいので、バナーの内容が伝わりづらい傾向。今のトレンドでは、自然な目線・姿勢の人物画を使用するのが主流となっている。
- 人物画が小さい: 女性の写真(特に顔が)が小さくて目に入りづらい印象。写真を大きく配置することで目に付きやすくなる。
4. 添削前後の比較
左: 添削前 中央: 自己添削後 右: 添削後
- 全体の色味調整: バナー全体の色味の彩度を調整し、高彩度の色味をメインに。配色のコントラストを際立たせバナーが自然と目に入りやすい印象に。
- 人物画の変更: 自然な目線・姿勢の写真に変更し、不自然な印象を解消。顔色も背景に合わせて調整したうえで使用した。
- 人物画の人数変更: 人物が1人の写真に変更し、大きく配置することでバナーを目立ちやすく。お題の指定とは逸れるものの、バナーを機能させるのが最優先。
- レイアウト変更: タイトルをバナー中央右側に円形の図形とともに大きく配置し、コントラスト配色で目立たせる。キャッチコピーはその上に枠を端まで伸ばして配置することでバナー全体のレイアウトのバランスを取った。キャッチコピーはさほど優先順位は高くはないので他のテキストよりも枠と文字色のコントラストを穏やかに調整。
- CTAの調整: CTAの枠の地色にバナーの中で唯一白を選定し、さらに右端の矢印の黄色の彩度を上げることで目立たせた。さらに左側の期間記載枠を調整しCTAのスペースと文字サイズを大きくすることで背景との差を際立たせ、自然と目に入りやすいよう工夫。
- 黄色の丸枠追加: 視線の流れを意識し、右上のタイトルと左下の申込期間枠に黄色の丸枠を追加。バナー全体に動きをつけると同時に視覚的にも違和感を覚えないレイアウトに。
外部リンク
以下のサイトのお題を参考に制作いたしました。