フロントエンドエンジニアに未経験からなるには?具体的な就職・転職方法について解説してみた
フロントエンドエンジニアになられたい方は、以下のような悩みをもっていらっしゃるのではないでしょうか。
- フロントエンドエンジニアの概要は知っているけど、実務レベルではどんなスキルが必要かよく分からない…
- 具体的にフロントエンドエンジニアになるキャリアパスが知りたい…
- 未経験からでもフロントエンドエンジニアになれる求人が見つからない…
今回は、現役エンジニアの方に「未経験からフロントエンドエンジニアになる方法」について質問した内容を纏めてみました。
目次
フロントエンドエンジニアとは
フロントエンドエンジニアは、Webサイトを制作する上で必要となる技術を習得したエンジニア、またはWebアプリ開発の分野で主にフロント(見た目の部分)のプログラミングをするエンジニアのことを指します。
HTML / CSS / JavaScript( jQuery) / Bootstrap
フロントエンドエンジニアに求められるスキルは、HTML / CSS の知識だけではなく、Webブラウザ上で動作するJavaScriptというプログラミング言語、更にはJavaScriptのライブラリという形で提供されているjQueryの知識なども必要になってきます。
また、Bootstrapというフレームワークの利用時は、基本的なHTML / CSS / JavaScript の知識に加えて、Bootstrap独自のグリッドシステムやコンポーネントという概念を理解しなければなりません。言語ごとに、詳しく解説していきます。
HTML / CSS
HTMLはWebページ上のコンテンツ(テキスト・画像)をタグで囲い、マークアップしていく言語です。HTMLの基本的なコーディングだけでなく、タグの適切な使い分け(header, nav, article, section, aside, footer)を理解する必要があります。CSSは、HTMLでマークアップした内容にデザインを適用するものになります。
JavaScript
JavaScriptは、Webブラウザ上で動作するプログラミング言語です。よく見かけるスライドショー(数秒ごとに画像が切り替わる仕組み)や、ユーザーに注意を促すときに使われるポップアップウィンドウなども、JavaScriptによる実装です。
Bootstrap
Bootstrapは、ウェブサイトやWebアプリケーションを作成するフロントエンドのフレームワークです。
通常、Webサイトのデザインを整えるには手間と時間がかかる大変な作業でしたが、Bootstrapは予め用意された部品(コンポーネント)を利用することによって、見た目の整った綺麗なサイトを簡単に作ることができます。
PHPとWordPressによるサイト制作
フロントエンドエンジニアには、サーバーサイドのプログラミング言語であるPHPの習得も欠かせません。PHPは、Webブラウザ上で動作するJavaScriptのようなプログラムとは違い、サーバーと呼ばれる専用マシンの中で動作するプログラムです。
Web制作の現場でよく利用されるWordPressは、PHPで動作しているため、フロントエンドエンジニアとして活躍していくには、WordPress独自の仕組みや、裏側で使われているデータベース、データベースから取得した記事データをPHPでどのように処理していくのかを理解しておく必要があります。
また、Web制作系のフロントエンドエンジニアとして任される仕事の大部分は、WordPressによるオリジナルテーマ開発になるので、WordPressを理解するためのPHPと、データベース操作などの簡単なバックエンドスキルも必要です。
JavaScript系React / Vue.js のようなフロントエンドフレームワークを利用できる, SPA
WordPressまでを一通り学んだ後は、次のステップとしてWebアプリの開発があります。Webアプリ開発は、Webサイト制作に比べてみても、開発規模や投入される予算なども全く異なるため、複数人のエンジニアで分業して開発を進めることが多い仕事です。
Webアプリ開発の分野では、フロント部分の開発を効率よく行う仕組みとして、JS系のフレームワークがよく利用されますが、主要なJS系フレームワークは、SPAと呼ばれる、従来のWebフロントエンド開発とは少し違った開発スタイルになります。
主要なJS系フレームワークは、Googleが開発している「AngularJS」、Facebookが開発している「React」、そして Evan You氏(個人開発者)から広まった「Vue.js」の3つが有名です。
フロントエンジニアのキャリアパス
次は、フロントエンドエンジニアになるためのキャリアパスについて見ていきたいと思います。
バックエンドを経験した後、フロントエンドに興味を持って転向するパターン
サーバーサイドのプログラミングを経験したのち、フロントエンドの技術に興味を持ち始めて、フロントエンドエンジニアに転向するエンジニアもいます。
ただ、このタイプのキャリアパスを築くには、まずサーバーサイドのシステム開発を経験する必要があるため、フロントエンドエンジニアへのキャリアパスとしてはおすすめできません。
未経験の場合はコーダーから転職するパターンおすすめ
未経験からフロントエンドエンジニアを目指すキャリアパスとしておすすめしたいのが、Web制作会社でコーダーとして働き、Web制作からフロントエンド開発の経験を積むことです。
制作現場によって業務範囲は異なるかもしれませんが、簡単なコーダーの仕事としては、決められたデザインや修正指示を受けて、HTML / CSSを駆使してWebページの修正を行います。また、少し難易度の高いコーダーの仕事だと、WordPressによるオリジナルテーマ開発を任される場合もあると思います。
未経験の方が一番無理のないステップでフロントエンドエンジニアへのキャリアパスを築けるのが、Web制作の分野からコーダーとして経験を積むパターンではないでしょうか。
ある程度のフロントエンドの知識がついてきたところで、Webアプリ開発の基礎を学習し、JS系のフロントエンドフレームワークを習得していきます。Web制作でフロント開発の基本を習得していれば、JS系のフロントエンドフレームワークも理解しやすくなります。
未経験からフリーランスは難しいので、一度コーダーとして転職するのがおすすめ
未経験からフロントエンドエンジニアを目指す場合は、コーダーとして一度はWeb制作会社に就職するキャリアの積み方がおすすめです。
ある程度、エンジニア経験がある方だと、業界知識や実務レベルの知識がついていますが、未経験からいきなりフリーランスを目指すのはハードルが高いです。残念ながら、Webプログラミングスクールなどで最低限のフロントエンドの知識を学んだくらいでは、実務をこなせるスキルには到達できないのが現実だと思います。
コーダーに未経験からなるには?
フロントエンドエンジニアのキャリアパスとして、コーダーからキャリアパスを築いていくのがおすすめだとお伝えしました。では、具体的に未経験からコーダーになるにはどのようなステップを踏めば良いか、詳しく解説していきます。
プログラミング言語を学習する
まず、コーダーになるにはプログラミング言語を学習する必要があります。記事の冒頭でも解説しましたが、最低限学ぶべき言語としては「HTML / CSS / JavaScript(jQuery) / Bootstrap」です。
簡単なコーディングの仕事ならこれだけでも十分なのですが、実際の制作現場ではコーディングしたWebサイトをWordPress化してクライアントに納品することがほとんどです。
そこで、コーダーとして未経験から就職・転職を考えている場合は、サーバーサイド言語のPHP、そしてPHPをベースとして動作するWordPressのオリジナルテーマ開発までを学習しておきましょう。
ポートフォリオを作る
経験者・未経験者を問わず、制作実績については応募者のスキルの度合いや、仕事に対する姿勢などを評価する判断材料となるため、ポートフォリオの有無は必ず聞かれます。
今回お話を聞いた現役エンジニアの方にも、Web制作会社への就職で聞かれたことを教えてもらいました。
当時の採用面接で実際に以下の質問をされたそうです。
- これまでのWebサイトの制作実績はありますか?
- 制作したWebサイトはどのような技術で制作していますか?
- WordPressで制作したWebサイトは、オリジナルのWordPressテーマですか?
- WordPressが動作する仕組みや、DB操作の基礎知識はありますか?
- プログラミング経験はどれくらいで、どのようなシステムを作ってきましたか?
- Webマーケティングなどにも興味はありますか?
- WebデザインやDTPデザインの経験はありますか?
このように、就職面接ではかならず実績を聞かれるため、ポートフォリオを用意する必要があります。独学、スクール学習のどちらであっても、制作実績としてまだ提示できるものがない場合は、以下2つのポイントを意識してポートフォリオを制作しておきましょう。
- 掲載している模写サイト、架空のWebサイトで使用した技術を明記する
HTML / CSS だけで制作したなら、その2つを使用した技術として書きます。もしWebデザインも自分でゼロから実施した場合は、Webデザインで使用したツールなども記載します。
サイトごとに使用した技術を明記しておくと、この人は「何ができて、何ができないのか」という判断がとてもしやすくなります。細かいことですが、見る人に配慮した対応ができているかも、ポートフォリオのクオリティとして評価される部分です。
- プラスαで、自作機能を実装したかどうか
WordPressのオリジナルテーマ開発などは、コーダーとしての大きな評価ポイントになります。自作したWordPressテーマの中でブログの新着記事・人気記事をトップページに表示するような実装を自分でゼロからコーディングして、未経験でも即戦力として活躍できるスキルがあるとアピールしましょう。
面接対策
未経験からコーダーになるアドバイスとして、基本的な面接対策についても共有しておきたいと思います。
【志望動機】
まずは、志望動機です。就職・転職活動を行うときは、エントリー先の企業が公開している情報をできるだけ多く収集しておきましょう。
企業ホームページの全ページチェックはもちろん、ブログを書いている企業であれば、読み込める範囲でとにかく情報収集します。情報発信の媒体はホームページやブログ以外にも、Facebookページや各種求人広告の募集要項なども含まれます。
様々な視点からエントリー対象の企業が発信している情報を確認し、自分自身が「この会社に入りたい動機」「入社後の勤務イメージ」を膨らませます。このように、まずは自分からエントリーする企業に興味を持つことが、面接時にも企業からあなたに興味を持ってもらうきっかけとなります。
【面接対策】
最近だと、私服OKで、社員全員がラフな格好な企業もあります。しかし、応募要項に「面接時も私服OK」と記載がない限りは、無難にスーツで面接に向かうことをおすすめします。
質疑応答についても、焦らずに面接する方の話をしっかりと聞いて、こちらから回答を伝える前には、質問内容を復唱することが大切です。
質問された内容を言葉にすることによって、自分がこれから回答する内容も的確な返事になるはずです。もし質問内容が理解できない場合でも、分からないことは正直に質問して、自分が理解した上で回答するか、知識不足で回答できない旨をしっかりとお伝えします。
未経験なので、ある程度の知識不足は許容してくれると思いますが、できるだけ業界への理解は深めておきましょう。
以下の書籍などから、実際の制作現場のイメージを掴むことができます。未経験からのキャリアチェンジであれば、自分自身で興味を引く書籍を書店から探し出して、いくつかの書籍を読んでみることをおすすめします。
●参考書籍
フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド
コーダーにおすすめの会社
未経験からコーダーになる方におすすめの制作会社についてもお伝えしておきます。ポイントは1点だけなので、ぜひ意識して就職・転職活動の参考にされてください。
コーダーにおすすめの会社を選ぶポイント
- 自社のホームページに掲載している制作実績が多く、サイト制作をメインで行っている会社を選ぶ。
サイトの制作実績が多い会社とは?
Web制作会社の中には「マーケティング専門」でやっていて、LPのようなペライチのWeb制作がメインの会社もあります。Webマーケティングを学び、Webディレクターを目指すのであれば別ですが、コーダーとしての実務経験を積み、フロントエンドエンジニアを目指す方にはおすすめできません。
しっかりと自社でWeb制作を行っている制作会社かチェックして、入社後は自分もコーダーとして毎日コードを書く仕事をしているイメージができる会社を選びましょう。
コーダーに、30代からなれる?
30代からコーダーを目指す方もいると思いますが、正直なところ20代に比べると就職・転職活動は難しいと思います。しかし、スキル次第ではコーダーやフロントエンドエンジニアを目指すこともできるので、正しい業界知識と必要スキルを習得していきましょう。
20代は比較的コーダーになりやすい
20代の場合は、コーダーとして必要なプログラミング能力を習得して、自分のポートフォリオを作成し、転職エージェントを活用して行動すれば問題ないと思います。
30代は派遣勤務からキャリアを築く or フリーランス
コーダーとしての就職・転職活動が難しいのは30代の方です。30代になると、ひとつの職業である程度のキャリアを築いていてもおかしくない年齢なので、純粋なプログラミングスキルだけではなく、これまでの経歴なども評価されるようになります。
30代、未経験からコーダーとして正社員は厳しいかもしれませんが、まずは派遣から実務経験を積んでキャリアパスを築いていくと、30代からでもフロントエンドエンジニアを目指すことができるのではないでしょうか。
私が知っている30代、未経験からコーダー・フロントエンドエンジニアへのキャリアチェンジを達成した方は、就職ではなくフリーランスとして活動されています。
元々は営業職でバリバリの営業マンだったこの方は、全くのプログラミング未経験から、6ヶ月くらいの学習プランでプログラミング習得までの期限を定め、学習開始4ヶ月目には、個人での案件獲得を達成されています。
コーダーになるためのおすすめの学習教材・プログラミングスクール
ここからは、実際にコーダーになるための学習をされる方に向けて、おすすめの学習教材・プログラミングスクールをご紹介します。
本気でコーダーを目指す方におすすめする、最初の学習方法は書籍による学習です。
1冊数千円〜でとてもコスパよく学べると思います。
コーダーになるためのおすすめの学習書籍
無料でできるプログラミング学習サービスなどもありますが、穴埋め式やクイズ形式だけのプログラミング学習には注意が必要です。実際の開発では、自分のパソコンに開発環境を構築して、そこから制作を進めていくことになるので、実践で使う環境構築から解説している書籍での学習をおすすめします。
● 参考書籍(HTML, CSS, JavaScirpt 編)
HTML&CSSとWebデザインが 1冊できちんと身につく本
● 参考書籍(Bootstrap 編)
Bootstrap 4 フロントエンド開発の教科書
Bootstrapチュートリアル:Youtubeで公開されている無料のBootstrapチュートリアル(英語解説)
● 参考書籍(PHP, WordPress 編)
WordPressユーザーのためのPHP入門 はじめから、ていねいに。
ビジネスサイトを作って学ぶ WordPressの教科書 Ver.5対応版
プログラミングスクールで、コーダー向けのコース
独学やプログラミング学習サービスでの学びを終えて、スクールの受講を検討している方がいる方に向けて、次はおすすめのプログラミングスクールをご紹介します。
他にもどんなプログラミングスクールがあるか気になる方は、こちらの記事をご覧ください。
TechAcademy
公式サイト:https://techacademy.jp/
学習言語 | HTML5/CSS3, Bootstrap, Git/Github, PHP |
受講場所 | 完全オンライン |
期間 | 4週間 |
講師 | 現役エンジニア |
主なサポート | ・毎日の毎日15時〜23時のチャットサポート ・週2回のマンツーマンメンタリング |
料金 | ¥149,000 |
全額返金保証 | なし |
転職紹介 | 受講生限定のスカウトサイト |

TechAcademyは、最短4週間で未経験からプロを育てるオンライン完結のスクールです。
副業でWeb制作をやってみたい!という方には、以下の2つの理由で特におすすめです。
-
完全マンツーマンなので、受講者一人ひとりに合わせたアドバイスをしてくれる
-
Wordpressに特化したコースがある
①完全マンツーマンなので、受講者一人ひとりに合わせたアドバイスをしてくれる
現役エンジニアのパーソナルメンターがつくことで、以下のことができるようになります
- 挫折する可能性がぐっと下がる
- 自立して学習できるようになるので、案件が取れるようになる
①挫折可能性がぐっと下がる
まず、プログラミングを学ぶほとんどの人が、モチベーションが続かず最初につまづいて辞めてしまう傾向にあります。
パーソナルメンターがいれば、最初の一番きつい学習期間を一緒に乗り越えられるので、学習が継続します。

②自立して学習できるようになるので、案件が取れるようになる
Web制作の現場は、常に自分で調べながら学び続けなければいけませんが、なかなか自分自身の力でエラーを解決するのは難しいですよね。
マンツーマンのメンターがいると、プログラミングの課題をどうやって解決すればいいか、「学習方法」を学ぶことができます。
- 週に2回の面談
- リアルタイムでのチャット質問
ができるので、受講者の方も非常に学習が進めやすかったそうです。(インタビュー記事より)

②Wordpressに特化したコースがある
そんなWordpressに特化したコースがTechAcademyにはあります。
料金は一番短いプランであれば15万円ほどなので、かなり安いです。
企画からこのコースを受講することで5万円ほどの案件を獲得するのに必要なスキルがすべて学べるようになっています。
また、TechAcademyでは、無料体験ができるようです。まずは無料体験に申し込んだうえで、レッスンを受けてみるのがよいかと思います。
※更新情報 2020年5月 TechAcademyのコースは、1コース申し込むと、もう1コースが割引になるセット割があります。 Webデザイン+WordPressセットを申し込むと、普通に学ぶ場合よりも30,00円〜60,000円もお得になるようです。
公式サイト:
https://techacademy.jp/
TechAcademyでおすすめのコースは、フロントエンドコースとWordPressコースの二つです。まずはフロントエンドコースでコーダーとして必要なWeb制作の知識を習得して、それから実務でよく使われているWordPressのコースを学ぶのが、コーダーを目指す方にはおすすめです。
Codecamp
CodeCamp公式:https://codecamp.jp
Codecampは、オンライン・マンツーマン指導のプログラミングスクールとして高い実績を持つサービスです。サービスの特徴としては、以下のようになっています。
- 完全オンラインで学習可能
- 東証一部上場企業の厳選された現役エンジニアが学習をオンラインレッスンでサポート
- フロントエンド、バックエンド、ネイティブアプリ開発まで対応したコース
- 365日:朝7時~24時まで、現役エンジニアにテレビ電話で授業を提供
実際にCodecampを受講した方のインタビュー記事もあるので、こちらも合わせてご覧ください。
CodeCampに関しても、実際に申し込む前に無料で体験レッスンを受けることができます。無料カウンセリングもあるので、コーダーからフロントエンドエンジニアへのキャリアパスについて相談してみるのもおすすめです。
RaiseTech
RaiseTechは、完全オンラインのプログラミングスクールです。
特に他のサービスと異なる点は、以下の2つです。
- 講師は全員単価80万円以上の、現役エンジニア
- 現場レベルのスキルが身に付くカリキュラム
学習言語 | HTML,CSS,JavaScript(jQuery), |
受講場所 | 完全オンライン |
期間 | 4ヵ月間 |
講師 | 月単価現役エンジニアのみ |
主なサポート | ・10:00 ~ 24:00(月曜日 ~ 日曜日)でオンライン質問対応 ・Wordpressの副業案件獲得サポート(ポートフォリオの添削など) |
料金 | 通常:¥261,800 学割:¥173800 |
転職紹介 | 受講生限定Slack内でのキャリアサポートや仕事の紹介 |
今まで紹介したのは、ほとんどWeb系のスキルが学べるプログラミングスクールなんですよね。

一方で、大規模開発で求められるJavaや、クラウドサービスを利用したインフラ系のサービス(AWS, GCP)は需要が大きいのに、ほとんどのプログラミングスクールでは、そのスキルを学べる機会が少ないというのが現状でした。
RaiseTechには、Javaやインフラ周りのコースがあるため、Javaエンジニアやインフラエンジニアに興味がある方にはぜひおすすめできるスクールとなります。
こちらのスクールも、実際に取材してみました。
受けてみてとても転職支援がしっかりとしている印象でした。
というのも、しっかりと実務経験が得られる会社さんとのコネクションがあるので、転職サポートもかなりしっかりとしている印象です。
一方で、こちらもポテパンキャンプやRUNTEQと同じように、本格的に転職したい方ではないと、多分脱落します。
ということで、RaiseTechの評価です。
サポートの質 | ★★★★★(5.0) |
講師の質 | ★★★★★(5.0) |
カリキュラムのレベル | ★★★★★(5.0) |
転職支援の質 | ★★★★★(5.0) |
価格の安さ | ★★★☆☆(3.0) |
総合点 | ★★★★☆(3.8) |
ということで、RaiseTechを受講して、思ったことですが、転職する方なら、
- Web系でなくてもよいので、しっかりと最初の実務経験を身に付けたい方
- ある程度自分で学んでしっかりと進められそうな方
には、おすすめできるプログラミングスクールなのではないかと思います。
コーダーで転職するための求人・サイト・エージェント
最後に、コーダーとして転職するためのおすすめの求人サイトや転職エージェントをご紹介します。
コーダーに限らず、未経験からエンジニアに転職するときには、正しい業界知識を身に着けてから転職活動をすることが大切です。
コーダーとして転職するのがおすすめ。未経験OKの求人を持っているサイト
まずは転職エージェントを活用して、業界の情報を知ることが大切です。ポートフォリオの実績を提出して面接対策などを行ってもらいましょう。
しかし、エージェントの担当者によっては当たり外れがあるので、複数のエージェントに登録して、自分との一番相性のよいアドバイザーに転職支援をしてもらうのがおすすめです。
リクルートエージェント
リクルートエージェントは、求職者の8割が利用している、大手総合型転職エージェントです。
IT企業の取り扱いも多く、はじめて転職エージェントに登録するならリクルートエージェントがおすすめです。
リクルートエージェントに登録するメリットはなんといってもIT系の求人数が多いのがポイントです。
求人数 | 200,000件 |
エンジニア | 25959件 |
マーケティング | 5035件 |
セールス | 5337件 |
デザイナー | 256件 |
ライター | 101件 |
Webディレクター | 316件 |
IT系の求人数(2020年7月現在、各職種の該当検索数)
非公開案件も登録すると多くあるため、自分にあった企業を紹介してもらいやすいです。また、電話による面談なども可能になっています。
デメリットとしては、アドバイザーの質にばらつきがある点です。特に入社したばかりの新卒がアドバイアーにつくこともあります。
登録するとより詳細な求人が見れるので、
- エンジニアでどんな求人があるのかを見て、何が求められているのかを把握する
- 実際にエージェントに相談しつつ、現状のレベルで未経験から転職できるか相談する
- 就活対策をしてもらう
といった対策を取ることがよいでしょう。
2020年3月追記:補足情報
リクルートエージェントに登録すると、非公開求人をみれたり、転職エージェントとのカウンセリングを組むことができます。
簡単に登録できるので、ぜひこの機会に登録して、求人をみてみてください。
DODA
dodaは、パーソルキャリアが運営している、総合型転職サイト・転職エージェントです。
転職サイトと転職エージェントの両方を持っているので、求人検索から応募までが、一つのサービスで行うことが可能です。
最も大きな特徴が、リクルートに次ぐ求人数。
求人数が多ければ多いほど、自分にあった転職先の候補を増やすことができます。
求人数1位のリクルートエージェント、求人数2位のdoda、求人数3位のパソナキャリアは、いずれも登録しておくのがおすすめです。
また、キャリアコンサルタントの質もかなりいいと評判です。
DODAに1分で無料登録するワークポート

メリットとしては、とにかくIT・Web業界の求人に強いので、未経験からIT業界を検討している人にはおすすめです。
一方で、デメリットとしては、IT業界以外の求人が少ないので、エンジニアなどのIT職種以外を検討する場合はあまりおすすめできません。また、とにかく求人数を渡してくるので、一人一人に対するスキルの棚卸しはなどは弱いです。

マイナビIT
マイナビITは、もともとIT・Web分野の会社との繋がりが強いマイナビ転職が、IT業界向けの転職エージェントに特化して立ち上げられた転職エージェントです。
在籍するキャリアアドバイザーはIT系業界出身者も多く、Web業界への転職活動における正しい業界知識を教えてもらいながら、転職活動に専念できます。
Wantedly
Wantedlyは転職サイトのようにウェブ上で転職したい企業を探すことができる転職サービスです。他の転職サービスとの大きな違いは、 選考前に企業の担当者に気軽に話を聞きけるため、自分の興味ある企業の方とSNSのような感覚で繋がりを持つことができます。
本格的な転職活動の時には、他の転職エージェントとの併用が必要ですが、スキルや経歴から繋がることができるので、SNS利用に慣れている人にはおすすめです。
コーダーで、未経験からOKの派遣案件を扱っている求人
コーダーで未経験OKの派遣を扱っている求人サイトをご紹介します。
求人ボックスは、カカクコムが運営する求人に特化した検索エンジンです。
求人ボックスは地域や雇用形態に関わりなく、さまざまな求人を偏りなく掲載しており、派遣として働けるコーダーの求人も検索することができます。