背景・コンセプト
| 依頼内容 | バナー設置場所：親会社の公式サイト ターゲット：30〜40代の女性 イメージ：親しみやすい・楽しそうな雰囲気 バナーサイズ：336×280（レクタングル） |
| テキスト | お弁当のテイクアウト専門店：おてさげ 調理スタッフ募集中 土日休みOK 週２・５時間〜 まかない有り |
| 画像 | 「調理」を連想できる女性の写真 |
出典: https://webdesign-mame.com/web-design/banner-theme/#link05
目的・課題
概要
全体の方向性として、「楽しそうな雰囲気」を前面に押し出してしまうと「子供っぽすぎる」印象になると考え、「親しみやすさ」を主軸にし中低彩度の黄色や黄緑を基調とすることでターゲット層にも適した印象を意識しました。
また、文字も黒ではなく茶色を選定し視認性と柔らかさを両立しつつ、太めの丸文字フォントでバナー全体の雰囲気とも整合性を取りました。
バナーの背景の一部にさりげないボーダー模様をつけて「動き」をつけて単調な印象を回避いたしました。
デザインの工夫
| 色味 | 主にライト・ソフトトーンの黄色・黄緑を基調とし、親しみやすさの中にも大人の落ち着きを演出。 文字色には茶色を用いることでバナー全体の明るい色味とのコントラストで視認性を高めつつ、柔らかい雰囲気とも整合性を保つことを意識。 バナー左側の労働条件記載枠は薄い黄緑を選定し、背景と色味を変えることで平坦な印象をさりげなく回避。 |
| フォント | 主に丸文字フォントを使用し、数字部分にはカジュアルな印象のサンセリフ系を選定し親しみやすさを表現。 文字を太めのフォントにすることで限られたバナーサイズの中で視認性を確保。 |
| 画像配置 | ターゲット層と同じくらいの年代の女性の写真からエプロン姿のおしゃれなものを選定。 写真の人物の視線の向きを左側の労働条件記載枠の方に合わせつつ、その向きのスペースを大きめに取り視覚的にも自然で圧迫感の無い印象を意識。 |
| レイアウト | バナー上部にタイトル、左側に労働条件、下部に社名を記載。 視認性と全体の雰囲気を考慮して明るめの黄色・黄緑を背景と枠に選定。穏やかな模様や色味の差、陰影などで動きをつけて単調な印象を回避。 バナー下部の社名欄は彩度が高めの黄緑を選定し、バナー全体にアクセント加えた。 人物写真のスペースをバナーに大きめに取り、その上に労働条件記載枠をはみ出させることで動きをつけつつ、人物の視線との距離も確保。 |
使用ツール
Photoshopを用いて制作いたしました。
制作プロセス
1. 初期の案
- 「親しみやすさ」重視の配色: お題の「依頼内容」を踏まえ、黄色と黄緑を基調に選定し雰囲気を演出。文字色には茶色を用いて、視認性と全体の方向性との整合性を両立。
- 人物写真の選定: ターゲット層と同年代と思しき女性の人物写真を選定。エプロン姿のものを使い、バナー内容との整合性も確保。
- シンプルなレイアウト: 上部にタイトル、下部に社名、左側及び右側にそれぞれ労働条件と人物写真を配置。
2. 試行錯誤
- 人物写真の色味を調整: 人物写真のエプロンの色味がバナー全体の雰囲気に合わず、オレンジ掛かった色に調整し統一感を出した。また、人物の顔色が若干沈んで見えたので明度を調整し背景から浮かないようにした。
- フォントの選定: 太めの丸文字系フォントを用いてバナーの雰囲気との統一感を保ちつつ、限られたバナーサイズでも目に入りやすいように配慮。
- 背景模様の追加: 無地の背景が味気ない印象だったので、細かい縞模様を追加することで寂しさを回避しながら親しみやすい印象に。模様も右上がりの向きにし視線の流れにも違和感を覚えない配置を意識。
- 丸枠の配置: 「まかないつき」テキストの丸枠の位置に時間が掛かった。枠の地色を黄緑にし、同系統の色味のバナー下部の枠から距離を置いた場所に配置することで全体の配色バランスを考慮。若干斜めに置くことでバナーに「動き」も加えた。
3. デザイナーからのフィードバック
- 古臭いあしらいを控える: 特にタイトルの袋文字は一昔前の印象を与えるため、陰影や配色のコントラストなどで目立たせるべき。
- 自然な視線の人物画の推奨: カメラ目線での目線や姿勢の人物写真はその人に焦点が当たりがちなので、視線やポーズなどが自然なものを用いてトレンドとの整合性を取ることを推奨。
- 人物画の服装: 女性向けの求人バナーなので、写真の人物の服装もおしゃれでトレンドに合ったものであるかを考慮することが重要。
4. 添削前後の比較
左: 添削前 右: 添削後
- 人物画の差し替え: 視線の向きが自然でよりおしゃれな服装の別の人物写真に変更。その上で視線と同じ向きに余白を多めに取りバナーの広いスペースに配置することで圧迫感を回避。
- 左枠の位置調整: 左側の労働条件が記載の枠を左端まで移動させ、写真の左端に被せるように配置しバナー全体に動きをつける。また、枠下に陰影をつけて立体感を演出し平置きの印象を解消。
- 左枠の地色変更: 労働条件記載枠の地色に薄い黄緑を用いて背景の地色と区別し穏やかにメリハリをつけて味気ない印象を解消。
- 背景模様の調整: 黄色い背景を縞模様と無地の部分を組み合わせ、同じ地色でもさりげなく動きをつけて全体のバランスを取る。
- 丸枠の位置調整: 「まかないつき」の枠を最も違和感のない画像の右下に配置。すぐ下の社名記載枠の地色を考慮し丸枠をバナー背景と同じ地色に変更し全体の配色のバランスを取る。また、枠下に陰影をつけることで立体感を演出。
外部リンク
こちらのサイトのお題を参考に制作いたしました。