Webディレクターやデザイナー・コーダーなどのクリエイター専門の求人(派遣・転職)サイト【Webist(ウェビスト)】

Webist
 Powered by  クリーク・アンド・リバー社

未経験からコーダー・マークアップエンジニアになるには?実際の求人をもとに年収やキャリアパスまで解説

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

■目次
1. コーダー・マークアップエンジニアの仕事内容は? それぞれの役割は何が違うの?
 1-1.コーダー・マークアップエンジニアの仕事内容
 1-2.コーダーとマークアップエンジニアの違い
2. 実際の求人で丸わかり! コーダー・マークアップエンジニアの年収&キャリアパス
 2-1.「未経験者歓迎」のコーダー・マークアップエンジニア求人例
 2-2.「経験者優遇」のコーダー・マークアップエンジニア求人例
 2-3.コーダー・マークアップエンジニアの年収:低めスタートからスキルを上げて年収アップ
 2-4.コーダー・マークアップエンジニアのキャリアパスは?
3. 未経験からコーダー・マークアップエンジニアの求人に応募するには
4. 無料でスタート! 未経験からコーダー・マークアップエンジニアになるための方法、メリットとデメリット
 4-1.独学する
 4-2.専門学校、Web制作スクールに通う
 4-3.ハローワークで申し込める職業訓練校を利用する
 4-4.クラウドソーシングで仕事を受ける
 4-5.求人媒体社のスキルアップ講座を利用する
 4-5.初心者歓迎の求人に応募して実務経験を積む
 4-6.悩むより行動、プロの支援を受けてみよう

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

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

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

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

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

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

コーダーの仕事内容

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

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

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

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

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

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

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

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

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

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

求人例

実務未経験可!大手メディアのWebコーダー

雇用形態 契約社員
収入 年収250〜400万円
業務内容 Webデザイナーの作成した指示書のもと、HTML・CSSを使用した制作、修正、運用業務を行っていただきます。
キャリアの浅い方であれば、コーディングのルールを再度学ぶことからスタートします。まずは雛形の決まったページのコーディングから、次第に動きのあるLPなどもお任せします。
社内のディレクターやデザイナー、バックエンドエンジニアと連携して進めていくため、コーディングに集中して取り組めます。
募集要件 【必須の経験・スキル】
・基礎的なHTML、CSSのコーディングスキル(独学も可)
 ※ポートフォリオ、URL提出必須
【歓迎する経験・スキル】
・WordPressによるサイト制作経験
・HTML、CSSの標準的な設計/実装スキル
・Javascript / jQueryの知識
・Gitなどのバージョン管理の使用経験

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

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

求人例

マークアップエンジニア

雇用形態 正社員
収入 年収300~500万円
業務内容 Webディレクター、WebデザイナーとともにクライアントのECサイト構築を行います。HTML、CSSを利用したコーディングのほか、UIや集客機能も考慮しながらサイト設計と実装をお任せします。
また、Javascriptの利用、SEOを考慮したマークアップ、レスポンシブWebデザインのページ設計、サイトの更新・管理も行って頂きます。
募集要件 【必須の経験・スキル】
・HTML、CSS、Javascriptコーディングの実務経験2年以上
・jQuery、Ajaxを用いた制作実績
・レスポンシブWebデザインのページ設計・コーディング
・Photoshop / Illustratorの操作経験
・WordpressなどCMSの構築経験
【歓迎する経験・スキル】
・SCSS/Sassの使用経験
・React.js、Angular、Vue.jsなど、JavaScriptのモダンフレームワーク使用経験
・SEOなどデジタルマーケティングに関する知識
・Gitなどのバージョン管理の使用経験

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

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

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

▶webコーダーになりたい!転職に必要なスキルと年収の相場とは
https://webist-cri.com/article/detail/837

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

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

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

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

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

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

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

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

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

▶マークアップエンジニアのキャリアアップ転職を実現!成功のポイントとは?
https://webist-cri.com/article/detail/1141

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

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

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

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

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

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

独学する

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

料金 無料~
期間 数ヶ月~数年
メリット 自分の都合にあわせることができる、無料教材を活用すればお金がかからない
デメリット 自己管理ができないと学習が進まない、質問できる環境が手に入りにくい
▶Webコーダーを目指すならこの本がおすすめ!
https://webist-cri.com/article/detail/2254

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

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

料金 数万円~数十万円
期間 数ヶ月~数年
メリット 幅広い知識が身につく、働きながら通える専門学校やスクールもある、求人を紹介してもらえることがある
デメリット 受講期間が長い、受講料が高額

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

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

料金
期間 半年程度
メリット 格安で受講できる、転職活動に注力できる、基礎的な知識が身につく、求人を紹介してもらえることがある
デメリット 受講要件を満たす必要がある、受講要件を満たしていても定員がある
▶無料で学べる?補助金も出る!?職業訓練校って何?
https://webist-cri.com/article/detail/2430
▶ハローワークって何をしてくれるところ?
https://webist-cri.com/article/detail/2373

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

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

料金 無料
期間 数日~数ヶ月程度
メリット 副業ではじめられる、実務経験が身につく
デメリット 自分の知識以上のことが求められることがある、単価が低い・納期に無理があるなど案件の良し悪しの見極めが難しい

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

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

料金 無料
期間 1日~1ヶ月程度
メリット ほぼ無料で受講できる、転職に役立つノウハウが身につく、求人を紹介してもらえることがある
デメリット 募集枠が不定期・限られている、求人媒体への登録が必要、受講後の求人応募が条件の場合がある

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

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

料金 無料
期間 企業によって異なる
メリット 収入を得ながら学べる、実務経験が積める
デメリット 人物評価が重視される
▶Webコーダーの転職採用面接対策!よく聞かれる質問や、必須・歓迎されるスキル・経験・資格とは
https://webist-cri.com/article/detail/2320

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

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

まとめ

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

Webのお仕事選びは
Webistにお任せください。
Webistに登録する(無料)

お仕事検索

Webクリエイター系職種から探す
Webエンジニア系職種から探す
広告/出版クリエイター系職種から探す
その他の職種から探す
雇用形態から探す
こだわり条件から探す