IT･Web業界で生きるあなたのキャリアを共に創る

「手に職をつけてWebの世界に飛び込みたい」と思った時、候補に挙がる職種の一つが、 HTMLやCSSを駆使してWebページを形にするコーダーです。今回は、初心者・未経験者向けに、コーダーやその上位職であるマークアップエンジニアになる方法、仕事内容の違い、年収やキャリアパスについて解説します。

コーダー・マークアップエンジニアの仕事内容は？　それぞれの役割は何が違うの？

コーダーもマークアップエンジニアもコーディングの知識が必要ですが、それぞれの役割には違いがあります。以下、詳しく見てみましょう。

コーダー：Webデザイナーが作成したレイアウトを、HTMLやCSSを使ってWebページ上に忠実に再現する
マークアップエンジニア：レイアウトを再現するだけでなく、SEOやアクセシビリティ（ユーザーの視認性や使いやすさ）を意識しながらコーディングを最適化する

この記事ではマークアップエンジニアをコーダーの上位職として位置づけ、それぞれの仕事について説明します。

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

まずはコーダー・マークアップエンジニアそれぞれの仕事内容について理解しましょう。

コーダーの仕事内容

コーダーはWebデザイナーが指定したデザインに対して忠実に、HTMLやCSS、JavaScriptなどの言語を使用してコーディングをしていきます。WebディレクターやWebデザイナーが作成した仕様書に沿って、正確にコードを組んでいく職人的な職種だといえます。
仕様書・設計書を的確に読み解く能力が求められるほか、自分以外の人がコードを運用・更新することが多々あるため、誰にとっても分かりやすいコードを書く能力が求められます。

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

マークアップエンジニアもHTMLやCSS、JavaScriptなどの言語を使用してコーディングを行います。しかし、指示書通りにコーディングを行うのではなく、SEOやアクセシビリティにも配慮したコーディング能力が求められます。また、レスポンシブWebデザインやモバイルファーストのサイト設計・構築などが求められる場合もあります。マークアップエンジニアは、Webサイトの見た目だけではなくユーザビリティも考慮して、Webサイトの完成度を高めていく職種と言えます。

コーダーとマークアップエンジニアの違い

このように、コーダーとマークアップエンジニアは両者ともコーディングを行う職種ですが、コーダーは忠実にレイアウトを再現することが求められ、マークアップエンジニアはWebサイトの目的を達成するために、見た目だけでなくユーザビリティも考慮して、完成度を高めることが求められる点で違いがあります。
とはいえ、実際の求人では、企業ごとに職種の呼び方はさまざまです。両者を混同している、または明確に区別していない企業もあります。コーダーとマークアップエンジニアのそれぞれがどんな役割を担っているのかを正確に把握し、仕事内容から実際の職種がどちらにあたるのかを読み解きましょう。

実際の求人で丸わかり！　コーダー・マークアップエンジニアの年収＆キャリアパス

実際のコーダー・マークアップエンジニアの求人を参考に、未経験からコーダー・マークアップエンジニアになった場合の年収とキャリアパスについて紹介します。

以下に、実際の募集情報をもとに作成したコーダー・マークアップエンジニアのよくある求人例を紹介します。「未経験者歓迎」はコーダーの、「経験者優遇」の求人はマークアップエンジニアの募集が多い傾向にあります。

「未経験者歓迎」のコーダー・マークアップエンジニア求人例

未経験者の応募を歓迎しているコーダー・マークアップエンジニアの求人例は以下の通りです。 HTMLやCSSを用いて型の決まったページのコーディングから行うことがほとんどです。
職種が「マークアップエンジニア」で募集されていても、未経験者はこうしたコーダー的な業務を担当する場合が多くあります。未経験者でもポートフォリオの提出が求められるので、求人に応募する前にしっかりと作り込みましょう。

求人例

「経験者優遇」のコーダー・マークアップエンジニア求人例

経験者優遇のコーダー・マークアップエンジニアの求人例は以下の通りです。
経験者歓迎の求人では、SEOやアクセシビリティの知見、集客を意識したサイト設計などが求められます。また、jQueryやAjaxといったJavascriptのライブラリを用いた制作経験も必要になります。求人例を見てもわかるように、広い知識と確かな実績が求められます。

求人例

コーダー・マークアップエンジニアの年収：低めスタートからスキルを上げて年収アップ

続いて、コーダー・マークアップエンジニアの年収を見てみましょう。コーダーの平均年収は300万円台と、決して高い水準ではないのが実情です。コーダーは初心者・未経験者でも応募可能な場合が多く、Webデザイナーがコーディングを行う企業もあるため、専業のコーダーは年収の水準が抑えられているのが現状です。年収アップのためには実績を積みながらキャリアアップしていくことが欠かせません。
マークアップエンジニアになると求められる役割が幅広くなるため、能力次第で年収が高くなる可能性も大いにあります。マイナビクリエイターの調査によると、実質コーダーのレベルで300万円～400万円、文書構造やSEOが理解できると500万円～600万円まで、複数プロジェクトを手がけるディレクション能力があれば600万円～800万円まで年収アップを見込むことができます。
※出典：マイナビクリエイター「マークアップエンジニアの年収事情とキャリアアップするための基本ノウハウ」

コーダーもマークアップエンジニアも、実務を積みながら確実にスキルを獲得し、また新しい領域を勉強しつづけることで年収・キャリアともにアップすることが可能です。学び続ける姿勢の有無がその後のキャリアを左右します。

コーダー・マークアップエンジニアのキャリアパスは？

未経験からコーダー・マークアップエンジニアになった場合には、どのようなキャリアパスが見込めるのでしょうか。大まかに3つのキャリアが考えられます。

フロントエンド系のキャリア

・Webデザイナーとしてコーディングだけでなくデザインも手がける
・フロントエンドエンジニアとしてPHPのコーディングも行い、Webブラウザ側の設計・開発・構築まで携わる

バックエンド系のキャリア

・サーバー側の知識・スキルを得てバックエンドエンジニアになる

ディレクション系のキャリア

・Webディレクターとしてプロジェクト全体のディレクション業務に携わる

フロントエンドはユーザーがWebブラウザ側で見ている領域を、バックエンドはサーバーなどのシステムの領域を指します。バックエンドエンジニアはフロントエンドの知識も持っている人が多く、コーダーからキャリアアップする人も珍しくありません。コーダーからマークアップエンジニアに転身し、その後で自分の専門性を育てていくといいでしょう。
コーダー・マークアップエンジニアともに転職によって年収や職種の幅を広げていくことが一般的なので、仕事の中で自分の興味や強みを見つけて磨きながらキャリアアップしていきましょう。

未経験からコーダー・マークアップエンジニアの求人に応募するには？　資格は必要？

未経験からコーダー・マークアップエンジニアになるための準備を紹介します。まず、通常の転職活動と同じように履歴書・職務経歴書は必ず作成しましょう。
また、未経験・初心者でも「ある程度の知識や学習経験がある」前提で募集がかかります。必須ではありませんが、「何を勉強し、どんなことができるか分かる」ポートフォリオがあると便利です。「GitHub」というソースコードを保管・共有することができるサービスをポートフォリオ代わりに使うする人もいます。マークアップエンジニアやフロントエンドエンジニアにキャリアアップするためにはGithubの運用能力も求められるので、ぜひ使えるようになっておきましょう。

また、必ずしも必要というわけではありませんが、未経験・初心者の場合、自身のスキルを客観的に証明するのが難しいため、資格を取得するのもおすすめです。自身の熱意をアピールできる武器にもなるでしょう。以下、コーダー／マークアップエンジニア向けの資格をいくつかご紹介します。

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

参考：https://www.sikaku.gr.jp/web/wc/

様々な資格検定試験の運営しているサーティファイの認定資格の一つで、Webサイトを構築するために必要なデザイン能力およびコーディング能力を認定する資格です。累計受験者数は14万人以上、Web制作の標準資格として業界で最も受験者が多いとされています。

等級は「スタンダード（初級）」と「エキスパート（上級）」に分かれており、どちらも特別な受験資格はありません。未経験の方でも勉強すれば「スタンダード（初級）」は合格しやすいと言われていますので、最初に取得する資格として狙ってみるとよいでしょう。

2．HMTL5プロフェッショナル認定

参考：https://html5exam.jp/

特定非営利活動法人エルピーアイジャパン（LPI-Japan）が認定する資格です。HTML5だけでなくCSSやJavaScriptなどに関する知識・技術を有している必要があります。

難易度はレベル1とレベル2があり、エンジニアレベルの知識を持っていないと、試験を合格するのは難しいでしょう。合格点については明確に公表していませんが、7割以上の正解率が必要とされています。

3．PHP技術者認定試験

参考：https://www.phpexam.jp/

民間資格の一つで「一般社団法人 PHP技術者認定機構」が主催している資格です。PHPの習熟度を測る目的で実施されている資格で、取得したグレードによって習熟度を測ることが可能です。

等級は、主に3つ用意されています。グレードは「初級試験」・「上級試験／準上級試験」・「認定ウィザード」です。「初級試験」は学生や社会人1～2年目の方を前提に実施している試験のため難易度は低めですが、「上級試験／準上級試験」は3年程度の実務経験を有するPHPエンジニアを対象としており、「初級試験」と「上級試験／準上級試験」には大きな差があります。

個々の技術者間での技量に差が開いているといわれる“PHP技術の習得度合い”。取得する価値のある資格といえるでしょう。

無料でスタート！　未経験からコーダー・マークアップエンジニアになるための方法、メリットとデメリット

未経験からコーダー・マークアップエンジニアになるためには以下の5つの方法があります。

・独学する
・専門学校、ビジネススクールに通う
・ハローワークで申し込める職業訓練校を利用する
・クラウドソーシングで仕事を受ける
・求人媒体社のスキルアップ講座を利用する
・初心者歓迎の求人に応募して実務経験を積む

それぞれの詳しい内容とメリット・デメリットについて以下で解説します。

独学する

独学からコーダーになる人も多数います。書籍だけでなく「ドットインストール」や「Progate」など無料のオンライン学習サービスも充実しているので、お金をかけずに勉強することが可能です。自分の都合にあわせられるのがメリットですが、惰性で学習が進まないデメリットもあります。

専門学校、Web制作スクールに通う

専門学校やWeb制作のスクールでは、実務で必要なコーディングの知識やスキルを体系的に学ぶことができます。通学の時間の確保や受講料がデメリットではありますが、集中的に学習したい人にはおすすめの方法です。

ハローワークで申し込める職業訓練校を利用する

職業訓練校とは、国や自治体が運営している、就職・転職に必要な知識やスキルを学ぶための施設で、ハローワーク経由で申し込みができます。コーダー・マークアップエンジニア専用の講座はほとんどないため、Webデザイナー用の講座に応募することになります。
コーダー・マークアップエンジニアはWebデザイナーとともに業務をするため、Webデザインを知っておくと実務で役立つというメリットがあります。一方で、講座にはWebデザイナーとしてポートフォリオを作る課程があり、コーディングだけを集中して学習したい人には不向きです。また、受講の要件や定員が定められている点にも注意が必要です。

クラウドソーシングなどで仕事を受ける

実務経験が欲しいなら、クラウドソーシングを利用して仕事を受注するのも一つの方法です。しかし、案件ごとに求められるスキルが多岐に渡るため、求められる要件に対応できなかったり、単価が安すぎてトラブルが起こることもあります。相場がわからないうちに仕事を始めてしまうのは危険だといえます。

求人媒体社のスキルアップ講座を利用する

求人媒体社が初心者向けに開催するスキルアップ講座に参加するのも方法です。コーダ・マークアップエンジニア向けの講座は頻繁頻度が高くないため、タイミングを逃さないようにしましょう。応募には求人媒体社への登録が必要です。うまく利用して転職につなげましょう。

初心者歓迎の求人に応募して実務経験を積む

前述のように、コーダーの仕事は初心者歓迎の求人もあります。まずは初心者歓迎の求人に応募して実務経験を積み、コーダーとしての知識やスキルを身につけるのも方法です。その後、マークアップエンジニアの仕事に挑戦するなどしてキャリアアップをはかりましょう。
スキルを求めない代わりに、人物評価や社風とのマッチングが重視されるので、面談対策をしっかりと準備しておく必要があります。

悩むより行動、プロの支援を受けてみよう

未経験からコーダー・マークアップエンジニアになるには、上記のようにさまざまな方法があります。しかし、いざ踏み出そうと思うと、どの方法が自分に最適なのか迷ってしまうかもしれません。
Webist編集部のおすすめは、まず求人媒体に登録して転職支援を受けることです。転職のプロがコーダー・マークアップエンジニアになるために最適な方法をアドバイスしてくれます。履歴書の添削やポートフォリオのチェックも客観的に行ってくれるため、ぜひ転職支援サービスを活用してみてください。

まとめ

コーダー・マークアップエンジニアは未経験からでも挑戦できる職種です。学習を進めながらプロの転職支援などを上手に活用して、ぜひ、コーダー・マークアップエンジニアを目指してみてください。