クリエイティブ職の職種図鑑

マークアップエンジニア

平均年収

385万円

アクセシビリティやSEO(検索エンジン最適化)などを考慮しつつ、ユーザーが快適に使えるサイトを実現していきます。

活かせる資格

ウェブデザイン技能検定、CIW HTML5&CSS3・スペシャリスト、Webクリエイター能力認定試験

マークアップエンジニアの男性

マークアップエンジニアは、Webサイトの制作に関わる職種のひとつです。
アクセシビリティやSEO(検索エンジン最適化)などを考慮しつつ、
ユーザーが快適に使えるサイトを実現していくのが、マークアップエンジニアの仕事です。

ここでは、マークアップエンジニアの仕事内容や年収、キャリアパス、
転職するときに役立つスキルや資格などについてご紹介します。

マークアップエンジニアに転職されたい方へ
マイナビエージェントが
あなたの転職をサポートします。

無料転職サービスに申し込む

この記事のまとめ

  • マークアップエンジニアは、マークアップ言語を用いたコーディングを行い、Webデザイナーが制作したデザインを、Webサイトに具現化するのが仕事

  • マークアップエンジニアに求められるスキルや知識は、「HTML、CSS、JavaScriptの実装スキル」や「SEOの知識」、そのほか客観的視点をもつことも重要

  • マークアップエンジニアの平均年収は385万円で、経験や実績、スキルの程度を、適切に評価されやすい環境にあると見受けられる

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

コンピューターは人間と違い、文章の意味や内容を理解できません。人間なら、文章の内容やデザイン、レイアウトから「これがタイトルでここまでが本文。これは注釈部分だな」と判断できますが、コンピューターに文章の構成を判断させるためには、「ここからここまでがタイトル」など目印をつける必要があります。

そのために使われるのがHTMLやCSSといったマークアップ言語です。元となる文章の中にマークアップ言語の構文を書き入れて、「タイトル」「小見出し」などの文章構造やレイアウト、装飾などを指定していくのがマークアップエンジニアの仕事となります。

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

前述の通り、WebサイトはHTMLやCSSといったマークアップ言語で作成されており、マークアップエンジニアはそれらを用いて、デザイナーが設計したデザインをWeb上に表示させる役割を担います。

しかし、ただ表示させるだけでなく、ユーザービリティやアクセシビリティ、SEOを意識したコーディングをおこなうことが重要となります。またコーディングだけではなく、コードの改良やバグ修正、CMSの構築といったことも、マークアップエンジニアの仕事の一つです。

Webコーダー・フロントエンドエンジニアとの違い

マークアップエンジニアに似た職種として、Webコーダーやフロントエンドエンジニアが挙げられます。ここでは、マークアップエンジニアと両者との違いについてご紹介します。

Webコーダーとの違いは

Webコーダーは、各種ソフトウェアやマークアップ言語を使用して、デザイナーが設計したページデザインをWeb上で閲覧できるようにする職種です。デザイナーの指示に応じてコーディングを行うのが基本であり、自らの考えでアレンジを加えることはありません。

それに対してマークアップエンジニアは、デザイナーの意図やサイトの目的をくんだ上で、ユーザーがより快適にサイトを閲覧できるよう、自分の責任において改良を施すことが求められます。

フロントエンドエンジニアと違いは

フロントエンドエンジニアの仕事はマークアップエンジニアとほぼ同じですが、使用する言語が異なります。マークアップエンジニアが主にHTMLを使うのに対し、フロントエンドエンジニアは、HTMLの他、JavaScript、CSS、PHPなど、さまざまな言語を使ってコーディングを行います。

ただし、これらの違いは絶対ではなく、企業によってはフロントエンドエンジニアも含めてマークアップエンジニアと呼ぶこともあります。

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

マークアップエンジニアの仕事は、ただ指示書どおりにコーディングすることではありません。デザイナーの意図やサイトの目的を踏まえ、かつユーザーが使いやすいサイトを構築できるスキルを身につける必要があります。マークアップエンジニアとして働くならば、以下の必要なスキルや知識の習得を目指しましょう。

HTML、CSSの実装スキル

マークアップ言語であるHTMLやCSSの実装スキルは、Webデザイナーが制作したデザインをマークアップエンジニアがWebサイトに具現化するために必要不可欠です。HTMLやCSSはバージョンがアップデートし続けているため、常に最新技術を追いかけて学び続けなければなりません。

なお、現在は「HTML5」と「CSS3」が最新です。

JavaScriptの実装スキル

最近のWebサイトではJavaScriptが広く使用されている言語のため、必ず身につけるべきスキルです。フロントエンドエンジニアが使用するプログラム言語ではありますが、HTMLやCSSでは制作が難しい動きを表現できるため、知っておいて損はありません。

CMSの運用スキル

Webサイトの制作や更新作業を簡略化できるCMSの運用スキルも求められるでしょう。CMSを活用すれば、Webサイト制作の経験が浅い人でも比較的容易に制作や更新が可能になります。テンプレート設計を担うこともあるため、マークアップエンジニアとして身につけておきたいスキルです。

ユーザビリティの知識

マークアップエンジニアがクライアントの成果に貢献できるスキルの一つが、ユーザビリティの知識です。

ユーザビリティとは、「ユーザー視点の使いやすさ」といった意味をもちます。ターゲット層がWebサイトを訪問した際、いかにスムーズに目的を果たせるかは、ユーザビリティの良し悪しが大きく左右します。

アクセシビリティの知識

アクセシビリティの知識は、ユーザビリティとセットで身につけるべきです。アクセシビリティとは、「ユーザー視点のアクセスのしやすさ」といった意味をもちます。ターゲット層が求める情報にたどり着けなければ、ユーザビリティの実現にも至りません。アクセシビリティの先にユーザビリティが存在するため、マークアップエンジニアとして不可欠な知識です。

SEOの知識

制作したWebサイトが検索エンジンの上位に表示されなければ、情報を必要としている人たちに見つけてもらえず、検索流入も増えません。そのため、SEOの知識を持ち合わせたマークアップエンジニアは、クライアントに貢献できる人材として評価されます。Webデザイナーの指示に沿った作業に終始せず、クライアントの目標達成に必要な要素を追求し反映させていくことが、マークアップエンジニアの存在意義でもあります。

将来のためにスキルアップしませんか?
働きながら身に付けられる企業もあります。

無料転職サービスに申し込む

マークアップエンジニアにおすすめの資格

マークアップエンジニアは、対応できるマークアップ言語やソースが増えれば、そのぶん仕事の幅が広がります。それらのスキルがあることを客観的に証明するものとして、次のような資格を取得しておくことをおすすめします。

ウェブデザイン技能検定

ウェブデザイン技能検定とは、厚生労働省所管の特定非営利活動法人インターネットスキル認定普及協会によって実施されるWebデザイン系で唯一の国家資格です。1~3級の3つのレベルがあり、学科試験と実技試験に分かれています。

3級を取得すれば、インターネットの仕組みやネットワーク技術、HTMLやCSSなどの基礎知識があることの証明になります。

2級はそれらに加え、JavaScriptなどの技術やユニバーサルデザインに至るまで幅広い知識を持ち、Adobe PhotoshopやFlashなどのソフトを使いこなせることの証明になります。

2021年度で最も受験者数が多かった第3回試験の合格率を見てみると、3級が71.5%、2級が51.5%、1級が52.9%です。最も難易度の高い1級でも半数以上が合格していることから、比較的難易度は低いといえるでしょう。

CIW HTML5&CSS3・スペシャリスト

CIW HTML5&CSS3・スペシャリストは、インターネットとWebのスキルを職種ごとに認定する国際資格の一つです。取得すれば、マークアップエンジニアに欠かせないHTMLとCSSの最新技術と、JavaScriptの専門スキルを備えていることの証明になります。合格率は非公開となっています。

Webクリエイター能力認定試験

Webクリエイター能力認定試験は、株式会社サーティファイのWeb利用・技術認定委員会が主催するWebデザインやコーディングの能力を認定する資格で、スタンダードとエキスパートの2つのレベルが設けられています。

スタンダードは、ユーザビリティやアクセシビリティを踏まえたデザインやスクリプトを扱うスキルの証明に、エキスパートは、HTML5のマークアップやCSSを用いたデザインの表現力の証明になります。

2020年度の合格率は91.4%と高水準であることから、マークアップエンジニアとして経験が浅い方でもチャレンジしやすい資格といえるでしょう。

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

マークアップエンジニア(フロントエンドエンジニアを含む)の平均年収は、385万円です。他のエンジニア系の職種と比べると50万円以上、またすべての職種の中央値よりもやや低い金額ですが、HTML5やCSS3などの新しいマークアップ言語やJavascriptなどのプログラミング言語を習得すれば、年収アップも不可能ではありません。

年齢別に見てみると、20代が313万円、30代が457万円となっており、140万円以上アップしています。この数値からも、マークアップエンジニアがスキルや実力次第で高年収を目指せる仕事であることがわかります。

マークアップエンジニア年収別求人特集

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

マークアップエンジニアのキャリアパスとしては主に以下の3種類が考えられます。それぞれ特性が異なるため、適性やキャリアビジョンを見据えて検討してみましょう。

Webプロデューサー

WebプロデューサーはWebディレクターの上位職にあたり、クライアントから依頼を受け、Webサイト制作の企画から運用までを担います。そのため、Webサイトに関する知識のみならず、クライアントと良好な関係を構築するためのコミュニケーション能力や、現場スタッフをまとめあげるマネジメント能力も必要な仕事です。技術者としてだけでなくリーダーや経営層に興味がある場合にはおすすめです。

Webプロデューサーの詳しい仕事内容は以下の記事でご紹介しています。

Webデザイナー

Webデザイナーは、クライアントの要望に沿ったWebサイトのデザインを制作する仕事です。デザインの基礎知識のみならず、デザインの流行り廃りを敏感にキャッチする情報収集力や分析力などが求められます。

また、IllustratorやPhotoshopなどのグラフィックソフトのスキルも必須です。自分のデザインで誰かの役に立ちたい、多くの人に見てもらいたい、自分ならではの仕事がしたいという人はやりがいをもって働けるでしょう。

Webデザイナーの詳しい仕事内容は以下の記事でご紹介しています。

フロントエンジニア

フロントエンドエンジニアは、担う業務領域はマークアップエンジニアと変わりませんが、JavaScriptをはじめとしたプログラミング言語を用いてコーディングを行う点が異なります。さまざまな言語をマスターしたい場合やデザインの幅を広げたい場合は、フロントエンドエンジニアに進む道も考えられます。

マークアップエンジニアに転職されたい方へ
マイナビエージェントが
あなたの転職をサポートします。

無料転職サービスに申し込む

よくあるご質問

  • マークアップエンジニアはどんな仕事ですか?

    Answer

    WebサイトはHTMLやCSSといったマークアップ言語で作成されており、マークアップエンジニアはそれらを用いて、デザイナーが設計したデザインをWeb上に表示させる役割を担います。

  • フロントエンドエンジニアと違いは?

    Answer

    ほぼ同じですが、使用する言語が異なります。マークアップエンジニアが主にHTMLを使うのに対し、フロントエンドエンジニアは、HTMLの他、JavaScript、CSS、PHPなど、さまざまな言語を使ってコーディングを行います。