今回はバナー広告デザインのコツとして、こちらのバナーデザインの作り方と、良いところ・良くないところ・改善点を中心に紹介していきます。
また、記事の最後にはこちらのバナーデザインよりもう少しいい感じに仕上がりましたので、是非一通りの製作過程を参考にして下さい。
不動産バナー広告として室内写真の貼付け
まずは、こちらの元となる写真と下の部分のキラキラ。
写真は奇麗で大きな空間を撮影した写真なので、広さが伝わるので良いと思います。
この記事ではPhotoshopの練習としてなので、それっぽい写真をフリー素材から練習表に見つけた写真です。
次は高級感を付ける為に、下の部分に文字を入れる部分をつくり、キラキラで高級感をだしてみました。
こちらのキラキラブラシは、自作ブラシです。
試作ブラシの作り方がわからに方は
をご覧ください。
ベース写真のレイヤー構成
Photoshopのレイヤー構成を見てみると次のようにしてあります。
元となる写真が、一番下レイヤーの「高級マンション」写真です。
元の写真は、スマートオブジェクトにしてあるので、作成途中で写真サイズを変更したりしても元の写真が劣化しないようにしてあります。
≪ 関連記事 ≫
その上のレイヤーに、明るさ・コントラストでより室内空間を明るくなるように盛ってあります。
より良く見えるように手を加えてみました。
文字を入れる部分には室内の雰囲気に合わせたグラデーションで色を付けて、さらに高級感を出す為にキラキラを追加しました。
文字入れの様子
キラキラを入れたところに、『販売直前 内覧会』という文字をいれました。
都内マンション＝高級 というイメージがあるので、文字は写真の雰囲気に合わせた濃い茶色系の色にして、金色（高級感を出す為）の縁取りを加えてあります。
文字には、レイヤースタイルの
- 光彩（外側）
で、黄色を付けています。
その上に、広さと間取りサイズ「71.50㎡・2LDK+L」を入れて、山手線沿線の高級住宅街、目白ではかなり広い空間であることを訴えてます。
しかし、ここでちょっと反省点です。
文字と床やベットの色が似たような色になってしまったので、ちょっと分かりにくくなってしまいました。
こちら、広さを紹介している文字にも、光彩（外側）のレイヤースタイル効果で、縁を細い白を付けることで、文字が分かるようにしてあります。
今回のバナー作成練習としては、あまり強調はさせずに、さりげなくきちんと広さの説明を付け加えている。というイメージで作りました。
立地条件の明記
次に、一番見てもらいたい立地条件です。
こちらもさりげなくのつもりなので、壁紙やカーテンと色が同系色の白で、軽く縁取りを加えております。
ただ、こちらの文字は一番見てもらいたいところなので、もう少し文字が分かるようにするため、文字の背景を暗くしてみました。
全体的な色に統一感を出す為に、背景を茶色系の半透明ラインを加えました。
レイヤー構成はこのようになっています。
文字より少し大きめで選択範囲を囲み、輪郭はぼやかしております。
徒歩5分のところ、もう少し強調した方がいいんじゃない？
街角で見かける、建設中の看板を見ると、よく徒歩〇分と大きく目立つようになってるの見るよ。
という先人たちの知恵を真似して、次のようにしてみました。
駅と徒歩、分の文字サイズを小さくして、５の文字は色を変えて、周りにもぼんやりとピンク色を付けてみました。
レイヤースタイルは次のようにしてあります。
５の文字だけを別レイヤーにして、
- ベベル（内側）で立体感のある文字
- 光彩（外側）ピンク色で強調
の手直しをしてあります。
見直しで文字に統一感
色々と手直しをしていると他のところも気になってきましたので、文字全体に統一感を持たせてみました。
- エンボス（内側）
- 光彩（外側）
- 同じフォント
この３つを意識して作ったのが上記バナー広告用のデザインです。
ψ あわせてオススメ記事 ψ
簡単バナーデザインのまとめ
高級住宅街のマンション内覧会用のバナーデザインとして、意識したことは次の５つです。
- アピール写真を使う
- 購入者が気になるポイントを伝えられるようにする
- 文字のレイヤースタイルには共通点を持たせる
- 文字の大きさを変えて、単調にしない
- 全体的な色の統一感を持つ
です。
広告代理店へ入社して間もない方、広告バナー製作をこれから始めようとしている方、広告デザインで副業を考えている人。
少しでも参考にしてもらえましたら幸いです。
今回はバナー広告デザインを独学で勉強するために購入した、こちらの本を見ながら練習しました。
サンプル画像は任意で集めて編集してますが、もっと本気でガッツリ学びたい人は本の隅から隅まで吸収していきましょう！
難しいところを省いても今回の記事で紹介した程度だったら、すぐにでも実践できそうです。
≪ 関連記事 ≫
コメント