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

はじめまして。

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

マミタスと呼んでください！

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

綾さんとみの編の柴山由香さんがトークイベントするので、バナーデザインお願い。
鬼フィードバックするから。

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

が。

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

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

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

一発で決める気でいくで。

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

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

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

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

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

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

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

〜４時間後〜

諸々仮ですが3案です。

・　・　・

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

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

コミュニティ狂女戦士

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

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

そしてこの言葉

名前のドロップシャドウが気持ち悪いから、どうにかして。

（鬼キタ！）

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

週の終わり金曜日〜
今日も元気にドロップシャドウ！！

— 土田真巳 (@MamiTsuchida) January 10, 2019

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

鬼に感謝。

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

タイトル、「コミュニティ強化の教科書」とかどうだろう？

”強化”が、教科書の”教科”とかかってるんですね！素敵！

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

（強女……強化書……めっちゃ強そう！強く、強くいかな！）

〜2時間半後〜

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

・　・　・

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

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

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

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

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

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

この日、これにて終了。

〜翌日、午後〜

NASU事務所での会話。

（「登場感」とはなんぞや……え！やばい。もう14時……）

そういえば、バナーどうした？

あ、えっと……。「登場感」で悩んでしまって……

どんどん出してこう！

は、はい！

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

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

（NASU事務所の仕事机。）

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

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

・　・　・

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

昨日のがよかった

（後退！！！）

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

これで、真ん中に名前にして見て欲しい↓

こんな感じ↓

色はCAMPFIREカラーを使おう。場所を使わせてもらってるし。ロゴも入れる。

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

（ふわわわわ……さすが……！）

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

〜30分後〜

1案のみですが修正行いました。

おお、よくなった！
A1ゴシックにしたらどうなる？
あと、あやさんとゆかさんの大きさバランス。綾さんちょい小さく

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

（ヤッタネ！！！）

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

〜10分後〜

A1ゴシックに変えました。

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

それでいけばゆかさんは、櫻田サロンの運営でもあるので、もし両方入れた方がよさそうであればと思いお伝えします

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

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

〜1時間後〜

（名前だけ明朝に……こ、これは！！！）

・　・　・

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

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

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

〜20分後〜

「対談」赤とグレーと

・　・　・

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

〜5分後〜

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

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

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

でも、一番最初のやつは、違うかも

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

・　・　・

サイズ、ちゃんとTwitterサイズになってる？

な……ってると……思います……（めちゃ不安げ）

この日、これにて終了。

〜翌朝〜

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

ただそれが言いたかっただけです。おはようございます。 pic.twitter.com/WdA6x7SFcH

— 土田真巳 (@MamiTsuchida) October 10, 2019

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

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

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

・　・　・

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

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

修正。

おっけ、日付価格のところの文字間隔が若干気になるけど。
綾さんの写真ピクセルたりてる？

（それは……オッケーと思っちゃいけないですね私）

修正。

2点調整しました。気になるでしょうか

よくなった！

パンパカパーン！！！

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

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

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

しかし。

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

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

ちょっと、データ直してみようか

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

ありがたすぎる！

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

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

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

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

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

まず、真ん中のこの境界線。

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

↓　調整後　↓

うわあー！！！めっちゃ変わった！！！！！
画像のつながりが自然！！！（興奮）

“違和感”を見つけるのが大事ね。

肩書き、ちょっと頭出てる

対談のこれは、Rいらない。シャープに

こっちは、もっと丸くていい。
まわりが丸いから、合わせて

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

↓　調整後　↓

ココとココは、（間隔）いっしょ？

はい……

そうか。あとは錯視調整……

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

↓　調整後　↓

↓（全体を見て確認）↓

うん。良さそうだね。

これ、点にしたくなるな

↓　調整後　↓

“なんか気になる”っていうのがポイントなんだよね。

時間って、ここまで大きくする必要あるかな

でも、右が空いちゃうのか……（元に戻す）

今、高さが合ってるか見てます。
CAMPFIREのロゴ使うの、いいよね……

（下段他の部分も調整）

これ（日）は……これ（●）とくっついてるのね？
日、ちゃんとセンターになってる？

こういう時ね。
まず[パスのアウトライン]かけて。[プレビュー境界を使用]にチェック入れる。フォントって、こう、上下ちょっとずれるから……

で、センターにする。

名前のとこは、風を通したいので…

↓（名前を小さく）↓

いや、さっきの方がいいな（元に戻す）

「化」と「の」の間がちょっと空いてる

漢字は、詰まって見えやすい

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

↓

はい。こんなところかな。

おぉぉ……ありがとうございます！！！

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

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

↓前田さんが更に調整したもの（After）↓

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

テヘッ

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

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

もっと早く作れればね。

これだ。

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

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

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

「いつまでも教わってる場合」おれはその考え好きくないのよね。人に頼っちゃいけない、自分の力でがんばれって、ナンセンスだと思う。信頼関係の中では人は人に頼るべきだし、お互いにとってそれがプラスだから。まみちゃんはNASUの社員なんだし、どんどん頼って利用して欲しい。

— まえだたかし (@DESIGN_NASU) October 11, 2019