フリーランス求人を探すマークアップエンジニアとは？仕事内容・スキル・キャリアパス・将来性
HTML・CSSのコーディングをおこないウェブサイトの制作に携わる職業が「マークアップエンジニア」です。コーダーやデザイナーとも混同されやすい職種ですが、Web開発の高度化にともない求人需要が増加しています。
この記事では、マークアップエンジニアの仕事内容や給料・年収、スキル・知識、将来性などを紹介します。転職・就職やキャリアパスについても解説します。
目次
マークアップエンジニアとは
マークアップエンジニアは、Web制作に関する職業のひとつです。デザイナーが作成したデザインやグラフィックをもとに、更新性に配慮したCSSの設計やHTMLでのコーディングをおこないウェブサイトを構築します。マークアップ業務では、ChromeやSafari、Internet Explorerなどブラウザ間での挙動の違いに注意し、実際の画面を確認しながらディレクターやデザイナーの意図した見え方やUIを実現します。
マークアップエンジニアとして働くにはユーザビリティや検索エンジン対策（SEO）などコーディング以外のスキルも必要です。コーダーやWebデザイナーと役割が混同されることが多く、所属する組織によって職務範囲や募集要件が異なる点は注意しましょう。会社によってはデザイナーやフロントエンジニアが業務を兼任することもあります。
一般的にマークアップエンジニアはコーダーの上位職種であり、未経験から目指す場合はコーダーやWebデザイナーで就職してから転職や社内異動などでジョブチェンジするケースが多いです。
マークアップエンジニアの由来
マークアップという言葉の語源はHTMLのHyper Text Markup LanguageのMarkupです。このMarkupに由来するマークアップエンジニアという言葉は「Web制作会社ビジネス・アーキテクツの森田雄氏が考案した」と言われています。森田氏は自社の求人情報を作成する際、ただサイトを組めるだけでなくプログラミングにも習熟している人材を求めていました。そこで、従来からあったコーダーという職種ではなく、新たな言葉であるマークアップエンジニアという職種で人材を募集した、というわけです。
マークアップエンジニアの役割
マークアップエンジニアの役割は、ユーザーにとって利便性の高いサイトを作成することです。HTMLやCSSを組んで単にサイトが表示されるようにするだけでなく、より早く画面に表示されるよう軽量なコードにしてストレスを減らし、文章・テキストの見え方やレイアウト、アクセシビリティなどにも配慮します。
デザイナーの作成したデザインがユーザーにとって使いやすいかどうか、どのようにプログラミングすればより良いサイトになるか、更新や修正のガイドラインや標準化、公開後に多くのユーザーが集まるようにするためにといったところまで考え解決へと導きます。
HTMLでのコーディングは、Webサイト構築のフェーズにおいて比較的後半部分ですが、マークアップエンジニアはより上流の業務をも担当することになります。
マークアップエンジニアの仕事
マークアップエンジニアの仕事は主にマークアップ言語によるコーディングです。しかし、必ずしもデザインどおりにサイトを構築するだけを行うわけではありません。ここからは、マークアップエンジニアが具体的にどのような業務を担当するのか、詳しく解説します。
コーディング
コーディングとはWebデザイナーが作成したデザインをHTMLやCSSといったマークアップ言語を使って実際にWebサイトへと作成する仕事です。文章や画像などのレイアウト、表組、フォントサイズなどをブラウザが表示できるように言語で指定するのです。
一般的にこのような作業の担当者はWebコーダーやHTMLコーダーと呼ばれますが、プロジェクトや企画内容によってマークアップエンジニアがこのコーディング作業を担当することもあるのです。そうしたことから、マークアップエンジニアにはHTMLやCSSに関する正確な知識を有していることが求められます。
バグや不具合の修正
Webサイトを作成する中で何らかのバグが発生した場合、そのバグを修正することもマークアップエンジニアの重要な仕事です。構築中にテストや検証をおこないながら、公開時には不具合がない状態でローンチできるよう仕事をすすめます。テキストや画像についてはディレクターやデザイナーとも調整しながら完成を目指すのです。
マークアップを行うなかでとりわけ多い不具合がブラウザによって表示崩れやエラーが発生してしまうといったケースです。作成したサイトはPC、スマートフォン、タブレットなど複数のブラウザで閲覧できなければなりません。
さまざまなブラウザの仕様に準拠してディベロッパーツールを使いこなせる能力が重要です。
CMSの設計・構築
サイトの管理や更新には専門知識が必要ですが、CMS（コンテンツマネジメントシステム）を活用すれば専門知識のない現場の担当者でも比較的容易にサイトを運営できます。発注元企業の担当者に専門知識や技術がない場合、オープンソースのCMSであるWordPressなどを導入してサイトを構築するケースが多いです。
こうしたCMSを導入する際にはテンプレート設計や構築時の設定が必要となり、それらの業務もマークアップエンジニアが担当する仕事の一つです。
SEO（検索エンジン最適化）
マークアップエンジニアの重要な仕事として、ただデザイン的に優れたサイトを作るだけでなく、そのサイトを検索エンジンで上位表示されるようなサイトにすることが挙げられます。そのため、マークアップエンジニアはサイトの内部構造やURL構造などを最適化するためのSEO知識も必要でしょう。
指定のキーワードで検索エンジンに評価されるためにどのようなことをマークアップの段階でしておかなければならないのか、また逆にどのようなことはSEO的にしてはいけないことなのかをしっかり把握しておかなければなりません。
コーダー・フロントエンドエンジニアとの違い
マークアップエンジニアとよく似た職種として、コーダーとフロントエンドエンジニアがあります。そこで、ここからはそれらの職種とマークアップエンジニアは一体どこが違うのか、詳しく解説します。
HTMLコーダー（Webコーダー）
コーダーはマークアップ言語であるHTML・CSSを用いてWebサイトをコーディングするのが主な仕事です。そのため、HTMLコーダーやWebコーダーとも呼ばれます。基本的にコーダーの仕事はクライアントやWebデザイナーの指示通りに業務を行うことです。一方、マークアップエンジニアはユーザビリティやアクセシビリティなどの観点からデザイナーやクライアントに対してより良い選択肢を提案できることが求められます。
フロントエンドエンジニア
フロントエンドとは、ユーザーとWebサイトが直接接触する部分を指します。フロントエンドエンジニアの仕事はその部分におけるプログラミングを行うことです。HTMLやCSSのほかにJavaScript、PHPなどを用いて画面上で動作するWebサイトの動的な処理に関するプログラムを構築します。また、CMS構築やカスタマイズを行うことも少なくありません。フロントエンドエンジニアとマークアップエンジニアには共通する部分が多いですが、フロントエンドエンジニアはJavaScriptなどより高度な開発の知識とスキルや経験が豊富であることが求められます。
マークアップエンジニアに必要なスキル
マークアップエンジニアになるためにはいくつか必要不可欠なスキルがあります。そこで、ここからはどういったスキルを身につけておかなければならないのか、詳しく解説します。
HTMLやCSSのコーディングスキル
まず必要なのはHTMLやCSSのコーディングスキルです。特にDreamweaverなどのオーサリングツールを用いずに手書きでコーディングできる能力が求められます。なぜなら、マークアップエンジニアの仕事はただWebデザイナーの指示通りにコーディングするだけではないからです。
例えば、Webサイトがどのブラウザ環境であっても正しく表示されるようにすることも仕事の一つです。そうした問題に対処するためには、仮にオーサリングツールを用いてコーディングをしたとしても、問題点があった場合には手書きで修正できるだけの知識とスキルが必要となります。
プログラミングの基礎知識
マークアップエンジニアはHTMLやCSSといったマークアップ言語だけでなく、必要に応じてJavaScriptなどの言語も習得していなければなりません。と言うのは、マークアップエンジニアの仕事はただWebサイトの外見を整えるだけでなく、WebサイトのユーザビリティやSEOの面にも目を配る必要があるからです。
プログラムで動的に生成するページやサイト全体の構造、CMS設定などに関して問題があった場合、解決するためには基本的なプログラミングの知識が必要不可欠です。
ユーザビリティ・アクセシビリティ
どれだけデザイン的に優れていたりコンテンツが良質だったりするWebサイトであっても、ユーザビリティやアクセシビリティの面で劣っているとユーザーにとって使いにくいサイトとして敬遠されてしまいます。そのため、マークアップエンジニアはWebサイトのユーザビリティやアクセシビリティを向上するための知識、UIやUXに関する知見を身につけておくことも大切です。
コミュニケーション能力
ビジネスにおいてWebサイトの構築を最初から最後まで一人で行うことはほとんどありません。多くの場合、Webデザイナーやサーバーサイドエンジニア、フロントエンドエンジニア、コーダーといった他の分野の人とチームを組んで作業を行います。マークアップエンジニアはその中でもフロントエンド分野のメンバーをまとめ、Webデザイナーやフロントエンドエンジニアと意見を交換することが求められます。そうしたことを円滑に行うためにも、コミュニケーション能力が必要不可欠です。
マークアップエンジニアの年収
それでは、実際マークアップエンジニアになったらどの程度の年収が見込めるのか、また、どのようにしたら年収アップにつながるのかを詳しく解説します。
マークアップエンジニアの平均年収
マークアップエンジニアの年収相場は一般的に300万から500万円程度と言われています。転職サイトのマイナビエージェントの調査によると、マークアップエンジニア・フロントエンドエンジニアの平均年収は385万円です。同じIT系職種のシステムエンジニア・プログラマーの平均年収443万円に比べると低いですが、内勤営業・カウンターセールスの年収366万円に比べ19万円高いです。
未経験から就職したばかりだと年収300万円以下もありえます。アルバイトや契約社員の場合、さらに低くなるケースもあるでしょう。ただし、経験を積みスキルを身につけることで他の職種にジョブチェンジしたり、フリーランスとして独立するなども可能です。
年収アップを目指すために
マークアップエンジニアとして仕事の単価を上げていきたいのであれば、プログラミング言語やWebデザイン技術を高めていくことが大切です。能力があればフリーランスとして独立することでより高い単価で仕事を請けることはできるでしょう。転職して年収アップをはかる場合にも、知識やスキルに関する引き出しの多さがどれくらいあるのかがチェックされます。コーダー以上の知識とスキルを持っていると示すことが大切です。
マークアップエンジニアにおすすめの資格
マークアップエンジニアの仕事に就くために必要な資格というものはありません。しかし、いくつかの資格を取得しておけばマークアップエンジニアとしてのスキルがあることの証しになり、転職などの際に有利です。ここからは、どのような資格を取得すると良いのか、解説します。
Webクリエイター能力認定試験
Webクリエイター能力認定試験はWebクリエイターとしての能力を測定する試験です。この試験が定義するWebクリエイターとは、Webサイトのビジュアルデザインだけでなく全体の構成を設計できる人材のことです。マークアップエンジニアとも共通点が多いので、取得しておくことで能力をアピールできるでしょう。コースはHTMLのバージョンに基づいて3コースあり、それぞれ初級と上級（スタンダードコースとエキスパートコース）があります。受験資格は特にありません。
HTML5プロフェッショナル認定
HTML5プロフェッショナル認定は特定非営利活動法人LPI-Japanが運営する資格です。Level1とLevel2があり、Level1ではWebコンテンツ制作の基礎について、Level2ではシステム連携やマルチメディア技術に対応したコンテンツの開発や設計に関する知識とスキルについて試験します。多くの企業がこの資格の取得を推進していることから、取得しておくと就職や転職の際に有利になると言われている資格です。
マークアップエンジニアのキャリアパス
マークアップエンジニアとして採用されたら、その後はどのようにキャリアアップしていけば良いのでしょうか。ここからは、マークアップエンジニアからのキャリアパスについて詳しく解説します。
エンジニア系職種へ
JavaScriptなどのプログラミング言語を習熟していけばフロントエンドエンジニアになることができるでしょう。また、PHPやPythonのようにバックエンドで多く使用される言語を学ぶことで、マークアップエンジニアからサーバーサイドエンジニアに転向する人も多いです。
マネジメント系職種へ
マークアップエンジニアはWebデザイナーやディレクターともやり取りをすることの多い職種です。そうしたことから、ビジネスやディレクションなどのスキルを高めることでWebディレクターやWebプロデューサーのような職種へとステップアップすることもできます。
マーケティング系職種へ
マークアップエンジニアの仕事内容はただWebサイトを構築するだけでなく、そのWebサイトがビジネスにおいて有用なものとなるように目を配ることです。ユーザーの視点を取り入れるという経験が多くできるので、マーケターのようなWeb系のマーケティング職種へとキャリアアップすることもできます。
マークアップエンジニアになるには
ここからは、どうすればマークアップエンジニアになれるのか、その具体的な方法について解説します。
コーダーからキャリアアップを目指す
最も多いのは、まずはコーダーとして企業に採用され、その後実力を認められてマークアップエンジニアへとステップアップするパターンです。Webデザイナーの企画書どおりにサイトを作成するだけでなく、より良いサイト案を提案できる応用力が認められることでマークアップエンジニアになる人が多いです。
未経験可の求人に応募して採用される
企業の中には未経験可でマークアップエンジニアの求人を募集をしているところもあります。中途採用で応募する際には、未経験とはいえ事前の勉強が欠かせません。Web制作に関する資格を取得したり自分でWebサイトを作ったりして自身の知識とスキルを証明することが大切です。
履歴書・職務経歴書を準備する
未経験からコーダーやマークアップエンジニアに挑戦したい場合にも、まずは履歴書と職務経歴を準備しなければなりません。マークアップエンジニアはプログラミングの知識だけでなく、Webデザイナーやクライアントとのコミュニケーションが必要な仕事です。転職する人は前職での社会経験をどのように活かせるのかをアピールできるようにしておきましょう。
ポートフォリオを作る
履歴書や職務経歴書と同じくらいに重要なのが、自身のポートフォリオを作ることです。マークアップエンジニアの転職活動で使用するポートフォリオとは、自身が作成したWebサイトを紙やWebページにまとめたものです。採用担当者に分かりやすいようなレイアウトを心がけましょう。
未経験からスキルを身につける方法
これから知識やスキルを身につけてマークアップエンジニアを目指したい、という人も多いでしょう。プログラミングはさまざまな方法で学ぶことができます。ここからはプログラミングを学ぶ方法について詳しく解説します。
独学する
プログラミングを書籍やWebサイト、動画などを活用して独学している人は多いです。まずは「Progate」のような無料のオンライン学習サービスを利用してみても良いでしょう。比較的安価で気楽に始められますが、惰性で学習がなかなか進まないというデメリットもあります。
専門学校、Web制作スクールに通う
一人ではなかなか学習を進められないという人は、プログラミングを教えてくれる専門学校や有料オンライン学習サービスを利用しましょう。受講料や通学の時間を確保しなければならないというデメリットはあるものの、より体系的に学ぶことができることや、学校から求人を紹介してもらえることもある、といったメリットもあります。
職業訓練校を利用する
職業訓練校を利用するのも一つの方法です。職業訓練校ではマークアップエンジニア専門の講座というものはないので、Webデザイナーの講座に通いましょう。マークアップエンジニアはWebデザイナーとともに業務を担当することが多いので、Webデザイナー講座であっても知識が無駄になることはありません。
クラウドソーシングなどで仕事を受ける
ある程度知識やスキルがあるので実務経験が欲しいという人は、クラウドソーシングサービスを活用して経験を積むのも良いでしょう。経験を積みながら副業としてお金を稼ぐこともできます。ただし、クラウドソーシングサービスの案件は単価の安いものが多いです。
初心者歓迎の求人に応募して実務経験を積む
企業の中には、初心者であっても積極的に採用しているところもあります。そのような場合はマークアップエンジニアの募集であってもまずはコーダーとして経験を積んでいくことになるでしょう。知識やスキルをそれほど求めない代わりに、人柄や社風との相性が合否の決め手となります。初心者歓迎の求人に応募する場合は面接対策をしっかり取っておくことが大切です。
マークアップエンジニアの将来性
マークアップエンジニアという職種に対して、将来は不要になるのではないかという意見も多く見られます。そこで、最後にマークアップエンジニアの将来性はどうなのか、詳しく解説します。
マークアップエンジニアは不要になる？
Microsoftは2018年、AIを活用することで手書きのデザインを自動的にHTML化する「Sketch 2 Code」を発表しました。この技術が汎用化されると、コーダーやマークアップエンジニアという職種そのものが不要になるのではないか、と言われています。
コーディングだけの役割は今後減る可能性がある
そうした例もあるように、デザインをHTML/CSS化するコーディングの仕事は技術の発展によって減少していく可能性が高いと言えるでしょう。コーディング能力の価値が下がる分、これからはコーディング能力に加えてプロジェクト管理や人材育成といった別の能力が必要になるのかもしれません。
技術の動向をチェックしてスキルは広げるべき
マークアップエンジニアになれたとしても、それで将来が安泰だというわけではありません。むしろ、マークアップエンジニアの仕事の比重は今後の技術発展によって大きく変わってくることが想定されます。今後のキャリアアップのことを考えると、HTMLのようなマークアップ言語だけでなくJavaScriptなどのプログラミング言語を習得したり、コミュニケーションスキルやマネジメント能力を身に付けたりすることが重要なポイントです。
AIを仕事にするためのキャリアノウハウ、機械学習・AIに関するTopics、フリーランス向けお役立ち情報を投稿します。
