IT人材のためのキャリアライフスタイルマガジン

マークアップエンジニアの仕事|フロントエンドエンジニアとの違い

ビジネスマナー

ITの世界ではよく聞く「マークアップエンジニア」。マークアップエンジニアとはHTML5やCSS3などを理解しコンテンツの内容を理解しながら文章を構造化し検索エンジンにもフレンドリーな構築をするエンジニアを指します。気になる年収や仕事内容について紹介します。

更新日時:

マークアップとは何?

マークアップとはHTMLやXMLなどのマークアップ言語で構文を記述することです。また記述された構文自体のことを指します。特に元となるテキスト文章にタグなどのマークアップ言語の構文を書き入れて文章構造やレイアウト、装飾などを指定することをマークアップするといいます。 人間の言語とは違いコンピューターが理解できる言語で記述する必要があるのでコンピューターが理解できる機械語(HTMLやXMLなど)で記述しないとコンピューターがデータとして出力することができません。そのためにWebの世界ではマークアップという技術が必要となってきます。 マークアップ言語にはXMLやHTMLやSGML、Texがあります。

マークアップエンジニアの仕事とは

では気になるマークアップエンジニアの仕事内容についですが、HTMLなどを作ることを主にする仕事なのでコーダーとは何が違うの?と思われたかたも多いと思います。今で言うマークアップエンジニアの仕事もちょっと前まではコーダーの仕事とされていたこともあり非常に線引きが難しいのですがマークアップとコーダーの違いについても詳しく説明していきたいと思います。 この2つの職種の違いを理解するためには元々コーダーという名称からマークアップエンジニアが生まれたという経緯を知っていただくとわかりやすいと思います。

マークアップエンジニアの名前の由来

元々マークアップエンジニアという名前はWeb制作会社のビジネスアーキテクツの森田雄(もりた・ゆう)氏が考えた言葉です。森田氏は自社の求人情報の原稿を考えている際にコーダーという名称はどうなんだろうなぁと思ったそうです。コーダーという言葉はプログラミングという意味合いも含みますよね。 コーダーはプログラムを書いているわけではないしなぁと思った際に「マークアップエンジニア」という言葉を思いついたそうです。

実際の仕事内容

実際に求人欄をみてもマークアップエンジニアの仕事内容はビジュアルデザインの制作の仕事と同時にウェブサイトのユーザーインターフェイスの実装と共に付随するサービスやアプリケーションに精通している必要があります。 また「情報設計および文書構造のデザイン」「アクセシビリティ」「ユーザビリティ」という項目も見逃せない重要なポイントです。これらを実現するための仕事は,「インフォメーション・アーキテクチャ」「アクセシビリティ(ユーザービリティ)スペシャリスト」などの肩書きを持つ人の仕事でもあります。つまり,制作フロー全体においては,ビジュアルデザイン以前の工程にもマークアップ・エンジニアが関わっている,ということです。 この傾向は誰もがスマートフォンでウェブを使うようになり、Webが大規模になるにつれ強まってきています。マークアップエンジニアはWebページの実装作業だけに留まらず、ユーザーがサイトを訪れた時から目的を達成するまでのエクスペリアンス(体験)というユーザーエクスペリアンスの質を左右する仕事までに及んでいます。

気になるマークアップエンジニアの年収

では気になるマークアップエンジニアの年収についてです。マークアップエンジニアと一言にいっても扱う職種が多岐にわたり、会社によってはコーダーとして扱われることもあれば、狭い範囲ではアクセシビリティやユーザビリティに配慮した情報設計などがあります。 もともと線引きの難しい職種でもあるので仕事につくまでに、この会社ではどこからどこまでが仕事範囲として求められているのかを確認する必要があります。 では年収がとのぐらいかというと、ほとんどの企業が前職の給与や経験や実績により応相談としており明確にはでてこないのが現状です。

マークアップエンジニアのキャリアパス

ではマークアップエンジニアとしてキャリアを積むことで今後ひらけてくるキャリアパスとはどのようなものがあるのでしょうか? デザインやディレクションにも関わるマークアップエンジニアの仕事のキャリアパスは何種類かの職種が挙げられます。一つずつ確認していきましょう。 情報をデザインしてHTML化するコーダーの仕事に対して、マークアップアップエンジニアの仕事範囲は情報を整理・編集しユーザビリティ等を改善しユーザーインターフェイスの改良まで行う「情報のデザイン」の段階が含まれます。このビジュアルデザインのフェーズののちにHTML、CSS、Javascriptにしていくことが求められます。 マークアップエンジニアという言葉を初めに言い出したビジネスアーキテクツの資料ではマークアップエンジニアの職能は以下のように定義されています。

マークアップエンジニアの職能

マークアップ言語の仕様の理解と応用(設計・開発):XHTML,HTML,XML スタイル言語の仕様の理解と応用(設計・開発):CSS,XSLT Javascriptに関する能力:コーディング能力、OOPによる設計と実装、DOM仕様の理解 ブラウザに関する知識:表示の挙動、バグの知識、JS実装差異の知識と対応能力 Webアプリケーションにおけるクライアントサイド実装の設計能力:Ajax / JSON ページ実装に関する能力:テンプレート設計能力、ページ量産能力 検証に関する能力:ページの検証能力・精度、検証計画の作成と遂行 特定製品に関する知識と能力:Dreamwaver,contribute等 情報デザイン、情報アーキテクチャの構築能力、コンテンツ仕様設計、エディトリアル能力 アクセシビリティ:WCAG/WebJISの理解、音声ブラウザや特殊デバイス等の知識と経験 ユーザビリティ:ユーザビリティエンジニアリングの理解、ISO9241-11の理解 Webマーケティングの基本的な知識:アクセス解析、SEO/SEM 要件定義能力、ガイドライン作成能力、各種ドキュメント作成能力 リーダーシップとマネジメント

ではマークアップエンジニアでキャリアを積んだ後はどのようなキャリアパスがあるのでしょうか。デザインやSEO、マネジメントなどマークアップエンジニアとして働くには様々な能力が求められる分、さまざまな職種へのキャリアアップが可能です。

マークアップエンジニアのキャリアパス1 ーフロントエンジニアー

まず挙げられるのが「フロントエンジニア」です。HTMLのコーディングを極めたあとはJavascriptやUIデザインなどのフロントサイドのスペシャリストであるフロントエンジニアにキャリアを広げる道が一番多いかもしれません。 マークアップエンジニアといってもHTMLのコーディングをメインに考える人が多いように業務としてもコーダーとあまり変わらないものも多いのでHTMLやCSSだけでなくフロントサイドに関わるJavascriptやUIなどまで範囲を広げることができればフロントサイドのスペシャリストとしてフロントエンジニアとして活躍することができます。

2 ディレクター、プロデューサー、プランナー

次に挙げられるのがディレクターやプロデューサーやプランナーです。マークアップエンジニアという仕事がHTMLやデザインUIなどの多岐に渡ることから時にデザイナーとやりとりをしたり、クライアントの意思を汲み取るディレクターとしての仕事を求められることからマークアップエンジニアでディレクションを含む仕事をこなしたマークアップエンジニアの人がディレクションに特化するディレクターやプロデューサーにキャリアを広げることがあります。 また同じ理由で企画に携わった仕事の経験を積んだ人はプランナーとして企画を発案する側にキャリアアップをすることもあります。

3 マーケティング

マークアップエンジニアとしていろんなサービスを企画したり実際にローンチしたりしていると、どうしてもユーザーの反応が気になりますよね。 それは時にユーザー数だったり、PVだったり、売上だったり。また自分がローンチしたアプリやWebサービスのユーザー層がどのような層なのかということまでわかってきます。また広告をうつようになると、どのような広告が反応がいいのかもわかってきますよね。 そのような経験を積んでいると新しくアプリやサービスを企画する際に「マーケティング」の側面をもって接することができます。今までは開発サイドにいたマークアップエンジニアでもマーケティングサイドにキャリアアップする人もいます。 最初はWebなどの同業種のマーケティングでもマーケティング自体は他の業種に通ずるものもあるので、他の業種のマーケティングを手がけるまでにキャリアアップをすることもできますね。

気になるマークアップエンジニアの年収とは

ここで気になるマークアップエンジニアの年収です。マークマークアップと一言でいっても正社員として雇われるのと契約社員で雇われるもの、またアルバイトとして働く場合と雇用形態によってもちろん収入も変わります。 マークマークアップエンジニアとして働き始めたものの思った以上の年収ではなかったとお思いの方や、年収額としては悪くないとは思うけど、今後のキャリアを考えて自己投資にお金を回したいとお考えの方も多いのではないでしょうか。 まずはマークマークアップエンジニアの年収の相場をみていきたいと思います。

マークマークアップエンジニアの年収の相場

250ー400万 アシスタントレベル。1人で独立して仕事をするというより指示者の指示に従って仕事ができるレベル。 400万ー500万 Webサイト制作が難なくできるレベル。HTML、CSSJavascriptの知識があり実践で利用できるレベル。 またデザインの基本的な知識ももっているレベル。 500ー600万 SEOの基本的な知識があり、検索エンジンに最適化した構築ができる。また文章構造を理解できる。 600ー800万 プロジェクト単位でディレクションができ、足りない他部署のリソースを補填できるスキルがあるレベルで複数人のタスクをまとめてこなせるスキルがある。 800ー1200万 検索エンジンを意識したサイトの構築ができる。またユーザービリティーの高いサイト制作を設計工程から企画立案が可能で、業界の動きを察知し、クライアントと折衝して提案やサイトプロデュースができるレベル。

基本的には特にアピールできるスキルがない場合は300ー400万円の年収を提示される場合が多いですが、アピールできる実績やポートフォリオがある場合にはそれに見合った年収を提示されます。 希望の年収額があるならポートフォリオを準備し、就職する会社にも希望の額をハッキリと伝えましょう。

マークマークアップエンジニアの年収を左右するスキル

企業の求人内容によっては求めるマークマークアップエンジニアのスキルは日々もちろん変わりますが、ここではこのスキルをおさえておけば応募先の企業に高く評価されるスキルを紹介します。 求人をみてもマークマークアップエンジニアのスキルに加えてこのようなスキルがある人材を求めている企業が多いことに気づくと思います。

1 文書構造の理解能力がある

ただ単にデザイナーのデザインをHTMLやCSSでコーディングするだけでは、あまり高い年収は望めません。次に運用をする人がより見やすいコードにしたり、美しいコードを書くという意識が大切です。 またコーディングの際にきちんとコード全体の意味を理解することで、より見やすいコードになるだけでなく、ユーザーにとって見やすいサイトなのかどうかというユーザビリティに繋がるところまできちんとコードを書くことが大切です。 これと同時に機械に見つけてもらいやすい検索エンジンに情報を抽出しやすいサイトにすることで、マークマークアップエンジニアの人材市場の中でもより高い年収を望める人材になることができます。

2 Javascript

マークマークアップエンジニアの求人欄でもよく見るJavascriptは実際に求人をさがしていてもマークマークアップエンジニアのスキルとしてあれば良いということがよく分かりますね。 HTMLやCSSとは違い、スクリプト言語で「動的」な動きをウェブサイトに持たせる時に必要な言語になります。 またiPhoneなどのiOSで動くデバイスではFlashに対応していないので、サイトが見れないというウェブサイトの問題が多数発生しました。その際にスマホでもサクサク動くJavaScriptが注目を集めたのも記憶に新しいですね。 HTMLやCSSとは違って関数のプログラムなどもあり、ちょっと難しいとお思いの方も、最近はjQueryという学習しやすいライブラリがあるので、まずはjQueryからトライしてみるという方法もあります。

3 コミュニケーション能力とディレクション能力

この記事のはじめのほうでも書いたようにマークマークアップエンジニアという仕事は時にデザイナーやクライアントサイドの意思を汲み取り、ユーザーにとっても見やすく使いやすいユーザビリティにするというユーザーサイドの目線も必要です。 このことから物事を自分だけの目線でなく、さまざまな方向から捉え、デザイナーや一緒に働く他部署の人たちとのコミュニケーション能力が必要となります。また複数人で仕事を進める場合にはリーダーシップも問われます。 一つのサイトを作るにも、デザイナーやプログラマー、ライター、カメラマンなど、様々な職種の人たちが集まります。この能力はマークマークアップエンジニアのキャリアパスで述べたディレクターにも繋がります。 リーダーシップがあり他部署の仕事の進み具合まで気にかけることができるディレクション能力とコミュニケーション能力はマークマークアップエンジニアとして希望の年収を得るために必要な能力といえます。

4 デザインとユーザビリティの知識

ハードウェアでもソフトウェアでも何か製品を作る際には、デザイナーと技術者・エンジニア(製品をモノにする人)は切っても切り離せないものです。Webサイトを作る際にはデザイナーがデザインとしてあげてくるものが、必ずしも構築可能なわけではありません。実装するにあたりユーザビリティを損なってしまうものはデザインの修正が必要になります。 例えばデザイナーの求めるWeb上の動きを実行すればサイトに表示するのに時間がかかってしまい、待機時間が長いなど。このようにユーザビリティやUX(ユーザーエクスペリエンス:サイトの利用しやすさに加えてユーザーが使っていて楽しい、心地いいと感じること)を損ねてしまう場合は、デザイナーのいうとうりに実装するのではなくデザイン面での修正が必要となります。 コーディング以外のUI(ユーザーインターフェース)やUXまでスキルの域を広げることができれば、そのWebサイトに高付加価値をもたらすことができ、Webコンテンツのクオリティを上げることができます。このようなスキルをもった人材であれば収入面でも収入額のアップを期待できます。

5 SEOのスキル

Webサイトで重要な検索エンジンに最適化したSEOのスキルもマークアップエンジニアに求められます。どんなにいいサイトを作っても検索エンジンで上位に表示されなければユーザーがサイトを見つけ出して自分の作ったサイトを訪れることがありません。 検索エンジンという機械に最適化したSEOを考慮したWebサイトを構築できるスキルをもった人は企業でも重宝され、スキルを持ってない人よりも高収入が望めます。

様々なスキルを身につけよう

いかがでしたか?マークアップエンジニアといっても関わる範囲によっていろいろな働き方があると思われたと思います。 その分、今後開けてくるキャリアパスも広いとお感じの方も多いのではないでしょうか。マークアップエンジニアに関わる、さまざまなスキルを身につけてキャリアアップに役立ててくださいね。

おすすめの「エンジニア転職サイト・エージェント」

良質な求人情報が期待できそうな、エンジニアにおすすめの転職サイト・転職エージェントランキング形式でご紹介します。 IT業界やエンジニア職に特化した転職サイトを中心にまとめていますので、転職を検討しているエンジニアの方は、ぜひ参考にしてみてください。

関連タグ

アクセスランキング