見出し画像

BREAKING DESIGN 備忘録 | 未経験ネキ

sachiko

こんにちは。未経験ネキことさちこと申します。

今回、QUOITWORKSのムラマツさんのYoutubeチャンネル・ムーテレの「BREAKING DESIGN」という企画に参加させていただきました。

せっかく機会を与えていただいたので、デザイン完成までの記録を残しておこうかなと思い、noteを始めました。

文系出身なのに国語が苦手という人間が書き留める文章なので、拙い点も多いかと思いますが、読んでいただけると幸いです！

自己紹介

そもそもお前誰やねんって話なので手短に紹介します。

出身：三重県
前職：BIエンジニア
デザイン経験：デジタルハリウッドSTUDIO by LIG(略してデジLIG)にて
　　　　　　　8か月勉強。実務は未経験。
ポートフォリオ：https://sachiko-ogata.com

BREAKING DESIGNとは

この記事を読んでくださっている方は既に企画の動画を見ていただいている方が多いかなとは思うのですが、BREAKING DESIGNとは平たくいうと「デザインでの戦い」です。

詳しくは動画にありますが、3名のWebデザイナー歴3年以下の参加者が同じテーマで１か月かけて架空サイトのデザインを作成して、順位を競う企画です。ちなみにテーマは株式会社LIGの採用サイトです。

なぜ応募したか

そもそもなぜ未経験の身でこの企画に応募したか。

端的にいうと「焦り」と「勢い」です。

ちょうどデジLIGを卒業して転職活動中だったのですが、デザイナー職では選考に進めないという壁にぶち当たっている時に、この企画の募集を知りました。

自分のポートフォリオの作品を見ていても、どうも素人っぽさが拭えないと感じており、そもそものデザイン力をもっと向上させないといけないとも感じている時期でした。なので「あのムラマツさんにレビューしてもらえる！？多分受からないけどとりあえず応募しよ！」と募集開始の次の日にDMを送りました。

昔から自分のことに関しては感覚派だったので、まさか選ばれるとも思わず、もし選ばれてもどうなるかと深く考えていなかった故の謎の行動力でした。。今思えばそれが良かったのかもしれない。

そんなこんなで、
参加させていただくことが決まり軽くパニック(1回目)
相手がneccoさんとbaqemonoさんと事前に聞き、またパニック(2回目)
参加者決定ツイートとポートフォリオが想像以上の反響で大パニック(3回目)
とまあこんな感じで、現実味がないままオリエンテーションの日を迎えました。

ベンチマーク選定

オリエンテーションの際に各々ベンチマークを発表しました。

LIGブログを読み込み、「クリエイターファースト」「アウトロー」というところを表現できるデザインにすると決めたはいいものの、ベンチマークを探す時点で既に私は壁にぶち当たりました。

海外サイトを全然見てこなかったから、どうやって参考にしたらいいか分からない！しかも大人な会社だけどメンタル的なアウトローってどう表現すればいいのか分からない！

主にこんな感じの悩み方です。
国内サイトばかり見てきた自分、そして圧倒的にインプット量が足りない事実を改めて認識して後悔ばかりでしたが、凹んでいてもしょうがないので起きている時間はひたすらAwwwardsからベンチマークを探していました。

動画を見ていただければお分かりでしょうが、特に情緒的な方向性がしっかり定まらず、オリエンテーション後1週間弱探し続けていました。

そしてデザインの手法的なところばかりに焦点を当てていると指摘いただき、やっと「印象を参考にする」ためのベンチマークだと気づきました（遅い）

初稿〜中間発表

まず、これが初稿から中間発表までのデザイン変遷です。

今見ても、悩みながらとりあえず手を動かしている感がすごいですね。。

初稿はFVで「クリエイターみんなで仕事するの楽しいよね！」を情緒的に、そして次にメッセージを強く見せたい！と思い、チームっぽい写真はこれかなと安易に持ってきたフリー画像を使ってみたり、参考サイトの構成やあしらいを参考にしてみたり。

この時点で他の2人に比べて進捗が圧倒的に遅れをとっていたため、何かを出さないとの気持ちが強く、苦しいタイミングでした。

そして初稿でいただいたフィードバックはこんな感じ。

・とにかく素人臭いので、絶対手ぐせでやらないこと
・参考にして組み合わせる、整える。これを徹底で。
・中央を揃えるなど細かいところが雑
・こういうデザインにしたいって逆算で写真を撮ると良い

「ざっくり作る」≠「とりあえず作る」。
そして徹底的に何が素人っぽいのかを比較して、参考にしていく。
初学者にはまず必要なポイントはそこだと改めて認識しました。
（頭で理解しているつもりでも、実行できないと意味なしですね）

そして私はせっかくアドバイスをいただいたのに、大きな失敗をこの後やらしました。それはデザインの全体イメージを固め切る前に写真撮影を行ってしまったこと。

写真はLIGで撮らせていただけないかと思い、Twitterで繋がりのあったLIGのまこりーぬさんに場所のお願いをし、快く了承いただきました。被写体はデジLIG繋がりのお友達にお願いし、こちらも皆が一肌脱いでくれました。（本当に大感謝です。。泣　ありがとうございました！！！）

ただ私自身が焦りすぎて、デザインの完全な方向性が固まる前に撮影へ。「チームっぽいビジュアル」を探してこんな感じで撮りたい、と撮らせていただき最終的にはデザインに落とし込めたのですが、手順が逆でしたね‥。反省しております。

撮影のディレクションも初めてで、的確に指示を出したりも上手くできず難しかったです。ちゃんとビジョンを明確にして、次こういう機会があれば今回より上手くできるようになりたいです！（あと写真ももっと上手くなる）

そして初稿から中間発表までのフィードバックは動画でいただいたものがほぼ全てです！

色々試した気でいましたが、この時期圧倒的に足りなかったのは2つ。

①頻繁に進捗を確認すること。
②参考レベルが甘すぎ。特にFVはギャラリーサイトに並べて遜色ないかもっともっと追求していくべき。

他にもカーニングを感覚でやらない、コーポレートサイトと印象を変えない、写真の加工がちぐはぐ、文字をただ並べただけでは言いたいことが何も伝わってこない、等々課題満載だったのですが、上記の①②をもっと行えていれば進みも全然違ったなと感じております。

ちなみに動画でフィードバック受けている姿が割とケロッとしているね、と言っていただくことがあったのですが、ちょこちょこ心折れてます！笑

ただ自分には知識も経験もほぼない状態なのは承知の上だったので、折れても「指摘されて当たり前だし、フィードバックしてもらえるだけものすごいありがたいわ‥。次行こう次」とある意味開き直ってすぐ復活できるタイプで良かったなと思います。（あとはハイキューなどなどのアニメが私のメンタルを救ってくれました！！ありがとう日本のエンタメ！）

中間発表〜最終稿

そして中間発表から最終稿までの流れです。

中間発表でのフィードバックからまず意識して修正したことは以下です。

・フォントの太さ、サイズを揃える
・グリッドをキッチリ揃えすぎない
・アウトローな表現を強く意識する
・FVダサすぎ問題をとにかくなんとかする

フォントは海外サイトのジャンプ率を参考に、グリッドも参考サイトの配置と目線の流れに沿っている余白を参考に修正していきました。

FVについてはPinterestからアウトローな表現を探してみてとムラマツさんからアドバイスいただき、アウトローを主題にした映画のポスターやグラフィックを参考にしFVの方向性を決めていきました。（ちょっと前進）

最初はコーポレートサイトと合わせる、チームの多様性を表現するの目的で5色のスプレーをイメージしましたが、スキル不足も相まってスプラトゥーンのようなイメージになってしまいました。。

スプラトゥーンにしか見えなくなった案

そこから色々こちゃこちゃとこねくり回していたのですが、いまいちアウトローな感じが出ず、そのタイミングで直接フィードバックと喝をいただくことになりました。（これが最後の動画でめっちゃ怒られると思ったって言っていた回ですw）

ここでカラフルな方向性をやめ参考画像のレベルにとにかく近づける意識をしていくこと、スピード感をもっと上げていくことを指摘いただきました。

その日は土曜日だったのですが、ムラマツさんは私にレビューした後に動画の編集をされていてこの企画で間違いなく一番大変なのはムラマツさんなので、絶対中途半端なものは出せない‥！と思い、倒れる寸前までやると決めました。

この時点で最終発表の１週間前でした。

それまでは3時くらいには寝ていたのですが、ここから発表当日までは朝7時に寝て11時に起きるというまあ不規則な生活を送っていました。笑

そしてメンバーをFVに使用した案を作成し、以下のようなレビューをいただきました。

この時のFV

・ファーストビューはまだ若干ダサいので、撮影した写真にとらわれず、同じ構図で色々試してほしい。
・2番目のセクションはファーストビューとのつながりが弱く、白黒とコントラストが強すぎるから中間色や、もっと動きで繋がる連携がほしい。
・全体的に写真が少ない。オフィスの写真とか働くイメージがつきにくい。 ・全体的にまだ細部が甘いので詰める
・下の方までテイストを少し反映した方がいい

そこから写真をメンバー個人にする、２番目のセクションにも画像を置いてみるなど試してみましたがちょっとくどい印象になりメッセージだけにする、オフィスをイメージさせる画像をセクションの切り替わり時に入れるなど修正していきました。（この時点で発表4日前）
そしてようやく出せるかな…！？というレベル感に近づいてきました。

かなり嬉しかったムラマツさんからのお褒めの言葉

そこからはとにかくクオリティを上げていけるようFVのグランジを色々試しました。人を崩す、文字を崩す、色を変えてみるなど。。

FVのグランジ感に迷走していた時の案

私は当初文字全体をガッと汚しがちだったのですが、そうではなくて綺麗なものを少し汚していくイメージだとアドバイスいただき、これもPinterestで参考を探していきこれだというところまで詰めていきました。

そしてやはり情熱や前進を表すイメージは赤だと思い、血生臭い感じが出ない範囲を探りながら進めていきました。

FVが固まり、そこからは時間の許す限りコーポレートサイトと見比べてUIパーツとフォントを揃えるなど細かい部分を修正していきました。

金曜日がfixしたものの提出期限だったので、ここができる精一杯！と感じるところまで取り組み提出しました。そこからは怒涛の勢いでプレゼン資料に取り組み、本番を迎えました。

腰痛と闘いながら作ったプレゼン資料

（ちなみにこの1週間は寝不足とプレッシャーから、見てくださっている皆さんのツイート、アニメの台詞、ワールドカップのスペイン戦などを目にする度に泣くという情緒不安定ぶりでしたw）

発表当日

遂に発表当日です。

発表の様子はぜひ動画をご覧ください！！
概要欄にプレゼン資料へのURLもあります。

最終のデザインはこちらになります。

TOP
デザイン全体

当日は徹夜でギリギリまで作業していたことと緊張でお昼に茶碗蒸ししか食べれませんでした。笑

まず撮影場所のB&Hさんのオフィスに到着して、オリエンからずっとサポート・見守っていただいていたあさみさんの姿を見て、いよいよだっていう気持ちと安心感を抱きました。緊張していた我々にいつも話しかけていただき、皆のお姉さん的存在です‥！

そして挑戦者2人と顔を合わせた瞬間、やりとりをしなくても2人とも絶対限界超えて頑張ったんだ‥！と分かって感極まりました。まさにこれです。

20分のデザインのプレゼンテーションも初めてだったのでかなり緊張していましたが、ここまできたらやるしかないメンタルと「これが終わったら寝れる‥！」という開放感で乗り切りました。

動画には映ってないですがプレゼン前はひたすらウロウロしており、プレゼン後は安心してずっとお腹鳴っていました。笑

M-HANDの岩松さん、SHIFTBRAINの鎌田さん、Sunnyの原さん、B&Hの今村さんと豪華すぎる審査員の方々にレビューもいただけたことも一生の思い出になりました！大袈裟ではなく、こんな機会普通に生きていてもそうそう無い、ましてや未経験ではありえないことだったので本当に嬉しい経験でした。。嬉しくて動画何回も見てます！

そして何より、2人のプレゼンとデザインが本当に凄くて、こんな2人と一緒の舞台に立てたことがすごく嬉しくありがたかったです！追いつけるように頑張りたい‥！

まとめ

総計6000字弱の記録も間も無く終了です。
こんなに長い文章を書いたのは大学のレポート以来です。

まずは今回の企画に参加させていただけたことに大きな感謝です。
転職活動と並行しての企画でしたが、ここまで真剣に時間をかけてデザインしたのは初めてだった気がします。そしてここまでやり切って、改めてデザイナーとして働きたいと自分の決意が固まり、自信を持つこともできました。

最終的には順位をつける企画でしたが、私の中ではもはや挑戦者同士での戦いではなく自分との戦いだったので、順位云々よりも普段自信を持てない自分がやりきったと胸を張って言えることが何よりの産物だったと思います。

また挑戦者発表時からたくさんの方に応援していただけたことが本当に嬉しく、辛い時の心の支えになりました。ありがとうございました！！

そして最後にムラマツさんには1番の感謝を伝えなければならないです。
初動めちゃ遅だし確認回数も少なくスキルもほぼない私を見離さず、いつも最速かつものすごく細かくレビューしていただきました。
レビュー内容は厳しく、ただ最後に「絶対できるから！頑張って！」といつもおっしゃっていただけることがプレッシャーの中どれだけ励みになったか計り知れないです。
私の世界を変えるきっかけをいただきました。本当にありがとうございました！！

関わっていただいた方全員に感謝を抱きながら、また次のステップへ進んでいきたいと思います。
ここまで長い文章をお読みいただきありがとうございました！

この記事が気に入ったらサポートをしてみませんか？