マークアップエンジニアとは？コーダーとエンジニアとの違いやおすすめの資格をご紹介

マークアップエンジニアというと、似たような職種にWEBコーダー、フロントエンジニアなど複数あります。フリーランスや会社によっては、それらに明確な違いがない場合もあるかもしれませんが、派遣や転職など、企業とのマッチングの場面では、必要な場合もあります。この記事では、マークアップエンジニアとは何か、WEBコーダー、フロントエンジニアとの違いを初学者にも分かりやすく解説していますので、ぜひご覧ください。

1. Contents

   • 1 マークアップエンジニアとは？ 
     • 1.1 フロントエンドエンジニアとの違い
     • 1.2 WEBコーダーとの違い
   • 2 マークアップエンジニアの仕事内容
   • 3 マークアップエンジニアに必要なスキルセット
     • 3.1 HTMLやCSSの実装スキル
     • 3.2 CMSの知識と実装・運用スキル
     • 3.3 UI／UXに関する知識
     • 3.4 SEOに関する知識
   • 4 マークアップエンジニアに向いている人の特徴
   • 5 マークアップエンジニアにおすすめの資格
     • 5.1 WEBクリエイター能力認定試験
     • 5.2 ウェブデザイン技能検定
     • 5.3 CIW HTML5 & CSS3 スペシャリスト
     • 5.4 HTML5プロフェッショナル認定試験
   • 6 マークアップエンジニアの今後の将来性
   • 7 マークアップエンジニアの平均年収
   • 8 まとめ
   

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

マークアップエンジニアはWEBサイトを制作するスタッフの一人です。

一つつのWEBサイトを制作する上で、必要な作業を分解すると、UI・UX、サイトマップ、コンテンツ設計、ワイヤーフレーム、コンテンツ・デザイン、コーディング・システム開発、テストのように工程を分けることができます。

このうちマークアップエンジニアは、UI・UX、GoogleのSEO方針を理解した上でのコーディングなどをおこなう職種です。

1. フロントエンドエンジニアとの違い

フロントエンドエンジニアと、よく対比される職種にバックエンドエンジニアがあります。両者の違いは、WEBサイトや、WEBサービスなどで、ユーザーが実際に目にしたり、触ったりする領域が、フロントエンジニアの領域だとすれば、ユーザーが目にしたり触ったりしたデータを扱う、データベースやサーバーなどの領域が、バックエンドエンジニアの領域です。

こうした分類では、マークアップエンジニアも、フロントエンジニアと同じ領域といえます。実際、両者には大きな違いがない、として扱われる場合もありますが、違いがあるとすれば、フロントエンジニアは、フロントエンドを構築するためのエンジニアスキルを有している人を指します。具体的には、HTMLやCSS以外にもJavaScriptやPHPなどによる開発ができる人になります。

1. WEBコーダーとの違い

WEBコーダーは、HTMLやCSSを用いて、WEBデザイナーがデザインしたデザイン案をWEBサイトやWEBサービスなどで忠実に動くようにする職種です。また、WEBサイトやWEBサービスは、ユーザーの環境によっては、デザイン案とは異なる見た目になることが考えられます。ユーザーがPCを使っているのか、スマートフォンを使っているのか、タブレットを使っているのか、などのように環境が変化しても、視覚的に破綻なく利用できるような調整もおこないます。

最近では、WEBデザイナーがコーディングをおこなうこともあり、WEBデザイナーのことをデザインとコーディングをおこなう職種と捉える場合もあります。また、WEBコーダーがSEOやUI・UXのことも見るようになり、マークアップエンジニアのような仕事をすることもあります。こうした区別の仕方は、その場所や人によっても扱いが異なるため、特に求人などに応募する際は、よく確認する必要があるでしょう。

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

マークアップエンジニアは、UI・UX、SEOを理解した上でのコーディングをおこないます。デザイナーからあがってきたデザイン案を見て、ユーザーにとっての利便性や、SEOについての知見を示し、助言します。そうしてできあがったデザインをGoogle社のSEO方針に則ってコーディングをおこないます。

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

マークアップエンジニアに必要なスキルについて見ていきます。

1. HTMLやCSSの実装スキル

これまで述べてきたように、HTMLとCSSの知識・スキルは必須です。もう少しその二つのスキルについて解説すると、HTMLは、ハイパーテキスト・マークアップ・ランゲージの頭文字をとったもので、マークアップ言語の１つです。画像やテキストなどの役割をコンピューターに伝え、WEBサイトやWEBアプリなどに適切に表示することが可能になります。HTMLは、定期的にバージョンアップされるため、そうした情報の収集も必須です。例えば、2021年1月に、HTML5が廃止され、現在はHTML Living Standardとなっています。

一方、CSSはCascading Style Sheetsの頭文字をとったもので、例えばWEBサイトの文字や画像などの大きさや色や配置などをコンピューターに指示するプログラミング言語です。

CSSにもバージョンが存在し、現在は「CSS3」です。こちらはHTMLよりもバージョンの更新頻度が比較的緩く、以前の「CSS2.1」は2011年となっています。ですが、CSSには多数のフレームワークが存在するため、それらを含め使いこなせるようになるためには、HTML同様に情報収集は必須です。

1. CMSの知識と実装・運用スキル

CMSとはContents Management Systemの頭文字の略で、主にWEBサイトなどの構築の際に利用されます。CMSを利用すれば、HTMLやCSSなどの知識がなくても、クライアントサイドで記事やコンテンツの追加といったコンテンツ編集をおこなうことができるため、高い需要があります。そのため、マークアップエンジニアは、WEBサイトをCMSに実装するための知識やスキルを持っている必要があります。

また、CMSが始めから備えている設定だけでなく、必要に応じて導入するプラグインなどの知識も必要です。運用をおこなう際は、CMS、プラグインのバージョンアップに対応、PHPのバージョンアップをおこなう必要がある場合は、現行サイトへの不具合の解消をおこなう必要もあるため、そうした知識も求められます。

1. UI／UXに関する知識

User Interface、User Experienceのそれぞれ頭文字の略で、WEBサイトやWEBアプリで、ユーザーが目にするものと体験を意味します。マークアップエンジニアはデザインこそしませんが、UI・UXを意識したデザインに対し、その意図をくみ取りUI・UXのコーディングをおこないます。具体的には、ボタンや、アイコンなどユーザーが触れる全ての箇所についてユーザーがどのように感じるか、についての設計を体現します。また、今どきのユーザーが、実際にどのように感じるか、をユーザー目線でみるために、ユーザーインターフェースの流行についても敏感でなければなりません。

1. SEOに関する知識

SEOとは「Search Engine Optimization」の頭文字の略で、ブラウザによる検索結果に影響をおよぼします。検索上位に表示するためには、その知識が求められます。

具体的には、W3CというHTML・CSSの企画を定めている団体の基準に準拠しているか、メタタグ、OGP、ディスクリプション、タイトルは正しく使用されているか、画像にaltが設定されているか、モバイルフレンドリーか、文字の大きさは適切か、などです。

簡単にいえば、クローラーがWEBサイトを巡回する際に、サイトをどのように認識し、どのように評価するか、ということに関する知識を有しているか、ということです。

1. マークアップエンジニアに向いている人の特徴

マークアップエンジニアは、自らのスキルを用いて、ユーザーにとって使いやすいサイトとはどんなものか、ということを実現していきます。そうした仕事を続けていくモチベーションが求められます。

また、ディレクターやデザイナーとのコミュニケーションは必須です。とくに、UI・UXについてデザイナーと連携していくことで、高い成果を残すことができるでしょう。

日頃から、WEBサイトやWEBサービスなどの最新の流行やユーザーの評価などの情報収集を怠らないことも重要です。

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

マークアップエンジニアにおすすめの資格について解説します。

1. WEBクリエイター能力認定試験

WEBクリエイター能力認定試験は、サーティファイWEB利用・技術認定委員会が主催する試験で、

HTML・CSSに関する基本的な知識や簡単なWebページ作成能力から、フォーム・オブジェクトの配置といった応用的なWebサイトデザイン能力まで、Web業界で必須となる技能

を有することを証します。

エキスパートとスタンダードの二種があり、エキスパートは、

レイアウト手法や色彩設計等、ユーザビリティやアクセシビリティを考慮したWebデザインを表現することができる。また、スクリプトを用いた動きのあるWebページの表示、マルチデバイス対応、新規サイトを構築することができる

ことを、スタンダードは、

セマンテックWebを理解し、HTML5をマークアップすることができる。また、CSSを用いてHTMLの構造を維持しつつ、Webページのデザインやレイアウトを表現することができる

ことを認定基準としています。

平均合格率は、89.92％（公式発表）と高い合格率となっています。

参考サイト：試験に申し込む（サーティファイ公式ホームページ）

　　　　　　サンプル問題（HTML5対応版）（サーティファイ公式サイト）

1. ウェブデザイン技能検定

ウェブデザイン技能検定は、厚生労働省が認定する国家資格で、関連国際標準規格等に基づいたウェブデザインに関する知識・スキルを有していることを証明します。

難易度ごとに1級から3級まであり、学科試験と実技試験があります。学科試験のシラバス範囲は共通で、実技試験は2級、3級は選択式、1級はペーパー実技試験と作業実技試験の2種があります。

それぞれの合格率は3級が60〜70％、2級が30〜40％、1級が10〜20％（公式発表）となっています。

参考サイト：試験要項・実技試験概要（公式ホームページ）

　　　　　練習問題（公式ホームページ）

1. CIW HTML5 & CSS3 スペシャリスト

Advanced HTML5 & CSS3 Specialistは国際資格で、アメリカのCertification Partner社により運営され、HTML5、CSS3、JavaScriptに必要な知識・スキルを有していることを証明します。

国際資格のため、海外で働く際にも有用です。

参考サイト：Advanced HTML5 & CSS3 Specialist（公式ホームページ）

1. HTML5プロフェッショナル認定試験

HTML5プロフェッショナル認定試験はLPI-Japanが運用・認定する資格試験で、HTML5、CSS3、JavaScriptなどに関する技術力と知識・スキルを有していることを証明します。レベルに応じてレベル1、レベル2があり、5年間有効です。

参考サイト：試験概要（公式ホームページ）

　　　　　　受験方法（公式ホームページ）

1. マークアップエンジニアの今後の将来性

WEBサイトやWEBサービスの需要は今後もあり、また、ユーザーやSEOについて考えられるマークアップエンジニアの需要は、しばらく衰えないでしょう。

ですが、近い将来、AIの台頭により、エンジニア職の職が奪われるのではないかという懸念はあります。AIの動向や、世の中の動きを注視し、マークアップエンジニアを目指すべきか、あるいはすでにマークアップエンジニアの方は、そうした未来を見越してリスキリングによる他の職種のスキルの習得を目指すのも悪くはないでしょう。

1. マークアップエンジニアの平均年収

マイナビエージェントによれば、マークアップエンジニア・フロントエンドエンジニアの平均年収は385万円と発表しています。厚生労働省の発表するシステムエンジニアの550.2万円などと比較すると、やや低い傾向にあります。

弊社アールストーンでは、現在マークアップエンジニアの求人が2件あり、450万円、960万円となっています。

参考URL：求人検索（アールストーン公式ホームページ）

1. まとめ

未経験で、いきなりマークアップエンジニアを目指すのは難しいと言えます。まずはHTMLとCSSを習得し、WEBコーダーとして仕事を受けながら、CMS、JavaScriptを学び、UI・UX、SEOなどを習得することで、マークアップエンジニアのキャリアが開けます。

資格試験も充実しているため、そちらを目指すことで効率よく学習できるでしょう。

この記事を参考にぜひマークアップエンジニアを目指してください。