― マークアップ／フロントエンド／Web／SaaS／プロダクトの違いを整理する ―
なぜ「エンジニアの肩書き」はこんなに増えたのか
最近、Web業界を学び始めた人から、こんな声をよく聞きます。
- マークアップエンジニアとフロントエンドエンジニアは何が違うの？
- Webエンジニアって、結局フロント？バック？
- SaaSエンジニアって、普通のエンジニアと何が違う？
- プロダクトエンジニアって、エンジニアなの？企画なの？
正直に言うと、混乱するのは当たり前です。今のWeb業界では、
- 役割が細分化され
- 会社ごとに呼び方が違い
- 求人票の言葉が統一されていない
という状況が続いているからです。
ここでは、「どれが上か」「どれが正解か」ではなく、それぞれが、どの位置の仕事なのかを考えます。
まず大前提｜肩書き＝スキルではない
最初に、とても大事なことをお伝えします。
「◯◯エンジニア」という肩書きは、できることを正確に表していません。
実務では、
- 会社の規模
- チーム構成
- プロダクトの種類
によって、同じ肩書きでも中身がまったく違うことが珍しくありません。
だからこそ、名前で判断するのではなく役割と責任範囲で見る この視点が必要になります。
今回扱う5つのエンジニア
混乱しやすい次の5つに絞って整理します。
- マークアップエンジニア
- フロントエンドエンジニア
- Webエンジニア
- SaaSエンジニア
- プロダクトエンジニア
これらはすべて Web系 ですが、「立ち位置」と「求められる視点」が異なります。
マークアップエンジニアとは？
― HTMLを書く人、ではありません
まず一番誤解されやすいのが、マークアップエンジニアです。
よくあるイメージはこうです。
- HTMLとCSSを書く人
- デザイナーの下請け
- 初心者向けの職種
これは かなり古い認識 です。
実際の役割
マークアップエンジニアの本質は、
- デザインを構造に落とす
- 情報設計をHTMLで表現する
- CSS設計で破綻しない画面を作る
つまり、デザインと実装をつなぐ翻訳者 です。
アクセシビリティ、SEO、保守性を考えながら「正しいHTML構造」を作る責任があります。
マークアップエンジニアが強い現場
- Web制作会社
- LP・コーポレートサイト制作
- WordPress案件
- デザイン主導のプロジェクト
逆に言えば、
- JavaScript中心のSPA開発
- ロジック重視のアプリ開発
では主役になりにくい職種です。
※補足：JavaScript中心のSPA開発について
ここでいう「JavaScript中心のSPA開発」とは、「JavaScript“だけ”を書けば仕事になる」という意味ではありません。
SPA（Single Page Application）では、画面遷移やデータ表示の多くを JavaScript が担いますが、
実際の現場では以下のような知識や役割もセットで求められます。
- HTML（構造設計・セマンティクス）
- CSS（レイアウト・レスポンシブ・UI調整）
- API（バックエンドとのデータ連携）
- 状態管理や非同期処理の考え方
- ビルド環境・ディレクトリ構成の理解
そのため、「JavaScriptが書ける＝SPAが作れる」ではなく、
HTML・CSSの基礎を理解したうえで、JavaScriptで“画面の振る舞い”を設計する開発スタイル
と捉える方が実態に近いです。
また、SPA開発ではReact / Vue / Next.js などのフレームワークを使うケースが多く、それぞれに独自の考え方やルールがあります。
最初からSPA開発を目指すよりも、
- HTML / CSS の基礎
- JavaScript（DOM操作・イベント・非同期処理）
- フレームワーク（SPA）
という順序で学習する方が、理解も定着しやすくなります。
フロントエンドエンジニアとは？
― 画面を「動かす」責任を持つ人
フロントエンドエンジニアは、マークアップエンジニアの 延長線上 にあります。
違いはここです。
- HTML/CSS に加えて
- JavaScriptでUIを制御する
主な役割
- ボタン・フォーム・モーダルの挙動
- APIから取得したデータ表示
- 状態管理
- フレームワーク（Reactなど）の利用
つまり、ユーザー操作に責任を持つ人 です。
マークアップとの違いを一言で
- マークアップ：構造と見た目を安定させる
- フロントエンド：画面の振る舞いを作る
上下関係ではなく、責任範囲の違いと考えると分かりやすいです。
Webエンジニアとは？
― 一番あいまいで、一番多い肩書き
Webエンジニアは、最も範囲が広く、最もあいまいな肩書きです。
会社によっては、
- フロントエンド中心
- バックエンド中心
- 両方少しずつ
すべてあり得ます。
Webエンジニアの実態
多くの場合、Webエンジニアとは、Webアプリを作れる人 という意味で使われます
- フロントも触る
- バックエンドも触る
- ただし専門はどちらか
というケースが非常に多いです。
学習者が注意すべき点
「Webエンジニア募集」と書いてあっても、
- 実際はバックエンド寄り
- 実際はフロント中心
ということは日常茶飯事です。求人票では、使用技術と業務内容を見ることが重要です。
SaaSエンジニアとは？
― 技術職というより「サービスを育てるエンジニア」
SaaSエンジニアという言葉は、ここ数年で一気に増えました。
ただし、この肩書きは技術領域を表す言葉ではありません。
SaaSエンジニアの本質
SaaSエンジニアとは、SaaS（継続提供型サービス）を長く安定して運用・改善する人 です。
そのため、求められるのは
- フロントエンド or バックエンドの知識
- ユーザー行動を意識したUI/UX
- バグを減らす設計
- 小さな改善を積み重ねる力
最新技術を次々試すよりも、壊さない・止めない・育てる という姿勢が重視されます。
学習者が勘違いしやすい点
よくある誤解はこれです。SaaSエンジニア = 何でもできるエンジニア
実際は、
- フロント寄りの人
- バックエンド寄りの人
- インフラに詳しい人
など 役割分担 されています。
SaaSエンジニアは「職能」より「働く文脈」 を表す言葉です。
プロダクトエンジニアとは？
― コードを書く「設計・判断担当」
プロダクトエンジニアも、SaaSエンジニアと同じく 最近増えた肩書き です。
この言葉の特徴は、エンジニアでありながらプロダクトの意思決定に関わる という点です。
プロダクトエンジニアの役割
- 仕様をそのまま作るだけではない
- 「それ、本当に必要？」を考える
- ユーザー価値と技術コストを天秤にかける
- 実装しながら改善案を出す
つまり、コードを書ける企画・設計担当 に近い立ち位置です。
向いている人の特徴
- 作る理由を考えるのが好き
- 仕様の曖昧さに耐えられる
- 技術だけでなくサービス全体に興味がある
逆に、
- 明確な指示が欲しい
- 実装だけに集中したい
という人には、少しストレスの多い職種です。
なぜこの2つの肩書きが増えたのか
SaaSエンジニア・プロダクトエンジニアが増えた背景には、
- Webサービスが「作って終わり」ではなくなった
- 継続改善が前提になった
- 技術とビジネスの距離が近くなった
という変化があります。つまり、役割ベースで人を呼ぶ必要が出てきた ということです。
5つのエンジニアを1つの軸で整理する
ここで、この記事で扱った5つを上下関係ではなく、役割の違いとして整理します。
役割マップ（考え方）
デザイン寄り └ マークアップエンジニア UI・挙動寄り └ フロントエンドエンジニア Webアプリ全体 └ Webエンジニア サービス運用・改善 └ SaaSエンジニア 価値判断・設計 └ プロダクトエンジニア
これは 成長ルート ではありません。立ち位置の違いです。
結局、どれを目指せばいいのか？
ここが一番知りたいところだと思います。結論から言うと、最初に肩書きを決める必要はありません。
理由はシンプルです。
- 最初はどの職種も区別できない
- 実務に触れてから向き・不向きが分かる
- 肩書きは後から付いてくる
学習者向けの現実的な考え方
まずは、
- マークアップ
- フロントエンド
- Webエンジニア寄りの基礎
このあたりを しっかり積み上げる ことで、
- SaaSに向いているか
- プロダクト志向か
- 実装特化が合うか
が自然と見えてきます。
「じゃあ、フロントエンドって具体的に何をやるの？」
「バックエンドは自分に向いているのかな？」
と感じた方は、以下のページも参考にしてみてください。
