背景・コンセプト
| 依頼内容 | バナー設置場所：公式サイト ターゲット：20〜30代の女性 イメージ：ピンクをキーカラーに、写真が目立つように。大人可愛いシンプルな印象。 バナーサイズ：336×280（レクタングル） |
| テキスト | Mother’s Day お花とお菓子のギフトセット 配達日指定のご注文受付は5月8日土曜日23時まで |
| 画像 | お花とお菓子の写真 |
出典: https://webdesign-mame.com/web-design/banner-theme/#link07
注: お題は上記を参考にしましたが、一部テキストを変更いたしました。
目的・課題
概要
上記の「依頼内容」を踏まえて、写真を目立たせつつもパッと目を引くあしらいのタイトルをバナーの中心に置いて全体の「母の日」らしい雰囲気と視認性の両立を意識して制作いたしました。
また、ターゲット層を考慮して画像の色味を一部落ち着かせ背景全体に配置することで写真の存在感も確保いたしました。
デザインの工夫
| 色味 | 写真全体はターゲット層を考慮し、彩度が低めの落ち着いた色味にしつつ、タイトル枠や締切日の記載欄のピンク色の彩度を高めにすることで華やかさも加えた タイトルは枠の地色を白、文字色と枠線を彩度の高いピンクに設定することで視認性を確保した 商品名と注文受付締切日の記載欄はバナー全体の色味のバランスを考慮し、中程度の彩度のピンクを地色にし、文字色を白に設定しコントラストを少し弱めた |
| フォント | 可愛らしく読みやすい丸文字系統のフォントをメインに使用タイトルの英字部分を安定感のあるセリフ体系統にし、バナー全体のバランスを確保 注文受付締切日の日付部分を太めのゴシック体系統にし、少し文字サイズを上げることで目を引きやすくした |
| 画像配置 | 商品イメージとしてお花とお菓子の画像を背景として設置 斜め分割することで動きをつけ、狭いバナーサイズの中で全体のバランスを取った ターゲット層を考慮し、お菓子の写真の色味を一部ベージュやブラウンなどの落ち着いた色味に変更した |
| レイアウト | 背景画像に商品イメージであるお花とお菓子の画像を配置 バナー中央にメインタイトルと商品名記載の枠、バナー下部に注文受付締切日の記載欄を配置した 写真全体は彩度が低めの落ち着いた色味にしつつ、タイトル枠や締切日の記載欄のピンク色の彩度を高めにすることで華やかさも加えた 中央のタイトルの丸枠を白地にし、枠線と商品名記載枠を同系統のピンクに設定することで統一感を出した 商品名記載の枠のピンク色はタイトルの文字色よりも少し彩度が低いが、リボン型に設定してうるさくなるのを防ぎつつ目を引くように意識した また、中央のタイトルの外側に光彩と影を軽くつけることで立体感を演出した 「母の日」の雰囲気の演出のため、カーネーションのイラスト画像をタイトルの丸枠の端に配置 視線の流れを考慮して左上と右下に画像を置き、リボン枠につく右下のものを少し小さめにしてバランスを取った |
使用ツール
Photoshopを用いて制作いたしました。
制作のプロセス
1. 初期の案
- 画像を背景前面に: 「写真を目立たせる」というお題の方針を意識し、背景前面に商品イメージを配置。斜め区切りで視覚的なバランスを取った
- 落ち着いた配色: ターゲット層を考慮し、過度にポップな印象にならないよう彩度の抑えた色味を選定。明度差で視認性を確保
- 写真選定の基準: 写真選定の際は、アングルや形が適しているものを優先させ、色味は後から調整する方針に。
2. デザインの試行錯誤
視認性やバナー全体のバランスを考慮しながら、より効果的なレイアウトを模索。
- 写真の色味の調整: 写真を配置してみると、案の定お菓子の写真が可愛すぎる印象だったので、彩度や明度・カラーバランスなどを調整し、落ち着いたお菓子らしい色味に変更
- タイトルの文字の調整: タイトルのフォントとレイアウトが単調すぎたため、筆記体フォントを丸枠に沿わせる形で「動き」をつけた
- バナー下部の色味: バナー下部の枠は締め色として少し彩度を上げたピンク色に設定。視認性を上げるため、文字色は暗めの茶色を使用した
3. デザイナーからのフィードバック
より印象に残るためのバナーにするための改善点を頂く。
- 色味が弱い: 色味が落ち着きすぎていて、印象に残りにくい可能性が高い。Pinterestなどで実例を参考にし、もっと華やかな色使いをすると良い
- 日付全体を太字に: バナー下部の締切日の数字部分だけでなく、「月・日・曜日」も太字にすると統一感を得られ視認性も向上する
- 「古臭さ」を回避: 太い境界線の多用は一昔前の印象になりやすい。背景と文字の配色でコントラストを出したり、陰影や光彩などを工夫して視認性を確保するのが望ましい
添削前後の比較
左: 添削前 右: 添削後
- タイトル周りの見直し: 写真は変更せず、タイトル周りのデザインを全面的に見直し、バランスを調整
- 華やかな配色に: 文字や装飾などの色味を低彩度のピンクと茶色から、白と高彩度のピンク系統に変更し、統一感を出す
- タイトル周りのあしらい: タイトル背景は白地の丸枠にし、ピンク色の縁と文字色とのコントラストで視認性を確保。タイトル下部のリボン枠で動きを加えつつ、色味で統一感を出す
- 花飾りで雰囲気を演出: 視線の流れを意識し、丸枠の左上と右下に赤いカーネーションのイラストを配置。リボン枠に接する右下のものを一回り小さくしてバランスを調整
- バナー下部の調整: 背景を高彩度のピンクに変更し華やかさに寄与。白抜き文字にすることでコントラストをつけ視認性をつける。また、日付の数字以外の「月・日・曜日」も太字にして統一感を出す
外部リンク
こちらのサイトのお題を参考に制作いたしました。
https://webdesign-mame.com/web-design/banner-theme/#link07
注: お題は上記サイトをベースにしましたが、バナーデザインを考慮して表現を一部変更いたしました。
画像はこちらのサイトのものを使用いたしました。