職種辞典

職業欄になんて書けばよいの?【フロントエンドエンジニア編】

「フロントエンドエンジニアって、何をやっているの?」と聞かれて困ってしまった経験はありませんか?同じ業界の人間になら説明できたとしても、自分の子どもに同じ質問をされたらどう説明すれば理解してもらえるでしょうか。職業欄に、そのまま「フロントエンドエンジニア」と書いていいものかどうかも悩ましいはず。フロントエンドエンジニアの仕事内容を、誰にでも分かる平易な言葉で説明することは案外難しいのではないでしょうか。

今回は、フロントエンドエンジニアについて、どういう仕事なのか、そして仕事上ではどのような役割を求められるかについてできる限り分かりやすく解説します。お子さんや他業界の方に質問されても答えられるようまとめていますのでぜひご一読ください。

クリエイティブの世界には多種多様な肩書きが存在していますね。そういう肩書きを持って働いていると、書類にある「職業欄」に自分の肩書きをそのまま書いていいのかどうか悩んだことはありませんか?フロントエンドエンジニアも、その例に漏れないのではないでしょうか。小学生ぐらいのお子さんや異業種の方に、フロントエンドエンジニアの仕事を説明するときも、何と言っていいのか分からなくて頭を抱えてしまう経験がある方もいるでしょう。
本記事では、フロントエンドエンジニアの方が職業欄に自分の仕事内容を記述したり、IT業界に疎い人へ仕事内容の説明をしたりする際に参考にして頂けるよう、以下の項目に沿って「フロントエンドエンジニア」について詳細に説明していきます。

フロントエンドエンジニアってどんな仕事?

  • ひと言で言えば「ユーザーが実際に操作する画面を開発する仕事」
  • フロントエンドとはシステム上ユーザーに一番近い側のこと
  • 画面のデザインや押したボタンの挙動をデザイナーと調整・開発
  • バックエンド側とのデータをやり取りする部分の調整と開発
  • フロントエンドエンジニアに求められる役割とは

フロントエンドエンジニアに求められる役割とは

  • ユーザビリティとアクセシビリティの追求
  • UIデザイン実現の技術的な相談役
  • 性能面と機能面のバランスを考えた開発の推進
  • 最新技術をキャッチアップし一歩先を目指す先駆者
  • 職業を聞かれるとどう説明する?

職業欄にはなんて書くの?-職業欄の書き方-フロントエンドエンジニア編-

  • 日本には公的な職業分類が2つある!?
  • 開業届の場合は職業欄に「フロントエンドエンジニア」と書いてもOK

職業を聞かれるとどう説明する?

  • まずは「Webサイトやスマホなどのアプリケーション画面開発」を説明
  • 快適に操作できサクサク動くように関係者と調整する
  • 技術の流行りすたりが早くて常に勉強が必要な仕事

フロントエンドエンジニアの仕事と求められる役割、職業欄への書き方から職業を聞かれたときの説明も細かくお話していきます。「フロントエンドエンジニアって何?」と聞かれてお困りならぜひご一読くださいね。

フロントエンドエンジニアって、どんな仕事?

まず、フロントエンドエンジニアってどういう仕事をしているのかを順番に見ていきましょう。深く掘り下げていると、技術面ばかりではない様々な仕事が浮かび上がってきます。

ひと言で言えば「ユーザーが実際に操作する画面を開発する仕事」

フロントエンドエンジニアの仕事をひと言で言い表すなら、「プログラムやシステムにおいて、エンドユーザーが実際に操作する部分を開発する仕事」です。例えばお子さんにどういう仕事をしているのかと質問されたら、その場でスマホを取り出してどれかアプリケーションを開き、「この画面のボタンを押すと次の画面に行くよね。どの画面に飛ぶのか、とかこのボタン自身の位置や大きさもプログラムで書いてるんだよ」と説明すると、かなりの割合で理解してもらえるでしょう。さらに、アニメーションなど動的に動くWebサイトを見せて「この動きも作ってるよ」と付け加えておけば、説明を受ける側はイメージしやすいのではないでしょうか。
これは非常に簡略化した説明です。もちろん、フロントエンドエンジニアの仕事はこれだけではありません。フロントエンドエンジニアの仕事を順番に細かく見ていきましょう。

フロントエンドとはシステム上ユーザーに一番近い側のこと

フロントエンドとバックエンドという言葉は、そのシステムを使うエンドユーザーから見て前面にあるのか、後方にあるのかで使い分けられています。フロントエンドは、エンドユーザーの入力を受け付け、入力内容を適切にバックエンドに連携する機能範囲のことを指します。パソコンやスマホでインターネット上のWebサイトなどのグラフィカルなインターフェースだけでなく、UNIXやMS-DOSなどのコマンドラインからの入力もエンドユーザーに近い側ですが、一般的にはグラフィカルなUI(ユーザーインターフェース)部分をフロントエンドと呼んでいます。

画面のデザインや押したボタンの挙動をデザイナーと調整・開発

フロントエンドエンジニアは、エンドユーザーが直接操作する画面のデザインをWebデザイナーから受け取ることもあれば自ら設計することもあります。HTMLで記述した画面デザインを考える人のことをここでは統一して画面デザイナーと呼ぶことにしましょう。フロントエンドエンジニアは画面デザイナーから渡された画面を実現するための技術的な検証をして、詳細設計からプログラミングへと進んでいきます。HTML・CSS・JavaScriptといったフロントエンド技術を熟知した上で、適切な場所で適切な処理を行わせるように工夫しながら設計します。システム全体で統一しておく処理の切り出しなども必要に応じて他のフロントエンド開発者と連携しながらまとめる場合もあるでしょう。
「技術的な検証」と簡単にまとめましたが、この言葉の裏には、CSSで実現できる範囲とJavaScriptで実現できる範囲の把握や、常に変動する最新技術のフォローアップしつつ最適な技術・方法で最適な効果を得る方式の考案などが含まれ、広範で深い知識がなければ検証ができません。近頃ではWordPressなどのCMSの機能拡張をする際にもフロントエンドエンジニアの活躍場所があり、必要ならCSSの標準機能では不可能な拡張などもPHPを使って実現できますので、拡張機能開発の提案をすることもあります。
当然、技術的に難しい画面デザインや性能的に心配になる画面については、先行して技術的な検討を行わなくてはなりません。エンドユーザーの満足度・性能・機能面のバランスを取りながらシステムの開発をいかに円滑に進めていけるか、という点がフロントエンドエンジニアの本領発揮といったところでしょうか。必要な場合は、ユーザビリティやアクセシビリティについて意見を出し、ときにはユーザーテストを提案してテスト用のスクリプト作成をすることもあります。快適な操作感はUX(ユーザーエクスペリエンス)を高め、エンドユーザーから高い評価を得られます。レスポンスの早いWebサイトや直感的に操作できるスマホのアプリケーションなど、いかにUXを向上させるかがフロントエンドエンジニアの力量を問われる部分なのです。

バックエンド側とのデータをやり取りする部分の調整と開発

フロントエンドエンジニアの仕事としてもう一つ忘れてはならないことは、ユーザーの入力情報をバックエンド側に受け渡し、バックエンド側で適切に処理した結果をまたエンドユーザー側に返すことです。ネットショッピングの例で言えば、カートに入れた商品を入れて購入画面に進むと、ユーザーが入れた商品が正しく反映された状態で支払い確認画面が出るかどうか、という部分に当たります。バックエンド側では、フロントエンド側から入ってきた情報を適切に加工してクラウドサービスやデータベースなど、データを蓄積するシステムに格納します。そして、加工の結果を画面側に返し、画面側でその情報を次の画面で表示するのです。
データのやり取りについては、バックエンドの担当者とよく打ち合わせ、性能面で調整をすることも多々あるでしょう。バックエンド側から「性能向上のため、この情報を入力に追加してほしい」と要望が上がることもあります。ここでも、フロントエンドエンジニアはより使いやすいシステムのために調整をしながらデータ入出力情報の設計・プログラミングを進めていきます。
ここまでフロントエンドエンジニアの仕事を説明しました。こうして見ていくと、フロントエンドエンジニアは単なる画面の開発者というだけではなく、システムを構築する上で様々な役割を担っていることが見えてくるのではないでしょうか。職業欄でアピールするためには、フロントエンドエンジニアに求められている役割を把握することが重要です。そこで、次項ではフロントエンドエンジニアに求められている役割について見ていきましょう。

フロントエンドエンジニアに求められる役割とは?

フロントエンドエンジニアの仕事について整理して説明していた中でも少し出てきていましたが、フロントエンドエンジニアは単にフロントエンドの開発だけではなく、チーム開発をしている中で、各関係チームや管理者から相談を受けたり仕様の調査・調整の役割を期待されたりすることが多々あります。
ここでは、フロントエンドエンジニアに求められる役割について順番に説明しましょう。多岐にわたる役割を確認していると、システムをよりよい方向に導く要を任せられていることに改めて驚くかもしれませんよ。

ユーザビリティとアクセシビリティの追求

フロントエンドエンジニアは、これまでに紹介してきたようなHTMLやCSS、JavaScriptなどフロントエンドで使用する技術を駆使しつつユーザーの要求に応えるだけではなく、期待の上を行くインターフェースを追求していく役割が求められます。出来上がったプロトタイプの画面を検証するユーザーテストの提案やアクセシビリティの改善など、ユーザーの使い勝手向上やマーケティングに寄与できるアイデアをクライアントに説明してより良いシステム開発へのけん引役も期待されるでしょう。単に上流工程から流れてきた画面の実装だけでは済まない、高度な技術と豊富な経験が要求されます。

UIデザイン実現の技術的な相談役

画面デザイナーからデザインした画面が技術的に可能かどうかの相談をよく受けるのもフロントエンドエンジニアの役割です。このとき、フロントエンドエンジニアは、単にフロントエンド技術の情報だけで実現可能かどうかを検証するわけではありません。画面の動きとしては実装できても、バックエンド側で時間がかかるのではないか、この形で入力情報をもらうと、次にデータを検索しに行ったときにレスポンスが悪いのではないか、といった性能面のことも考慮に入れて多角的に考える視野が求められます。
また、Webディレクターやプロジェクトマネージャーなど、システム開発チームを取りまとめているリーダー役に何かと頼られ、相談役となることも往々にしてあります。大抵は、「この機能は実現可能か」「実現方法は何通りあり、それぞれの手段でメリットデメリットをまとめてほしい」などと頼まれることが多いでしょう。チーム内の資源(時間や人)も考えつつクライアントの要求に応えるよう検討を重ねるフロントエンドエンジニアは、まさにその能力がUX向上に直結する役割を担っているのです。

性能面・機能面・コスト面のバランスを考えた開発の推進

フロントエンドエンジニアは、性能面と機能面、そしてコスト面も意識しながら最適な方式を検討して選び、開発を推進していく技術的な要としての役割も求められます。プロジェクトの管理者とも交渉して工数を確保しながら無理なく実装できる見積もり能力を身につけておく必要があるでしょう。
性能面に関しては、特にバックエンドエンジニアとの綿密な情報交換やディスカッションが必要になります。保存データの構造など、多量のデータを扱う場合は情報アーキテクトへの相談も視野に入れなくてはなりません。このように、フロントエンドエンジニアは単に画面回りの処理を作っていればいいのではなく、あらゆる面で各技術者とも円滑なコミュニケーションを取って仕様を固めていくという、ネゴシエーターとしての役割も大きいのです。

最新技術を常にキャッチアップして多くの選択肢から必要な技術を選択

最後は、フロントエンドエンジニアとして最も大切な役割、最新技術をキャッチアップして、システムに対して適切に導入していく、技術的な先駆者としての役割について説明しましょう。
Webシステムの世界において、フロントエンドの技術は日進月歩で変化しています。静的なWebサイトを作るHTMLから、動的な動きが可能なWebサイトを作るためのスクリプトとしてJavaScriptが登場したのは1995年。それからCSS、RIA(Rich Internet Application)と続いてHTML5、様々な技術が台頭しては消え、また新しい技術が出てきてあっという間にフロントエンド技術の中核を担うようになるという目まぐるしい状況で、これらの技術を常にキャッチアップしていかなくては、フロントエンドの開発が難しくなります。これらの技術をいち早くキャッチアップして使いこなすだけの探求心を持ち、画面デザイナーやプロジェクトマネージャー、Webディレクターに説明する役がフロントエンドエンジニアとしてこれからも求め続けられるでしょう。
フロントエンドエンジニアが求められる役割の説明は以上です。フロントエンドの設計・開発がコアにありますが、画面デザイナーやWebディレクターからの技術的な相談、画面のユーザビリティやアクセシビリティへの知見からの提案、最新技術のキャッチアップと技術の選択をするための調査など、どの役割も高い技術力はもちろんのこと、コミュニケーション能力も大いに発揮しなければならないことがお分かり頂けたのではないでしょうか。
フロントエンドエンジニアの仕事内容との役割は、ここまでですべて説明しました。これらの説明を押さえた上で、いよいよ実際の「職業欄の書き方」の説明に入っていきましょう。

職業欄にはなんて書くの?-職業欄の書き方-フロントエンドエンジニア編-

ここまでの説明で、フロントエンドエンジニアはこれからもますます必要とされる肩書きだということがお分かり頂けたのではないでしょうか。ここからは、実際にフロントエンドエンジニアをやっていて、何らかの理由で職業欄に自分の仕事を書かなければならなくなった場合はどう記述すればいいのかを説明します。

日本には公的な職業分類が2つある!?

特に税務署に提出する開業届など、公的な機関に提出する書類の職業欄について参考にするとよいと紹介されているものに、日本政府が定めて公的な職業分類があります。しかし、この公的な職業分類は2種類あり、それぞれ改定時期も違います。まずは2つの職業分類で、フロントエンドエンジニアに当たる職種がどのように分類されているかをご紹介します。
1つめは、総務省が制定している総務省の日本標準職業分類【参照:総務省 日本標準職業分類(平成21年12月統計基準設定)】です。こちらは、平成21年12月統計基準なっていて、フロントエンドエンジニアが該当する職業分類はどれか確認すると「システム設計者」と「ソフトウェア作成者」両方が該当するように見受けられます。
2つめは、厚生労働省が制定している厚生労働省編職業分類【参照:ハローワークインターネットサービス 厚生労働省編職業分類(平成23年改定)】でこちらは平成23年に改訂されていて総務省の職業分類よりも2年ほど新しいですね。厚生労働省篇職業分類でフロントエンドエンジニアが該当しそうな職業分類を探すと、「B 専門的・技術的職業」の「10 情報処理・通信技術者」のさらに下にある細分類「104-01 ソフトウェア開発技術者(WEB・オープン系) 」が一番近いのではないでしょうか。「104-04 プログラマー」と言う職業分類もありますが、フロントエンドエンジニアの作業範囲はプログラミングだけではありません。
インターネットで検索してみると、総務省の日本標準職業分類を参考に、としているサイトがいくつか見受けられました。しかし、実際に両方を比べてみると、厚生労働省の職業分類の方が改定時期が新しくフロントエンドエンジニアの作業実態により近い分類があります。ですので、厚生労働省篇職業分類に従って「ソフトウェア開発技術者(WEB・オープン系)」と記述するのが一番よさそうです。

開業届の場合は職業欄に「フロントエンドエンジニア」と書いてもOK

ここまで、開業届の場合を例に出して職業欄に記述する職業分類を説明してきましたが、実は開業届については、公的な職業分類は参考になりますがこの分類に従うようには定められているわけではありません。つまり、フロントエンドエンジニアという肩書きにこだわりがあるなら、職業欄には迷いなく「フロントエンドエンジニア」と記入しても問題はないのです。
ただし、開業届で記入する職業欄については、記入した職業の種類によっては個人事業税がかかり、職種によっては税率も違います。そのため、開業届を提出する際に、税務署の職員にはどういう仕事なのかを説明しなければならない可能性があると考えておきましょう。
仕事の内容を聞かれても困らないように、次の章では職業を聞かれたときにどう説明するかについて解説しますね。

職業を聞かれるとどう説明する?

最後に、「フロントエンドエンジニアってどういう仕事なの?」という質問に対する説明を順番に解説していきます。少し前に説明したフロントエンドエンジニアの仕事内容と役割の部分を、専門用語を使わずに分かりやすい形で説明しますね。

まずは「Webサイトやスマホなどのアプリケーション画面開発」を説明

最初に、「Webサイトやスマホのアプリケーション画面の動きを作り込んでいる」ということを説明しましょう。すでに前の章でも述べましたが、スマホの画面を見せ、アプリケーションやブラウザを立ち上げて、その画面を見せながら説明するのが一番相手もイメージしやすいです。
特にIT業界のことは知らないご両親やお子さんには分かりやすいはず。普段は何の仕事をしているのか聞いていても分からない、と言っていたお子さんにいきなり「すごい」と尊敬されるかもしれませんね。IT技術のうちフロントエンド側は、社会的な環境が整いつつあるので感覚的に理解してもらいやすいのではないでしょうか。

快適に操作できサクサク動くように関係者と調整する

次に、この画面を「開発」するという意味をもう少しかみ砕いて説明を試みましょう。プログラムを書いて画面のボタンなどの動作を決めるのは一番後で、そこに行くまでには、いかに早く動くかという点や操作がしやすいかどうかという点を、画面のデザインを考える人やユーザーと何度も話し合って技術的な面とスケジュール的な面を何度も打ち合わせて決めていくんだというところを話してみましょう。色々な人と分担して大きなシステムを作っていると話し合う人の数も増えて大変、と付け加えれば、調整の苦労が分かってもらえます。

技術の流行りすたりが早くて常に勉強が必要な仕事

最後に、例えばiPhoneは2年に1回新しいモデルになるよね、という部分の説明から入り、フロントエンドの技術は移り変わりが激しいことを認識してもらいます。そして、常に新しく勉強をしないと画面の開発を続けていくことは困難なので、勉強は欠かせないと説明を締めくくってください。

まとめ

今回は、フロントエンドエンジニアの仕事と役割の解説と、職業欄の書き方や仕事を聞かれたときの説明の仕方をお話ししました。
職業欄の書き方と、仕事について聞かれた場合の説明について、最後にもう一度おさらいをしておきましょう。

職業欄の書き方

  • 公的な職業分類を参考にするなら厚生労働省篇職業分類に従って「ソフトウェア開発技術者(WEB・オープン系)」と記述
  • 書類の書き方に定めがないなら「フロントエンドエンジニア」と書いてもOK

仕事について聞かれた場合の説明

  • Webサイトやスマホなどのアプリケーション画面開発が主な業務
  • 使いやすくてサクサク動くように頭を使ったり周囲と調整したりする仕事
  • 勉強し続けないとあっという間に取り残されるのでいつも勉強が必要

本記事を読んで、フロントエンドエンジニアの仕事とは何かを改めて確認して頂ければ幸いです。

  • HTML
  • CSS
  • コーディング
  • フロントエンドエンジニア
  • コーダー
    UPDATE:
    GUIDE
    職種辞典