見出し画像

「金持ち貧乏デザイナー Vol.2」バナーができるまで。

株式会社NASU アシスタントの土田と申します!!

今週末12月11日(金)、NASU主催で「金持ちデザイナーと貧乏デザイナー Vol.2」というオンラインイベントを行います!クリエイターのお金がテーマの対談、ぜひよろしくお願いします!


…で!

ここからが本題でございます。
今回のイベントバナー、土田が作らせていただきました!!

24_本当はこっちが正解

ギラッギラー!!!!!

ですが私ひとりの頭と技術では、このビジュアルには至れませんでした。今回、世界観づくり&クオリティアップのため、社長の前田さん&先輩デザイナー水上さんにたくさんのフィードバックをいただきました。
ということで、どんな過程を経てお金ジャブジャブ(!)に仕上がったか、いただいたフィードバックと画像の変遷をまとめることに致しました!

ーーーーー

まず私が考えたこと。

今回は「第2弾」。前回参加してくださった方に気づいてもらいたい!だから、第1弾の雰囲気を残しながら作ろう。

第1弾のバナーも自分が作らせていただいてたのですが、それがこちら。

画像1


この雰囲気を残しながら、「第2弾」とわかってもらうためには…
全体の構成やタイトル文字はそのままにして、色を変えたら良いんじゃない!?
最初に考えたのが、こちらです。


【第1形態】

01_サンタ

<土田のポイント>
第2弾なので、前回の雰囲気を残しながら作りました!
12月なので、赤!サンタ!どうですか!

前田さん「お、いいね!2をもうちょい大きくしたい。
あと帽子ちゃんとかぶらした方がいいよ。」

「いいね」いただきました〜!早速サンタ帽の素材を探し始めます。

前田さん「あ、違う。クリスマスより、お金もっと欲しい。」

おっ…

「お金もっと欲しい」。

前田さん「川端さんが札束、頭に乗っけてるとか、首のところから札束出てるとか。前田の両目に500円玉。お金を食べてる感じ。」

今思うと、この段階で既に完成イメージに近いフィードバック…。
私はここから、「お金もっと欲しい!」を合言葉にブラッシュアップを始めていくのでございました。


【第2形態】

02_お金増やす

<土田のポイント>
これでもか!ってくらい、お金でいっぱいにしました!

前田さん「めちゃくちゃいい!クオリティ上げていこう。
川端さんのメガネ。エンマークをメガネフレームにする。フレーム金色に口のお金埋もれてるから立たせるとか。」

やったー!!「めちゃくちゃいい」いただきました!

水上さん「前田さんの位置がもう少し右側で、川端さんと同じように切れてもいいかなと思います。あと名前の下のお札を無くして、口から何枚かポロポロ落ちててもよささそうです」

なるほど…!

世界観を突き詰める前田さんのフィードバックと、全体の構成を整えていく、水上さんのフィードバック。同時に受けられることで、思考偏ることなく向き合うことができる気が致します。

前田さん「「貧乏」の文字の表面ちょっとグラデ入れた方がバランス取れそう」

「金持ち」と「貧乏」、対極のものとして差をつけることしか考えてませんでした。バランス取るという考え方がなかった!


【第3形態】

03_お金A

<修正点>
・メガネを¥マークに。フレーム金色
・首の札束と口に挟んだお札のかぶりを解消
・前田さんの位置少し右に調整
・名前の下のお札なくす。何枚か落ちてるお札足す
・「貧乏」の文字、少しグラデ入れる

前田さん「あ、ごめん。¥メガネ、外側のフチを¥マークにして、目は見えるように。川端さんの顔は、見せたほうがいいと思うのよ…」

確かに。¥のメガネで、川端さんの顔完全に顔隠れてしまったではないか。

前田さん「金持ちと貧乏の文字、photoshopで少し立体感出してみたら。ベベルとエンボス」

ちょっと苦手気味なphotoshopを開け、文字の調整を行います。
(まだここから本格的にクオリティ上げていくのですね…前田さんこだわってる…今回のイベントへの気合いを感じる、、、!)


【第4形態】

05_お金B文字加工

<修正点>
・「金持ち」と「貧乏」、photoshopで立体感出す
・「デザイナー」の小さい文字が、「金持ち」「貧乏」それぞれのphotoshopの効果ではバランス良く見せられなくなったので、真ん中の「と」と同じフォント・色に変更してみた
・¥眼鏡、目は見せる、&もっと光るように修正
・前田さんの目の硬貨(500円玉)がメガネに対して負けてきたので、色味合わせて金貨に

前田さん「(笑)メガネと金貨いいね!メガネはフレームも金にできない?あとなんか、メジャー感落ちたきがする。文字をフォトショにしたからかな。 はっちゃん(=水上さん)そのへんよろしく」
水上さん「タイトルの表現がリッチになりすぎて、写真と差が出てる気がします。タイトルを前の状態に戻して、前田さんの色味を川端さんの黄色っぽいのに合わせてハイパスオーバーレイをかけ、お札と馴染ませたらよくなりそうです。」

タイトル文字…。
「photoshopで加工せねば」という気持ちが強くなりすぎて、平成初期の個人ホームページのごとく無意味なリッチ感を出してしまった。初心者か。めっちゃ恥ずかしい…。

水上さん「2人の写真が浮いてるので、タイトルそのまま、人物の生っぽさを取って周りに寄ていく、でもいいかもです...」

「文字加工と写真が合ってない」。世界観がちぐはぐなのだな。
それに気づいてない、自分の目の悪さよおぉ……

取り戻せ、メジャー感!


【第5形態】

06_文字加工抑える

<修正点>
・やりすぎたタイトル文字の加工を抑える
・人物写真を文字加工に寄せる(やや絵風に)
・メガネフレームも金に

水上さん「「Vol.2」は右上にアイコンっぽく配置してもよさそうです
お札みたいなアイコンが前田さんの頭の上に乗ってるとか・・・
前田さんの位置を川端さんに合わせてもう少し右で見切れる感じがいいです

「貧乏」の文字は前のほうがいいですね」

ウルトラ具体的。はい、そのまま修正しまっす!!


【第6形態】

07_はっちゃんA

<修正点>
・「貧乏」の文字を1回前に戻す
・Vol.2の位置変更。舞ってるお札の上に文字を乗せる形に
・前田さんの頭の上にお札があるので、川端さんの頭にも札束載せてみた
・前田さんの口のお札→コインに(指示はなかったですが変えてみた

水上さん「もりもり!!!
右上のVol.2お札は、他のお札と違ってもっと存在感が欲しいですね...!
お札に合わせてVol2の文字も変形させたほうがよさそうです」

右上の<お札&Vol.2>、改めて見ると確かに不自然極まりない…。

水上さん「・お札、お金の色味を黄色寄りに・お札がボケて見えるので、コントラストを上げる
・左上の金をキランとさせてもポイントになってよさそうあと余裕があれば、前田さんと川端さんの髪がベタっとなっているので、少しニュアンスを入れてもいいかもしれません。髪のニュアンス」

前田さんが、水上さんのこと「世界観を作るのがうまい」と言ってらしたのを、こうして具体的なフィードバックの中で改めてなるほどと感じます。こう、ひとつひとつを整えていくことが、世界観構築に繋がるんだな…。


【第7形態】

10_はっちゃんB

<修正点>
・お札の色味(青っぽい→黄)
・Vol.2の入れ方、背景のお札

水上さん「お札もっと黄味よりで...!
マゼンタがかってます」

【第7形態 その2】

11_はっちゃんC

水上さん「もう一声...!!!コントラストも上げてください〜!」

【第7形態 その3】

12_はっちゃんD

水上さん「いいと思います!
あっ光が欲しいです...!」

しまった。「金」の文字に光。
完全に忘れてしまって…、、、

【第7形態 その4】

13_はっちゃんfix

水上さん「OKでございます!!
前田さんもご確認お願いします」

OKでたー!!!
ありがとうございます!!!

前田さん、気になるところはありますでしょうか…。

前田さん「気になるところはね…、」

はい、
はっちゃんにめっちゃ見てもらったので、ほとんど修正ないと思いますが!!(自信)

前田さん「俺の顔の目のコイン。不自然なので、もっとリアルに。
・吐いてるコイン、もうちょっと光らす。¥のメガネと合わせて。あと暗いところをもう少し濃くするとか…コインの重みがないのよね。
・「と」と「デザイナー」の色、もっと黒に近くていい。
・名前と肩書き、書体はゴシック系で。
・川端さんの顔が黄色すぎる。
・背景の飛んでるお金は、乗算かな?下の赤が透けてるのが気になる。
・「貧乏」の文字、グレーを気持ち濃くして。
・「金持ち」と「貧乏」、これドロップシャドウかかってる?…もうちょっと入ってていいかもしれない。「金持ち」が、背景に馴染んでない。
・背景の赤、下が暗くなってて、うっすらグラデ入れるとか。
・「21:00ー」の「ー」、棒じゃなくて、ニョロにする。

…くらいかな。」

めっちゃ気になるところだらけでした…


【第8形態】

14_前田さんA

<修正点>
・前田さんの目のコインをリアルに埋まってるように見せる
・「と」の色もっと濃く。
・「デザイナー」は、「金持ち」「貧乏」の色に寄せた(土田判断)
・名前と肩書き、ゴシックに
・川端さんの顔の色調整
・背景の飛んでるお札、赤く透けないように修正
・「貧乏」の文字、グレーを気持ち濃く
・「金持ち」と「貧乏」影少し濃く。背景となじませる
・背景の赤、うっすらグラデ入れる
・「21:00ー」の「ー」を「〜」に変更

前田さん「背景のお金、前の方がいいね
貧乏の色も前のに戻そう。
俺の左目のコイン光らせて「金の文字」にあるやつみたいな。
vol2の下の札とって、普通にデカくvol2にしてみてほしい!

やってみて「前のに戻そう」は、検証。クオリティのために必要なことで、やったこと自体は無駄ではない。

前田さんまず、言われたことをそのままやってみる
そのあと、それが良くなかったら、改良する。そんな感じで進めて!
目を鍛えないと。
タイトル最初のイラレのやつの方がアリかもしれん。」

ドキ…。
フィードバックは自分が気づけていない部分を見てくれた結果の言葉なのだから、まずはそのままやってみないとだよな。


【第9形態】

タイトル文字「金持ち」を比較するため、2種類提出。

「金持ち」Photoshop文字↓

15_前田さんB_ps

「金持ち」illustrator文字↓

16_前田さんB_ai

<修正点>
・「貧乏」前の色に戻す
・左目のコイン光らせる
・Vol.2、お札ナシで大きく
・「デザイナー」文字戻す
・「金持ち」イラレ文字の方が良いかも

文字は上(photoshop加工)と下(illustrator加工)、どちらがよいでしょう…。

前田さん「下で。
左目も光らせて、もっとデカく
背景のグラデ濃すぎて「デザイナー」が読めない」

下の「デザイナー」、黒く潰れちゃって読めない状態。「言われたとおり」と「調整」の加減が取れてなさすぎて我ながら泣けてくる……。


【第10形態】

17_前田さんC

<修正点>
・目の光大きく
・背景グラデ、「デザイナー」が読める濃さに調整

前田さん「左目も!コインわかるくらいで光大きく」

ああ、両目とも光入れるのか!!何を勘違いしたか、ミギヒダリもわからなくなってしまっていた。(若干テンパっている)


【第11形態】

18_前田さんD

<修正点>
目のコイン、左右とも光を当てる。

前田さん「コインの光、右左同じ方向から光を当てよう。川端メガネパースつけすぎかな。頭のお札もパース強くぎる
21:00はもうちょい文字間開く
貧乏のベベルの厚さ少し下げる かねもちとあってない
肩書きのフォントの地位段階あげるウェイト」

パース…確かに。ひたすらお金を盛ることに夢中になりすぎて、雑になってしまった自分に反省。


【第12形態】

19_前田さんE

<修正点>
・コインの光、左右同じところに
・¥メガネのパースを浅く
・お札のパースを浅く
・「貧乏」ベベルが厚すぎる、「金持ち」に合わせる
・「21:00〜」文字間少し開ける
・肩書きのフォント、ウェイトあげる

と一度上を提出したものの、コインの光が気になって改めて修正。
どうも、コインが光ってるというか、目から光線出してるようになっちゃってるよなと…

【第12形態 その2】

20_前田さんE2

前田さん「おお、よくなった!
貧乏のテクスチャひとつ前がいい」

確かに、この「貧乏」ちょっとのっぺりしすぎてしまったかも。


【第13形態】

21_前田さんF

<修正点>
・「貧乏」のテクスチャを前のに戻す。

…前田さん、いかがでしょう!

前田さん「いい感じやけど、ちょっと生っぽいなぁと思って」

生っぽい…
生っぽい…

生っぽいって、なんだ。

水上さん「川端さんの頭の上のお札が生っぽいです🐟
ハイパスオーバーレイ!もしくはコントラストあげたら解消されます!!」

🐟🐟🐟

前田さん「写真ぽさから絵に近い感じ 外国映画のポスターみたいな」

わかりやすい。お二人ともありがとうございます!!


【第14形態】

22_文字以外に加工

<修正点>
・画像全体のコントラストをphotoshopで調整。「生っぽい」感をなくす。

どうでしょう…。(そろそろ、完成かな…ドキドキ)

前田さん「おいいね。ちょっとノイズ入れようか。」

まだこだわるですか!!イベントへの気合いよ!!!


「ノイズを入れる……、」

ここで考えました。
「そのまま画像全体にノイズかけると、文字が読みづらくなっちゃうのでは。バナーから文字全部取った状態の画像を作るか。」

しかしそれは完全なる余計なお世話だったことを、この時の私は知る余地はございませんでした。文字を除いた画像にphotoshopで加工。そのあとイラレに戻り、改めて文字を乗せました。


【第15形態】

22_文字以外に加工

<修正点>
・文字以外の画像全体にノイズを少し加える。

全体的にノイズかけた方がよかったでしょうか…?

前田さん「もぢも全体!」

はっ。やはり余計なことだった!


【第16形態】

23_文字が人に乗ってしまった

<修正点>
・改めて、文字も含む画像全体にノイズを少し加えた。

前田さん「よし!いい!ツイートするわ。」

や、
やったー!!!
ようやく完成!





…あ。

ま、前田さんちょっと待って!ちょっと待ってくださいー!!!

23_文字が人に乗ってしまった2

さっき余計なことしたせいで、レイヤーが混乱。
今まで人物の下にあった文字が、凡ミスで最上部に出てしまっていたのです!!!
あー!

前田さん、まだツイートしないでー!!!!!

前田さん「しちゃった。」


時すでにお寿司でした…
あああああ
自分で余計なことしたせいで…余計なことしたせいで…涙涙涙。



ということで、最初に前田さんが告知されたツイートのバナーは実は、

文字が上に出てしまったバージョンとなっております…。


かくして、16回の変態を遂げ、バナーは完成致しました!!!

【最終形態】

24_本当はこっちが正解

このTwitter用バナーは出回っていないのですが…
本当はこれが正解でございます!!!!!


前田さんと水上はっちゃんのフィードバックに、改めて感謝です。

前回のイベントがめちゃくちゃ盛り上がったから、バナーは「あまり印象を変えない、いじらない」くらいにしか思っていませんでした。でも、受け取る側の気持ちを考えたら。ただ「Vol.2」っていうんじゃ、興味をそそられるわけがない。これくらい「お金」のこと、「パワーアップ感」、イベントへの「期待感」。そういったものを感じられるバナーでなければ、告知に繋がらない。
ビジュアルはめっちゃおもろい感じですが笑、イベントバナーが果たすべき役割というものを、今回改めて真面目に考える時間になりました。

入社以降バナー制作は当然数えきれないほどやってますが、ここまでクオリティにこだわってフィードバックいただくことはあまりないので。たかがバナーされどバナー、今回多くの気づきをいただきました。

私はアシスタント2年目の課題山積みアシスタントでございます。もし似たような境遇の方いらしたら…今回のバナー制作の道のりに何か少しでもヒントを見つけていただけたら。嬉しゅうございます。


最後に改めて。
今週金曜日!イベントの告知をもう一度させてください!!

---
「金持ちデザイナーと貧乏デザイナー Vol.2」
12月11日(金)21:00〜23:00/オンライン/無料

---
社長・前田さんと、WEB制作会社nanocolor代表・川端康介さんのお二方が、お金についてがっつりトークします!
Vol.2とは掲げておりますが、今回で最後…との噂でございます。
稼ぎたいクリエイターの方、必見にございます。
ぜひ!!!

お申し込みはこちら!
↓↓↓↓↓



監修:浜田綾
(初稿からチェックいただき本当にありがとうございました!!!🙇‍♀️🙇‍♀️🙇‍♀️)

NASU Co.,Ltd.




読んでくださってありがとうございます。