最終更新日：2021/05/19
「未経験からマークアップエンジニアになるにはどうすればいい？」
「Webデザイナーやコーダー、フロントエンドエンジニアと何が違うの？」
「どんなスキルが必要で、どうやって勉強すればいい？」
Webサイトの制作においてマークアップエンジニアは重要な役目を担います。
一方、マークアップエンジニアになりたいものの、未経験から目指すには何から始めるべきか悩んでしまうでしょう。
そこで、本記事ではWebエンジニアとしての実務経験を持つ筆者が、未経験からマークアップエンジニアになる方法を詳しく解説します。
本記事を読めば、未経験からマークアップエンジニアを目指す方法が分かるので、是非参考にしてください。
気になる項目をクリック
１．マークアップエンジニアの仕事内容と年収
転職してから「イメージと違った」と後悔しないように、まずは仕事内容と年収を確認しておきましょう。
ここでは、マークアップエンジニアの仕事内容と年収を解説していきます。
それぞれ順番に解説していくので参考にしてみてください。
マークアップエンジニアの仕事内容
マークアップエンジニアはWebデザイナーが作った指示書にしたがってサイトを作成していきます。
しかし、作成したら終わりというわけではなく、さらに使いやすい高品質なサイトへ昇華させるまでが仕事です。
具体的には、Googleで検索したときに上位表示されるSEOスキルや、使いやすさを考慮したコーディングスキルが挙げられます。
SEOやコーディングに関しては以下の表を参考にしてみて下さい。
| コーディングで使用する言語 |
|
|---|---|
| SEO |
|
また、顧客やチームメンバーとのコミュニケーションも重要な業務のひとつです。
さまざまなスキルが必要とされますが、やりがいの大きい職業とも言えるでしょう。
マークアップエンジニアの年収目安
マークアップエンジニアの年収は企業や求人媒体によって目安が異なります。
ワークポートやdodaのように、求職者の転職活動をサポートする「転職エージェント」を参考にすると比較が容易になります。
具体的には以下の表にまとめているので、是非参考にしてみてください。
| ワークポート | 300～700万円 |
|---|---|
| doda | 294～800万円 |
| リクルートエージェント | 300～800万円 |
（※経歴・就業期間など諸条件で異なります。ご了承ください）
未経験からマークアップエンジニアになる場合、年収の目安は約300万円程度からスタートだと考えておきましょう。
２．Webデザイナー/コーダー/フロントエンドエンジニアとの違い
マークアップエンジニアと違いがわかりにくい職種として、Webデザイナーやコーダーなどがあります。
それぞれ違いが曖昧で分かりにくいので、これから解説する内容を参考に理解を深めてみてください。
ここでは、マークアップエンジニアと混同されやすい職種3つを紹介します
Webデザイナーとの違い
Webデザイナーとマークアップエンジニアは、主にサイトのデザイン領域を担当するかどうかで分けられていることが多いです。
イメージとしては、Webデザイナーがマークアップエンジニアの上位職種だと考えるのが分かりやすいでしょう。
具体的な業務内容の違いは以下の表にまとめたので、参考にしてみてください。
| Webデザイナー |
|
|---|---|
| マークアップエンジニア |
|
また、Webデザイナーに関してより詳しく知りたい人は以下の記事を参考にしてみて下さい。
コーダーとの違い
コーダーとマークアップエンジニアは、デザイナーからもらった指示書以上の作業をするかどうかで分けられていることが多いです。
コーダーは受け取った指示書に従ってサイトをつくるのがメインの業務にあたります。
一方、マークアップエンジニアはサイトの制作が終わった後で、さらに付加価値を付ける業務も担当します。
具体的な業務内容の違いは以下の表にまとめたので、参考にしてみてください。
| コーダー |
|
|---|---|
| マークアップエンジニア |
|
フロントエンドエンジニアとの違い
フロントエンドエンジニアとマークアップエンジニアは、担当範囲の専門性で分けられる傾向があります。
フロントエンドエンジニアはエンジニアの中でも高い技術を要求される職種です。
主な理由としては、SPA（Single Page Application）と呼ばれるページ遷移のない便利なアプリの実装や、サーバーサイドというシステムの内部処理に関する業務も兼任しているからです。
対してマークアップエンジニアはフロントエンドエンジニアほどの技術レベルは求められません。
具体的には以下のような違いがあるので、こちらも参考にしてみてください。
| フロントエンドエンジニア |
|
|---|---|
| マークアップエンジニア |
|
また、フロントエンドエンジニアについて詳しく知りたい人はこちらの記事も参考にしてみてください。
３．マークアップエンジニアに必要なスキル
マークアップエンジニアにはいくつか必要なスキルがあります。
スキルが必要な理由は、Webサイト制作スキルやブログシステムに関するスキル、さらにチームで開発をするときのコミュニケーションなど、複数のスキルが要求されるからです。
特に、サイトに動きをつけるJavaScriptというプログラミング言語や、ブログシステムを一元管理できるCMSの操作がポイントとなります。
さらに具体的な解説を以下の表にまとめたので、それぞれ確認してみてください。
いずれもマークアップエンジニアとして活躍する上では重要なスキルです。
| Webサイトをつくるスキル |
|
|---|---|
| CMSを活用するスキル |
|
| コミュニケーションスキル |
|
| UIやアクセシビリティの知識 |
|
| SEOの知識 |
|
| デザインの知識 |
|
４．未経験からマークアップエンジニアになるための勉強方法
未経験からマークアップエンジニアを目指すためにはどんな方法があるのでしょうか？
マークアップエンジニアは技術職でありながら、未経験でも身に付けられる技術が多いという特徴があります。
効率的に学習することで、より市場価値の高い人材を目指せます。
ここでは未経験からマークアップエンジニアになるための学習方法について解説をしています。
順番に解説していくので、是非参考にされてください。
コーダーから始めてステップアップする
いきなりマークアップエンジニアになるイメージがつかめないという人は、コーダーからステップアップするのがおすすめです。
コーダーであれば、マークアップエンジニアほどの技術は要求されにくいほか、業務全体の流れを把握する上でも有効です。
実績を積んでマークアップエンジニアへの昇格を目指すのが現実的な方法の一つと考えられるでしょう。
また、雇用形態に関してはアルバイトがおすすめです。
アルバイトであれば正社員よりも採用の可能性は高く、手軽に実務経験を積むことができるためです。
そのまま正社員登用を狙うことも難しくないので、挑戦する価値は十分あると言えるでしょう。
【バイト探しなら「マッハバイト（旧ジョブセンス）」がおすすめ】
（引用：マッハバイト）
「マッハバイト」は日本最大級のアルバイト情報サイトで、成約時に全員に1万円支給というな特典があります。
東京・大阪・京都を始め、全国のアルバイト求人を多数紹介しており、IT系の仕事もたくさん扱っています。
2021年5月時点ではIT・Web・通信系の求人は1,000件以上あり、下記のような「正社員登用あり」のコーダー求人も見つかります。
（▼クリックすると拡大できます）
（引用：マッハバイト）
利用料は完全無料ですし、登録しておけば新規の求人が入ってくるので、とりあえず登録しておきましょう。
＼スマホで簡単！3分以内で無料登録！／
プログラミングスクールに通う
プログラミングスクールを活用するのも選択肢の一つです。
プログラミングスクールはプロのエンジニアとオリジナルテキスト主導の下、整った学習環境でスキルを磨けるサービスです。
今回はコーダーとマークアップエンジニア用に厳選したスクールとコースをご紹介します。
TechAcademy（テックアカデミー）
（引用：TechAcademy）
TechAcademyを利用すると学習と転職の両方を効率的に進めることができます。
コーダーやマークアップエンジニアにおすすめのコースを以下にまとめたので、参考にしてみてください。
| フロントエンドコース |
|
|---|---|
| WordPressコース |
|
さらにTechAcademyは受講期間を決めて自分のペースで学ぶことができます。
短期間で学ぶ場合は4週間プラン、じっくり取り組みたい場合は16週間プランがおすすめです。
以下に各プランの料金とサポートを一覧にまとめたので確認してみてください。
| 料金（税込） |
|
|---|---|
| メンタリング |
※メンタリングは週2回マンツーマンで質疑応答ができるサービスです。 |
| チャットサポート | 15～23時（全プラン共通） |
| 学習時間の目安 |
|
| 公式ページ | https://techacademy.jp/ |
| 詳しくは「TECH ACADEMY（テックアカデミー）の評判は？料金や転職保証についても詳しく解説！」をご覧ください。 | |
（引用：TechAcademy | WordPressコース）
＼スマホで簡単！3分以内で無料登録！／
学習サイトを利用してスキルを身に付ける
費用を抑えて独学に集中したい場合は、学習サイトの利用がおすすめです。
特にマークアップエンジニアを目指すなら、手軽に学べる技術も多いため、学習サイトでのスキルアップにも適しています。
本記事では、以下の2サイトを紹介します。
| 学習サイト | 特徴 |
|---|---|
|
|
|
|
|
|
超基礎を学べるProgate
（引用：Progate）
一つ目はProgateという学習サイトです。
Progateは、プログラミング初学者を対象にスライド形式で各言語について学べる良質な学習サイトです。
目的に応じて学ぶコースも選べるため、基礎から応用まで網羅的に学ぶことができます。
特にマークアップエンジニアを目指す場合は、HTML/CSSの学習コースと道場コースをそれぞれ1周するのがおすすめです。
道場コースはかなり難易度が高く感じるかもしれませんが、何度もチャレンジすることで実力アップへ繋がります。
無料で利用できるほか、親しみやすいイラストと丁寧な解説で挫折なく学習を進められるのが最大の特徴です。
実務でも使えるスキルが磨けるので、是非チャレンジしてみてください。
| 運営会社 | 株式会社Progate |
|---|---|
| 対象地域 | 全国 |
| 受講形態 | オンラインのみ |
| 料金 | 基本0円（プレミアム会員は980円） |
| 公式ページ | https://prog-8.com/ |
＼スマホで簡単！3分以内で無料登録！／
応用まで網羅的に学べるUdemy
（引用：Udemy）
Udemyは動画教材を販売しているサイトです。
有料教材にはなりますが、書籍や学習サイトで見るよりも詳しく丁寧な解説で学べます。
価格も1,000円前後から購入可能となっているので、大変お手頃です。
とはいえ、すぐに購入するのは気が引けるという人もいるでしょう。
そのような場合は、まずHTML/CSSを解説している無料のコースを受講しましょう。
以下に、おすすめの無料コースと有料コースをそれぞれまとめたので、受講に迷ったときは参考にしてみてください。
| コース名 | 料金 | 学べる内容 | 身に付くスキル |
|---|---|---|---|
| Webページを作成しよう！これから始める「HTML超入門」 | 無料 |
|
Webページの構造とHTMLの基礎理解までできるので、実務ではコードのピンポイント修正などが可能になる。 |
| WEBデザイン講座 Level0《対象：ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。 | 8,400円 |
|
マークアップエンジニアが必要な最低限のスキルが身に付く。実務では初歩的な雑務が可能になる。 |
| HTML5＆CSS3＋JavaScript 講座【初級レベル】コーディングに自信のない方や独学者の復習に最適です。 | 24,000円 |
|
実務に使える基本的な言語の習得が可能。具体的な実装例に挑戦しながらスキルを磨けるので、体系的に基礎を学ぶことができる。 |
（引用：Udemy | コース一覧）
Udemyは定期的にセールを行なっているので、有料コースを購入するならセール中に購入するとお得です。
24,000円など高額のコースも1,000円台までに割引されていることがあります。
セールは不定期は不定期で行われるので、まずは登録しておいて、定期的に確認しておくことをおすすめします。
| 運営会社 | 株式会社ベネッセ |
|---|---|
| 対象地域 | 全国どこでも |
| 受講形態 | オンラインのみ |
| 料金（税別） | 動画買い切り（1,200円～） |
| 公式サイト | https://www.udemy.com/ |
＼スマホで簡単！3分以内で無料登録！／
資格を取得する
未経験からマークアップエンジニアを目指すなら資格取得も有効です。
いずれも実務に直結するスキルの証明になるので、転職時にも評価の対象となることがあります。
ここではマークアップエンジニアにおすすめの資格をご紹介します。
順番に解説するので参考にしてみてください。
Webクリエイター能力認定試験
Webクリエイター能力認定試験は、HTML/CSS、画像加工、レイアウトなどWebクリエイターとしての基礎が身に付く資格です。
試験を通じてサイト制作の全体のイメージが掴めるので、スキルアップに活用できます。
具体的な試験の概要は以下の通りです。
| 試験概要 |
|
|---|
Webサイト制作の全体像を先に理解したい人におすすめの資格です。
HTML5プロフェッショナル認定試験
HTML5プロフェッショナル認定試験は、HTML/CSS、JavaScriptなどマークアップに関するスキルを認定する資格です。
こちらの資格はレベルが2段階に分かれており、レベル1ではWebコンテンツ制作の基礎、レベル2ではWebアプリや最新のWebコンテンツ設計・開発の実力を測れます。
実務で使える技術が身に付くといっても過言ではないので、積極的な取得を目指してみるのをおすすめします。
具体的な試験の概要は以下の通りです。
| 試験概要 |
|
|---|
（引用：HTML5プロフェッショナル認定試験 | 試験概要）
実務で即戦力として活躍したい人におすすめの資格です。
５．マークアップエンジニアになるには未経験の就業に強い転職エージェントを活用するしよう
転職エージェントとは、無料で転職相談ができるサービスのことです。
具体的には、以下のようなサポートが無料で受けられます。
- 転職相談
- 求人紹介
- 書類添削・面接対策
- 年収交渉などの代行
- 日程のスケジュール管理
- 円満退職のためのアドバイス
- 転職後のアフターフォロー
転職エージェントは求人の相場感を掴むのにも役立つので、とりあえず登録しておくだけでも役立ちます。
ここではマークアップエンジニアへの転職に強いエージェントを3つご紹介します。
|
|
|
|---|---|
|
|
|
|
|
|
【転職エージェントは複数利用がおすすめ】
転職エージェントはそれぞれ保有している求人が異なるため、気になったエージェントは全て登録しておくのがおすすめです。
大手転職サイト「リクナビNEXT」によると、転職成功者は平均4.2社のエージェントを併用しています。
つまり、本気で転職成功したいなら転職エージェントは3〜4社同時に登録しておいた方がいいということです。
ここで紹介する3社は全て無料で利用できますし、登録は3分ほどで簡単に完了します。
なるべく多くのエージェントで情報収集をして、失敗を防ぎましょう。
ITに強いエージェントなら「ワークポート」
（引用：ワークポート）
「ワークポート」IT業界・ゲーム業界に強い転職エージェントです。
設立当初からIT業界を専門に取り扱ってきており、各企業と強いコネクションをもっているからです。
にワークポートでは、専任のコンシェルジュがマンツーマンでサポートしてくれます。
口コミでも「コンシェルジュの対応スピードの速い」という声があり、スムーズに転職活動を進めることができます。
ワークポートについて追記しておくと、スピード感があってどんどん案件紹介してくれるイメージ。求人も多いから使ってるエンジニアさんは結構多いですね。
— みんなの転職 (@minnatensyoku) January 26, 2020
専任のコンシェルジュから履歴書などの書類添削サービスを受けられるため、質の高い応募書類で書類選考を突破する確率が非常に高いです。
| 運営会社 | 株式会社ワークポート |
|---|---|
| 公開求人数 | 約39,260件 （2021年6月時点） |
| 非公開求人数 |
非公開 |
| 対応地域 | 全国+海外 |
| 料金 | 無料 |
| 公式サイト | https://www.workport.co.jp/ |
|
詳しい解説は以下を確認してください。 「【2021年6月最新】騙されるな！ワークポートの悪い評判と利用前の全注意点」 |
|
＼スマホで簡単！3分以内で無料登録！／
転職サイト・エージェントどちらも使える「doda」
（引用：doda）
「doda」は、パーソルキャリアが運営する国内第2位の大手転職サイト。
転職サイトとしてはもちろん、希望すれば転職エージェントとして使うこともできます。
未経験OKのIT求人も数多く掲載されていますが、なんと言っても、担当の転職エージェントがついてくれるのが心強い特長です。
転職エージェントからは、履歴書の書き方や面接のアドバイスを受けたりと言ったサポートを受けることが出来るので、はじめての転職でも安心して活動することができます。
「はじめての転職で失敗しないか心配だ！」というあなたにおすすめの転職サイトです。
| 運営会社 | パーソルキャリア株式会社 |
|---|---|
| 公開求人数 | 約83,700件 （2021年6月時点） |
| 非公開求人数 |
非公開 |
| 対応地域 | 全国+海外 |
| 料金 | 無料 |
| 公式サイト | https://doda.jp/ |
|
詳しい解説は以下を確認してください。 「【登録して失敗した…】doda（デューダ）の悪い評判と利用前の注意点｜口コミ一覧あり」 |
|
＼スマホで簡単！3分以内で無料登録！／
たくさん求人を見たいなら「リクルートエージェント」
（引用：リクルートエージェント）
「リクルートエージェント」は国内で最も求人数が多いエージェント。
非公開求人も20万件と、業界・職種問わず豊富な求人があるので、希望条件にマッチする案件を効率良く見つけられます。
また、業界No.1の転職支援実績を持っていることも特徴のひとつ。
たくさんの求職者を支援してきたキャリアアドバイザーが、あなたの転職を手厚く支援してくれます。
書類作成や面接対策などのサポートも充実しているので、初めてでも安心。
これから転職活動を始める全ての人におすすめの転職エージェントです。
| 運営会社 | 株式会社リクルート |
|---|---|
| 公開求人数 | 約113,000件 （2021年6月時点） |
| 非公開求人数 |
約166,900件 （2021年6月時点） |
| 対応地域 | 全国+海外 |
| 料金 | 無料 |
| 公式サイト | https://www.r-agent.com/ |
|
詳しい解説は以下を確認してください。 「【6月最新】リクルートエージェントの悪い評判と利用前の全注意点」 |
|
＼スマホで簡単！3分以内で無料登録！／
その他のエージェントも検討したい方は「【エンジニア監修】IT業界に強いおすすめ転職エージェントランキング｜6職種・目的別で徹底比較！」をご覧ください。
６．マークアップエンジニアのキャリアパス
マークアップエンジニアはその後のキャリアパスにも幅広い選択肢があります。
サイト制作の技術を高め続けるキャリアや、マネジメントを身につけて上流職に進むキャリアなど、あらゆるキャリアパスが用意されています。
マークアップエンジニアとしてエンジニアの基盤を固めつつ、将来を見据えたワンランク上の働き方も知っておきましょう。
以下、具体的な職種を3つご紹介していきます。
将来的に自分がなりたい職種があるか、参考にしてみてください。
Webデザイナー
最初のキャリアパスはWebデザイナーです。
Webデザイナーは主にサイトの設計やデザインなどのクリエイティブな業務が中心の職種です。
コーダーやマークアップエンジニアに作業指示を出し、顧客との打ち合わせも頻繁に行うことから、マークアップエンジニアの上位職に該当します。
マークアップエンジニアとして1〜2年経験を積むと、Webデザイナーへのキャリアパスが狙えます。
Webデザイナーの具体的な仕事内容や年収を以下の表にまとめたので参考にしてみてください。
| 年収 | 363万円 |
|---|---|
| 仕事内容 |
|
Webデザイナーに関してさらに詳しく知りたい人は以下の記事が参考になります。
Webディレクター
2つ目はWebディレクターです。
Webディレクターは主にプロジェクトの進行管理や顧客とのコミュニケーションが業務の中心です。
技術的な理解をもとにして社内外での提案力が求められるので、マークアップエンジニアからキャリアアップを目指す人にはおすすめの職種と言えるでしょう。
マークアップエンジニアとして3〜5年経験を積むと、Webディレクターへのキャリアパスが狙えます。
具体的な年収目安と業務内容は以下の表にまとめていますので、参考にしてみてください。
| 年収 | 442万円 |
|---|---|
| 仕事内容 |
|
（参考：平均年収ランキング┃doda）
Webディレクターに関してさらに詳しく知りたい人は以下の記事を確認してみて下さい。
フロントエンドエンジニア
最後はフロントエンドエンジニアです。
フロントエンドエンジニアは高い技術力の習得を要する代わりに報酬のアップが見込めます。
最新の技術を学び続けながら、より良いサイト制作を目指してみたいという人にはおすすめです。
マークアップエンジニアとして2〜3年経験を積むと、フロントエンドエンジニアへのキャリアパスが狙えます。
具体的な年収と業務内容は以下の表にまとめているので、参考にしてみて下さい。
| 年収 | 588万円 |
|---|---|
| 仕事内容 |
|
（参考：フロントエンドエンジニアの仕事の年収・時給・給料情報┃求人ボックス）
フロントエンドエンジニアに関してさらに詳しく知りたい人は以下の記事を確認してみて下さい。
まとめ
マークアップエンジニアに転職するには、いくつかポイントを知っておくのが重要です。
具体的には以下の4点を押さえておきましょう。
- コーダーやフロントエンドエンジニアとの違いを理解する
- 資格や学習サイトを有効活用しながらスキルを高める
- マークアップエンジニアは豊富なキャリアパスも魅力的
- 未経験から転職するなら転職エージェントを利用するのが効果的
プログラミングスクールを活用する場合は、「TechAcademy」がおすすめです。
スクールの特徴は以下の通りです。
|
|
|
|---|
また、転職エージェントを活用する場合は、以下の3つに登録しておきましょう。
|
|
|
|---|---|
|
|
|
|
|
|
また、Web系職種への転職を検討している場合はこちらの記事も参考にして下さい。