セルフReデザイン③〜バナー編〜

今回はまた以前作った作品のリメイクをやってみました。
ネットに出ているお題をやるのもいいけど、以前作った自分の作品についてもっと正面から見直していくのも大事だなあと最近つくづく思うようになりまして…。

今回の作品

この度作り直したバナーの元作品はこちら、数年前にクラウドワークス のコンペに応募した、facebook広告の募集バナーです。

そもそもfacebookの広告とは

facebookの広告ってアレです、普通にfacebook見てて時々プロモーション的に流れてくる記事のようなバナーのような。アレです。最近twitterでも流れるようになりましたけど、ああいうやつ、たぶん。
これには色々規定があって、ここのページに詳しく書いてあるんですけど例えば写真広告だと

・最大ファイルサイズ: 30MB
・最小幅: 600ピクセル
・最小高さ: 600ピクセル
・アスペクト比の許容誤差: 3%
・ファイルタイプ: JPGまたはPNG
・アスペクト比: 1.91:1～1:1
・解像度: 1,080 x 1,080ピクセル以上

なんて推奨規定があったりする。
ていうかこの広告を作った時は「画像に対して文字の比率が２０％未満」なんて規定があったと記憶してるんだけど、これはいつの間にか無くなったみたい。そういえば最近のfacebook広告見ると画像バーン！で説明テキストは記事の方で、というスタイルが多いと感じる。ただ出てくる画像も素敵なものが多くてテキストも魅力的で購買意欲をそそるものが多くてうっかりしてると詳細をクリックしてしまいそうになる。twitterやインスタのプロモーション投稿もそうだけど、最近のSNSのこういった広告、ほんと凄い。

まあそういうことを調べていって、今回のデザインの方向性も説明テキストを画像に入れてごちゃごちゃさせるより少ない言葉で魅せる方向性の方で行こうと決まった。

ラフ

ラフというか思いついたことをとにかく殴り書きで紙に表現してみたというか…。でも頭の中でただこねくり回しているだけよりは紙のうえで文字なり図形なりで表現していくと何を作りたいのかはっきりしてくるから不思議。
今回は「写真を大きく」「余計なテキストは入れない」ということをベースに作成しました。その点から見ると元画像はちょっとテキストが説明くさいかな？と感じたので簡潔な文にするためにちょっと削り、全体的にすっきりさせました。一応テキストの推奨文字数もあったのでそれも考慮。
あとまじまじと見て気付いたのですがこの写真、薬剤師ではない…よね…？どう見ても医者的な写真で薬剤師のバナーとしては不適切。なんで気づかなかった私？？？多分当時はこれが薬剤師の写真としては不適切だと「知らなかった」んだろうけど、こういう落とし穴的うっかりミスはやめよう。そして知識は常に身につけていよう。デザイン関係以外でも。

完成したもの

元のデザインだと画像と文字の割合気にしてのこともあって、妙なすきまが浮いていてそれがまた微妙な空間を生み出していたのですが、今回はそれをまず無くして薬剤師とわかる写真を大きく配置。そしてその横にメインの言葉を歯切れよく配置。全体的にすっきりとしつつ何が言いたいのかはっきりとわかるデザインに仕上げました。
また、今回作成するにあたっては時々yahooの右上で出てくるバナーたちも参考にしてたりします。あのバナー、妙に印象的で凄い記憶に残るんですよね。記憶に残るってことはそれなりに考えられたデザインなんだろうと、最近はこの辺りも参考にしてます。（というかこのあたりのデザイン分析とかもアウトプットで残してみたら勉強になりそうではあるので記事までとはいかなくともそういうデザイン系の分析はやってみたいな）

まとめ

今回はfacebook用広告として作成したバナーのリデザインということで、SNS…人目につかせるデザインというものを意識して作成してみました。
振り返ってみると、facebookにしろtwitterにしろプロモーションで出てくる画像ってよく考えられているというか、「何故か気になってしまう」というようなものが多くて、ただきれいなものを作るのではなく売上を特に意識しなければいけないということを考えさせられました。
そりゃあきれいでスタイリッシュであれば越したことないけど、この辺の塩梅は難しいですね。