プログラミング/仕事

Web制作フリーランスから未経験で自社開発企業のフロントエンドエンジニアに就職する秘訣を徹底インタビュー

Web制作フリーランスから未経験で自社開発企業のフロントエンドエンジニアに就職する秘訣を徹底インタビュー
本ページにはプロモーションが含まれています。

今回は、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企画立案→実装まで行っております。

こちらが制作実績になってますね。

しゅーへいさんの実績はこちら

https://shumiofficial.com/design_all/

しょーご

制作物のクオリティがめちゃくちゃ高い!!

デザイナーさんと二人三脚での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サイト構築
Udemy13種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座
Udemy2最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座
UdemyUnderstanding TypeScript
YouTubeReactとTypeScriptを使って かんたんな電卓アプリを作る – 前編・後編
YouTubeTodoリストを作りながらTypescriptとReactを触ってみよう
YouTubeBuild and Deploy a Modern Next 13 Website With Framer Motion & Tailwind CSS
YouTubeBuild 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で作成するサイト制作に触れてみましょう。

created by Rinker
¥3,158 (2024/04/17 19:23:11時点 Amazon調べ-詳細)
しょーご

作って学ぶ Next.js/React Webサイト構築」は私も見ましたが、Web制作している人でも分かりやすい本ですよね!

しゅーへいさん

そうですね!JavaScriptがそこまで分かっていなくても簡単に進めることができるので、とても手がつけやすいです。

しゅーへいさん

もしここでやったNext.jsが面白く、フロントエンドエンジニアになりたいと思ったら、先程述べた私の転職までの流れの学習を行ってみてください!

さいごに:フロントエンドの世界は楽しい!!

しょーご

最後に、これを見ているWeb制作をされている読者にメッセージをお願いします!

しゅーへいさん

コーダーとして、独立するのも稼げるようになるのもいいと思うんです。

ただ、Web制作を通じて「クリエイティブって楽しいな」と感じたのなら、Web開発に手を出してからでも独立するのは遅くないのかなと思います。

しゅーへいさん

Web開発の方が正直なところ楽しいです笑

今使っている技術がいつ無くなるかわからない不安を抱えるぐらいなら、もう一歩進んでフロントエンドエンジニアの道を進むのも悪くないと思っています。

しゅーへいさん

少しでもフロントエンドエンジニアを目指したい…!!と思っているのなら、一緒に頑張りましょう!!

しょーご

ありがとうございました!!

編集後記:実務経験とクリエイティブへの愛が大事

今回のインタビューを経て思ったことは、以下です。

  • しゅーへいさんはモノづくりが好きで、好きは大事
  • ディレクション経験などが活きる
  • 信念を持って制作しているなら、それは強みになる

しゅーへいさんの実績を見ていると分かりますが、明らかに「Web制作に本気で取り組んだ跡」が見えます。

https://shumiofficial.com/enhance_homepage/

Webアプリ開発も、要件を適切に吸い上げて開発につなげるのが重要なので、こういった実務でのコミュニケーション力は大いに役立ちます。

もっと言うと、重要なのは、ただWeb制作をしていればそれがアピールにつながるのではなく、「どんな信念を持って制作しているか」を言えるようにしておくことが、とても大切だと思いました。

フロントエンドへの道は楽ではないと思いますが、今回の内容をよく復習して、挑戦していただきたいと思います。

最後に、管理人とフロントエンドの話を少し

最後に私自身のフロントエンドとの付き合いの話をして終わります。

私は2018年からフリーランスのWeb制作者ですが、2020年あたりからWeb制作界隈でもVueやNuxtが流行り始め、制作現場に入ってきていました。

その時契約していた制作会社でも、サービス開発にNuxtが入り、未経験から挑戦した過去があります。

しょーご

突然「Nuxtやりませんか?」って連絡が来ました笑

つまり、フロントエンド案件はフリーランスWeb制作者からでも挑戦することができます。

しかし、未経験なので死ぬほどきつくて辛くて、あほみたいな質問を先輩エンジニアにして困らせたり、Gitでこんがらがったり、色々事故りましたが、エンジニアとして急成長できたのは確かです。

先輩も優しかった。

そういった素晴らしい制作会社や人と仕事をできるかは正直運だと思いますが、今フリーランスWeb制作者の方に、個人的にはその道もありなんじゃないかなと。

未経験での実務の挑戦は胃が痛くて寝れなかったので、しゅーへいさんが示してくれたロードマップや学習手順を参考にしつつ、今のうちから学習しておくのが良いと思います笑

制作会社への営業文やポートフォリオに関しては、有償にはなりますが、本気添削するサービスもやってるので、ぜひ活用していただければと思います。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!