第二新卒が未経験から独学でデザイナーになるまでの記録
これからweb/UIデザイナーを志している方へ向けての記事になります。この度デザイナーとして無事転職することができたため、その過程で行ったことやこうしたほうが良かったと感じたことを書いていこうと思います。自身の体験をもとに書いているにすぎないので参考までにご活用下さい！
twitterやnoteで発信されているデザインの学習方法を実践してみて自分には合わないと感じることもありました。ぜひ自分に合う方法を見つけてもらえればと思います！
※書いていたら思ったより長くなってしまいました。10,000字くらいあります。ごめんなさい🙇♂️
1. 簡単に自己紹介
デザイナーのはぎなおです。新卒で映像制作会社に入社し、その後色々とあり2020年6月から独学でデザインを学習しています。2021年6月から都内のwebシステム/アプリ制作会社でデザイナーとして勤務することになりました。
経歴
大学(化学系)卒業後、映像制作会社に1年半勤務
イベント関係の個人事業主として活動
デザインを独学で学習後、webシステム開発会社にデザイナーとして転職
転職活動ではweb制作会社を中心に15社ほどエントリーし、2社から内定をいただくことができました。書類の通過率は4割ほどです。
転職活動時に使用したポートフォリオになります。(転職活動時はBASICプランに登録し、STUDIOバナーを非表示にしていました。)
https://hagiofolio.studio.site/
2. 学習について
【学習環境 独学 or スクール】
どちらが良いとは一概に言えないので自分の性格や環境に合わせて判断するべきだと思っています。ただ独学を経験した身から言わせてもらうと挫折したくないなら多少お金がかかってもスクールに通いましょう。私は仕事を辞めて学習していたこともあり孤独でした。。😂
独学
メリット
・お金がかからない
・自分の好きな時間に学習できる
デメリット
・モチベーションを保つのが難しい
・わからないときに相談できる人がいない
・人と関わる機会がない
スクール
メリット
・同じ境遇の仲間に出会うことができる
・相談できるデザイナーがいる
・就職や独立のサポートしてもらえる
デメリット
・お金がかかる
・スケジュールが決められている
また、独学orスクールではなく、中間に位置するオンラインのみで完結するスクールもあるので検討してみても良いかもしれません。もう一度最初からデザインを学習するなら私はぜひ利用したいです。
独学でデザインを学習した感想
モチベーションをコントロールするのが難しいです。毎日学習できた週もあれば週3日しかできなかったときもありました。早いうちに習慣化させる必要があります。そんな中でTwitterで初学者さんや駆け出しの方のツイートを見て同じところで悩んでいたり前向きに取り組んでいることを知り、とても刺激を受けていました。たまに自分の投稿にいいねが1つでもつくとワンルームマンションで弾け飛んで喜びました。皆さんありがとうございます😌
相談できる人がいない問題はMENTAというサービスを使って解決していました。5,000円/月でチャットでデザインを相談し放題などのサービスが利用できます。おすすめは返信が早いデザイナーです。返信の早さはモチベーションに大きく影響を与えます。返信が遅いと感じたら早めにメンターを変えことをおすすめします。
https://menta.work/
モチベーションが上がらない時期もありましたが、一人でいることが苦にならなかったこと、映像制作の経験からどんなに時間がかかってもやりきる癖がついていたことからデザイン学習も最後までやりきることができたと思っています。しかし、コロナ渦で一人暮らしの独学はとにかく孤独です。。やはりスクールに通うことをおすすめします。
【学習マインド】
デザインを学習する際に意識していたことになります。
・アウトプットすること
・考えてデザインすること
・継続すること
アウトプットすること
いつ使うかわからないものを学んでいても自己満足で終わることがほとんどです。数学の公式も使わなければ忘れます。手を動かしてつくりましょう。実際に手を動かすことで身につきます。
考えてデザインすること
意図のあるデザインをしましょう。デザインは課題解決の手段に過ぎないので誰のどのような課題を解決するために制作しているのか自問自答し続けていました。また、転職活動時に考えてデザインしていることでスキルが低くても将来性を感じてもらえる可能性があります。未経験からの転職ではとても大事なことです。
継続すること
毎日デザインをする習慣をつけましょう。最初は10分でも大丈夫です。負担にならないようにデザインを楽しみましょう。いろんな学習法を試し、自分にあったものを継続すれば良いと思います。私は考えることが好きでデザイントレースが退屈だったのですぐに辞めました。😗
【学習方法】
実際に行った独学での学習方法をデザインとコーディングに分けて紹介していきます。
デザイン STEP1
最初にデザインの基礎とツールの使い方を学ぶためにcocodaやN予備校などのサービスを利用して学習しました。また、デザインの考え方や基本原則を抑えるためにSNSやnoteでデザイナーさんが勧めている本を読んで学習しました。
cocoda
UIデザインの基礎を学ぶことができます。基本的なことを学び終えた後は
DailyUIや実践デザインなど次のステップで学習するためのコンテンツが充実しています。
https://cocoda.design/contents
N予備校
1,100円/月でデザインとプログラミングの基礎を学ぶことができます。IllustratorやPhotoshopの基本的な使い方を学べます。
https://www.nnn.ed.nico/pages/introduction/price/
デザイン STEP2
IllustratorやPhotoshop、XDなどのデザインソフトで簡単なデザインができるようになったので、バナーやアプリのプロフィール画面だけなど部分的なデザインを行いました。制作物はこばやすさんのバナーお題やcocodaのDailyUIを制作しています。フォントは何が良いか、情報の見せ方はこの順番で大丈夫だろうか、自分で考えてデザインしていきます。このとき一から自分で考えるのではなく既存のwebサイトやアプリを見たり使ってみたりして参考にしましょう。「なぜ」と考えながら見ると非常に勉強になります。
こばやすさんのバナーお題
「#バナーお題」をつけてツイートするとこばやすさんがリツイートしてくれてたくさんの人の目に止まるのでモチベションが上がります！
https://twitter.com/kobayas_s
cocoda DailyUI
50日間分のDailyUIのお題があります。こちらもcocoda内に投稿するといいねがつくのでモチベションが上がります！
https://cocoda.design/daily-cocoda/1/projects/1
ここでデザインを言語化する練習を行っておけばよかったと思いました。なぜそのデザインが良いのか、良いと思うデザインの共通点は何なのか、言葉で伝えれるように。どのような表現をすればわからない場合にはweb制作会社の制作事例を見れば参考になる表現が見つかります。転職活動では自身のデザインを説明する必要があります。また、業務ではクライアントや他部署の人たちに納得してもらう必要があります。いずれ必要になることになるからやっておけよ過去の自分！と思っています。笑
デザイン STEP3
ポートフォリオ用の作品を制作していきます。自分の行きたい企業に合わせて作品を制作します。私はこのとき行きたい会社は決まっていなかったのでとりあえずwebサイトを制作することにしました。webサイトはMENTAを利用してプロのデザイナーが出した課題をもとに制作しました。その後、UIデザインに興味を持ったためアプリのデザインも制作しています。詳しい制作過程や制作時に考えていたことは次のポートフォリオセクションに記載しています。
デザイン 番外編
ラジオを聞くことが趣味でTakramのデザイナーである渡邉康太郎さんのラジオを聞いていました。とても柔軟な発想で自分とは異なる角度からデザインを見ているのでとてもおもしろいです。コンテクストデザインという言葉を覚えたとき少し頭が良くなった気がしました。笑
続いてコーディングです。コーディングは簡単なレスポンシブサイトが制作できる程度のスキルを身に着けました。実際に転職活動をしていて「このサイトってレスポンシブ？」くらいしか聞かれなかったのでデザイナーの転職においてはそこまで重要視されていないという印象です。
コーディング STEP1
ProgateやN予備校などのサービスを利用し学習しました。基本的なHTML、CSSの書き方や概念、バックエンドの仕組みなどを学習しました。Progateに関しては回答を見ないでコードを書けるようになるまで同じレッスンを繰り返し学びました。
Progate
序盤のレッスンは無料なのでお試しでやってみるといいかもしれません。学習が継続する仕組みが整っているため初学者にはおすすめです。
https://prog-8.com/
N予備校
1,100円/月でデザインとプログラミングの基礎を学ぶことができます。
https://www.nnn.ed.nico/pages/introduction/price/
コーディング STEP2
クリスタさんのコーディング課題を行いました。こちらも何も見ないでかけるようになるまで繰り返し行いました。この段階で簡単なレスポンシブサイトのコーディングができるようになります。また、初学者向けにコーディングについての情報を発信しているアカウントをフォローしておくとスピードアップにつながると思います。
クリスタ
初級から上級まで3つのコーディング課題があります。コーディングに関する記事はすぐに活用でき、とても役に立つものが多いです。何度も助けられました🙇♂️
https://crestadesign.org/cording-first/
コーディング STEP3
自身のデザインしたサイトをコーディングしていきます。ここまでにコーディングするための基本的な知識はついているのでわからないことがあれば随時調べてコーディングするの繰り返しになります。何が原因でレイアウトが崩れているのかわからない場面に何度も直面すると思います。モニターを殴る前に冷静になりましょう。そのモニターを修理するのにかかる費用はいくらですか？😇
コーディング 番外編
コーディングせずにwebサイトを制作するノーコードという選択肢もあります。STUDIOなどのノーコードツールを使用すれば感覚的に写真やテキストを位置して静的なwebサイトを制作することができます。私は思い通りに表示されない原因が分からず作業が遅れることを防ぐためにノーコードツールを使用してポートフォリオサイトを制作しました。
コーディングは学習するべき？
私はするべきだと思います。実際にデザイナーとして転職活動を行う際に応募できる企業の幅がかなり広がります。すでに自分の行きたい企業が決まっておりコーディングが必要ない場合、コーディングが必要ないデザイナー職として就職できる自信がある場合を除いて学習するべきだと思います。また、簡単にでもコーディングについてわかっていると実務でエンジニアの方とのコミュニケーションが円滑になると思います。
3. ポートフォリオ
ある程度デザインスキルを身に着けたらポートフォリオに掲載する作品を制作していきましょう！ポートフォリオの内容についてはデザイナーの方が採用者目線で書かれたものを参考にたほうが良いと思っているので、実際に転職活動でどのようなところが評価されたのかを中心に書いていきます。
私が転職活動時に使用したポートフォリオになります。(転職活動時はBASICプランに登録し、STUDIOバナーを非表示にしていました。)
https://hagiofolio.studio.site/
【作品の制作】
MENTAを利用してプロのデザイナーが出した課題をもとに仮想のwebサイトを制作しました。満足のいくクオリティになるまで何度もフィードバックを頂けるのでおすすめです！
作品となるwebサイト制作する流れを紹介します。書籍やweb制作会社の記事に載っている基本的な流れ通りです。
1. 情報設計
2. ワイヤーフレーム
3. テキスト作成
4. 素材の用意
5. ビジュアルデザイン
6. コーディング
転職活動に使える武器を考えながら制作する
私は情報設計にこだわることで他の選考者と差別化できたと思っています。というのもある企業の面接で、ペルソナを確立しているだけで驚かれることがありました。何を強みとして見せるのかこの段階から考えておくと転職活動がスムーズに進むと思います。
情報設計で実際にやったことを以下にまとめます。
分析
・現状の課題を整理
・課題の発生している原因を分析
・ユーザーの流入方法の調査
戦略
・ポジションの把握
・ペルソナの確立
・課題解決の仮説を立てる
・体験設計
設計
・コンテンツの内容
・コンテンツの流れ
・サイトマップ
今は作品の制作時にやったことがベストだったとは思っていないですが、クライアントやユーザの課題解決をすることができるwebサイトを制作しようとしていました。
また、独学で学習しており周りのレベルがわからないという状況でした。そのため作品のクオリティを相対的に評価しようと思い、デザイナーとして就職できた方のポートフォリオに掲載している作品をよく見ていました。そして前職ではクリエイティブな業界にいたこともあり、意地でも他のデザイナーよりクオリティの高いwebサイトを制作してやろうと思っていました。日常的にデザイナーとして就職できた方のポートフォリオをチェックすることによって視座を高めるができました。
【ポートフォリオ】
ポートフォリオを掲載する作品を制作したらいよいよポートフォリオの制作です！こちらもMENTAを利用して採用担当をしたことがあるデザイナーの方にアドバイスを頂きながら制作しました。
媒体(紙 or Webサイト)
希望する会社の制作事例に合わせて媒体を選べばアピールができるかなと思います。私は希望していた企業の制作事例がwebサイトやアプリケーションなどデジタルが多かったこともありWebサイトのみ制作しました。1社だけ受けた事業会社のみ紙での提出を求められましたがWebしかないですと相談したところ、面接していただくことができました。
制作手順
ポートフォリオサイトも他のwebサイトを制作するときと同じ流れで制作しました。情報設計の段階で考えていたことを簡単に紹介します。
目的 : Web/UIデザイナーとして転職する。
ペルソナ : 採用担当のデザイナー。日々、同じようなポートフォリオを見て優秀な人材の採用に悩んでおり、未経験者でも光るものがあれば面接するつもり。
流入方法 : 事務からメールで送られてきたポートフォリオを開く。
体験 : 考えて作っているなと感じる。はぎなおのことを面白そうだなと思う。
強み : 一つ一つの作品を考えて作っていることがわかる。
情報設計の段階で採用担当者がどのような状況でポートフォリオを見ているのかを考えていました。例えば、デザイン業務が忙しくポートフォリオに見る時間が限られているかもしれない、同じようなトンマナのデザインが多く見飽きているかもしれない、などです。なので時間がない中雑に見ても伝わるようにデザインし、トンマナについてもなるべく他の選考者とかぶらないようなデザインにしました。相手の立場に立って考えるとより伝わるポートフォリオになると思います。
設計
未経験からの転職では将来性が重視されます。作品よりも自己紹介を先に見てもらえるような設計にしましょう。自分を知ってもらってから作品を見てもらったほうが将来の活躍をイメージしてもらいやすくなります！デザイナーだから作品を先に見せたほうがという意見もあり悩みましたが、プロのデザイナーさんと話をする中で上記の理由から自己紹介が先のほうが良いという結論に至りました。
私のポートフォリオでは以下のようなページ構成にしています。
トップ
自己紹介
作品
コンタクト
コンタクトページが使われることはありませんでしたが、基本的にこの4つでいいかなと思います。
自己紹介ページ
希望している企業ではどのようなスキルが求められているのか、自分の上司はどのような人を求めているのかを考え自分の強みと重なる部分を記載していきます。と言っても最初は何を書けば良いかわからないですよね。しかし、誰にでも意外と活かせる経験はあるものです。過去の経験から得たスキルを抽象化して書き出してみましょう。考えたものをプロのデザイナーさんに壁打ちするとブラッシュアップされて魅力の伝わるポートフォリオに近づきますね！
作品ページ
ユーザーやクライアントの課題解決のためにどのようなアプローチしたのか記載していきましょう。作品制作時に考えたことをメモしておけばここで役に立ちます！リサーチが足りなかったと思えば後付でリサーチしても構いません。あなたのデザインに説得力をもたせましょう！
伝えるポイント
実際に聞いたわけではないですが、転職活動を行っていて重要視されているのではないかと感じることが2つありました。
将来どのようになっていたいか？
デザインが好きか？
この2つは面接でも聞かれることが多く重要なポイントなのかなと感じました。面接時に自分の言葉で語れることはもちろんですが、ポートフォリオからも伝わってくると書類選考に通る確率が上がるのかなと思います。
具体的には、
・将来の姿が理由含め解像度高く記載されている
・趣味で創作活動をしていた、作品の数が多い
などでアピールできると思います。
4. 転職活動
ポートフォリオが完成したら転職活動です。ここまで長かったですね、お疲れさまです。ゴールまであと少しです。もうひと踏ん張りしましょう！
私の体験をもとに最新の情報をお伝えできれば思います。
2021年3月下旬から4月下旬までの1ヶ月間転職活動を行っていました。
15社ほど応募し、２社から内定をいただくことができました。書類選考の通過率は4割程です。
転職環境
まず、現在(2021.4)の環境についてお話します。
未経験の求人数はかなり減っており転職は厳しいものとなっています。転職エージェントからはここ最近で最終面接まで進んだのは私が初めてと言われました。このような状況の中書類すら通らないと気が滅入りますが、いつか自分に合う企業が見つかるだろうと楽観的に考え、焦らず転職活動すると気持ちが少し楽になるかなと思います。受かりそうな企業に応募して環境や人が合わず、すぐに転職を考えるのが最悪のパターンだと思うのでのんびり気楽に行きましょう😌
企業選び
私は将来的に愛されるプロダクトを作ることができるデザイナーになりたいと思っているため、上流の工程に関わることができる制作会社を中心にエントリーしていました。転職サイトやエージェント、Google検索で企業を探しました。
実際に使用した転職に使用した転職サイトとエージェントになります。
転職サイト
・Green
・マイナビ転職
・エン転職
・wantedly
・ハローワーク
エージェント
・ワークポート
・ReDesigner
おすすめ順に記載しています。他の転職サイトには載っていない求人が多いかったため、特定のサイトやエージェントのみに絞らず複数利用して求人を探すと良いですね。Greenは特に求人数も多く書類選考を通過する確率も高かったのでおすすめです！マイナビ転職は求人数は多いですが自身にマッチする企業が選びにくいという印象です。
また、クリエイティブ企業をまとめた面白いnoteがあったためここからも企業を探し、応募していました。
https://note.com/bh_kanayama/n/n1a3af4d6387f
こちらが実際に応募したルートの内訳になります。
直接応募 : 6社
転職サイト : 7社
エージェント : 2社
直接応募が企業側に採用コストがかからずおすすめとよく見聞きしましたが、一概にそうとも言えないと思ったためそれぞれメリット/デメリットを記載してみます。
直接応募
メリット
・採用コストがかからないので厳しい目で見られにくい。
・応募者数が少ない。
デメリット
・そもそも人材を欲していない場合がある。
・求人内容がわかりにくい。
転職サイト
メリット
・スカウトが来る。
・求人が多い。
・自分にあった求人を絞り込むことができる。
デメリット
・応募者数が多い。
・企業の選考スケジュールが決まっている場合がある
エージェント
メリット
・選考ポイントを教えてもらえる。
・面接のフォローをしてもらえる。
・企業担当者に聞きづらいことを質問できる。
・応募者数が少ない。
デメリット
・採用コストがかかるので厳しい目で見られやすい。
・求人が少ない
私が体感したのはこんなところです。私はエージェント経由で転職することができたということもあり、様々な手段で応募してみることをおすすめします。
面接
苦手でした😂
アドバイスできることはあまりないです。ごめんなさい。。。
私の失敗体験を書くので反面教師にしてもらえればと思います。
一次面接で人事の方のみ事件
基本的に聞いてほしいことは聞いてもらえません。私がデザイナーが採用担当者として来ることを想定していたこともあり、アピールしたいことと聞かれることが異なりました。聞かれたことだけに答えていては何もできずに終わってしまいます🙄自分から積極的にアピールしましょう！
想定していなかった質問答えれない事件
これは独学＋コロナ渦で人と合う機会が少なかったこともあり、コミュニケーションの瞬発力がかなり鈍っていました。こればかりは面接の数をこなして慣れるしかないなと思っています。3回ほど面接を経験したら人柄を深堀りするような質問を除いてスムーズに答えることができるようになりました。
一次のオンライン面接でトレーナー来てたら二次面接でつっこまれた事件
「君、本当は落ちてたんだよ」これは二次面接で急に言われました。どうやら服装がトレーナーのみでカジュアルすぎたようです。オンライン面接で家だしと思って油断してました。この一件以降、オンラインでもジャケットを羽織るようにしています。指摘していただいて本当に助かりました🙇♂️
一貫性を見られている
感覚での話になりますが、面接では一貫性を見られていると感じました。自身の強み、過去の決断理由、将来やりたいこと、応募している企業などを論理的に説明し、面接官にこの人は筋が通っていると感じてもらえると通過する印象があります。自身の軸を明確に言語化し、さまざまなエピソードと関連付けて話せば筋が通っていると感じてもらえると思います。
5. まとめ
10,000字に迫るかなりの長文になってしまいましたが、これが私がデザイナーとして転職するまでの記録になります。厳しい環境かもしれないですが、しつこく粘り強くやっていけばデザイナーとして転職することは可能です！このnoteがみなさんの理想のキャリアを歩む手助けになれば幸いです。
デザインの学習で不安に思っていること、わからないことがあればnoteのコメント欄やtwitterのDMでご相談下さい！自分の経験をもとにアドバイスできるかもしれません。
最後に、私はこれから夢である愛されるプロダクトをつくるために精進して参ります。つたない文章ですが、最後までご覧いただきありがとうございました！🙇♂️