アートボード_1

未経験者のバナーメイキング

こんばんは、Webデザイナーを目指しているhazukiです。
今回は作成したバナーのメイキングをまとめました。
それにしても「もののけ姫」は何回見ても良いですね…。

0. なぜバナー制作を事細かにまとめようと思い立ったか
バナーの作り方記事は数多くありますが、作る過程で制作者が何を考えているのかまではあまり書かれていなく読みたいなと思ったからです。(探せばあるのかもですが)
自分に向けて書きましたが、今まさにバナーを作り始めたばかり!といった方にも読んでいただけたらなと思いまとめます。

目次
1. ラフ
2. 配置
3. 装飾
4. 提出
5. ブラッシュアップ&微調整
6. 今回のまなび
7. 次に活かしたいこと

1.ラフ
今回はワイヤーフレームが提示されていたのでどんなデザインが良いか考えることに。

お題はサマーセールのバナーです。
ターゲットは20~30代の女性。

画像1

服のバナーなので、モデル1人は載せたいところ。

私が考えたターゲット…28歳女性
私が考えたユーザーシナリオ…夏季休暇で旅行に行くことになったが、せっかくなので新しく服を買いたい。せっかくなら普段あまり着ないワンピースを買おうかな?とはいえボーナスから旅費も出すし、出費はなるべく抑えたいところ。そんな時にセールのバナーを見つける…

2.配置

画像2

ワイヤーを元に実際に配置をしてみました。
始めはモデルを左に1人だけ配置していましたが、「たくさんの服がある→選択性がある」とユーザーにイメージしてもらえるように複数人の配置に変更しました。

3.装飾
ここが鬼門でした…。先ほどの配置の時点で、「なんか違う」でした。
この「なんか」が何なのか、何で違うと思うのかがわからないとズルズル行きますね…。
そこで

画像3

背景をストライプにしてみました。

あっ!なんだかしっくりきたぞ!
…完成してから思ったのですが、背景一色だけの状態だと単調で絵的につまらなかったのだと思います。

さて…ここから全く進みませんでした。
女性向けデザインって何だ?!と迷走していたのです。
以前、ビジュアルがそれらしくなることに目が行きがちだったので、今回は全てのデザインに意味を持たせようと考えたからです。
なんで可愛いイラストとかって女性は好きなんだろう!
なんでこのデザインはこのデザインになったんだろう?!答えが見えずにグルグル悩む日々です。

そこで、前回まとめたように女性向けデザインを分析することにしました。
https://note.mu/8gatsukumori/n/nc5ba14debbd7
分析を元に再度デザインを見直し、一度完成!
イラストは多すぎず!文字は動きを付ける!

画像4

「70%OFF」は緑のワクを配置していますが、スイカをイメージしています…(笑)

4.提出
提出したものを先生にFB(フィードバック)していただきました。

画像5

ひぃ~秒でめちゃめちゃ良くなってますやん…
FBを元にブラッシュアップです。

ひとまず修正する点として
・ストライプの幅を縮める。→幅が大きく背景に目がいくため
・ストライプの白を淡い色に変更→背景なのに白が目立つ
・文字にドロップシャドウを入れる→読みやすくする
・文字のフォントや色を変える

5.ブラッシュアップ&微調整
FBしてもらったデザインを見て、「波っぽいな、夏のバナーだし海も良いな…」と思い、下半分を波模様にしました。

画像6

そうなるとイラストの魚にも単なるワンポイントではなく、デザインの役割として意味ができたことに気付きました。
海を泳がせつつ、「セール会場へGO」の文章まで視線を誘導させる役割となりました。
となるとカモメの配置も上に飛ばせておく方が良いと考えます。

FB中に、「70%OFFは重要項目」と教えていただいたので、中央にまとめることにしました。
右上は無意味な余白になったので、カモメを中央向きに配置しました。
旗のイラストも大小の2つをうるさすぎず寂しくなく配置しました。

再度意見をいただき、デザインが全体的に右寄りだったので微調整。
完成です。

画像7

6.今回のまなび
参考デザインの参考の仕方がわかりました。
誰かから答えを貰うのではなく、自分なりに分析と答えを持つ必要があると痛感しました。
クライアントさんに説明する際の武器にもなりますし。
そもそも、人から貰った答えも本当の正解かは誰にもわかりません。
強いてあげるなら、「その人にとっては正解である」だけですね。

結局、デザインってどれだけ多くのことに気付けるかなんだなと思いました。
ただ、最初から一気に全部気付くことはめっちゃ難しいですね(笑)
1つ1つできることを増やしていきたい…。

あとはやっぱり「連想力」ですね。
海を連想させてからは早かったです。イラストにも役割ができましたし。
装飾の仕方が掴めてきた気がします。

最後の方は楽しくデザインができました。プリクラのらくがきコーナーを思い出しました。
そういえばデザイン制作で楽しめたのは初めてかもしれないです。
大体最初は楽しいけど…だったので(笑)

バナーを作成してから「なるほどデザイン」を読み返しました。
7つ道具その4「連想力」こっ…これやん!!
今回のブラッシュアップで行っていたのがまさにこの「連想力」…こんな身近なところに大きなヒントがあったんや~~

とはいえ、悩んでいた時にこの本を読んでいても上澄みしか読み取れていなかったでしょう。
実体験があるからこそ本に書いてあることが刺さるんだと思いました。

7.次に活かしたいこと
◆方向性を固める
なるほどデザインを読み返していて「方向性」があまり定まっていなかったなと気付きました。
ターゲットの深堀はしたものの、「ターゲットを深堀する」と「デザイン方向性を決める」はまた別の行いなのではないかと思いました。

28歳女性だから明るいけど落ち着いたデザイン…なんて漠然と考えていましたが、散らすのかかっちりさせるのかだけでも言語化して決めておくべきでした。
ターゲットを決めたから頭の中で漠然と方向性も決める…のではなく、きちんと方向性まで紙に書き出したほうがその後のデザインにブレがないなと思いました。

◆フォントへも意識を向ける
そしてフォントはほとんど勉強していないことに気付きました。
明朝体は何となく繊細とかそのレベルの認識です。まずはフォントの種類を知るために何か本を1冊買うとかしようと思います。
種類がわからないと頭に入ってこなさそうなので~。

この記事読んでいただいた方、ぜひぜひあなたの制作過程を読ませていただきたいです~~!!どんな思いでデザインしているかはやっぱり気になるので…(笑)

長文にお付き合いいただきありがとうございました!!

この記事が気に入ったらサポートをしてみませんか?