こんにちは！

toiroフリーランス編集部です。

マークアップエンジニアとは、どのような仕事内容でどのような知識・スキルが必要なのでしょうか。

この業界には開発者を指す様々な言葉が存在します。

  • Webコーダー
  • HTMLコーダー
  • マークアップエンジニア
  • フロントエンドエンジニア

実はこれらの言葉が表現する範囲は会社や人によって違っており、明確な定義が存在しません。

求人サイトでも各々の言葉の意味は異なっており、仕事内容や年収についてはよくよく確認する必要があります。

本記事では特に一般的な意味でのマークアップエンジニアについて説明を行います。

Web業界未経験の方を想定しているため、経験者の方には知っている情報が多いかもしれません。

それでもよろしければ、どうぞ最後までお付き合いください。


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

マークアップエンジニアはWebデザイナーが用意したデザインを、HTMLやCSSを用いて実際にWebサイトに落とし込んでいく作業を行う人です。

デザインを忠実に再現していくことも大事ですが、マークアップエンジニアは更にSEO対策やユーザビリティにも配慮します。

Webディレクターから顧客の要望やサイトの目的・希望などを聞いた上で、コーディングによって顧客の要望をサイトに反映します。


マークアップエンジニアの仕事内容

技術やスキルについては後述しますが、マークアップエンジニアの仕事はただコーディングをしていれば良いというものではありません。

デザインや提案があるとはいえ、これらのアイデアを現実に形にするのはマークアップエンジニアです。

実装していく中で見つかる改善点や問題箇所は当然出てきます。

時にはWebディレクターやWebデザイナーと打ち合わせをして、様々な立場の様々な観点を擦り合わせていく仲介者の役割も果たします。

求められるのは幅広い知識と専門外の分野に対する理解です。ある意味では難しい動き方が求められるかもしれません。


マークアップエンジニアに必要な知識

マークアップエンジニアには多方面に渡る知識が必要だと説明しましたが、これらはあくまで自分が使えなくても良い知識です。

Webデザイナーは色彩理論や黄金比を使いこなせなければ仕事になりません。

しかしマークアップエンジニアはそういった理論があると認識していれば問題ありません。

逆にマークアップエンジニアが使いこなせなければいけない知識も無論存在します。


HTML4.01・HTML5

ブラウザにより異なりますがChromeでは右クリックを押して、「ページのソースを表示」を押すと出てくる文字だけのファイルがHTMLです。

マークアップ言語は文章を構造化してプログラムに伝える役割を持っています。

HTML4.01・HTML5は共にHTMLというマークアップ言語です。単にHTMLと呼んだ場合、HTML4.01かHTML全体について指している場合が多いです。

HTML5は2017年にHTML5.2が勧告されました。勧告されるということは詳しくは省きますが、国際的に標準化され使用できるという意味です。

HTMLも他のプログラミング言語と同じくバージョンアップしていきます。マークアップエンジニアはこの流れを常に追う必要があります。


CSS・CSS3

CSS（Cascading Style Sheets・カスケーディング・スタイル・シート）はWebサイトのデザインを行うためのファイルです。

文字に色を付けたり、フォントの文字サイズを変更したり、背景に色を付けたりします。

CSSもCSS3にバージョンアップしてからできることが増えました。有名な機能を上げるならCSS3アニメーションやフレックスボックスです。

昔はWebサイトに動きを付けるといえばJavaScriptでしたが、今ではCSS3で対応できてしまいます。

これもマークアップエンジニアが駆使しなければならない技術の1つです。


JavaScript（ES5・ES6）

JavaScriptはプログラミング言語の1種で、HTMLの中身を動的に書き換えて動きを付けます。

CSSは見た目を変更するだけで、HTMLの文字列まで変えている訳ではありません。

マークアップエンジニアが業務上扱うJavaScriptといえばjQueryというライブラリを使うのが主流です。

JavaScriptも最近ではES5・ES6などの新しい標準規格が出てきました。ES5とES6では細かい文法が異なるため注意が必要です。


SEO対策

SEO（Search Engine Optimization）は日本語で検索エンジン最適化といいます。

SEO対策とはGoogleなどの検索エンジンで検索順位を高くするために、サイト内のコンテンツを最適な状態に持っていく手段です。

昔は大量に被リンクを設置したり、キーワード比率を上げたりすることで対応できましたが、今はもう通用しません。

SEOの常識も常に変化しています。


ユーザビリティ

ユーザビリティは日本語で有用性です。要するにユーザーが利用しやすいかです。

ECサイトではボタンの位置や色を変えただけで、売上が大きく増加するケースもあります。

似ている用語にUX（User Experience・ユーザー 体験）というものがあります。

これはユーザビリティを含めユーザーがサイトの利用を通して受ける感情、体験する全てを指すものです。


アクセシビリティ

アクセシビリティはユーザーがアクセスできるか、つまりユーザーが利用できるかどうかです。

例えば色覚障がいの方は特定の色が見えづらい・同じ色に見える色があるなどの症状を抱えています。

もしこれらに配慮せずにWebページを作成すると、一部のユーザーは情報にアクセスしづらくなってしまうでしょう。

検索サイトのリンクの色が青色で、必ず下線が引いてあることにもきちんと意味があります。


マークアップエンジニアに必要なスキル

ここまではマークアップエンジニアが熟知していなければならない技術的な知識について説明してきました。

ここからは必要なスキルについて解説します。


専門外の技術への関心

WebデザイナーやWebディレクターはプロとして仕事をする存在です。自分達の作業に責任を持ち、熟考した上でデザインや案を出しています。

そこにはマークアップエンジニアには分からない知見や判断の根拠があります。

これらを知らないまま開発を行うことも可能ですが、知っていれば強力な武器になる筈です。

仕事内容が分かれば他の職種のメンバーを気遣い、機転をきかせて仕事がしやすいように配慮できます。

自分の専門分野だけでなく、他の職種の仕事内容にも興味を持って近付いていけるような、知的関心や好奇心がある人材が求められます。


コミュニケーション能力

「マークアップエンジニアの仕事内容」で解説した通り、マークアップエンジニアは異なる職種のメンバーと一緒に仕事をします。

当然、マークアップする段になってから実装できないデザインや提案であると判明するケースもあります。

Webデザイナーにも多少のコーディングの知識はあるかもしれませんが、専門外のメンバーに理由を説明するにはまた別のスキルが必要です。

良い関係を保ちながらプロジェクトを動かしていくための、高いコミュニケーション能力が求められます。


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

マークアップエンジニアの年収は知識やスキルによって大きく左右されます。

下は年収300万円から上は800万円まで幅があります。

仮に未経験から業界入りをするなら、最初の仕事内容はWebコーダーと同程度のものか、チェッカーやテスターからスタートします。

平均的な年収は300万円から500万円です。

ちなみに本記事で紹介した知識やスキルを全て身に付けた場合、想定される年収は600万円くらいです。

より高い年収を求めるならWebディレクターとしてプロジェクト単位のディレクションを行うなどのキャリアアップが求められます。

参照：職業情報提供サイトjob tag（厚生労働省）


Webコーダーとの比較

WebコーダーはHTMLコーダーまたは単にコーダーとも呼ばれます。

Webコーダーの仕事は減少傾向にあり、将来的には優れたツールによって自動化され職種そのものがなくなるといわれています。


Webコーダーの仕事内容

Webコーダーはマークアップエンジニアよりも業務内容が限定されています。

Webデザイナーが制作したデザインを忠実に再現しWebサイトを作成するのです。SEO対策やユーザビリティなどについては考慮しません。


Webコーダーに必要な知識・スキル

Webコーダーに必要な知識は主に以下の3つで、マークアップエンジニアに比べると半分以下と少ないです。

  • HTML4.01・HTML5
  • CSS・CSS3
  • JavaScript（ES5・ES6）


Webコーダーの年収

Webコーダーの平均年収は、年齢にもよりますが350万円前後です。

フロントエンドエンジニアとの比較

フロントエンドエンジニアはよくバックエンドエンジニアと対で紹介されます。

バックエンドエンジニアがサーバー側の処理を実装するのに対し、フロントエンドエンジニアはクライアント側の処理を実装します。

フロントエンドエンジニアはフロントエンドの複雑化に伴い登場した比較的新しい職種です。


フロントエンドエンジニアの仕事内容

フロントエンドエンジニアは主にフロントエンドのJavaScriptフレームワークを用いて、クライアント側の画面作成を行います。

HTMLやCSSはもちろん用いますが、これらはいわば前提知識に過ぎません。


フロントエンドエンジニアに必要な知識・スキル

フロントエンドエンジニアにはマークアップエンジニアとは異なる知識やスキルが求められます。

  • Webコーダーに必要な知識・スキル
  • JavaScriptフレームワーク（Angular・Vue.js・React.js）
  • ビルドツール（webpack）
  • サーバー側APIとの通信
  • 最新技術への関心と英語力

フロントエンドエンジニアは主にフロントエンドのJavaScriptフレームワークを用いて、クライアント側の画面作成を行います。


フロントエンドエンジニアの年収

フロントエンドエンジニアの平均年収は400万円から500万円といわれています。


未経験から目指すマークアップエンジニア

マークアップエンジニアは未経験からでも充分転職可能です。

ただしWebコーダーに必要とされている3つの技術的知識だけは、現場入りする前に身に付けておいた方が良いでしょう。

これらの技術は独学でも習得可能です。

技術書を購入して徹底的に勉強しても良いですし、インターネットで検索すれば解説サイトは無数に存在します。

SEO対策・ユーザビリティ・アクセシビリティについては、仕事を開始してからでも遅くはないと思います。

おすすめは自分でWebサイトを作って公開してみることです。


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

マークアップエンジニアとしての道を極めるか、他の職種に転向するかは人それぞれです。

本項では候補となるキャリアパスをいくつか提示します。


フロントエンド・バックエンドエンジニア

フロントエンドエンジニアになるにあたり、マークアップエンジニアとして学んだ知識はとても役に立ちます。これは先述の通りです。

WebフレームワークやCMSのマークアップエンジニアとして働いた経験から、サーバーサイドエンジニアになる人もいます。

サーバーサイドエンジニアというとHTMLやCSSは全く関係ないかのように思えるかもしれません。

しかしスクリプト言語で動的にページを作成したり、テンプレートエンジンを利用したりする場合、必要な知識になってきます。


Webプロデューサー・Webディレクター

Webプロデューサーはプロジェクトの責任者です。関係各所との調整や事業計画の立案などを行います。

Webディレクターはプロジェクトメンバーと共にWebサイトを作成する人です。

実はこの言葉の区切りも曖昧で、プロジェクトによっては作業範囲が明確でないケースもあります。また1人で兼任している場合もあります。

WebプロデューサーもWebディレクターも上流工程に携わります。

下流工程であるマークアップエンジニアやWebデザイナーの作業内容を知らなければ務まりません。


Webマーケティング

最後にWebマーケティングです。SEO対策の知識を活かし、Webサービスを介した集客や物が売れる仕組みを作ります。

WebマーケティングではSEO対策・ユーザビリティ・アクセシビリティなどの知識や、アクセス解析などのノウハウを活かすことができます。


おわりに

マークアップエンジニアは軽視されがちですが、その実とても奥が深い職種です。やりがいのある仕事だといえるでしょう。

長々と説明して参りましたが、いずれにしても大事なのは学び続ける姿勢と幅広い技術への関心を持ち続けることだと思われます。



toiroフリーランスはフリーランスエンジニア向けのSHIFTグループ案件・求人情報サイトです。

プライムベンダーだからこそ、商流が深い多重下請けや不要な中抜きは一切なく、高単価・適正単価で業務委託案件をご案内しています。

アカウント登録後には、さまざまなサービスや機能を無料でご利用いただけます。

  • 登録面談にてキャリア相談や案件マッチングのコツ、市場トレンドや耳寄りな情報をお伝えします
  • 本サイトでは公開していない非公開案件をすべて確認可能
  • ご希望条件に合うエージェントおすすめの案件を随時ご案内

個人事業主やフリーランスで活躍されている方、これから目指している方、少しでもご興味がある方はぜひお気軽にお問い合わせください！