今回は、Web制作フリーランスから自社開発企業のフロントエンドエンジニアに内定したしゅーへいさん(@shuhei_308)にインタビューをしていきます。
実は最近、Web制作を一旦仕事にしたものの、次のキャリアに悩む人が多い状況です。
「フロントエンドエンジニアを目指そう!!」と思う人は多いものの、現実は厳しいことが多いです。
このブログでも以前このような記事を書きました。
しかし!
今回インタビューしたしゅーへいさんは、独学でフロントエンドを学んだ末に、自社開発企業に就職することができました。
そんなしゅーへいさんに、
- フロントエンド(React,TypeScript,Next,js)の勉強方法
- Web制作経験を生かした就職活動
このあたりを深掘りして聞いていきたいと思います!!
フロントエンドに興味がある人は、必見です!!
【ゲストプロフィール】
しゅーへいさん(@shuhei_308)
介護職→2020年2月Web制作学習開始→フリーランス→制作会社にてWebディレクター→フリーランス→自社開発企業にてReactフロントエンドエンジニアの内定。個人事業では2人でWebブランディングを軸にWeb戦略→実装まで一貫して制作。
Shumiデザイン:https://shumiofficial.com/
【インタビュアープロフィール】
しょーご(@samurabrass)
このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。
介護職からWebの世界へ
今回は宜しくお願いします!まずしゅーへいさんは前職は介護職でしたよね?なぜそもそもWeb制作を始められたのですか?
きっかけはマナブさん(@manabubannai)のYouTubeでした!
マナブさんきっかけなんですね!私もですが、やはり多いですね笑
介護職も素敵な仕事で毎日が楽しかったのですが、勉強するのが好きで普段からよく読書をしていました。
ただ、スキルを付けて稼ぐために、Web制作の世界に行こう!と思ったのがきっかけです。
フリーランス→制作会社に入り、またフリーランスへ
しゅーへいさんは最初からフリーランスになったんでしたっけ?
そうですね!初年度からフリーランスとは言っても、月10万円稼げるかどうかのところからでした。
まずは小さい実績を積んでから制作会社で勤務しようと思ってたところ、コーディング実装でお世話になった企業の社長に自社サービスを展開したいからとお誘いいただいて、入社しました。
なるほど!フリーランス→就職という流れでしたか。
フリーランスが協業先に就職するケースは結構ありますよね。
ただ、お誘い頂いた自社サービスがローンチ前に倒れてしまい、方向性が違ったのでフリーランスに戻ったという心境の変化でした。
そうだったんですね!ということは、
フリーランス→就職→フリーランスということですか。中々大変でしたね…
最近制作会社などへの営業文・ポートフォリオを本気添削するサービスを始めたので、気になる方は覗いてみてください。
Web制作者時代の具体的な業務
業務内容を深掘って聞きたいんですが、Web制作会社時代にはどんな業務をしていましたか?
制作会社に入社してからは、Shopifyを利用したネットショップ戦略や企画、実装などを行うWebディレクター兼マーケター。自社サービスローンチまでのマーケティング戦略チームにてLPを作ったりしていました。
思ってたより幅広くされてたんですね!フリーランスになってからもShopifyなどをやってましたか?
いえ、今はShopifyは請け負わず、ブランディングを軸にしたホームページ制作をメインに、Web企画立案→実装まで行っております。
こちらが制作実績になってますね。
制作物のクオリティがめちゃくちゃ高い!!
デザイナーさんと二人三脚でのWeb制作
Web制作もアプリ開発も両立の道へ
あれ?しゅーへいさんって今一人じゃなく、誰かとタッグを組んで制作してる感じですか?サイトの主語が「わたしたち」になっていたので。
そうです!!2人でやってます。
個人事業に関しては、フロントエンドに舵を切るので、今後Webアプリ開発ばかりになるであろうと思った反面、Webサイト制作でもようやく芽が出始めていたんですよね。
「Webサイト制作の仕事を無くしたくない!」と思い、仲良いデザイナーさんと2人で行うことを提案したら一緒にやろうとなったので、2人で行っています。
なるほど〜。このあと話しますが、しゅーへいさんはフロントエンドで就職しても、今後Web制作は続けていくのでしょうか?
そうですね!2人で始めてからは、サイト制作はもちろん、自社と他社のマーケティング戦略にも関わる日々ですので、良い刺激を受けてまして。
Webサイト制作はとても好きなのと、Webアプリ開発の好奇心も止まらないので、正社員をしながらWeb制作をすることを決意しました。
ほぉほぉ。一見すると順風満帆なんですが、なぜフロントエンドの道に進もうと思われたのですか?
Webアプリ開発だと、チームで密に話し合って1つのサービスを作れそう!と思ったのは大きいですね。
確かにWeb制作は、例えばLPコーディング業務だけなら一人で行うことも多いですからね。アプリ開発はコーディングも基本複数人ですし。
あとは、自分のエンジニアとしての市場価値を上げることができるのも、フロントエンドを目指した理由の一つですね。
UIにこだわったりするのも好きだからというのもあります。
フロントエンドエンジニアの市場価値は今後も確実に上がりますよね。全然足りてないですから…
フロントエンドとWeb制作の違いって?
これからしゅーへいさんにフロントエンドの学習手順を聞くんですが、その前に。
読者の方でフロントエンドとWeb制作の違いが分からない方がいるかと思いますので、ここで整理しておきたいです。
しゅーへいさんはどのような違いがあると思いますか?
(あ、自分に振るんだ…)
そうですね〜。Web制作の実装者はいわゆるコーダーというエンジニア職に分類されるかと思います。
コーダー:サイト制作。デザインを忠実に再現する職のこと
フロントエンドエンジニアは、サイト制作、Webアプリ開発。デザインを再現する+機能追加やAPI連携、パフォーマンスを上げるエンジニアと認識しています。
コーダー:HTML/CSS(SCSS)/JavaScript(jQuery)/WordPress
フロントエンドエンジニア:React(Next.js),Vue(Nuxt.js)/TypeScript/状態管理/node.js/GraphQL/BaaS/)
フロントエンド(React)の学習手順
ではいよいよここからフロントエンドの学習手順を聞いていきますね。
やっていった順に教えていただけると!
私はReactを選んで学習を開始したので、Reactベースでいきます!
プラットフォーム | コース/本 |
---|---|
YouTube | モダンJavaScript講座19本(しまぶーのIT大学) |
本 | モダンJavaScriptの基本から始める React実践の教科書 |
本 | 作って学ぶ Next.js/React Webサイト構築 |
Udemy | 13種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 |
Udemy | 2最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座 |
Udemy | Understanding TypeScript |
YouTube | ReactとTypeScriptを使って かんたんな電卓アプリを作る – 前編・後編 |
YouTube | Todoリストを作りながらTypescriptとReactを触ってみよう |
YouTube | Build and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS |
YouTube | Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More |
Webサイト | Reactドキュメント |
Webサイト | Next.jsドキュメント |
Webサイト | サバイバルTypeScript |
Webサイト | MicroCMS |
全体の流れでいうと、モダンJavaScriptの変遷や歴史を知り、なぜReactのようなモダンフロントエンドが誕生したのかをまず学びます。
その後に頻出のJavaScriptと、Reactの基礎を学びReactのみでアプリを制作していきます。
TypeScriptも必須なので学んで、電卓アプリ、todoリストを作りながら触れていきます。
YouTube動画は結構英語圏のものが多いですが、これは英語できなくても問題ないんですか?
正直英語で何言ってるかはわからないです笑
でも、写経するだけでも「ここの実装はこう書くのか!」と驚き・発見ばかりで楽しいです。
JavaScript Masteryさんはかなりクオリティが高いのでおすすめします。クローンアプリを作るレクチャーが多いです。
最後は面接対策のために、公式ドキュメントを読み込んで復習を行ったり、なぜそのコードを使用するのか?は言えるようにしていました。
フロントエンドのポートフォリオの準備は?
就活のためにポートフォリオを作ると思うのですが、ポートフォリオはどんな感じになりましたか?
ポートフォリオ制作は、Discordクローンのようなチャットアプリ、管理画面作成と、Webサイト制作をReact、Next.js、TypeScriptを用いて、MicroCMSを連携しました。
UIがめちゃくちゃ凝ってますね👀
さすがWeb制作をされてるだけあって、UIがめちゃくちゃ凝ってますね👀
そういえば、メンターはつけなかったんですか?スクールには通ってないですよね?
その時にはMENTAを利用してメンターを雇い、相談したり質問しながら制作しました。
MENTAはスポット利用できるので、いいですよね!Reactのポートフォリオ作成支援している方も複数いらっしゃいます。
\MENTAの詳細はこちらから/
フロントエンド就職活動 面接1stシーズン(2023年6~8月)
180社応募 内定0で厳しさを感じた転職活動
フロントエンドの学習をし、ポートフォリオも揃った。
ついに就活の話を聞いていきますが、どうでしたか?
私の中では、未経験でしかも独学でフロントエンドって厳しいって認識なんですが…
正直フロントエンドエンジニア転職はかなり厳しかったです…
1年半学習しながらようやく内定をいただきました。
転職で大事なのは、学習ではなくて、面接です。
「今まで作成されたアプリに対して、どこが大変でした?どう解決できましたか?」
これにはっきりと言えるための学習でなければいけません。
そこで苦労したことも含め面接官に刺さらないと、例え何時間も学習したとしても、「あまり理解していない、情熱を注いで頑張っていない」
そう判断されかねないからです。
具体的な戦績などお聞きしてもよろしいでしょうか?
面接の応募数、各面接の数値について以下にまとめました!
応募はGeeklyというサービスを使っています。
ステージ | 件数 |
---|---|
応募 | 180社 |
1次面接 | 19社 |
2次面接 | 5社 |
内定 | 0 |
応募180社→内定0。。。これは厳しいですね…
落ちた理由とか聞かれましたか?
落ちた理由は、「コミュニケーションは良いが、Reactの理解が乏しいし、未経験がやはりひっかかる」とのことでした。
フロントエンド就職活動 面接2ndシーズン(2023年8-10月)
Web制作経験が面接官に刺さった!!
内定0でも、ここからまた立ち上がって2ndシーズンの就職活動を始めたんですよね?前回と違う、何か明確な戦略があったんですか?
そうなんです。面接1シーズン目では、主に学習してきたことをメインに話したのが敗因だと気づいたからです。
「もっとWeb制作でしてきた企画、実装に関して話してみよう」と戦略を立て直しました。
確かに、これまでのWeb制作経験も実務なので絶対使えますよね。今日一番重要な部分ですね!!
やはりそこで、Web制作の経験はかなり活きました!!
ステージ | 件数 |
---|---|
応募 | 12社 (Wantedly, Green) |
1次面接 | 5社 |
2次面接 | 3社 |
内定 | 2社 |
おおおおおおおおお!?応募数が12社とめちゃくちゃ少なくなったのに、内定が2社で内定率がすごく高くなってる!
Web制作経験を話して、相手の反応はどうでしたか?
「サイト制作に対する熱い思いが、Webアプリにも発揮できると思えた」
「特にディレクション経験もあるならうちにぜひ」
とお声かけいただけたので、Web制作の経験はかなり役に立ちましたね!
良い話を聞きました。
入社される企業ではどんな仕事を行うのですか?
入社する会社の事業は、人材サービスや業務効率化のWebアプリ制作やサイト制作・LPなどもありますので、そちらの実装がメインとなり、1-2個のWebアプリのディレクション業務も行う予定です。
今からWeb制作からフロントエンドに転職するのはおすすめ!!
これを見ている人は、Web制作関連の人が多いと思います。
今からWeb制作→フロントエンドっておすすめですか?
すごくおすすめしたいです!!
個人で稼ぐとかではなく、企業に勤めて自分のスキルの市場価値を上げて行きたい人もいると思います。
ただ、コーダー職ですと素晴らしい職であるにもかかわらず、市場では低めにみられることがしばしばありますよね。
フロントエンドエンジニアは、2,3年で、年収をでコーダーの時の1.5倍に上げやすいと言われている職種ですし、経験3年で月80万円超えの業務委託契約のお仕事もあるから夢があります。
1年前はReactの募集も少なかったのが、今ではかなり肌感覚でも増えてきていると感じています。
おぉ〜やはり直近でも求人・案件が増えてきてるんですね!!
あとは、何より一緒にアプリ制作やホームページを最新技術使って作っていくのを想像するだけでも、楽しそう…!!と思ってしまいます。
クリエイティブが好き!新しい技術に触れたい!という方はキャリアアップすることをぜひおすすめしたいです。
フロントエンド学習ロードマップ
まずはこれをやるべし!!
フロントエンド志望の人も見ていると思うので、もし「今から学ぶなら、これはまず勉強したほうが良い」みたいなものがあれば教えて欲しいです。
そうですね。まずはぜひReactなどのモダンフロントエンド言語で作成されているサイトに触れてみてほしいです。
そうすることで、高速で堅牢なサイトが作れると知ることができ、言語取得後に作れるもののイメージもつきますので。
あとは、「作って学ぶ Next.js/React Webサイト構築」を見ながら、Reactのフレームワークである、Next.jsで作成するサイト制作に触れてみましょう。
「作って学ぶ Next.js/React Webサイト構築」は私も見ましたが、Web制作している人でも分かりやすい本ですよね!
そうですね!JavaScriptがそこまで分かっていなくても簡単に進めることができるので、とても手がつけやすいです。
もしここでやったNext.jsが面白く、フロントエンドエンジニアになりたいと思ったら、先程述べた私の転職までの流れの学習を行ってみてください!
さいごに:フロントエンドの世界は楽しい!!
最後に、これを見ているWeb制作をされている読者にメッセージをお願いします!
コーダーとして、独立するのも稼げるようになるのもいいと思うんです。
ただ、Web制作を通じて「クリエイティブって楽しいな」と感じたのなら、Web開発に手を出してからでも独立するのは遅くないのかなと思います。
Web開発の方が正直なところ楽しいです笑
今使っている技術がいつ無くなるかわからない不安を抱えるぐらいなら、もう一歩進んでフロントエンドエンジニアの道を進むのも悪くないと思っています。
少しでもフロントエンドエンジニアを目指したい…!!と思っているのなら、一緒に頑張りましょう!!
ありがとうございました!!
編集後記:実務経験とクリエイティブへの愛が大事
今回のインタビューを経て思ったことは、以下です。
- しゅーへいさんはモノづくりが好きで、好きは大事
- ディレクション経験などが活きる
- 信念を持って制作しているなら、それは強みになる
しゅーへいさんの実績を見ていると分かりますが、明らかに「Web制作に本気で取り組んだ跡」が見えます。
Webアプリ開発も、要件を適切に吸い上げて開発につなげるのが重要なので、こういった実務でのコミュニケーション力は大いに役立ちます。
もっと言うと、重要なのは、ただWeb制作をしていればそれがアピールにつながるのではなく、「どんな信念を持って制作しているか」を言えるようにしておくことが、とても大切だと思いました。
フロントエンドへの道は楽ではないと思いますが、今回の内容をよく復習して、挑戦していただきたいと思います。
最後に、管理人とフロントエンドの話を少し
最後に私自身のフロントエンドとの付き合いの話をして終わります。
私は2018年からフリーランスのWeb制作者ですが、2020年あたりからWeb制作界隈でもVueやNuxtが流行り始め、制作現場に入ってきていました。
その時契約していた制作会社でも、サービス開発にNuxtが入り、未経験から挑戦した過去があります。
突然「Nuxtやりませんか?」って連絡が来ました笑
つまり、フロントエンド案件はフリーランスWeb制作者からでも挑戦することができます。
しかし、未経験なので死ぬほどきつくて辛くて、あほみたいな質問を先輩エンジニアにして困らせたり、Gitでこんがらがったり、色々事故りましたが、エンジニアとして急成長できたのは確かです。
先輩も優しかった。
そういった素晴らしい制作会社や人と仕事をできるかは正直運だと思いますが、今フリーランスWeb制作者の方に、個人的にはその道もありなんじゃないかなと。
未経験での実務の挑戦は胃が痛くて寝れなかったので、しゅーへいさんが示してくれたロードマップや学習手順を参考にしつつ、今のうちから学習しておくのが良いと思います笑
制作会社への営業文やポートフォリオに関しては、有償にはなりますが、本気添削するサービスもやってるので、ぜひ活用していただければと思います。
その他のインタビュー記事
ご寄付を頂けると今後の更新の励みになります!