WEB担当者のためのスキルアップノート色々な業種・企業を想定した”桜モチーフ”バナーの作り方
3月も終わりを迎え、だんだんと春になってきましたね。
この季節になるとWEBデザイン、特にバナーなんかにも春らしく桜を用いたものがちらほら見受けられるようになります。
今回は様々な企業のバナーを想定して、“桜モチーフ”のバナーをいくつか作成し解説していきたいと思います。
バナー制作のコツを解説した前回のブログでは、1パターンで2種類のバナーを作成しました。
しかし実際の現場では「同じデザインで画像サイズが違うものを展開して！」という場面があったりします。
画像の縦横比率が変わってくると、画像やテキストの配置にもちょっと工夫が必要。
そんな状況を想定して、今回は同じデザインでサイズの違うものを作ってみようかと思います。
今回制作するバナーのサイズ
それぞれのお題で制作するバナーサイズを決めてみました。
- メインビジュアルで使うもの
- 広告バナーとして使うもの
をイメージして、
【1】1000px × 400px
【2】1000px × 150px
【3】500px × 500px
の3つを作っていきたいと思います。
また、誰かにお願いしてバナーお題を頼んでみてもいいかもしれませんが今回は自分で設定。
お題を設定するときは自分でバナーを制作するということを意識せず思いついた設定をぽんぽんと挙げてみました。
それでは早速行きましょう！
お題その1：旅行会社
お題の内容は以下の通りに設定。
【春の国内旅行特集】
- 旅先をイメージさせるような風景写真を使いたい
- 春なのでピンクっぽいイメージで
- 入れて欲しいワード「春の国内旅行特集」「春を楽しむ旅へ出かけよう」
制作したバナーがこちら
ピンクをベースに、ピンク×黄緑の春色カラーでテキストを作成しました。
【1】【3】の画像では旅先をイメージさせるような風景写真のほか、キャッチ周りには桜の画像を配置し春感をプラスしました。
【3】の画像に関しては、はじめ風景写真2枚で制作していたのですが、何だか物足りないなあ･･･と感じたので【1】の要素を配置変えすることにしました。
【没案】
【2】のような画像サイズの場合、【1】に入れた全ての要素を配置しようとするとごちゃついてしまいます。
バナーとしてのインパクトや見やすさにかけてしまっては意味がありません。
写真素材にも優先順位を決め、今回の場合は風景写真を優先し桜のイメージ画像を削除しています。
【1】や【3】の画像と比べてビジュアル要素が少なくなってしまうこともあり、テキスト要素を目立たせ情報がパッと伝わるように意識しました。
複数のサイズに展開する場合、一番大きい画像から要素を間引く形で作っていくと楽ですね。
お題その2：アパレル
【SPRING FAIR】
- 20代、30代の女性がターゲット。商品はシンプルめなデザイン。
- ポップな感じも入れて欲しい
- 入れて欲しいワード「SPRING FAIR」「最大20%OFF」「開催期間：3/31まで」
制作したバナーがこちら
桜のイラストを背景として使用しました。
はじめはがっつりピンクの背景で作り進めていたのですが、お題にある「20代、30代の女性がターゲット。商品はシンプルめなデザイン。」という部分とイメージが遠くなっているなと感じました。
【没案】
ターゲットユーザーや商品のイメージよりも、幼い印象を与えるバナーに。。
「春っぽく」とか「桜を使う」よりもまず“クライアントのターゲットユーザーや商品のテイストに沿っている”ことが大前提ですが、大幅にズレてしまっています。
急いで軌道修正していきましょう。
方向性を改めて整理してみた
現状のバナーを見て、どう修正していくのがいいか書き出してみました。
- ゴシック体×濃いピンク背景がポップすぎる印象を与えている気がする
- 20代・30代の女性がターゲットということと、商品のテイストから全体的にもう少し落ち着いた感じでいいんじゃないか
- ポップ要素で背景に使っているストライプをどこかポイントで使ってみる？
修正内容
「SPRING FAIR」の文字をゴシック体から明朝体に変更し、背景とテキストの色味を反転させてすっきり感した感じに変更。
背景は白だと物足りなく感じ白に近い薄いグレーに変更してみたのですが、テキストの文字がくすんで見えてしまうのでさらに同系色のピンクをちょっと足しました。
あまりはっきりとした色にしてしまうとテキストの存在感がぼやけてしまうので、かなり薄めの色にしています。
テキストだけだと固い印象になってしまいそうなところですが、
- 桜のイラストとを背景として配置
- 開催期間の背景をほんのりストライプに
これでポップさも少々プラスできたんじゃないかと思います。
また、「○○%OFF」や「○割引」などの記載のあるバナーは数字を目立たせるようなレイアウトにすると良いです。
まとめ
今回、自分でお題を設定したものの割と悩みながら制作をしていきました。笑
バナーは短時間で仕上げられるとベストです。
情報の優先順位や配置パターンに悩む時間を減らす意識をしながらこうした練習を重ねるとスキルとして身に付くものが多いのではないかと感じました。
- 1つのお題に対しいくつかのデザインパターンを作る練習
- 1つのデザインからサイズ展開を想定して作る練習
実践の場ではどちらも必要となるスキルですので、どちらも定期的に練習として取り入れていくといいかもしれません。
みなさんもぜひチャレンジしてみてください！