エムハンド新卒デザイナーの入社1ヵ月
はじめに
今年4月に新卒でエムハンドに入社したSato（@nrikautsa）と申します。デザイナーとして入社してから１ヶ月が経ち、これまでにやってきたことや学びを記事にすることになりました。私は美大やデザイン科に通ったことがなく、大学在学中にスクールで初めてデザインを学びました。 私の経験にはなりますが、これからデザインを始めたいと考えている学生の方にも、参考になれば幸いです！
自己紹介
まず自己紹介をさせていただきます。
私は大学で経済学を専攻し、3年生の時にデジタルハリウッドSTUDIOのWebデザインコースに通い始めました。デジハリを卒業してからは、制作会社で3ヶ月間程インターンに参加しました。 その後就職活動を始め、今年2月にエムハンドに入社が決まりました。新卒入社ということで、半年は東京の事務所に出社して勤務しております。この1ヶ月間は研修期間で課題を中心に取り組みながら、 実案件にも挑戦させていただきました。周りの方に助けて頂きながら日々業務を行っております。
入社までのプロセス
なぜデザイナーを目指そうと思ったか
エムハンドに入社するまでの過程を遡っていきます。
私は最初に申し上げたように、今まで美大やデザイン科などに通ったことがありません、、そんな私がデザインに興味を持ったきっかけは、大学3年生の時の就職活動です。
3年生の5月頃、周りが就活に向けて動き始める中、私は将来やりたいことが決まっておらず不安を感じていました。そのとき、先生に「自分の好きな物や身近なことから考えるといいよ」とアドバイスを頂きました。
私は毎日SNSを利用していたため、IT業界いいかも！と思い調べてみたところ、Web業界にデザイナー職があることを知りました。（パソコンが苦手なので、IT業界は全く選択肢にありませんでした。）
子供の頃絵を描くのが好きだったこと、アパレルのインターンのPOP作りが楽しかったこと、自分でスキルをつけて働きたいという気持ちがあったことなど、様々な理由があり、Webデザインをやりたい！！と強く思いました。
既に3年生の後期で、これから就活なのに遅いのではないかと思い迷いましたが、諦められず挑戦しようと決めました。
それからすぐ親にデザインをやりたい、そのためにスクールに通いたいと相談しました。親は「やりたいならいいと思うよ」と即答してくれました。本当に前向きに応援してくれて、いつも支援してくれて感謝しています！
デジハリでやったこと
私がデザインスクールとしてデジハリを選んだ理由は2つあります。
■ 通学とオンラインを自由に選択できる
■ 現役のデザイナーさんが講師をしている
学校の授業もあったため、自分の生活に合わせて通えると思い決めました。
デジハリの授業ではデザイン、コーティング、Wordpressを学べます。授業動画はかなり量があり、課題の締め切りもあるので想像以上に大変でした。当時大学はオンライン授業で、３年生で授業が少なかったため問題ありませんでしたが、1、2年生の時は厳しいスケジュールだったと思います、、
全力で取り組んだ卒業制作
最後の2ヶ月間の卒業制作は、個人でサイトを0から作り公開まで行います。
サイトのテーマは自由で、自営業の家族や友人のサイトを制作している人が多かったです。架空サイトでもよかったのですが、トレーナーさんに「就活のとき、面接で経験を話せるので実案件のほうが良い」とアドバイスを頂きました。私自身も実案件を経験した方が今後の役に立つと思ったため、クライアント探しから行いました。
地元に素敵な複合施設が新しくできたため、この施設のサイトを作りたい！と思いました。怪しまれそうだな、、と不安になりながらも直接施設に伺い、サイトを作らせてくださいと交渉したところ、作らせていただけることに。それからヒアリング、企画書作成、デザイン、コーティング、Wordpress化、公開までを進めました。完成したサイトは、クライアントにとても喜んでいただき嬉しかったです。
今振り返ると、実際に営業から公開まで行い、クライアントとのやり取りを経験することができ、大変でしたが実案件に挑戦して本当に良かったと思っています。
以下はデジハリに通っているときに個人的にやっておいてよかったことと反省点です。
■ 動画教材は早く見終わる
（卒制に時間をかけられるため）
■ トレーナーさんに聞く、話しかける
（質問したこと以外にも、色んなことを教えてくれるから）
■ 卒制は実案件に挑戦する
（良い経験になるし、就活で話せる）
■ ポートフォリオに載せる制作物を早めに作る
（卒業するとフィードバックを貰える機会がないから）
■ 受けたい会社を早めに探す
就職活動開始
4年生の5月にデジハリを卒業してからは、大学生の間に実務経験をしたいと思い、制作会社で4ヶ月間程インターンに参加しました。ECサイトやサムネイル、チラシなどを制作し、その期間にポートフォリオを作りました。
その後はインターン先で培った経験を自信に変え、11月頃から就活を始めました。11月にはすでに多くの会社の新卒採用が終了しており、焦りを感じていました。私は以前からSANKOU!を見て、就活のために制作会社をリストアップしていました。他にもMUUUUU.ORGやS5-Style、MARPなどのギャラリーサイトや、SNSなどを見てエムハンドを知りました。採用サイトを見ましたが、新卒採用終了と記載されていて諦めました、、
ダメもとで応募
内定がないまま2023年に入り、１月は新卒・中途にかかわらず気になる企業は応募していました。しばらく面接が通らない時期で落ち込んでいました、、もう卒業までに決まらない気がしていました。そのとき募集終了リストに書いていたエムハンドの採用サイトをなぜかもう一度見てみました。新卒採用は終了していましたが、中途は募集していました。通らないかもしれないと思いながらも、ダメもとで応募することに。翌朝スマホを見ると、代表から書類選考通過と一次面接の案内メールが来ていました、、！
一次面接
一次面接の面接官は代表の山手さんでした。
以下が質問された内容です。
■ デザインをしていて何が一番楽しいか
■ なぜ他の会社ではなくエムハンドなのか
■ ポートフォリオの中から１つ説明して
一次面接で一番印象的だったことが、代表の優しい人柄です。詳しく会社説明をしていただき、たくさん逆質問をしたにもかかわらず、一つひとつ丁寧に答えていただきました。堅苦しい面接ではなく、会話ベースだったので、緊張しすぎずしっかりと話すことができました。この面接でさらにエムハンドに入りたいと思う気持ちが強くなりました。
無事一次面接を通過し、残るは最終面接。絶対に受かりたいけれど不安すぎて、デジハリのトレーナーさんに連絡をして話を聞いてもらいに行ったりもしました、、
最終面接
面接官は岩松さんでした。
以下が最終面接で質問された内容です。
■ 理想の上司・先輩
■ 今までに出会った嫌な上司・先輩
■ 学生時代に頑張ったこと
■ 今までで一番の失敗
（何を学び、その後どう活かしたか）
■ デザイナーを目指した理由
■ アルバイトや習い事について
■ 習慣化していることはあるか
■ 効率重視かじっくり作りたいか
■ SNSはできるか
最終面接は対面でした。岩松さんのことはムーテレのブレイキングデザインで拝見していたので、本物だー！と思いました。ムーテレは学びが多く毎回見ていて、ブレイキングデザインの動画にも刺激を受けていました。面接中は柔かい雰囲気で会話ベースで進み、とても話しやすかったです。何度も面接をすると、自分のわかりやすい性格的に、話を盛ることや思ってないことを言うことが苦手だとわかりました。そのためうまく話せなくてもいいので、無理をせずに本心を話しました。岩松さんは私の言いたいことを要約していただいて、意図を汲み取ろうとしてくださいました。
そして、無事内定をいただきました。やっと就活が終わりとてもほっとしましたが、同時にスキルが高いエムハンドのデザイナーとしてやっていけるかという不安を感じました。
就職活動を終えて
応募した会社は辞退も含め全部で19社。その中で書類選考を通過したのは5社でした。制作会社は新卒を募集していない会社も多いので、新卒・中途に関係なく気になる会社は応募していました。未経験で一般大学生の就活は厳しかったです、、就活の後半は、「ここまできたら絶対に制作会社に入りたい！」という意地で頑張りました。
私が就活で利用した求人系のサイトは以下のものです。
■ マイナビ
■ リクナビ
■ Wantedly
■ ReDesigner for Student
■ ViViViT
Wantedlyでインターン先を見つけ、カジュアル面談の応募にも利用しました。ReDesigner for Studentは面談の応募や、他の学生のポートフォリオを見ることに利用していました。
3年生の時点でインターンに参加すると、面接が免除される会社もあります。新卒の募集が終わる前に、早めに就活を始めたほうが良いと思いました。応募する際はポートフォリオが必須の会社が多いため、早めに作っておくべきでした。とにかく早めに行動することが大事だと反省しています、、
面接の経験は少ないですが、以下が質問された内容です。
■ なぜデザイナーになろうと思ったのか（毎回聞かれる）
■ 就活の軸（毎回聞かれる）
■ ガクチカ
■ 応募したきっかけ
■ なぜ経済学部に入ったのか
■ 大学以外で頑張ったこと
■ アルバイトのやりがい
■ 何社受けているか、受けている会社名
■ ５年後どういう働き方をしたいか
■ 将来どんなデザイナーになりたいか、そのために何が必要か
■ 自分に今足りていないものは？
■ デザインしていてどこが一番楽しいか
■ インターン先を選んだ基準
■ インターンで大変だったこと、学んだこと
■ なぜインターン先に就職しなかったのか
■ 課題以外でコーディングをしているか
■ 使えるソフト
■ なぜ事業会社（制作会社）なのか
■ ポートフォリオの中から一つ説明して
■ 普段どのように制作物をブラッシュアップしているか
■ ポートフォリオの制作物で改善するとしたらどこか
■ 制作物のどこを1番こだわったか
■ 制作物がどうしてその機能になったか
面接練習は大学のキャリアサポートセンターで行い、Youtubeで反復練習をして、一般的な質問には答えられるようにしました。就活でよく聞かれる自己PRは聞かれたことがなく、大学の話よりWebやデザインについて聞かれることが多かったです。アルバイトやインターンについてもほぼ毎回聞かれました。逆質問をたくさんしたほうが好印象だと感じました。
Webデザイナーの募集でもデザインだけなのか、コーディングが重視されるのかは会社によって違うので、募集要項をよく見ておかないと面接で困る場面がありました、、
入社までにやったこと
最終面接の際に、模写とサイト分析を習慣化することを岩松さんと決めました。入社までの１ヶ月半を価値のあるものにしよう！という目標です。私は今まで特にルールを決めていなかったので、期間を決めて習慣化するという意識を持つことで、気が引き締まりました。
以下が入社までに行ったことです。
■ サイト模写（2週間に1つ）
■ サイト分析（1週間に1つ）
■ awwwardsのサイトを見る（1日1つ）
■ ポートフォリオサイトのデザイン制作
入社してからの１ヶ月間
サイト模写
入社してからは研修で課題に取り組みます。まず最初の課題はサイト模写です。模写することが目的ではなく、サイトを見て細かい部分に気づくことが重要だと学びました。
意識して見たところ
■ 写真の色味
■ 視線誘導の仕方
■ 色や要素の連続性
■ 色や写真の出力のバランス
■ 余白や影の意味
■ どうしてこのデザインになったのか
写真の色味
実際に模写をすると、見ているだけでは気がつかないことに気がつくことができました。一つ目は写真の色味についてです。サイトの雰囲気に合わせて写真を青みがけたり、黄みがけたりしていました。若干の違いですが、そうすることで写真がサイトになじみ、違和感がなくなるとわかりました。
視線誘導の仕方
光の方向や写真の明るさも調整していました。例えば中心に視線を集めたいときは、光が中心に集まるように写真の向きを変えることや、反転させるなどをしていました。また、左右に配置してある写真をぼかすことで、中心に視線を集めるなど工夫しているとわかりました。
色や要素の連続性
連続性については、MVなどで使用した色や要素を他のセクションにも使用することで、サイトに統一感が出て視線の流れが自然になるとわかりました。ここで注意することは、先を見通してデザインするということです。たとえば一つあしらいやボタンなどを変更した場合、他の部分も同じように変える必要があります。とりあえず手を動かすと時間が無駄になる可能性があるので、ここを変えたらここも変わる、と考えながら作業を行う必要があります。連続性については、岩松さんのTwitterのチェックバックでよく書かれているので、そちらを実際に見るとわかりやすいです。
色や写真の出力のバランス
出力のバランスは、サイトの一部分だけ色が濃い場合や写真の印象が強い場合、その部分だけ重くなってしまいます。MV、真ん中、フッターを重めにするなどして、重さの違いで傾かないよう、出力を調整する必要があるとわかりました。
余白や影の意味
余白の大きさにも意味を持たせることが必要です。雑誌風のレイアウトのサイトを模写した際は、全体の流れを余白で調整していて、余白は視線の流れを作る重要な要素であるとわかりました。また詰めるところは詰めて、空けるところところは空けるというように、意味を考えて余白をとるという基本的なことも大切だとわかりました。
要素の影は奥行きを持たせることや、目立たせる効果があります。影や動きをつける際、現実世界と矛盾しないように気をつける必要があるとわかりました。影の方向は自然か、視差（手前のものは速く、奥のものは遅いこと）は意識されているかを注意する必要があるとわかりました。
どうしてこのデザインになったのか
法律関係のサイトを模写しているときに、岩松さんに「どうしてこのサイトは背景が曲線だと思う？」と聞かれました。私は親しみやすく相談しやすいイメージを伝えるためではないかと答えましたが、その回答では足りませんでした、、実際は「背景の曲線を器に見立て、どんなお客様のお悩みも受け止める」という意味が込められていると教えていただきました。このように具体的に象徴化することで、コンセプトに沿ったデザインを制作でき、クライアントへの説明にも説得力が増すと学びました。
・多色のグラデーション→多様性、様々な要望に対応できる柔軟性
・斜め線→力強さ、右上がりに成長し未来を切り拓く
・ゆらぎ→光に見立て、秘めたる才能や思いを表現
・枠からはみ出たデザイン→型にはまらない、今までの常識を覆す
実案件のデザインに挑戦
入社から約1週間が経った頃、実案件のトップページデザインに挑戦させていただきました。最初から案件にかかわらせていただけると思ってなかったので、嬉しくて気合が入りました、、
以下の手順で行いました。
①参考サイト探し（1日）
②PCデザイン着手、途中経過の提出（1日）
③フィードバック、修正して提出（1日）
④メガメニュー、SPデザイン、コンポーネント作成（1日）
本来は1.5日程で初稿提出なので、時間がかかってしまいました。参考サイトを探しているときに、先輩デザイナーさんは初稿を提出されていました、、
参考サイト選定
まず参考サイトを決める目的は、クライアントやディレクターと共通認識を持つということです。参考サイトの良い点や選んだ理由を言語化し、しっかりと報告することで、認識のズレが出ないようにします。
私は参考サイト探しに時間がかかってしまったので、岩松さんにポイントを教えていただきました。
・説明できる
・幅を持たせる
・全体のイメージとポイントに分けて探す
・探すより考える
・報告する
参考サイトには同じようなデザインのサイトではなく、幅を持たせることが必要です。また、サイト全体のイメージの参考と、セクションごとの参考に分けて選びます。チャレンジポイント（挑戦してみたい表現）の参考も見つけられると良いとわかりました。
そして、参考サイトは探すのではなく、考えるといったイメージで決めることが大切だとわかりました。前に見たサイトの中から参考になりそうなものを思い出せれば、0から探す必要がなく、時間はかかりません。普段から色んなサイトを見ることを習慣化することで、記憶から引っ張り出せるようになる必要があると学びました。
デザイン作成
まずクライアントの要望を読んで、自分なりに表現方法を考えました。言語化や象徴化などそれまでに学んだことを活かして、具体的なイメージを持ってデザインを作っていきました。
以下は初稿提出時にいただいたFBです。
■ 写真選定に意味をもたせる
サイトに合う意味のある写真を選び加工する
■ 余白の取り方を最適にする
■ 参考サイトを分解して適合する
参考サイトの真似ではなく良い点を言語化して取り入れる
■ コンテンツの高さや幅の設定が大事
高さが大きすぎるので全体のバランスを見る
■ 大事なセクションの見せ方が悪い
初めてTwitterで見てた岩松さんのFBをいただいて感動しました、、！
写真選定はサイトの印象を左右するので、大切だとわかりました。サイトの雰囲気に合うよう再度写真を選び、レベル補正や彩度を調整しました。またピンと来なくて使わなかった案でも、全く使わないのではく、組み合わせてみれば取り入れられるかもしれないと学びました。
初の実案件を終えて
私の案も修正して提案していただきました、、採用されませんでしたがやりがいを感じて嬉しかったです！実案件で様々なことを学べました。そして、何より私が質問すると、いつでも手を止めて聞いてくださり、すぐに教えてくださる岩松さんに感謝しています。
TD会議
TD（トップデザイン）会議は、チームやデザイナーがトップページのデザインを見て問題がないか確認します。デザインやUIについて改善点があれば話し合います。私も初週からTD会議に参加しました。
参加してみてまず驚いたのは、デザインのクオリティの高さだけではなく、トップデザイナーさんたちのコンセプトをデザインに落とし込む力や言語化力が高い点です。比喩表現や象徴化をして、想像しやすい言葉で説明をしていることが印象的でした。そして、そのデザインにした理由を徹底的に追求する議論が行われます。なぜこの色を使ったのか、なぜこのあしらいを入れたのか、なぜこの動きにしたのか、なぜノイズのテクスチャをかけたのか、、、誰に何を伝えたいか、なぜその表現にしたのかなど、そのデザインにした意図を詳しく説明できるように意識して制作すると、見た人をより納得させることができます。クライアントの事業内容や、サイトコンセプトに紐付けて言葉に定着することで、より説得力が上がると学びました。そのために、ディレクターさんとしっかりと話し合い、方向性を定めることが重要であるとわかりました。
他にも、あるデザイナーさんは毎回デザインにチャレンジポイントを入れていて、サイトごとに自分なりのこだわりや挑戦した点があることを知りました。会議に参加する度に様々なことに気づくことができ、学びが多いです。今は説明してもらって理解することが多いですが、今後は自分でデザインを見て気づけるように、常日頃から言語化を意識していきたいです。
私のノート
私は入社してから学んだことを毎日ノートにメモしています！メモを取ることで、頭の中を整理し学びを蓄積することができます。キャプチャで張り付けたかったのですが、もう少し綺麗に書いておけばよかったです、、その中から一部抜粋して記載します。
セクションが重い時の改善策
・トリミングの位置を変える
・写真の色味を変える
・写真を変える
ハンバーガー理論
ハンバーガーは一番下にバンズがあって、その上に野菜、肉、チーズなどを順番に乗せて、またバンズで挟む。肉肉肉と、同じボリュームのある具材が続くと、しつこくなる。
サイトデザインも、全体を引きで見て、ハンバーガーのように強く出力するところと、抑えるところの順番を意識して、バランスをよくする。
フォトディレクション
一見綺麗に見える写真でも、柱や背景の一部が歪んでいることや、余計なものが写っている場合がある。サイトに使用する写真は、歪みを直し余計なものを消して使う。細かいことだが、小さな積み重ねが全体の質にかかわる。
写真の並べ方
例えば写真が3枚並んでいる時、真ん中の写真を重くするなどして、左右の写真の質量にバラツキが出ないようにする。
Twitterでのアウトプット
入社した週から、出社日は毎回その日の学びをツイートしています！自分から発信するタイプではありませんでしたが、1日を振り返って学んだことをツイートすることで、記憶に定着させることができます。日記のように記録を残すことができるので、これからも続けていきたいです。
新卒で入社して
私は社会人経験がないため、入社当初は分からないことばかりで不安でした。しかし、質問すればすぐに答えて頂き、何でも相談しやすい雰囲気を作って下さり、とても恵まれた環境で業務に取り組めています。岩松さんに質問するといつも手を止めて聞いて下さり、丁寧に教えてくださいます。そのため毎日不安なく過ごすことができ、周りの方々に感謝しています。まだ未熟で至らない点も多々ありますが、早く1人前になりクライアントや会社に貢献できるようになりたいです。
エムハンドは私だ
長くなりましたが、以上が私の入社1ヶ月までのプロセスです！これまで様々なことがあり、これでいいのかな、と一人で迷うことも多かったです、、現在も業務に慣れるために日々奮闘しており、周りの方に助けていただきながら過ごしています。これから本格的に実務を行うようになり、大変なことや悩むことが多いと思いますが、早く成長できるよう前向きに頑張っていきたいです。そして、将来的にはエムハンドを引っ張って行けるようなデザイナーになりたいです。今は先輩方のデザインに感動や衝撃を受けることばかりですが、そういったデザインを作る側になりたいと思います！
ここまでお読みいただきありがとうございました。Twitterで発信しているので、フォローよろしくお願いします！
writer
-
Sato @nrikautsa