HTML、CSS、JavaScriptなどWeb制作の用語を並べたイメージ

コーダーとマークアップエンジニアは、どちらもHTML・CSSを使ったWebページ制作を担い、仕事が重なる職種です。マークアップエンジニアは、ページの構造や使いやすさまで考えた実装を強調する呼び方として説明されます。

フロントエンドエンジニアは、JavaScriptを使った画面の機能開発まで含むことがある呼び方です。ただし、会社共通の線引きはありません。求人では、職種名に加えて「何を作るか」「どこまで任されるか」を確認する必要があります。

まずは、職種解説での目安を並べます。

3つの呼び方と仕事内容の目安
呼び方仕事内容の目安
コーダーデザインをもとにWebページを実装する。JavaScriptの実装やWordPressの構築を含む求人もある
マークアップエンジニアHTMLの構造や意味付け、アクセシビリティなどを考慮した実装を強調する呼び方。コーダーとの重なりが大きい
フロントエンドエンジニアユーザーが操作する画面を実装する。JavaScriptによる機能開発や、アプリケーションの設計を含む仕事もある

※担当範囲は会社によって異なります。HTMLの構造やアクセシビリティへの配慮は、コーダーの仕事にも必要です。この表は能力の上下を示すものではありません。

私は40歳を目前に未経験から学習を始め、今はフルリモートのコーダーとして働いています。ここからは、職種の説明と実際の募集要項を照らし合わせ、求人を読むときに役立つ違いを整理します。

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

職種の解説では、コーダーはデザインや指示をもとに実装し、マークアップエンジニアは文書構造やサイトの目的も考えて提案する、と分ける例があります。

ただ、マイナビクリエイターの解説でも、制作の流れや裁量は会社によって異なり、職種名が違っても実際の作業に差がない職場があると説明されています。

実際の募集要項にも、きれいに分けられない例があります。KWSの採用ページでは、「コーダー」の必須スキルにHTML・CSS・JavaScriptとWordPressのテーマ構造の理解が挙げられています。業務内容には、保守しやすいマークアップの設計も含まれます。

つまり、この募集では「コーダー」がコードの設計まで担当します。「指示どおりに書くだけの仕事」と、名前から決めることはできません。

求人票で「改善提案」「構造の設計」「アクセシビリティ対応」といった言葉を見つけたら、実装に加えて何を考え、どこまで判断する役割なのかを確認するとよいでしょう。

フロントエンドエンジニアとは何が違うのか

フロントエンドは、Webサイトやアプリケーションで、ユーザーが見たり操作したりする側を指します。Web Designingの職種解説でも、フロントエンドエンジニアは画面を作る仕事として説明され、JavaScriptを使った開発が取り上げられています。

求人にReactやTypeScriptが出てきたら、その技術で何を作るのかまで読みたいところです。既存の画面を修正するのか、新しい機能を追加するのか、画面の構成から設計するのか。技術名が同じでも、求められる経験は担当範囲によって変わります。

例えば「JavaScriptの経験」とだけ書かれていても、既存コードを読んで修正する仕事と、新しい処理を自分で組み立てる仕事では、準備することが違います。

私自身はHTML・CSS・PHPを書く仕事が中心です。JavaScriptの既存コードを読んで直すことはありますが、ゼロから設計して書いているわけではありません。そのため、仕事を説明するときは「コーダー」と呼んでいます。

このように「何ができるか」「何を担当しているか」まで言葉にすると、職種名だけよりも、自分と求人との距離が分かります。

なぜ、同じような仕事に違う名前が付くのか

職種名に込める役割や裁量が、会社によって違うためです。Webページを実装する仕事でも、制作するものやチーム内での役割を、どの呼び方で表すかは一様ではありません。

マークアップエンジニアには、考案者本人が説明した経緯も残っています。森田雄氏は2010年4月18日のブログで、「これからのHTMLコーダー」という職能を2001年にビジネス・アーキテクツ内で定義したこと、その後に他の制作会社にも呼び方が広がったことを説明しています。森田雄氏の説明

この由来は、呼び方を理解する手がかりになります。ただ、現在の求人の担当範囲までは決めてくれません。募集している会社が、その名前で何を任せようとしているのかを読む必要があります。

求人票で確認する3つのポイント

職種名の違いが分かったら、次は求人票の本文を見ます。確認したいのは、次の3点です。

求人票で確認したい3つの項目
確認する項目募集要項で探すこと
担当する業務既存ページの更新か、新規制作か。WordPressの構築や画面の機能開発も含むか
必須スキルどの技術について、どの程度の実務経験や制作経験が必要か。歓迎条件と分かれているか
任される範囲一人で設計・実装するのか。仕様や手順が用意されるのか。確認やレビューを受けられるか

同じ「Webコーダー募集」でも、中身を見ると?

職種名が同じでも、担当する仕事や求められる経験は違うことがあります。2つの「仕事内容を見る」を押して比べてみてください。

募集A架空の求人例

Webコーダー募集

募集B架空の求人例

Webコーダー募集

同じ職種名でも、Aは既存ページを直す仕事、Bはテーマを新しく作る仕事です。「歓迎条件」は「必須条件」と分けて読み、自分が経験した作業と照らし合わせてみてください。

仕事内容の違いを説明するための架空例です。実在の募集や、応募できるかどうかの判定ではありません。必要な経験の程度や任される範囲は、実際の求人票や面接で確認してください。

例えば「WordPress構築」という記載でも、既存テーマを設定・調整する仕事なのか、テーマを自分で実装する仕事なのかは確認したいところです。

「未経験可」も、それだけで応募時の技術水準が分かるわけではありません。実務未経験でも制作物が必要なのか、どの作業を自力でできることが期待されているのかを読みます。

本文だけでは判断できないときは、面接などで「入社後、最初に任される作業は何ですか」と聞くと、仕事を具体的に捉えやすくなります。

40代未経験なら、どの求人を選ぶか

私なら、今できる作業と必須条件が近い求人から確認します。年齢と職種名だけで、応募先を一つに決めることはできないと思っています。

私は約2年、1000時間ほど学習したあと、12社に応募して1社から内定をもらいました。決まった求人のタイトルは「HTML・CSSコーダー」。アルバイトからのスタートでした。

当時の私には、HTMLとCSSを軸にした仕事が実務への入り口になりました。この経験を、すべての未経験者に当てはめるつもりはありません。ただ、自分が取り組んできたことと、募集されている作業を照らし合わせる考え方は使えると思います。

今はPHPも書いています。入社したときの職種名が、その後に覚える技術や仕事の範囲をすべて決めるわけではありません。

実務で役立ったことについては、コーダーが実務で重宝されるスキルはHTML/CSSだけではないにもまとめています。

職種名を決める前に、募集要項を比べてみる

これから学習や応募を考えるなら、気になる求人を3〜5件選び、業務内容と必須スキルを書き出してみてください。

そのうえで、「一人で対応できる作業」「確認しながらなら対応できる作業」「まだ経験していない作業」に分けてみます。同じような求人に繰り返し出てくる技術のうち、自分が足りないものが、次の学習を考える手がかりになります。

コーダーか、マークアップエンジニアか、フロントエンドエンジニアか。呼び方は求人を探す入り口です。応募を決めるときは、その先に書かれた仕事と、自分ができることを比べてみてください。

学習から実務に入るまでの流れは、40代未経験からWebコーダーになる3年ロードマップ|学習から実務・キャリアまでにまとめています。

ティエラ

40歳を目前に、未経験からプログラミングの学習を始めました。今はフルリモート・フルフレックスのコーダーとして働いています。遠回りした失敗も含めて、正直に記録しています。