クリエイティブ

バナー制作って奥が深い!!はじめてのバナー修正記録

お久しぶりです、きりんたんです!

100記事超えて、次は記事の内容をもっと濃くしていきたいね~なんて話してる内にすっかり記事が書けなくなっておりました。

その代わり(ではないけれども)、HTML・CSSの勉強とBlenderを使った3Dモデリングの勉強がだいぶ進歩!

FX自動トレードのLPは形にはなったものの、ちょっとやっぱり粗が目立つ…

一応中学生の頃にも自分のサイト作ってたので、今回ちょっとうまくいかなくて落ち込み気味。

きりんたん
きりんたん
謎の自信を信じすぎてた

ぞうさん
ぞうさん
これ可愛さの極みだよね

一方3Dはこんな感じなので、2日目にしてこれならだいぶいいのでは?と自画自賛しています。

はらぺこぞうさんのお友達もちょうどHTML・CSS・JS・PHPあたり勉強しはじめるそうなので、負けないように頑張ろうとちょっと気分上がってきましたね。頑張る!

さて本日の本題は、以前作成したバナー広告の修正です。

バナー制作 練習 難しい
デザイン初心者きりんたん、初めてのバナー制作~Illustrator(イラストレーター)でできる?コツやポイントは?~バレンタインはトリュフチョコを量産して、そのうち一つにキムチを混入。 部活仲間に同時に食べてもらう「ロシアンルーレットチョコ」を作って...

こちらのバナー、モモンガオンラインサロンの課題でした。

ありがたいことに、課題提案者の佐藤葦汰さんからアドバイスを頂きました。

きりんたん
きりんたん
そういうアドバイス?フィードバック?みたいなものをCB(チェックバック)と言うらしくて、きりんたんは初耳単語だったけど恥ずかしいので知ってるふりした。(恥ずかしい)

今回はそれを受けて、バナーを修正した過程を記録しておこうと思います!

メインコピーのデザイン

バナー制作 バナー広告 デザイン
  • 「差」も色を付けてみる
  • ハートを射抜くならコピー位置を下げるのもあり

まずはメインコピーのデザイン。

そうなんですよ~~~~~差!!差、このコピーにおいてどう見ても重要単語なのです…

ということは色を付けたりしたい…と思ったのですが、もうこれ以上色が増えるときりんたんの手には負えないと思ってやめていました。

デザインって大体3色でまとめるといい感じにまとまるじゃないですか。

最近ちょっとTwitterで話題だったこのカロリーメイトの広告なんかもその最たる例だと思います。

配色比率については「70:25:5の法則」がすごく有名です。

「メインカラー70%、サブカラー25%、アクセントカラー5%」で3色を配色するとすごくいい感じになるってやつです。

で、色を増やしたいときはそれぞれの範囲内で分割していくとうまくいくのだそう。

配色 バナー広告 デザイナー

きりんたんはこんな感じで考えていました。

きりんたん
きりんたん
この図描いてて気づいたけど、これなら「チョコ」の文字サブカラーにするのおかしくね…???????

アクセントカラー白を徹底したほうがいいかもしれないですね。いっそコピーの色分けはしない方が目を引きそう。

で、コピーの位置について。

デザインの4大法則に「近接」というものがあって、それに沿うと「チョコ」の文字の近くにチョコを置いた方がいいんですよね。

デザインの4大原則

  • 近接
  • 整列
  • 強弱
  • 反復

そのためにはチョコの画像とコピーの画像の位置を入れ替える必要があります。チョコの文字の下には文字が詰まっているので…

でも、入れ替えると「ハートを差の下線で打ち抜きたい」という希望も叶います。佐藤さんすごい。

バナー広告 デザイン初心者

しかもダイナミックさが増した気がしますね!

きりんたん
きりんたん
アクセントカラー(白)の分量が多い気もしてきた。あとで微調整しよう。

チョコの画像

バナー広告 バナー制作 デザイン
  • メインコピーとフッターに隠れて、全体の見えるチョコがない
  • メインコピーの後ろにホワイトチョコが来て色被りしている

既に前項目で画像が差し変わっていますが、画像選びなおしました。

画像選びがただただ難しい…最終的にはそのまま使わず、背景から切り抜いた後、チョコもいくつか個別に切り取って配置しなおしました。

画像が私に合わせろ精神、大事ですね。

コピーとの色かぶりは先ほどレイアウトを変更して解決しましたが、アクセントカラーの分量を増やしてしまうのも困るのでPhotoshopでホワイトチョコの色を変えました。力業。

フッター

バナー制作 バナー広告 デザイン
  • 配色が10代男子ターゲットにしては上品・男子感が弱い
  • 文字と背景色のコントラストが弱い

次は配色です。

先ほどの70:25:5の法則の図ですごくわかりやすくなりましたが、10代男子向け感が皆無。びびる…

しかも致命的なことに、「あの子が喜ぶチョコを見つけよう」の文字とフッター背景色の色が似ていて見づらいです。

きりんたん
きりんたん
自分が読めるからそれでいい、はだめですね。気をつけて考えよう…

配色について、佐藤さんからのアドバイスでは

「メイン部分で受け手の女の子を表現したので、下部ではチョコを買う側・あげる側の男の子を表現したいですね~」

と。

きりんたん
きりんたん
なるほど過ぎて首もげた。

これは誰に向けているのか?何を表しているのか?ということと、小さな画面の中でもストーリーを考えることの大切さに気づきましたね…すごい。

先入観で「青系は合わないよな~」と思っていましたが、よく考えれば女の子の着ているブレザーは紺。

全然突拍子もない色じゃないんですよね~~~~アア~~~~~~~

きりんたん
きりんたん
謎の先入観がつきがちなのがきりんたんの悪い癖

というわけで紺色にしたものがこちら。

バナー制作 デザイン 

ベースカラーもよりビビッドなピンクに変えて、若さ・勢いを表現してみました。

ちなみにこのピンクは配布されたロゴの色です。

白の方が使いやすいなあ、使うのが難しそうなピンクだなあと思っていたけど、ロゴの色を生かして配色を考えるのも楽しいですね。

まとめ

バナー広告 バナー制作

以上、バナーの修正記録でした。

並べてみると元々自分ひとりで作った左側、インパクトのなさがすごい。

こういうのはいろいろな人のバナーを見て根拠を考えたり、何度も練習したりして覚えていかないといけないですね。

まだまだ伸びしろがいっぱいだと思って精進します。

ではでは!