背景・コンセプト
| 依頼内容 | バナー設置場所：地域の情報サイト ターゲット：30代の女性 イメージ：ベージュをベースに温かみのあるナチュラルな雰囲気 バナーサイズ：336×280（レクタングル） |
| テキスト | 保護猫カフェオープン 4月7日（日）10:00←英語表記でもOK 夢丘駅徒歩1分 20匹以上のかわいい猫がお出迎えします 新しい家族に会いにきてね |
| 画像 | 室内にいる猫の写真 |
出典: https://webdesign-mame.com/web-design/banner-theme/
目的・課題
概要
お題の「依頼内容」を踏まえて、全体的にベージュを基調にした「こなれ感」を重視し、レイアウトや色味などを選定いたしました。
背景には明るく低彩度のベージュを、文字色には小豆のような深めの茶色を用いてコントラストをつけることで視認性も確保し、右下の「オープン日時・場所」の欄はペットの住居の入り口のような形にして内容に合わせた雰囲気を演出いたしました。
また、写真の猫が座るソファの色味バナーの方向性に寄せるために少し彩度を落として黄色に寄せました。
デザインの工夫
| 色味 | 全体的に赤みベージュ系統の色味を選定し、自然な雰囲気を演出するため高彩度の色味を避けた。 明度の濃淡でコントラストをつけ視認性を確保しバナーの方向性とも整合性を取った。 日時・場所の記載欄の地色は白を用いて文字色とのコントラストをより大きくし、小さいスペースでも視認性を損なわないよう工夫。 |
| フォント | 主に丸文字系フォントを用いて読みやすさと同時に親しみやすい雰囲気を演出。 タイトルの英字部分のみ筆記体フォントを用いてバナー全体に動きをつけた。 |
| 画像配置 | 「20匹以上の猫がいる」ことを考慮し、1枚につき複数匹の猫が映る写真の中から選定し「たくさんいる」印象を出すことを意識。その中でも正面(カメラ目線)を向いてないものを用いて不自然な印象を防止。 また、ソファの色味の彩度を少し落として黄色に近づけることでバナー全体から浮いた印象を回避し、写真全体も少しくすんだベージュに寄せることで自然で温かみのある雰囲気に寄せる工夫を施した。 |
| レイアウト | テキストの配置や色味に動きがあるので、安定感を出すためバナー上半分に写真を1枚配置しバランスを確保。 日時・場所の記載を右下にコンパクトにまとめた上で、枠を動物の小屋の入り口のような形にすることで動きをつけつつ、バナーの内容との整合性も両立。 メインタイトルとキャッチコピーのテキストにさりげなく白文字を後ろに配置しさりげなく強調。 また、タイトルの英字部分(Openの文字)を少し斜めに配置することでバナーに動きをつけ、薄い色でも目に留まりやすい工夫を施した。 日時・場所の記載枠の真上のテキストは写真に被るので境界線に白を用いて文字色とのコントラストをつけて視認性を落とさないよう意識。 |
使用ツール
Photoshopを用いて作成しました。
制作プロセス
1. 初期の案
- 色味の選定: 淡い赤みベージュを背景に、赤みの茶色を文字色に用いることで、「温かみのあるナチュラルさ」を出しつつ、明度の濃淡でコントラストをつけて視認性を確保。
- フォント: 太めの丸文字系フォントを使用し、見やすさとバナーの雰囲気を両立。また、タイトルの英字部分には筆記体フォントを用いてさりげなく「こなれ感」を表現。
- 写真選定: 異なる姿勢や見た目の猫の写真を数枚使用し、「様々な猫がいる」カフェであることを表現。
- レイアウト: 視線の流れを意識し、左上にタイトル、右下に日時・場所を記載。
2. 試行錯誤
- 写真加工: 写真を丸く切り抜いたうえで縁をグラデーションでぼやけさせ、バナー全体に馴染むよう工夫。
- タイトルの調整: 筆記体の英字部分はメインタイトルよりも明度を上げ、うるさい印象を回避。また、メインタイトルにも白い影文字を入れて強調。
- 線上の枠の追加: バナーの右上・左下のスペースの空きが目立つ印象だったので白線の枠を追加しさりげなく動きをつけた。
- 白地の強調部分: キャッチコピーや右下の日付・場所の記載欄に白の地色を選定し、背景の色味と穏やかに差をつけることで内容が視覚的に目立つよう工夫。
3. デザイナーからのフィードバック
- 「動き」が過剰: 写真のグラデーションやサブテキストの吹き出しなど全体的に「動き」が多すぎてうるさい印象。写真を1つに絞り、バナー上半分に置いたほうが纏まった印象に。
- サブテキストの配置: 吹き出しにいれるとごちゃついた印象なので、右下の枠の丸い輪郭に沿わせた配置を行うと全体のバランスが整う。
4. 添削前後の比較
左: 添削前 右: 添削後
- 写真配置: 写真をバナーの上半分に配置し下部をグラデーションでぼかすことで背景と馴染ませてバナー全体に一体感をつける。
- 写真選定: 1枚に数匹の猫が映るものに変更し、「さまざまな猫がいる」カフェであることを表現。ソファの色味を調整し、写真全体に靄が掛かったような色味を加える事で、バナーの温かみのある雰囲気と統一感を持たせる。
- 枠の撤去: 右上と左下の白線の枠は新しいレイアウトでは邪魔になるので撤去し、デザインをすっきりした印象に。
- サブテキストの調整: サブテキストを右下枠の上に2行で配置。テキスト同士の位置を少しずらすことで単調さを回避。また、文字に白い境界線を追加し、背景とのコントラストをつけて視認性を向上させ内容が視覚的にスムーズに伝わるよう工夫。
外部リンク
こちらのサイトのお題を参考に制作いたしました。
https://webdesign-mame.com/web-design/banner-theme/
画像はこちらのサイトのものを用いました。