WebサイトやWebアプリ開発において、機能設計を担当するフロントエンドエンジニア。ユーザーの目に見えるフロント部分のプログラミングや設計を行う仕事であり、ゲームの視認性や操作性を左右する重要なポジションです。本記事ではフロントエンドエンジニアの仕事内容や使用言語、必要なスキルについて解説していきます！ゲーム業界においてフロントエンドエンジニアを目指す方は是非参考にしてみて下さい。
目次
フロントエンドエンジニアとは？
フロントエンドエンジニアが作るのはどんなアプリ？
アプリケーションの開発形態は大まかに「ネイティブアプリ」と「Webアプリ」の違いがあります。「ネイティブアプリ」はAppleやGoogleのストアからアプリをダウンロードし、端末へインストールするアプリ。「Webアプリ」はダウンロードではなく、Webブラウザ上で動くアプリを指します。
これから説明するフロントエンドエンジニアの開発形態は「Webアプリ」が該当します。まずはここを抑えておく様にしましょう。
フロントエンドエンジニアの役割
フロントエンドエンジニアは、Webアプリを構築する上で必要となる技術や機能を設計していく役割を持ち、主にユーザーの目に触れる部分のプログラミング、設計、デバッグなどを担当します。
Webアプリ開発時の職務領域は大きく分けると「サーバーサイド」と「フロントエンド」に分かれており、ユーザーの目に見えないデータベースの処理をサーバーサイド。UI画面やボタン、フォーム機能などユーザーの目に触れる部分をフロントエンドが担当します。
扱う言語の特性上、Webサイトの開発時に多く用いられる職種名ではありますが、豊富なライブラリとフレームワークの登場、HTML5を使用したゲームの増加により、ゲーム開発の現場でも需要が多い職種の1つです。
ちなみに、良く混同されやすい職種名として、「コーダー」、「マークアップエンジニア」が存在します。
コーダーは、イメージ画像やデザイン案をWeb上で再現するためにHTMLやCSSを正確に使用してコーディングする仕事になっており、マークアップエンジニアは、コーディングに加えて内部構造やSEOを考慮したうえで複雑なコーディングを行います。
上記2つの業務に加えて、APIやCMSといった機能設計など多岐に渡る知識が必要になるのがフロントエンドエンジニアであるため、求められるレベルやスキルも高い職種です。
主な使用言語
・HTML5
HTML5とは、「Hyper Text Markup Language」の略で、見出しやヘッダーなど、Webページの文書構造を形作るための言語の最新バージョンです。これまでバージョン4まで存在していましたが、最新のHTML5ではマルチデバイスでの記述が可能になり、Web業界だけでなくゲーム業界でも多く使われています。
文字だけでなく動画や音声の埋め込みも簡単なタグ設定で記述が可能になり、文章構造も非常にシンプルにアップデートされています。
・CSS
HTMLで入力した情報に装飾を加えるための言語がCSSです。「Cascading Style Sheets」の略語で、スタイルシートと呼ぶ事もあります。
HTMLだけでは文書構造のみになってしまうため、文字に色を付けたり動きを加える事で見栄えをよくすることが出来ます。HTMLとセットで使用されるのが一般的です。
・javascript
javascriptとは、HTMLとCSSによって作られたページを”動かす”事が出来るプログラミング言語です。ゲーム内のポップアップや通知画面、フォーム、アニメーション等の動的なコンテンツ及びシステムを作る事が出来ます。
ゲーム開発においてはライブラリと一緒に使われる事が一般的で、2Dゲームの開発が可能な”Phaser.js”や、3DCG描画に特化した”Three.js”などが挙げられます。
※ライブラリ：ゲームやアプリ作成時に汎用的に使われるプログラムだけ取り出してまとめたファイルの事
主なフレームワーク(Javascript)
アプリケーション開発において使用されるJavascriptですが、最近は機能をまとめたフレームワークを利用する場合が多くなってきています。以下ではJavascriptに見られるフレームワークをご紹介します。
・jQuery
jQueryは、アニメーションやアプリケーション内の動きを実装するうえで使われるライブラリです。Javascriptを使用したことがある人であれば一度はし触ったことがあるのではないでしょうか。
JqueryではHTMLやCSSも簡単に操作することが出来、これまで数十行に渡るコードが必要だった挙動をスムーズに実装することが出来ます。
・React.js
React.jsはFacebook社が開発するJavaScriptライブラリです。HTMLへのアクセス操作の事をDOM操作と呼びますが、React.jsはこのDOM操作に特化しており、HTMLのような記述を可能にしています。
学習コストも低く実装時のパフォーマンスの良さから、現在、注目されているライブラリの一つとして知られています。
主な仕事内容
それでは具体的にどの様な業務が発生しうるのか、主な仕事内容について下記で詳しく解説していきます。
・コーディング作業
主にHTML/CSSを使用し、フロント部分を正確にコーディングする作業で、フロントエンドエンジニアにとって基本の作業になります。
ゲームアプリ内の機能やキャラクター、背景に対して、HTML,CSSを使って正確にコーディングする必要があります。ゲーム内容によってはCSSを用いてアニメーションの制作を行う事もあります。
・ライブラリ、フレームワークを用いた機能実装
プログラミング言語によるコーディング作業だけでなく、各言語の土台として機能するフレームワークの実装もフロントエンドエンジニアの仕事です。
例えばゲームアニメーション制作時にも使用されるCSSフレームワーク「BootStrap」は、ゲーム内に表示されるボタンやドロップダウンといったUIに関わるコードがまとまっています。ソフトウェア内に記載されたコードをそのままコピーする事で、より速い機能実装が可能になります。
またjavascriptのフレームワークである「Backbone.js」は、フロントエンドの実装をするためのシンプルなフレームワークです。プログラムをModel・View・Controllerの3つの役割に分けて記述するように設計されている為、プロジェクトのルールを全体で管理しやすいといった特徴があります。
・デバッグ
コーディングや機能実装が終わった後のデバッグ作業もフロントエンドエンジニアの業務範囲です。実装した機能がしっかり動作するか、仕様書通りのUI設計になっているか等を隅々まで確認し、バグが発生した場合は修正作業も行います。
また機能実装によりプログラムが重くなってしまうとゲームの読み込みも遅くなってしまい、ユーザーにとって使い心地の悪いゲームになってしまいます。そのため、設計時点でプログラムの高速化を心掛けたうえで、読み込み速度の低下などが生じた場合はその修正を行う必要があります。
年収
フロントエンドエンジニアの平均年収は400万円台が一般的な平均年収ですが、年齢別、スキル別で大きく年収が変わります。
例えば、ある大手ゲーム会社の募集要項は以下の様になっています。
――――――――――――――――――――――――――――――――――――
■募集ポジション：スマホゲームフロントエンドエンジニア
■年収：400万円 〜 1000万円※経験によって異なる
■主な業務内容
・HTML5 でのゲームの制作
・スマートフォンに対応したWebアプリケーションの開発
・オブジェクト指向を利用したJavaScriptでの開発
■必須条件
・HTML5, CSS3, JavaScript を利用したWebアプリケーションの開発経験
・JavaScriptの実務経験2年以上
――――――――――――――――――――――――――――――――――――
上記の様に求められる経験やスキルによって年収の幅も広いため、実務や自主学習によるスキルアップが必要になってきます。
フロントエンドエンジニアに必要なスキル
コーディングスキル
仕事内容において説明した通り、フロントエンドエンジニアには正確なコーディングスキルが求められます。ただ単に与えられた仕様を表現できるだけでなく、アプリケーションによってはSEO設計やレスポンシブデザインの実装も必須スキルになります。
またゲームの世界観やシステムを網羅したうえで適切なライブラリ、フレームワークを用いて機能実装まで行う必要があります。
UI・UXに対する知識
ユーザーの目に見える部分を担当するという事で、UI・UXに対する知見も欠かせません。
UIとは「User Interface」の略で、ユーザーとゲームを繋ぐ接点を意味しており、操作性、視認性といった”使いやすさ”を左右する部分になります。
またUXとは「User eXperience」の略で、サービスを利用する事で得られる”ユーザー体験”を意味しており、直感的に「良いサービスだ」と感じて貰う為の要素になります。
どんな機能を、どういう見た目で、どこに設置し、どう感じてもらうのか？
という要素をしっかりと理解したうえで、実際の設計や実装を行う事が求められます。
コミュニケーション能力、調整力
全ての職種に共通する事ではありますが、他部署との連携においてコミュニケーション能力は欠かせません。仕様やデザインを実際にゲームに反映させる際、プランナーやデザイナーの意図をくみ取ったうえでフロント設計をする必要があります。
また作業進捗の確認において遅延や想定外の事態が起きた場合、チームやクライアント との話し合いによりスケジュールを調整する必要があります。プロジェクト自体の統括はディレクターやプロデューサー、PMが行う事が殆どですが、設計面において幅広い知見と素養が求められるフロントエンドエンジニアの場合は、部署のチームメンバーをまとめる力や進捗状況の管理力も求められます。
フロントエンドエンジニアのキャリアパス
先述の通り、フロントエンドエンジニアの役割はWebアプリやWebブラウザゲームのUIUXを考えたり、ユーザーの目に触れる部分の設計を担当します。
キャリアパスには、Webデザイナー、コーダー、Webディレクター等多くのキャリアパスがあり、ゲーム業界に限っていえば、ゲームディレクター、ゲームプロデューサーといった現場監督、マネジメントの役職を目指すことが出来ます。
上記に挙げている必要なスキルに加えて、自分の得意分野/専門領域を1つでも作っておくことで、エンジニアとしての付加価値を高めることが出来ます。
フロントエンドエンジニアに向いている人
フロントエンドエンジニアに向いている人の特徴は、必要なスキルに加えて、最新情報にアンテナを立てることが出来る人が求められます。
Webゲーム、Webアプリのトレンドは、端末やゲームジャンルの増加、またゲームシステムの多様化により、技術面もトレンドも速いスピードで変化していきます。
日ごろから業務における最新技術のアップデートと勉強を欠かさない事。また最新のトレンドをインプットする事で、成果物としてアウトプットできる人が求められます。
フロントエンドエンジニアになるには？
ポートフォリオを用意する
就職・転職活動において重要になるのはポートフォリオの存在です。
特にゲーム業界未経験者や、職種未経験者の場合は書類審査で落とされてしまうケースが多いため、自分のスキルセットを分かりやすく証明する事で有利に求職活動を進めることが出来ます。
ポートフォリオを用意する際は、プログラムコードをインターネット上で共有・公開できるプラットフォーム「GitHub」を用いたり、自分が担当したゲームやアプリをまとめたファイルを用いる事で、自分のスキルを分かりやすく伝えることが出来ます。
その際のアピールポイントとしては、先述したコーディングスキル/UI・UXに対する知見等がアピール出来る様にポートフォリオを作成する事が望ましく、他部署との連携力をアピールするという意味で、バックエンド言語やデザインスキルもあれば尚良いでしょう。
また面接時にポートフォリオを用いてアピールする際に意識する点としては
〇ゲームコンセプト
〇ゲーム開発期間と使用した技術
〇各機能の理由
等が主に挙げられます。
ゲームコンセプトを伝える理由としては、ゲームの世界観を理解したうえで開発に携わったか？最新のトレンドに対してアンテナを張っているか？といった部分をアピールするために必要となります。
作成期間と使用した技術は、しっかり納期を守れるか？今のスキルセットはどのレベルか？といった部分を伝える事が出来ます。
そして各機能に対する理由については、どの様な機能実装が向いているか？どこまでの業務を任せることが出来るか？といった要素を伝えていきます。
役立つ資格の取得
フロントエンドエンジニアになる為に必須の資格はありませんが、下記に使用言語に対する資格情報を解説します。自身のスキル定着度を図るという意味でも、取得するメリットは大きいので参考にしてみて下さい
・HTML5プロフェッショナル認定試験
HTML5プロフェッショナル認定試験は、特定非営利活動法人エルピーアイジャパンが主催する試験制度です。HTML5、CSS、JavaScriptなどマークアップに関する最新の技術と知識を認定する資格です。
試験の種類は、Level.1とLevel.2に分かれています。Level.1においては、HTML5の概念やWebコンテンツ制作スキル、スマートフォンや組み込み機器等の知識が問われます。
Level.2においてはHTML5だけでなくjavascriptに対する知見も求められ、システム間連携を行うリアルタイムアプリケーションの開発知識や、動的コンテンツに関する知識が求めれらます。
試験形式はコンピューターで行うCBT方式で全国の試験センターで行います。試験時間は90分、受験料は16,500円(税込)となっています。
・CIW JavaScript Specialist
CIWは米国のCertification Partner社によって運営されているインターネット技術者の技術者認定資格です。資格ごとにそれぞれシリーズがあり、中でもJavaScript認定は、JSコードのデバッグと修正のためのツールと手法、およびJavaScriptフレームワークとライブラリ、AJAXを使用した高度なインタラクティブWebアプリケーション、WebAPIなどの多岐にわたるjavascriptの知識を問う試験内容となっています。
国際資格という特徴から試験はすべて英語になっており、試験難易度も高いですが、javascriptの知見を証明するうえで有益な資格と言えます。
試験は全55問で、時間は90分間。受験料は150ドルとなっています。
まとめ
ここまでフロントエンドエンジニアの仕事内容や求められるスキル、役に立つ資格について説明して来ました。解説したように、フロントエンドエンジニアは開発に関するスキルだけでなく、デザインやUI・UXといったプランナー的な要素等幅広いスキルと知見が求められる職種です。
しかしその分、ゲームの見た目や機能設計という花形を任せられる魅力的な職種でもあります。求められるスキルや資格取得等を通じて、必要なスキルと経験を着実に積み上げていく事が重要です。
ゲーム業界経験者が転職するなら
GAME CREATORSを運営しているリンクトブレインでは、ゲーム業界に特化した転職エージェントサービスを提供しています。
ゲーム業界に精通したコンサルタントが、非公開求人を含む3,400件以上の求人の中から、あなたの希望や適正にあった最適な求人をご紹介します。
あなたの転職活動を成功に導くためにサポートいたしますのでお気軽に登録してください！
GAME CREATORSのトップへ