Webデザイン

バナー制作過程公開 〜「#バナーお題」に挑戦〜

アイキャッチ画像

Webデザイナーのこばやすさんがtwitterで実施されている「#バナーお題」のバナーを作ったので、そのときの過程とか考えたこととかを書いてみようと思います。

#バナーお題とは

こばやすさん(@kobayas_s)がtwitter上でバナーのお題を出し、そのお題に沿ったバナーを作って発表する企画です。
好きなときに参加OK、見てるだけでもOKです。
他の方が作ったものを見るのも楽しく、勉強になります。

▼こんなふうにお題が出されます。

こばやすさんのバナーお題のツイート

このお題に沿って作りました。

今回のバナー制作でまず考えたこと

こんなバナーを作りました。

こばやすさんお題バナー

意識したこと
・パッと見た瞬間「おやっ、何だろう、なんか楽しそう」と気になるバナー
・カラフルに、明るくポップなイメージに
・ひと目で遊園地とわかる
・ひと目で何かがオープンするんだとわかる
・「20%OFF」を強調

いちばん伝えたいことは何だろう?…とまず考えたんですが
Kobayasランドがオープンするよ! ってことなのか、
20%OFFだよ!ってことなのか、
「Webからの購入で」「1月31日まで」も大事な情報だけど、これは「いちばん大事」ではないかな…?
とちょっと悩みました。

20%OFFなことを強調しておトク感を出そうかと最初は考えたんですが、
Kobayasランドは新しくオープンする遊園地だし、
Kobayasランド? どこソレ? って感じかなぁと思ったので、
新しくオープンするよ! 遊園地だよ! ということをひと目でわかるようにしたほうがよいかな、と思いました。
なので「Kobayas Land OPEN!」を大きく。

バナー制作過程

まずは白黒でレイアウトしてみる

Photoshopを使って制作していきます。

まずは文字を入れます。

バナーのラフ

レイアウトを考えることに集中したいので、まずは白黒でざっくりと配置。

バナーのラフ

とりあえずレイアウトしてみたものの、なんかしっくりきません。
細長いところにどう配置すればいいのか悩みます。
上のように情報を左右に2つに分割すると、強調したいことが伝わりにくいのでは?
…と思えてきました。
(でもこういうレイアウトがよくないって言いたいのではないです。)

カラーの状態でレイアウトしていく

最初に白黒で作ったレイアウトはやめて、いちばん大事だと思う情報を真ん中にドーンと置いてみることに。
(色は後から変えるのでこの段階ではテキトー)

バナー制作途中

「開園記念!」をどこに置こう?

バナー制作途中

いったん非表示にしてあとから考えよう…

バナー制作途中

キャッチコピーもどこに置こう。あいてるスペースにとりあえず仮置き。

バナー制作途中

「20%OFF」を強調。

バックに空と観覧車の写真を配置

バナー制作途中

写真素材を探すときは「写真AC」をよく利用します。

「Web購入限定」も強調してみた

バナー制作途中

気になるところを修正

青×黄×白でポップな雰囲気にしようとしたんですが、なんか夏っぽい…?と思いました。

「Web購入限定」の吹き出しも、取ってつけたような感じに思えてきました。

下部の色ベタの部分を「色相・彩度」で色を変えて遊んでみる

バナー制作途中

青よりも赤のほうがいいかも?
こっちのほうがカラフルで元気な感じ。

赤……そうだリボンはどうだろう?!

リボンに変えてみた

バナー制作途中

リボンのほうがキャンペーン感があると思ったのと、いちばん下までベタっと赤いのよりこっちのほうがスッキリしてる。
左の吹き出しもやめたほうがまとまりそう。

…あ!「開園記念」の文字も入ってない。

ちなみにリボンは、たまたま集めていた素材があったのでそれを使いました。
このとき本当に偶然ちょうどいいリボンが手元にあったのです。
素材はもっと日常的に集めたり作っておかないとな……。

おわりに

こばやすさんお題バナー

いったん完成!

レイヤーはこんなふうになってます。

レイヤー

twitterにアップしたら、「作背景の空色を観覧車の空色に統一して鮮やかにしてみては?」
とレビューをいただきました。

↓ 修正してみました。
観覧車周辺も、右側のほうの空もどちらも色味修正して、メインの文字の影を少し濃くしました。

遊園地バナー

制作時間は1時間40分ぐらい。
もっとデザインの引き出しを増やしていきたいです。

#バナーお題」で他の方がアップしているものも見ることができます。