NASU 鬼のデザイン研修 【バナー編】

NASU

 

 

はじめまして。

40歳・元パン屋。人呼んで大型新人、土田真巳(つちだまみ)と申します。10月よりNASUで働かせていただいております、よろしくお願い致します。

土田(マミタス)
マミタスと呼んでください!

 

入社から数日。最初の案件が落ち着きホッとしていたある日、
前田社長より指令をいただきました。

 

前田社長
綾さんとみの編の柴山由香さんがトークイベントするので、バナーデザインお願い。
鬼フィードバックするから。
鬼フィードバックとは
その名の通り、鬼のように厳しく細かいフィードバックのこと。前田さんがオーナーのオンラインサロン、前田デザイン室で生まれた言葉。
サロン内で前田さんは、相手のやりたい方向を汲み、最低限押さえるべきことにポイントを絞り優しくアドバイスしている。オンラインサロンは仕事じゃない。失敗していい場所、楽しむ場所という考えがあるから。
しかし、メンバーの中にはデザインに対する向上心が高く「容赦ない本気のフィードバックください!」という方もいる。そういう方へ向けたガチの返しが、“鬼フィードバック”(略して“鬼フィー”)。

 

が。

ここは、
株式会社NASUである。

わたしは、
その社員である。

鬼フィーは当然です!気ぃ引き締めていこ。いいか、私よ?「どうせいっぱい指摘を受けるから」という前提なんかで作るなよ?

マミタス
一発で決める気でいくで

 

こうして、私のデザイン研修は始まりました。

 

これは、私が前田さんの鬼フィードバックをいただきながらバナーを完成させるまで、
そして、さらにその先、前田さん自ら最終調整をして仕上げるまでの、すべてでございます。

 

 

マミタス、鬼フィードバックでバナーを作るの巻

 

まず、分かってる情報を整理しよう。

柴山由香さん箕輪編集室の運営リーダー。
浜田綾さん、前田デザイン室の初代運営リーダー。

みの編、前デ、どちらも、開設以来常に活発に動き続けているオンラインサロン。お二方はそのリーダー経験者、これらのサロンを築き上げた人と言っても過言ではない。すごいふたりの対談だ!

よし。
情報少ないけど、案出していこう。

 

〜4時間後〜

 

マミタス
諸々仮ですが3案です。

・ ・ ・

・ ・ ・

 

あと入れる情報あるかな?いや、詳細決まらないとわかんないし。
出来るだけ方向の異なるものを、という考えで出した3点。ピンクのやつは、イメージと違うかなぁ。でも、上の2つだけじゃなんか似てるし。こういうのも出しといたほうがいいよね。

まえだおに
真ん中の迫力がある感じがいいね。
下の女性っぽいのはだめ。
「コミュニティ運営、強女2人」でいこう。
ただ、名前のドロップシャドウが気持ち悪いから、どうにかして。
イベントタイトルも勝手に入れよう。まず。
最強コミュニティの作り方とか。

コミュニティ狂女戦士

 

【反省点】
・ピンクの案、捨て案の気持ちで出してたかもしれない。決める気じゃないなら出さないほうがよかったかもしれない。

・詳細決まってないなりに、完成に近いイメージで制作しようと心がけるべきだった。タイトル、何か入れればよかった。

 

そしてこの言葉

まえだおに
名前のドロップシャドウが気持ち悪いから、どうにかして。
マミタス
(鬼キタ!)

私。前の職場で制作していたものが、ドロップシャドウの二重・三重当たり前!みたいなデザインでして……。いち時期、挨拶言葉が「今日も元気にドロップシャドウ」だったほど。

つい、なんでもかんでもこれで済ませちゃう。良くないなぁとは思ってたけど……やっぱ、癖ついちゃってたんだな。ズバッと斬っていただいて、大変すがすがしい気持ちにございます。

マミタス
鬼に感謝。

 

このやりとりをしていた時間、イベント詳細についての話し合いが同時に行われていました。

 

前田社長
タイトル、「コミュニティ強化の教科書」とかどうだろう?
綾さん
”強化”が、教科書の”教科”とかかってるんですね!素敵!

 

……なんていう会話が。ふむふむ。

 

マミタス
(強女……強化書……めっちゃ強そう!強く、強くいかな!)

 

〜2時間半後〜

 

マミタス
顔をより大きく使うこと、色で女性らしさを出さないことで迫力を狙いました。イメージ→強め。二人の最強タッグ。東の由香、西の綾。
最後のは、黒の圧で強さを意識。

・ ・ ・

・ ・ ・

・ ・ ・

・ ・ ・

 

強いインパクトといえば、大きさでしょう!
写真、名前、タイトル、大きく使えば強くなるよね。

まえだおに
いいね、たくさん案をだすのすばらしい。

「強化書」だけいきなりきてもわからない
教科書とかけているのが。
だから、俺「コミュニティ強化の教科書」と書いた。
「コミュニティ運営完全強化マニュアル」もありかも。
顔が大きすぎるのは顔を見てしまいすぎるから、ちょいひきがいい。
俺からしたらこの2人の対談は待ちに待った対談。というのも、世間のコミュニティについて語っている人より、あまり語っていないのにかなりの実践的なふたりだから。
「登場感」を打ち出したい。

 

【反省点】
・確かに前田さんは「コミュニティ強化の教科書」と言っていた。まだ決定ではないけど。そうにせよ、読んでもパッと理解しにくいものを大きく打ち出すのは間違っていた。私、何のために作ってるか見失ってない?いかんな。

・写真大きくして目立たせる=強い、とは、改善の手段が雑すぎた。

・「登場感」……課題だな。

この日、これにて終了。

 

〜翌日、午後〜

 

NASU事務所での会話。

マミタス
(「登場感」とはなんぞや……え!やばい。もう14時……)
前田社長
そういえば、バナーどうした?
マミタス
あ、えっと……。「登場感」で悩んでしまって……
前田社長
どんどん出してこう!
マミタス
は、はい!

続けて前田さんは、こう仰った。

https://twitter.com/DESIGN_NASU/status/1179684636542160897?s=20

(NASU事務所の仕事机。)

いま、
社員として、とても大切なことを聞いたぞ。
忘れないようにしよう。

 

 

さあ、途中でいいからどんどん出すんだ私!
決め手に欠けると悩んでいた3案だが、UP。

・ ・ ・

・ ・ ・

 

正直、「登場感」をどうデザインで解決すれば良いのか答えは見つけられなかった。背景取って人物だけにしたら、登場感出る?と考えたのが一番下のやつ。方向性を狭めてはいけないかと思い、フォントはあえて今までの流れと異なるものを使用した。

まえだおに
昨日のがよかった
マミタス
(後退!!!)

【反省点】
いつまでもいろんな案出しゃいいってもんじゃなかった。後退しとるやないけ!

 

 

まえだおに
これで、真ん中に名前にして見て欲しい↓
まえだおに
こんな感じ↓
まえだおに
色はCAMPFIREカラーを使おう。場所を使わせてもらってるし。ロゴも入れる。

タイポグラフィがきになる。A1明朝太らせてる?太らせないやつで
モデレーターじゃみぃ

マミタス
(ふわわわわ……さすが……!)

【反省点】
・仰る通りです。ところどころ、文字太らせておりました。ちょっとだけですよ、ほんのちょっとだけ……0.5ptくらい……
いや、それを”ちょっと”と思ってるこの感覚がダメなんだ。世の中のデザイナーの皆さますみません。正直、線で太らすことに対して今まで何も感じておりませんでした。基準変えな。

 

〜30分後〜

 

マミタス
1案のみですが修正行いました。
まえだおに
おお、よくなった!
A1ゴシックにしたらどうなる?
あと、あやさんとゆかさんの大きさバランス。綾さんちょい小さく

いいね。メジャー感出てきた。

マミタス
(ヤッタネ!!!)

具体的になってきた。この方向を大事にいこう。

 

〜10分後〜

 

マミタス
A1ゴシックに変えました。
まえだおに
名前明朝のこしでみたい
綾さん、箕輪編集室元運営も入れようか。
あと、前田デザイン室元運営リーダー
じゃみぃの角丸を丸もう少し小さく
時間の「〜」の両端が空きすぎている
肩書きはゴシック、
綾さんの顔気持ち小さく
名前の下に、クロスマーク、「対談」といれたい。何やるかわからないので。腕相撲、剣のマーク?
綾さん
それでいけばゆかさんは、櫻田サロンの運営でもあるので、もし両方入れた方がよさそうであればと思いお伝えします

【反省点】
・おふたりの存在だけアピールしてて、何のイベントだか分からなかった。根本的なことが抜けていた、また目的見失ってるじゃないか!

・NASU広報でもある綾さん、流れを追ってくれていて補足してくださった。ありがたい。

 

〜1時間後〜

 

マミタス
(名前だけ明朝に……こ、これは!!!)

・ ・ ・


名前だけ明朝に戻したら、画面がキュッと締まった。名前とタイトル、フォント合わせることしか考えてなかったよー!そうかー、こういうこともあるのかあああ。こういうのを、画像見て、脳内で瞬時に処理してディレクションできるなんて……やっぱ前田さんすごいんだなあああ。

まえだおに
いいね。バツを小さくして、対談大きくしようか。
角丸小さく
書籍っぽくて本格感ある

 

確かに♪本格感、あるある♪
いやぁーいい感じになってきたじゃないすかぁー!

 

〜20分後〜

 

マミタス
「対談」赤とグレーと

・ ・ ・

まえだおに
ごめん、名前の下、風を通した方がいいな。上の剣くらいの大きさで。

 

〜5分後〜

 

「対×談」の文字を小さくしてUP。

まえだおに
対談の位置がきになるけど一旦これで、メッセンジャーに投下して。
・バナー両はしに、でかく「対談」といれて、頭の裏レイヤーに。
・今の「対談」を座布団ひく
・対談を英語にする。TALK EVENT 筆記体でさらっと
・対談を名前の上に持ってくる。下は赤い座布団ひく

由香さんと綾さんに、使用画像や内容を改めて確認。指示内容の反映。

まえだおに
でも、一番最初のやつは、違うかも

 

 

最初のやつ以外の3案を作ってUP。

・ ・ ・

・ ・ ・

まえだおに
サイズ、ちゃんとTwitterサイズになってる?
マミタス
な……ってると……思います……(めちゃ不安げ)

この日、これにて終了。

 

〜翌朝〜

 

バナーサイズが心配になってきた。気付くなら早いほうがいいと、同サイズの画像を作ってテスト。

よかった。文字も端から端まで入れてみたけど、ちゃんとスマホでも表示されてる。
(それにしても、投稿する内容もうちょっと他にあったよな……)

 

 

昨日最後に作った3案を見ていたら、「対×談」と表記していたのを勝手に「対談」に変えてしまってたことに気づいた。

マミタス
「対談」の間の「×」外すことなかったと思い戻しました。

・ ・ ・

まえだおに
もうちょい幅広げよう、赤座布団
浜と柴の両端合わせ
対談は上の方がいい気がする
しゃみい、もうちょいだけかどまる

 

【反省点】
・矩形、ただ置くんじゃなくて、どこかに合わせた方が気持ちいいよね。なるほど。

 

 

修正。

まえだおに
おっけ、日付価格のところの文字間隔が若干気になるけど。
綾さんの写真ピクセルたりてる?
マミタス
(それは……オッケーと思っちゃいけないですね私)

 

 

修正。

マミタス
2点調整しました。気になるでしょうか
まえだおに
よくなった!

 

 

パンパカパーン!!!

めでたく、イベントバナーが完成いたしましたあ!

 

 

最初の案から完成まで、25枚。

そのうち半分は、最終案の微調整。ここまでやるんだということを、自分の基準にしていかねば。つい感覚でやってしまう癖があるのだけど、これからは、ひとつひとつの要素をもっと大切に見ていこう。いやぁ、こんなメジャー感ある正統派バナーを作れた自分が嬉しい。勿論前田さんのフィードバック無しではここまで辿り着かなかったわけですが、ものすごい達成感!

 

 

しかし。

研修は、ここで終わりではなかった!

 

 

 

前田社長、鬼調整するの巻

 

前田社長
ちょっと、データ直してみようか

前田さんが、画面共有しながらデータを調整してくださることに。
先ほど完成したのは、“前田さんのフィードバックを受けながら、土田が制作したデータ”。これを、更に前田さん自身が動かしていただくとなったら、どうなるのか。

マミタス
ありがたすぎる!

 

とは言っても、
あそこまで詰めたんだから、
もう直す所などないのでは。

 

改めて。先ほどの流れで完成したバナーがこちらです。

 

ここまで記事をお読みくださった方は、グラフィックデザインの仕事や経験おありの方が、多いのではないかと思います。
あなたは、このバナーのどこが気になりますか?どこを直しますか?

 

前田社長
画像見てるだけだと気づかないんだけど、自分のPCでデータとして開いた時に、見えてきたりするんだよね……

 

(以下、実際はビデオチャットにて画面共有しながら直していただいた流れを、メモと記憶を元に再現しました。)

 

前田社長
まず、真ん中のこの境界線。
前田社長
ふたつを1枚の画像にして、真ん中なじませるのもアリなんだけど、photoshopでいじるの面倒だから。この「山」の中心に合わせて……

↓ 調整後 ↓

マミタス
うわあー!!!めっちゃ変わった!!!!!
画像のつながりが自然!!!(興奮)
前田社長
“違和感”を見つけるのが大事ね。
前田社長
肩書き、ちょっと頭出てる
前田社長
対談のこれは、Rいらない。シャープに
前田社長
こっちは、もっと丸くていい。
まわりが丸いから、合わせて

 

前田社長
矩形の中に入れる時は、縦と横、同じ間隔で開ける。

↓ 調整後 ↓

 

前田社長
ココとココは、(間隔)いっしょ?

マミタス
はい……
前田社長
そうか。あとは錯視調整……

 

前田社長
じゃみぃ、もう少し大きくてもいいのかな

↓ 調整後 ↓

↓(全体を見て確認)↓

前田社長
うん。良さそうだね。
前田社長
これ、点にしたくなるな

↓ 調整後 ↓

前田社長
“なんか気になる”っていうのがポイントなんだよね。
前田社長
時間って、ここまで大きくする必要あるかな
前田社長
でも、右が空いちゃうのか……(元に戻す)
前田社長
今、高さが合ってるか見てます。
CAMPFIREのロゴ使うの、いいよね……

(下段他の部分も調整)

前田社長
これ(日)は……これ(●)とくっついてるのね?
日、ちゃんとセンターになってる?
前田社長
こういう時ね。
まず[パスのアウトライン]かけて。[プレビュー境界を使用]にチェック入れる。フォントって、こう、上下ちょっとずれるから……
前田社長
で、センターにする。
前田社長
名前のとこは、風を通したいので…

 

↓(名前を小さく)↓

前田社長
いや、さっきの方がいいな(元に戻す)
前田社長
「化」と「の」の間がちょっと空いてる
前田社長
漢字は、詰まって見えやすい

(タイトルを1文字ずつカーニング。最終調整)

 

 

前田社長
はい。こんなところかな。
マミタス
おぉぉ……ありがとうございます!!!

 

 

 

前田さんの調整が終わりました!!!
では、その違いを比べてみてください。

 

 

 

↓鬼フィードバックで土田が制作したもの(Before)↓

 

↓前田さんが更に調整したもの(After)↓

 

 

どおおおですか!
上と下、ぜんっぜん違くないですか!?!?
魔法のよう!いやもうこれは魔法だ。

 

マジカルマエディ
テヘッ

 

Afterを見てしまうと、Beforeが違和感の塊に見えてきてしまう。でも、Beforeだけ見てると「もうこれ以上いうことない!」としか思えない。比べればわかるんだけど、比べるものがなかったら、そもそも違和感に気づけない。これを、自分の力で気づけるようになりたい!当たり前だけど、「私まだまだだな」ってのを、痛感致しました。

 

前田社長
でもね、今回のバナー、良かったと思うよ。

もっと早く作れればね。

 

これだ。

 

やはり。最初からわかってた。どう考えても時間かけすぎだった、終わるまで言わないでいてくださったけど。ここ、一番大事かもしれない。いや「かもしれない」じゃなくて一番大事だわ。

新人だからって、いつまでも甘えてるわけにはいかん。今回、すごく勉強になってありがたかったけど、正直こんなんもう、恥ずかしいったらありゃしない。早く、前田さんに頼らずともできるようにならねば。

そう感じながら、この研修を終えようとしていた私でございましたが。

 

マミタス
(全マミタスが泣いた)

 

研修のラストに、仕事に対する姿勢まで直していただき。とにかくNASUでがんばっていこうという気持ちが、改めて満タンになったのでございました。

人呼んで大型新人・土田真巳(ネタとして自ら申しておりますがこれホントは勿論めっちゃ恥ずかしいです)、通称マミタス。まだまだこんなド新人デザイナーでございますが、これから精進してまいります。皆さまどうぞ、よろしくお願いいたします!

 

 

お知らせ

今回バナー制作をさせていただいた、柴山由香さん・浜田綾さんのお二人によるトークイベント
「コミュニティ強化の教科書」は、11月10日(日)東京・渋谷CAMPFIRE にて開催されます。

オンラインサロンでコミュニティマネージャーとしての実践経験を積んできたお二人による対談。

・コミュニティマネージャーとはどういう人か
・コミュニティが強くなる瞬間とは?
・コミュニティでの黄色信号とは?
・仕事ではないからこそ「好き」「やりたい」を徹底的に「応援」

などをテーマに、コミュニティマネージャーの役割や求められるスキルについて語り尽くします。

チケットお申し込みは、こちらより!

 

 

 

監修:前田高志浜田綾
文・イラスト:土田真巳

 

前田デザイン室は現在「満席」です。

悶々としているクリエイター集まれ!