マークアップエンジニアになるにはどんなスキルや資格を勉強すべき?未経験からマークアップエンジニアに転職するには - 具体的な求人例も

最終更新日:2022年6月21日

レバテックキャリアは
ITエンジニア・Webクリエイター専門の転職エージェントです

マークアップエンジニアは、HTML/CSSやJavaScriptを用いてWebサイトのユーザーインターフェース(UI)を構築するエンジニアです。サイトの入口であるUIを開発するという重要な役割を担いますが、フレームワークを扱うスキルなど、以前よりも求められるスキルの幅が広がってきています。

この記事では、Web系のエンジニアとしてキャリアを築きたいと考えている未経験者に向け、マークアップエンジニアの仕事内容、コーダーやフロントエンドエンジニアとの違い、必要なスキル、未経験から目指す方法について解説します。

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

マークアップエンジニアは、HTML、CSS、JavaScriptなどを用いてWebサイトを制作します。Webデザイナーが考えたラフの通りにサイトを制作するコーダーとは異なり、マークアップエンジニアはSEOやユーザビリティなどを考慮してサイトを制作する職種です。

人間は、文字の大きさや位置などでタイトルや本文を認識することができます。それにより書き手の意図を把握し、読む順番を決めることができるでしょう。

しかしコンピュータは人間のように認識できないため、ここは何なのかひとつひとつタグと呼ばれる目印を付けて意味を理解させる必要があります。その作業がマークアップです。

つまりマークアップとは、文書構造や視覚表現、リンクの埋め込みなどをコンピュータが認識できるようにタグを付けていく作業のことをいいます。

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

マークアップエンジニアの仕事は主に以下のようなものがあります。

コーディング

HTMLやCSSを用いてマークアップをし、JavaScriptなどで動きを付けたりと、Webデザイナーのラフをもとにコードを書いていきます。この仕事をコーディングと言います。

コーディングの際には、ユーザビリティだけでなく、納品後の更新についても考える必要があります。テキストや画像などの差し替えといった修正のたびに依頼が来る場合もありますが、ほかの方が修正を担当する場合もあるため、その方が理解できるようにコーディングすることが大切です。

バグの修正

コーディング後はバグの修正を行います。きれいに書けたコードでもバグは見つかることがあるため、疎かにせずツールなどを用いてしっかりと確認するようにしましょう。

CMSテンプレートの設計、構築

CMS(コンテンツ管理システム)のテンプレートを開発します。CMSのテンプレートを開発することで、サイト制作の知識がない方でも比較的簡単にサイトを更新したり管理したりすることが可能です。

2. マークアップエンジニアと周辺職種との違い

マークアップエンジニアと混同しやすい職種に、コーダー、フロンエンドエンジニア、Webデザイナーがあります。ここでは、それら2つの職種との違いを解説します。

コーダーとの違い

コーダーはHTML/CSSを使用してWebページの外観を作成します。複数ブラウザやスマートフォンなど、さまざまな画面サイズへの対応なども考慮しながら、仕様書に沿ってコーディングを行います。Web系エンジニアの入門的な職種で、JavaScriptのスキルやUX、SEOなどの知識を身につけることで、マークアップエンジニアやフロントエンドエンジニアを目指すことができます。

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

フロントエンドエンジニアはマークアップエンジニアの仕事に加えて、JavaScriptのライブラリやフレームワークを利用しながら、より高度なUIを構築する職種です。モダンなWebアプリケーション開発では、React、Angular、VueといったJavaScriptのフレームワークを用いて、ユーザー認証、ルーティング、データ処理などを実装します。高度で複雑な開発を支えるため、ソースコードのバージョン管理やパッケージ管理、テストなども行います。

関連記事:フロントエンドエンジニアとは?スキルや年収、求人例も徹底解説

Webデザイナーとの違い

Webデザイナーはマークアップエンジニアより上流工程の作業も担います。具体的には、顧客と打ち合わせをして要件を汲み取る、それを元に設計を行う、といったことです。コーディングはマークアップエンジニアに流す場合もあれば、Webデザイナー自身が行う場合もあります。

またプログラミングによるデザインだけでなく、Photoshop®やIllustrator®を使用したグラフィックデザインも業務範囲です。Webデザイナーと言っても在籍している企業やプロジェクトによって、WebサイトのUI制作からグラフィック制作まで幅が広いということです。

マークアップエンジニアの場合はコーディングがメインなので、このような差異はあまり生まれません。

関連記事:Webデザイナーの仕事内容について工程ごとに解説|需要や将来性もご紹介

3. マークアップエンジニアの求人例

マークアップエンジニアの求人例をご紹介します。純粋な未経験可の求人は少ないのですが、独学で1年ほど学びつつ自分でWebサイトを作った経験があれば、以下にご紹介するような求人の応募要件を満たすことができます。

未経験可の求人例

想定年収:350~700万円
雇用形態:正社員

<具体的な業務内容>
・自社Webサイトの改善企画
・コンテンツ制作
・レガシー実装の更新

<必須経験>
・JavaScript、HTML、CSSでの開発経験1年以上
・Webサイト運用経験1年以上

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

次に、マークアップエンジニアに必要なスキルを解説します。

HTML/CSS

HTML/CSSのコーディングは、マークアップエンジニアにとって必須のスキルです。ドラッグ&ドロップでファイルをサイトにアップするなど、近年主流になってきているリッチなUIに対応するため、CSSを拡張したSassなどを使った効率的なコーディングも求められます。

JavaScript

JavaScriptもマークアップエンジニアにとって必須のスキルです。基本構文のほか、ブラウザの操作、DOM操作、APIの実装スキルも身に付けておきましょう。JavaScriptのライブラリであるjQueryも使用頻度が高いため、こちらも使えるようにしておくと良いです。

関連記事:JavaScriptとは?Web業界で価値が高い理由について

CMS

CMSはコンテンツを効率的に管理するシステムで、多くのWebサイトで使用されています。特に、普及率の高いWordPressについては、使用法やプラグインなどについて理解しておくと良いです。

SEO対策

構築したサイトを上位表示させるためには、SEO対策を行うスキルが必要です。Googleの場合、「Google検索エンジン最適化スターターガイド」が公開されているので、ガイドに沿ってサイトを構成すると良いでしょう。

ユーザビリティ、アクセシビリティ

より良いサイトを構築するには、ユーザーの視点で考えることが大切です。どうすればユーザーが使いやすく、アクセスしやすいサイトになるかを検討しながらサイトを構築する力が求められます。

レスポンシブデザイン

PCよりもスマートフォンからのアクセスが多くなっているため、スマートフォンに対応したサイトを構築することは必須となっています。サイトを多様な大きさのデバイスに対応させるレスポンシブデザインを実装するスキルが必要です。

フロントエンドエンジニアのスキル

フロントエンドエンジニアはCSS、JavaScriptのフレームワーク、Gitによるソースコード管理、npmによるパッケージ管理、テストを実装するスキルなどが必要です。マークアップエンジニアが活躍の場を広げるためには、これらのスキルも身に付けると良いでしょう。

5. マークアップエンジニアの転職に役立つ資格

続いて、マークアップエンジニアに役立つ資格について解説します。

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

HTML5プロフェッショナル認定試験は、HTMLのプロフェッショナルとしてのスキルを証明できる資格です。試験はレベル1とレベル2に分かれています。レベル1ではWebの基礎知識、CSS、HTMLの基礎文法などが問われ、レベル2ではアニメーション、マルチメディア、通信などについて問われます。合格率は非公開ですが、動的なサイトやリッチユーザーインターフェースの開発方法などについても問われるため、実務経験者向けの資格と言えるでしょう。

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

Webクリエイター能力検定試験は、サーティファイが実施している、HTMLとCSSのコーディングスキルを認定する試験です。試験はスタンダードとエキスパートの2つのレベルが実施されています。スタンダードは実技問題のみ、エキスパートは実技問題と知識問題の両方が出題されます。

実技試験では実際にエディタを操作してHTMLやCSSを記述するスキルが問われます。マークアップエンジニアの業務に直結した内容であるため、受験する方はエキスパート試験までチャレンジすることがおすすめです。

ウェブデザイン技能検定

ウェブデザイン技能検定は、ウェブデザインに関する知識や技能、実務能力を認定する国家資格です。試験は3級から1級まで実施されており、それぞれ学科試験と実技試験の両方を受験しますが、片方のみ合格した場合、2年間は受験を免除されて、不合格だったほうの試験の合格だけで、それぞれの級の試験の合格と見なされます。

Web制作に関する資格としては唯一の国家資格であり、試験内容も実務で活かせる内容が多いので積極的にチャレンジしたいところです。2級と1級には受験資格として実務経験などの条件が求められますので、未経験でマークアップエンジニアを目指している方は、まず3級から受験することになります。

6. 未経験からマークアップエンジニアになるには

未経験からマークアップエンジニアを目指す方法を解説します。未経験からマークアップエンジニアを目指すにはいくつか方法があります。

スクールに通う

未経験からWebエンジニアを目指す人を対象としたスクールが多数あります。スクールは講師によるサポートで不明点を解消しやすいというメリットがあります。まずは、HTML/CSS/JavaScriptとWebデザインについてのスキルを身につけましょう。

最初からフロントエンドエンジニアへのキャリアアップを視野に入れて、フロントエンドエンジニア向けの講座を受けてしまうというのも手です。フロントエンドエンジニアを目指す講座では、HTML/CSS/JavaScriptなどのマークアップエンジニアの必須スキルに加えて、PHPなどの言語やデータベースについても学習することができます。

例:ヒューマンアカデミー(フロントエンドエンジニアコース)

書籍で学習する

書籍は、費用を抑えて学習できるメリットがあります。初学者向けの書籍も多数ありますが、質問機能がないため不明点が発生した際に解決しづらいというデメリットもあります。以下は初心者向けの書籍です。

『HTML5&CSS3デザインきちんと入門』(狩野祐東、SBクリエイティブ)
『JavaScript「超」入門』(狩野祐東、SBクリエイティブ)
『現場のプロから学ぶ SEO技術バイブル』(西山悠太朗ほか、マイナビ出版)

学習サイトを活用する

近年では、HTML/CSSなどを学べる学習サイトも登場しました。このようなサイトでは、動画コンテンツやサイト上でコーディングできる機能、質問機能(チャットなど)が提供されており、書籍より学習しやすい環境が提供されています。以下は代表的な学習サイトです。

例:Progate

まず目指すべきスキルレベル

マークアップエンジニアとして転職を考える際に、まず目指すべきスキルレベルをご紹介します。

HTMLを手打ちでコーディング出来る

HTMLを自動生成するツールもありますが、ツールでできることには限度があります。マークアップエンジニアとして転職するためには、自分で手打ちできる必要があります。また手打ちができると、自動生成した後に自分で書き換えることもできます。

HTMLとCSSを適切に使い分けできる

HTMLとCSSは、コンピューターの処理的には一部重複した処理を実装できます。しかし、多くのプロジェクトではHTMLとCSSについて使い分けがルール化されています。HTMLで書いても同じように画面レイアウトはできるけれど、わかりやすさや修正コストを考えてCSSで記載しましょう、といったルールがあるのです。

ざっくり言えば、文章の内容のみHTMLで実装し、後のレイアウトや装飾はすべてCSSで実装するのが一般的です。この使い分けを意識しておくと、実際に現場で使えるスキルになります。

JavaScriptとjQueryを理解し活用できる

JavaScriptはWebページ内で動作のある処理を実装したり、視覚的に演出を作り込める言語です。jQueryは、JavaScriptの代表的なライブラリです。jQueryの機能を引っ張ってこれば、すべて自力で実装しなくても良いということです。

Webページの表面はHTML、CSS、JavaScriptでセットになっているので、マークアップエンジニアとしては3つ使える必要があります。

WordPressなど主要CMSの操作やカスタマイズができる

今はWordPressなどのCMSがあれば、自分で実装しなくてもWebサイトを作れるようになっています。そのため、CMSが土台になっているプロジェクトもあります。機能を利用するという観点ではCMSはプログラミングが一切できなくても扱えるツールです。

それが売りでもあるのですが、マークアップエンジニアは違う見方をする必要があります。つまり、CMSをカスタマイズするスキルが重要ということです。とはいえPHPなどのサーバーサイドの言語スキルが必要になってくるので、まずはHTML、CSS、JavaScriptの基本を優先してください。

7. マークアップエンジニアの市場状況

マークアップエンジニアの市場状況について、将来性や平均年収といった観点から解説します。

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

マークアップエンジニアはWebサイト制作には欠かせない技術を実装する職種です。専門性が求められる職種であるため、Webサイトが存在する限り、マークアップエンジニアの将来性は安定していると言えるでしょう。

しかしWebサイト制作にはマークアップエンジニアのスキル以外にも、WebデザインのスキルやWebエンジニアのスキルなど、さまざまなスキルが必要となります。そのためWeb制作者として働き続けるためには、マークアップエンジニアとしてのスキルに加えて、別のスキルを身につけてキャリアアップを目指すことが求められるでしょう。

Adobe Photoshop®やAdobe Illustrator®のスキルを身に付けてWebデザインができるようになることや、JavaScriptの技術を高めてフロントエンドエンジニアを目指すなどのキャリアアップを目指すのもおすすめです。

マークアップエンジニアのスキルをベースに、これらのスキルを身につけて、対応できる業務を増やしていくことでWeb制作者として長く活躍しつづけられるでしょう。

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

レバテックキャリアの求人情報によると、マークアップエンジニアの年収は300万円程度から800万円程度と幅があります。年収と求められるスキルレベルは比例する傾向があり、年収が低めの案件はマークアップエンジニアとして最低限のスキルレベル、逆に高めの案件はWebデザイナーやフロントエンドエンジニア寄りのスキルが求められる傾向があると考えると良いです。

8. まとめ

この記事では、マークアップエンジニアの仕事内容、必要なスキル、未経験から目指す方法などについて解説しました。マークアップエンジニアは求められるスキルの習得難易度がほかのエンジニア職に比べて低く、未経験者でも目指しやすい職種です。

ただし、近年はマークアップエンジニアの募集は少なくなっており、より高度なスキルが求められるフロントエンドエンジニアの求人が増えています。そのため、マークアップエンジニアのスキルだけでなく、フロントエンドエンジニアに必要なスキルを身につけることでキャリアアップを図っていく必要があります。

ITエンジニア・Webクリエイターの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。

転職支援サービスに申し込む

また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。

「個別相談会」に申し込む

プロのアドバイザーがあなたのお悩みや疑問にお答えします

- 転職個別相談会開催中 -

相談内容を選択してください

※転職活動や求人への応募を強制することはありません

人気の求人特集

内定率が高い

関連する記事

人気の記事

スキルアップ記事トップへ

マークアップエンジニアの求人・転職一覧