フロントエンジニア

「フロントエンジニア」は、フロントエンドエンジニアとも呼ばれる職種で、主な業務はWebサイトの制作になります。Webサイトの制作は、Webディレクター、Webデザイナー、HTMLコーダーなどさまざまな専門的技能を持った人がかかわりますが、フロントエンジニアもその一つです。
フロントエンジニアとは言葉の通り、画面上に見えている部分、すなわち「Webサイトのフロント面」の実装を行う人です。主に「HTML（エイチティーエムエル）と「CSS（シーエスエス）」で骨組みとレイアウトの実装を行い、「JavaScript（ジャバスクリプト）」で動きの部分を実装します。
以前であればWebサイトの見た目の部分に関してはHTMLコーダーが担当し、動きのある部分や検索などに関してはWebプログラマーが担当していました。しかし、HTMLコーダーはプログラムに関する知識に乏しく、WebプログラマーはWebサイトのデザインやブラウザの知識に乏しいといったケースが多く、そうした状態では連携が取れずに業務効率が落ちてしまいます。そこで登場したのが、HTMLやCSSの知識も持ちつつ、プログラム業務も行える高度な技術を持ったフロントエンジニアです。

Webデザイナーのデザインをもとに、アクセシビリティやUIを意識しつつ、HTML、CSSやJavaScript、PHPといったプログラム言語を使ってWebサイトを構築することが具体的な業務内容になります。
また現在、WebデザイナーのデザインをもとにWeb制作を行う職種は、フロントエンジニアのほかにも上述したHTMLコーダーのほか、マークアップエンジニアといった職種もあります。
ただし、これらの職種に明確な線引きはなく、場合によってはHTMLコーダーもマークアップエンジニアも、行う業務は変わらないといったこともあります。そして同様に、マークアップエンジニアもフロントエンジニアも同じ業務を行うといったケースもあります。Web制作会社によって名称が異なる場合があり、それによって担当する業務も変わります。

「Adobe Photoshop（アドビ フォトショップ）」や「Adobe Illustrator（アドビ イラストレーター）」、「Sketch（スケッチ）」というデザインソフトで作られたデザインを受け取り、「Sublime Text 3（サブライムテキスト）」「Atom（アトム）」などのテキストエディタやIDE（統合開発環境）を使い実際にコードを書きます。「Google Chrome」や 「Firefox」などのWebブラウザを使い検証を行なっていきます。コードの管理には「Git（ギット）」というバージョン管理システムを使われることが多いです。
さまざまな作業を自動化する「Gulp（ガルプ）」や「Grunt（グラント）」という、Node.jsをベースとしたビルドシステムヘルパーを使用している企業もあります。その他にも色々なツールがあり、企業や個人によっても様々です。

フロントエンジニアの職場は、主にWeb制作会社、自社でサービスを運営する事業会社などが多いです。Web制作会社の場合のクライアントは直クライアントや広告代理店とのお仕事が多くなります。残業の多さは業種や企業によっても異なります。また独立してフリーランスとして自宅で作業をしたり、地方や海外に移住して仕事をする人もいます。

Web制作会社でのフロントエンジニアの1日の業務の例です。

• インターネットで情報収集
• 進行している案件のスケジュールを確認する
• タスク管理ツールをチェックして1日の予定を立てる
• 運用しているサイトのコーディング
• ディレクター・デザイナーなどからフィードバックを受け修正
• 新規立ち上げサイトのミーティング
• 他のエンジニアのコードレビュー
• チームミーティング
• 他の制作会社が開催するエンジニアイベントへ参加して情報交換を行う

などがあります。人によってはWebデザインに関わる事もあります。

主に正社員として勤務しますが、最近ではリモートを推奨する企業もあり自宅で作業を行うスタイルもあります。副業を許可する企業もあり、空いた時間で別の企業やプロジェクトに参画する人もいます。
また、仕事の特性的にも自宅やリモートで作業を行うスタイルはフロントエンジニアに向いています。そのためフリーランスのフロントエンジニアも増えています。フリーランスでは、自分で打ち合わせしたり修正の電話に対応するなど、コミュニケーションスキルは必須となります。

フロントエンジニアの平均年収は、およそ350～700万円前後が相場と言われています。より深い知識を有するフロントエンジニアの年収は、コーダーに比べると高くなります。企業によっては1,000万円を超える金額を提示する企業もありますので保有するスキルや企業の規模や事業内容によっても変わってきます。
また、フリーランスでフロントエンジニアをしている人もいます。フリーランスの給与はサイトの規模にもよるので一概に言えませんが、1件20万～30万円、大きいものですと1件100万円を超えるものもあります。

オンラインゲームやSNS、チャットサービスなど次々と新しいコンテンツが生まれていくWeb業界では、フロントエンジニアの需要はなくならないでしょう。しかしそれと共に、AIがどんどん進化しており、Web業界を取り巻く環境は猛スピードで常に進化しています。常に必要とされるフロントエンジニアであるために、現在の職務以外にもアンテナを張って積極的に新しい情報を取り入れていくことが望ましいです。

Webディレクターとして転身して上流に進む、技術を磨いて経験を積み、テクニカルディレクターや更に上のCTOを目指す、などがあります。同じエンジニアでもバックエンドエンジニアになるなどの道もあります。
また、専門知識のあるフロントエンドエンジニアがデザインを学び、WebデザイナーやUI/UXデザイナーとなると重宝される可能性もあります。最近ではフリーランスのエンジニアも増えている傾向です。IoTなども注目されているため、エンジニアが活躍できる場はWebだけに止まりません。

フロントエンジニアの求人は数多く出ています。なぜなら実際にユーザーが目にするのはフロントエンジニアが構築した画面であり、その品質が重要になるためです。
Web制作会社によってHTMLコーダー、マークアップエンジニア、フロントエンジニアなどが行う業務に違いがある場合があります。フロントエンジニアとして応募したつもりが、面接に行ったら業務内容が違っていた、といったことがないよう、応募する段階でしっかりと業務内容を確認しておくのがよいです。

専門のスクールで勉強をしてWeb制作会社に就職する方法のほか、HTMLコーダーをやりながらプログラムの勉強をする。もしくはWebプログラマーをやりながらHTMLやデザイン、Webに関する勉強をするといった形で、別の職種からフロントエンジニアになる方法があります。

フロントエンジニアは未経験から歓迎している求人もありますが、まったく知識がないよりもHTML、CSS、JavaScriptのスキルは最低限持っておいた方が有利になり、入社後もスムーズです。また、ポートフォリオは作っておいた方が自分のスキルをアピールできる事もできますし、企業もマッチしているかの判断できるため、用意しておいた方がいいでしょう。
専門スクールでは、短期間で必要な知識と技術を効率よく学ぶことができ、講師に相談して不明点を解決したり、一緒に学ぶ仲間がいる事で情報交換などもできます。そして自分のレベルが今どの程度なのかといった事も分かってくるようにもなります。また、デザインに関する知識も併せて習得できるスクールもありますので、短期間で効率よく学びたい場合はスクールに通うことをおすすめします。

フロントエンジニアになり業務を行うようになると、Webディレクター、Webデザイナーはもちろん、Web制作にかかわるさまざまな担当者からWebサイトに関する相談を頻繁に持ち掛けられます。また、その内容も「ここのデザインはCSSとJavaScriptどちらがいいか」、「こういった機能をAPIでつくることができるか」、「Webサイト上でこういった動きをしたいが実現可能か」、「CMSで構築するのとフルスクラッチで制作するのではどちらがいいか」など多岐に渡っています。
これらの相談に対し、予算、納期を計算しつつ瞬時に判断して答えられるようにすることは、フロントエンジニアに必要なスキルのなかでも、重要なものの一つです。そのためWeb制作全般に関する知識はもちろん、Webディレクターのように全体を俯瞰的に見て客観的な判断をするスキルも必要だといえるでしょう。
また、フロントエンジニアに必要なスキルとして英語があります。CMSやWebフレームワークのドキュメントの多くは英語表記のため、英語が理解できないと業務が滞ってしまいます。また自分でドキュメントを残す際も英語での記述を求められる場合があり、読めるだけではなく、英語の文章を書くスキルも必要です。
さらに2018年3月27日、Googleが発表したモバイルファーストインデックスにより、WebサイトはPCでの閲覧からスマホでの閲覧が主流になっていきます。これに合わせスマホ、タブレットのブラウザ、インターフェイスに関する知識やレスポンシブデザインへの対応が今まで以上に重要なスキルになります。

フロントエンジニアに必要な機材はパソコンです。スペックに関しては、データサイズの大きいデザインデータを受領することや、ゆくゆくは容量の大きなソフトやツールをインストールすることも考えられますので、可能な限りスペックや容量は惜しまず選択することが望ましいです。また、画面の大きな外部モニターがあると作業がしやすくなります。

HTMLさえできればWebサイトの制作ができた時代から、CSS、SEOの知識、CMS、JavaScript、モバイル対応（レスポンシブデザイン）、API、HTML/CSS、サイトの軽量化、表示速度高速化の知識など、Web制作にさまざまな知識、技術が求められるようになっています。最近は「React.js（リアクトジェイエス）」や「Vue.js（ヴュージェイエス）」「Angular.js（アンギュラージェイエス）」といったJSフレームワークもたくさん登場しています。このようにWeb業界の成長は大変早いため、常に新しい情報をキャッチして、新しい技術が出たら試してみるようにしたり、目を惹くサイトがあれば実際に作ってみるなど、知識とスキルを同時につけていくことがおすすめです。
また、フロントエンド エンジニアは特別な資格を必要とはしませんが、Webクリエイター能力認定試験の上級レベルである「エキスパート」やHTMLプロフェッショナル認定資格を取得しておくと、特にこれから就職、転職をしたいといった場合には有利になります。

• 好奇心が旺盛な人
• 新しい技術に常にアンテナをはっている人
• コミュニケーション能力が高い人
• プログラムだけでなくデザインにも興味がある人
• 与えられた仕事以外でも幅広く対応できる人
• 時間やスケジュールの管理、自己管理のできる人
• 細かい作業が好きで、よく気がつく人

HTMLコーダーなどに比べると求められるスキルが高く広い知識も必要なため、難易度は上がります。企業によっても採用基準は大きく異なり、未経験は採用しない、実務経験があっても一定のレベルでないと採用されないなどがあります。そのため、自分が進みたいジャンルや業界、将来のビジョンなども踏まえて勉強することが望ましいです。

専門のスクールに通う場合は内容によって大きく変わってきますが、～120万円前後が多いです。
学べる知識や期間によっても価格は変わってくるため、目的になったスクール選びが大切です。未経験であればWebに関する知識を広くつけておいたほうが良く、卒業後の就業先を考える際の視野の広さも変わってくるため、色々なことが学べるスクールがおすすめです。本を参考にする場合は、1冊2,000～3,000円が相場です。
有料のテキストエディタやFTPソフトを使用する場合にはそれらの費用、また実際にコーディングを行うパソコン購入費が必要になってきます。
その他、Photoshopなどのソフトフェア使用料（Adobe製品が全て使えるコンプリートプランで5,680円/月（税別）※学割あり）、インターネット環境を整える費用（3,000～4,000円/月）、サイトを実際に公開するためのレンタルサーバー代（300円前後～/月）などがあります。