- マークアップエンジニアとは
- 未経験からマークアップエンジニアになるには
- 未経験可のマークアップエンジニアの求人例
- マークアップエンジニアで活躍するために必要なスキル
- マークアップエンジニアになるためにおすすめ資格
- まとめ
マークアップエンジニアとは
マークアップエンジニアとは、マークアップ言語を使用してWebページを作成する職種です。マークアップ言語とは、HTMLやCSSなどWebサイトの表面を作成する言語です。ここでは以下の内容について解説していきます。
マークアップエンジニアの仕事内容
マークアップエンジニアの仕事内容は以下です。
| 業務 | 概要 |
|---|---|
| コーディング | HTMLやCSSを用いてコードを書く |
| バグの修正 | ツールなどを用いてバグを探し、 見つかったら修正する |
| CMSテンプレートの 設計、構築 |
CMS(コンテンツ管理システム)の テンプレートの設計、構築 |
| SEO対策 | 検索エンジンに対して最適化を行い、上位表示を狙う |
CMSやSEOに関する仕事はマークアップエンジニアの担当でない場合もありますが、担当する場合もあるのでスキルを身につけておくと仕事の幅が広がります。
マークアップエンジニアの年収
マークアップエンジニアの年収を他職種と比較して紹介します。平均年収と中央値を把握しておくと、年収相場をイメージしやすいでしょう。
| 職種 | 平均年収 | 中央値 |
|---|---|---|
| マークアップ エンジニア |
4,098,039円 | 3,500,000円 |
| Webデザイナー | 4,259,819円 | 4,500,000円 |
| フロントエンド エンジニア |
5,061,026円 | 4,500,000円 |
※レバテックキャリア独自のデータから算出
マークアップエンジニアの年収相場は、他のIT関連職種と比較すると低めであることがわかります。年収アップを目指したい人は、スキル習得後、他職種へのキャリアアップを検討するのもおすすめです。
マークアップエンジニアと他職種の違い
マークアップエンジニアと他職種の違いについて解説します。他職種について把握しておくことで、そもそもマークアップエンジニアを目指すべきなのか、マークアップエンジニアになった後にどのようなキャリアパスを目指すのか、などの判断に役立つでしょう。
コーダーとの違い
コーダーはHTML/CSSを使用してWebページの外観を作成します。複数ブラウザやスマートフォンなど様々な画面サイズへの対応なども考慮しながら、仕様書に沿ってコーディングを行います。Web系エンジニアの入門的な職種で、JavaScriptのスキルやUX、SEOなどの知識を身につけることで、マークアップエンジニアやフロントエンドエンジニアを目指せます。
フロントエンドエンジニアとの違い
フロントエンドエンジニアはマークアップエンジニアの仕事に加えてJavaScriptのライブラリやフレームワークを利用しながら、より高度なUIを構築する職種です。モダンなWebアプリケーション開発では、ReactやAngular、VueといったJavaScriptのライブラリ・フレームワークを用いて、ユーザー認証、ルーティング、データ処理などを実装します。高度で複雑な開発を支えるため、ソースコードのバージョン管理やパッケージ管理、テストなども行います。
関連記事:フロントエンドエンジニアとは?仕事内容や年収、必要なスキルも解説
Webデザイナーとの違い
Webデザイナーはマークアップエンジニアより上流工程の作業も担います。具体的には、顧客と打ち合わせをして要件を汲み取り設計を行う工程です。コーディングはマークアップエンジニアに流す場合もあれば、Webデザイナー自身が行う場合もあります。
また、プログラミングによるデザインだけでなく、Photoshop®やIllustrator®を使用したグラフィックデザインも業務範囲です。Webデザイナーといっても在籍している企業やプロジェクトによって、WebサイトのUI制作からグラフィック制作まで幅が広いということです。
マークアップエンジニアの場合はコーディングがメインなので、このような差異はあまり生まれません。
関連記事:Webデザイナーとは?仕事内容や他職種との違い、未経験からの目指し方も紹介
未経験からマークアップエンジニアになるには
未経験からマークアップエンジニアになるために必須のスキルや資格はありませんが、一定のプログラミングスキルや資格を取得しておいたほうが客観的なスキルの証明に繋がります。未経験からマークアップエンジニアになるためには、以下のステップをたどるのがおすすめです。
-
ステップ1:プログラミングスキルの習得
ステップ2:ポートフォリオを作成
ステップ3:コーディングの経験を積む
ステップ4:エージェントを活用して転職活動をおこなう
ステップ1:プログラミングスキルの習得する
まずは基本的なプログラミングスキルを習得してください。特にHTML、CSSのスキルは必須です。マークアップエンジニアの仕事の中心はHTML、CSSによるプログラミングだからです。プログラミングスキルを身につける方法は複数あり、具体的には以下が挙げられます。
-
・スクールに通う
・書籍で学習する
・学習サイトを活用する
環境やその人の能力などによってベストな方法は変わってくるので、自身に合う方法を選択してください。
ステップ2:ポートフォリオを作成
一定のプログラミングスキルが身についたら、ポートフォリオを作成してください。ポートフォリオとは、経歴などの基本情報や成果物をまとめたものです。エンジニアはポートフォリオによって実力が評価される場合が多いため、マークアップエンジニアにとってもポートフォリオは重要になります。
以下はフロントエンドエンジニアのポートフォリオ作りに関する記事ですが、マークアップエンジニアでもやるべきことは概ね同じです。ぜひご確認ください。
関連記事:フロントエンドエンジニアにポートフォリオは必須?作り方も解説
ステップ3:コーディングの経験を積む
スキルにある程度自信がついたら、クラウドソーシングで受注したり個人的なWebサイトの作成に携わり、実務での経験を積んでください。勉強したスキルだけではカバーできない部分も出てくるので、その都度調べながら進めていくことが重要です。この経験により、実戦的なコーディングスキルが身につくでしょう。
ステップ4:エージェントを活用して転職活動をおこなう
転職エージェントは未経験者でも応募可能な求人を多数保有しているため、未経験からマークアップエンジニアに転職を目指す場合、非常に有効な手段です。たとえば、個人では見つけにくい企業やポテンシャルを重視して採用する企業を紹介してもらえます。
未経験で転職活動の進め方に迷っている場合は特に、転職エージェントの利用がおすすめです。
未経験可のマークアップエンジニアの求人例
レバテックキャリアの求人から、未経験可のマークアップエンジニアの求人例を紹介します。2025年2月時点で実際に募集されているものです。
【年収】400~650万円
【仕事概要】
・自社運用メディアの作成・修正
・クライアントのコーポレートサイト、ECサイトの新規作成やリニューアル
【必須条件】
・HTMLを用いた開発経験
・CSSを用いた開発経験
・Wordpress もしくは Java Scriptを用いた開発経験
【歓迎要件】
・WEBサイト作成の実務経験(目安最低5サイト以上または1年以上)
上記の案件ではHTMLやCSSの経験自体は求められますが、開発現場での実務経験は必須条件には含まれていません。一定のスキルを身につけたら積極的に企業に応募し、就職して実戦経験を積むのがおすすめです。
マークアップエンジニアで活躍するために必要なスキル

マークアップエンジニアで活躍するために必要なスキルは以下です。
プログラミングスキル
マークアップエンジニアは、まずはHTML・CSSでコーディングができることが重要です。またそこから付加価値を出すためには、JavaScriptを一定レベルで理解してjQueryを使いこなせると良いでしょう。HTML、CSSでWebサイトの表面を作成し、JavaScriptで動きを付けられると開発の幅が広がるからです。またフロントエンドエンジニアなど別職種へのキャリアアップにも繋がるでしょう。
コミュニケーションスキル
マークアップエンジニアは、同じマークアップエンジニアやほかの職種のメンバーとチームで制作にあたります。そのため、チームメンバー間でコミュニケーションを取って認識を合わせていく必要があります。
役割分担があるのですが、連携がうまくできていないと互いの作業成果物を組み合わせたときに全体成果物として成立しません。全体の成果物をきちんと納品できる形にするためには、細かいコミュニケーションが求められます。
ユーザビリティ・アクセシビリティの知識
より良いサイトを構築するには、ユーザーの視点で考えることが大切です。どうすればユーザーが使いやすく、アクセスしやすいサイトになるかを検討しながらサイトを構築する力が求められます。
レスポンシブデザインの実装スキル
PCよりもスマートフォンからのアクセスが多くなっているため、スマートフォンに対応したサイトを構築することは必須となっています。サイトを多様な大きさのデバイスに対応させるレスポンシブデザインを実装するスキルが必要です。
フレームワーク・ツールの操作スキル
CSS、JavaScriptのフレームワーク、Gitによるソースコード管理、npmによるパッケージ管理などのスキルがあると実際の開発プロジェクトで役に立ちます。開発ではコードを書くことよりも、いかにコードを書かずにフレームワークやツールを活用するかが重要な面もあります。開発を効率化するためには、フレームワークやツールの活用が欠かせません。
マークアップエンジニアになるためにおすすめ資格
マークアップエンジニアになるために必須の資格はありませんが、以下の資格を取得することでスキルアップや評価アップに役立ちます。
-
基本情報技術者試験:エンジニアに必要な最低限の知識を網羅的に学べる
HTML5プロフェッショナル認定試験:Webの基礎知識、CSS、HTMLの基礎文法などを学べる
Webクリエイター能力検定試験:HTMLやCSSを記述するスキルを学べる
ウェブデザイン技能検定:ウェブデザインに関する知識や技能を学べる
それぞれの資格についてより詳しく解説していきます。
基本情報技術者試験
基本情報技術者試験とは、経済産業省に属する独立行政法人情報処理推進機構が主催する国家試験です。エンジニアに必要な最低限の知識を網羅的に学べるため、非常に人気の高い認定試験となっています。
主な出題範囲は、コンピュータのハードウェアやソフトウェア、ネットワーク、データベース、プログラミング言語などに関する知識です。また、科目A・科目B(午前試験・午後試験)に分かれています。試験概要は以下の通りです。
| 受験料 | 7500円 |
| 受験資格 | 無し |
| 出題数 | 科目A:60問、 科目B:20問 |
| 回答形式 | 多肢選択式 |
HTML5プロフェッショナル認定試験
HTML5プロフェッショナル認定試験とは、HTMLのプロフェッショナルとしてのスキルを証明できる資格です。試験はレベル1とレベル2に分かれています。レベル1ではWebの基礎知識、CSS、HTMLの基礎文法などが問われ、レベル2ではアニメーション、マルチメディア、通信などについて問われます。
合格率は非公開ですが、動的なサイトやリッチユーザーインターフェースの開発方法などについても問われるため、実務経験者向けの資格といえるでしょう。
試験概要については以下の通りです。
| 資格試験 | レベル1 | レベル2 |
|---|---|---|
| 受験料 | 16,500円 | |
| 受験資格 | 無し | |
| 出題数 | 約60問 | 40~45問 |
| 回答形式 | CBT方式 | CBT方式 |
Webクリエイター能力検定試験
Webクリエイター能力検定試験とは、サーティファイが実施しているHTMLとCSSのコーディングスキルを認定する試験です。試験はスタンダードとエキスパートの2つのレベルで実施されています。スタンダードは実技問題のみ、エキスパートは実技問題と知識問題の両方が出題されます。
実技試験では実際にエディタを操作してHTMLやCSSを記述するスキルが問われます。マークアップエンジニアの業務に直結した内容であるため、受験する方はエキスパート試験までチャレンジすると良いでしょう。以下は試験概要です。
| 資格試験 | スタンダード | エキスパート |
|---|---|---|
| 受験料 | 6,100円 | 7,700円 |
| 受験資格 | 無し | |
| 試験時間 | テキストエディターの場合:70分 Webページ作成:ワープロの場合:60分 |
知識問題:20分 実技問題:テキストエディターの場合 110分、 Webページ作成:ワープロの場合 90分 |
| 回答形式 | 実技問題のみ | 知識問題(多肢選択式)と実技問題 |
| 合格ライン | 実技問題において 65%以上 | 知識問題と実技問題において 65%以上 |
※本資格のテキストエディタはWindowsの「メモ帳」とmacOSの「テキストエディット」のみを指している
ウェブデザイン技能検定
ウェブデザイン技能検定とは、ウェブデザインに関する知識や技能、実務能力を認定する国家資格です。試験は3級から1級まで実施されており、それぞれ学科試験と実技試験の両方を受験しますが、片方のみ合格した場合、2年間は受験を免除されて、不合格だったほうの試験の合格だけで、それぞれの級の試験の合格と見なされます。
Web制作に関する資格としては唯一の国家資格であり、試験内容も実務で活かせる内容が多いので、積極的にチャレンジしたいところです。2級と1級には受験資格として実務経験などの条件が求められますので、未経験でマークアップエンジニアを目指している方は、まず3級から受験することになります。
以下は試験概要です。
| 資格試験 | 3級 | 2級 | 1級 |
|---|---|---|---|
| 受験料 | 学科:6,000円 実技:8,000円 ※23歳未満の 在職者は4,000円 ※23歳未満の 在職者以外 は 6,000円 |
学科:7,000円 実技:16,000円 |
学科:8,000円 実技:25,000円 |
| 受験資格 | ・ウェブの作成や 運営に関する業務に 従事している者及び 従事しようとしている者 |
・2年以上の実務経験を 有する者 ・職業高校、短大、高専、 高校専攻科、専修学校、 各種学校卒業又は 普通職業訓練修了した者 ・大学を卒業した者 ・高度職業訓練を 修了した者 ・3級の技能検定に 合格した者 |
【実技試験】 ・1級の技能検定において、 学科試験に合格した者 【学科試験】 ・7年以上の実務経験を有する者 ・職業高校、短大、高専、 高校専攻科、専修学校、各種学校卒業 又は普通職業訓練修了後、 5年以上の実務経験を有する者 ・大学卒業後、3年以上の実務経験 を有する者 ・高度職業訓練修了後、 1年以上の実務経験を有する者 ・2級の技能検定に合格した者であって、 その後2年以上の実務経験を有する者 |
| 試験時間 | 学科45分 実技60分 |
学科60分 実技120分 |
学科90分 実技180分 ペーパー実技60分 |
| 出題形式 | 学科:100点満点中70点以上 実技:100点満点中70点以上 かつ 試験要項に示された各分類において60%以上 |
||
まとめ
この記事ではマークアップエンジニアの仕事内容や必要なスキル、未経験から目指す方法について解説しました。マークアップエンジニアは求められるスキルの習得難易度がほかのエンジニア職に比べて低く、未経験者でも目指しやすい職種です。
一方で近年はマークアップエンジニアの募集は少なくなっており、より高度なスキルが求められるフロントエンドエンジニアの求人が増えています。そのためマークアップエンジニアのスキルだけでなく、フロントエンドエンジニアに必要なスキルを身につけることでキャリアアップを図り続ける必要があります。
さらにサーバーサイドのスキルも身につけ、フルスタックエンジニアを目指せるとより良いです。マークアップエンジニアのキャリアパスにはエンジニア以外のIT職種もあるので、幅広い視野を持つことをおすすめします。
ITエンジニアの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングでお話してみませんか?(オンラインでも可能です)
転職支援サービスに申し込む
また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。
「個別相談会」に申し込む
レバテックキャリアのサービスについて